文章目录 一：网页布局的目的二：如何布局（1）：确定“版心”（2）：分析模块 三：页面元素的定位机制（1）流式布局（2）浮动-float（3）绝对定位(position:absolute)(4)相对定位(position:relative) 四：布局中的常用属性(1)浮动属性(float)(2)清除属性(clear)(3)溢出属性(overflow) 五：元素的定位六：偏移量七：层叠属性八：语义标签九：命名规范 一：网页布局的目的
通过网页布局，可以使网页的内容更加清晰，有条理，同时更加易读。
二：如何布局 （1）：确定“版心”所谓“版心”是页面主体内容的所在位置，一般为居中。
（2）：分析模块页面通常由五大块组成：头部（header）—导航(nav)—焦点图(banner)—内容(content)—版权(footer)
三：页面元素的定位机制 （1）流式布局按元素类型和在HTML文件中出现的顺序定位。 A:block块状布局：从上至下一个接一个排列。 B:inline水平布局：在一行中水平布局。
（2）浮动-float当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果。
（3）绝对定位(position:absolute)通过页面坐标(页面左上角)的方式来定位元素。使用绝对定位后元素不会占用普通流空间
(4)相对定位(position:relative)如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动。
注意：与定位相关的属性有left、top、right、bottom,这四个属性只有在使用了定位属性(position)后才有效;只能同时使用相邻的两个属性，不能同时使用相对的两个属性。
四：布局中的常用属性 (1)浮动属性(float) 选择器{ float: 属性值; }float的属性值有三个：left；right;none（默认值） 例一：一列固定宽度并自动居中
选择器{ height: 120px; width: 1000px; background: red; margin: auto; }例二：一列自适应宽度
#d2{ height: 200px; background: greenyellow; margin: auto; }例三：例3：两列自适应宽度
选择器{ height: 350px; width: 120px; background: red; float: left; } 选择器{ height: 350px; width: 70%; background: blue; } (2)清除属性(clear)clear的取值有四个：
none：允许元素两边都有浮动元素
left：不允许元素左边有浮动的元素
right：不允许元素右边有浮动的元素
both：不允许两边有浮动的元素
例如：
<style type="text/css"> .leftText{ margin: 3px; height: 180px; width: 170px; background-color: red; float: left; } .footText{ height: 185px; background-color:blue; } .Clear{ clear: both; } </style> <body> <div class="leftText">区块1</div> <div class="leftText">区块2</div> <div class="Clear"></div> <div class="footText">区块3</div> </body>下图是加入clear属性前后显示： 如果没有Clear这个DIV，"区块3"会紧接"区块2"并列在同一行;加上Clear这个div,就可以消除浮动div的影响，"区块3"的布局就不受影响。
(3)溢出属性(overflow)当内容溢出元素边框的时候，选择溢出属性overflow,有四个取值。
使用DIV+CSS进行布局时要注意的问题：
div、ul、ol、p、li都是块级标签，它们和周围的元素都有边界(margin),在块级标签嵌套的时候，要注意处理这些边界。
五：元素的定位 选择器{ position:属性值; }position有四个取值：
精确定位元素的位置，取值是数值或百分比。
当对元素进行定位时，可能会出现堆叠现象;可以使用z-index属性来设置元素的堆叠顺序。z-index的取值是整数(0、正整数、负整数)。取值越小，层叠顺序越在下面。
八：语义标签1、<thead></thead>：表示表格的头部
2、<tbody></tbody>：表示表格的主体
3、<header></header>：表示页面的头部
4、<nav></nav>：表示导航栏
5、<footer></footer>：表示页面或区域的底部
6、<article></article>：表示页面中独立的文档内容
7、<section></section>：用于对页面内容进行分块
8、<aside></aside>：表示页面的附属信息(侧边栏、广告等)
九：命名规范1、避免使用中文命名；不能以数字开头；不能占用关键字；用最少的字母达到最好理解的意义(见名知义) 2、驼峰式命名：除第一个单词之外，其他单词首字母大写;????帕斯卡命名：每个单词之间用"_"连接。
3、CSS文件的命名：
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #divcss网页布局 #二如何布局1
