浅谈css和div布局
2014-10-31 16:31
260 查看
要了解div和css,其实应该要了解什么是web前台,要了解前台其实想想我们用分层思 想做的机房收费系统UI层就好理解了。
UI层我们都知道面向用户的界面,只不过我们这里的web前台相当于动态网站而已
共同点都是面向用户界面,都是用来显示数据和收集数据。
不同点web前台比UI更具灵活性,更具扩展性(个人目前看法)。
为什么说web前台比UI更具灵活性,更具扩展性?
这里我们就要说到主体了:div和css布局。
因为web前台用的是div和css布局。
我们平时用的淘宝啊,新浪等门户的前台都是用的这样的布局。
要了解div和css布局,得了解是css盒子模型。
什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
我们日常生活中的盒子也具有这种属性,所以叫他盒子模型。当然你也可以叫其他的只要你能明白这种的意思就行,叫什么保温瓶啊模型等等。
打个比喻吧,当你上网抢到的小米手机到货时, 你里面的小米手机就是content。那个反震的汽泡沫就是padding ,border就是盒子本身。至于margin则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。
转到web界面,其实整个web界面被划分成一块块的div。
div就是一个存放content的容器,而content就是文字和图片等内容。
理解了div, css好理解了。
打个比喻吧,div就像一块快砖头,css就像起房子的设计师。至于这房子被设计是别墅 还是摩天大楼,全看css了。
Css负责界面架构,div就是填充这架构的一块块砖而已。
Css可以通过padding、border 、margin和div属性(id、class、title)等来改变div。但有点改变不了的,那就div容器里的content。
css可以改变(大小,浮动等)div容器。但没法改变容器里的content。
这是本菜鸟的对css和div的一点看法,有什么硬伤,请各位帮忙纠正。
UI层我们都知道面向用户的界面,只不过我们这里的web前台相当于动态网站而已
共同点都是面向用户界面,都是用来显示数据和收集数据。
不同点web前台比UI更具灵活性,更具扩展性(个人目前看法)。
为什么说web前台比UI更具灵活性,更具扩展性?
这里我们就要说到主体了:div和css布局。
因为web前台用的是div和css布局。
我们平时用的淘宝啊,新浪等门户的前台都是用的这样的布局。
要了解div和css布局,得了解是css盒子模型。
什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
我们日常生活中的盒子也具有这种属性,所以叫他盒子模型。当然你也可以叫其他的只要你能明白这种的意思就行,叫什么保温瓶啊模型等等。
打个比喻吧,当你上网抢到的小米手机到货时, 你里面的小米手机就是content。那个反震的汽泡沫就是padding ,border就是盒子本身。至于margin则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。
转到web界面,其实整个web界面被划分成一块块的div。
div就是一个存放content的容器,而content就是文字和图片等内容。
理解了div, css好理解了。
打个比喻吧,div就像一块快砖头,css就像起房子的设计师。至于这房子被设计是别墅 还是摩天大楼,全看css了。
Css负责界面架构,div就是填充这架构的一块块砖而已。
Css可以通过padding、border 、margin和div属性(id、class、title)等来改变div。但有点改变不了的,那就div容器里的content。
css可以改变(大小,浮动等)div容器。但没法改变容器里的content。
这是本菜鸟的对css和div的一点看法,有什么硬伤,请各位帮忙纠正。
相关文章推荐
- 浅谈CSS满屏品字布局中div设置height为百分比无效的问题
- [28期] 浅谈几句DIV+CSS布局
- div+css 布局浏览器兼容
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
- css+div 图片排列布局
- 一个没什么特色的DIV+CSS布局,求指正
- Div+CSS布局入门教程(五)
- div+css网页布局在各个浏览器之间的差异
- php学习之始于html——div布局与css控制
- Div+CSS布局入门教程之二:写入整体层结构与CSS
- dreamweaver布局:div+css
- DIV+CSS三列式布局的实现方法
- PHP.5-DIV+CSS布局网站首页实例
- 十天学会DIV+CSS第十天 div+css网页标准布局实例教程
- div+css网页粗略布局
- css+div布局总结——基础篇
- DIV+CSS布局和TABLE布局的优缺点讲解
- 精通 CSS+DIV 网页样式与布局 4
- 整理DIV+CSS网页布局实用技巧错误解决
- Html中的DIV+CSS的布局学习(转载)