文章目录
一：网页布局的目的二：如何布局（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：不允许两边有浮动的元素
例如：
下图是加入clear属性前后显示： 如果没有Clear这个DIV，"区块3"会紧接"区块2"并列在同一行;加上Clear这个div,就可以消除浮动div的影响，"区块3"的布局就不受影响。
(3)溢出属性(overflow)
当内容溢出元素边框的时候，选择溢出属性overflow,有四个取值。
scroll提供滚动机制(带有滚动条)visible默认值，内容溢出到边框以外hidden内容被修剪。溢出的部分看不见auto如果内容被修剪，则显示器会显示滚动条以便查看其余的内容
使用DIV+CSS进行布局时要注意的问题：
div、ul、ol、p、li都是块级标签，它们和周围的元素都有边界(margin),在块级标签嵌套的时候，要注意处理这些边界。
五：元素的定位
选择器{
position:属性值;
}
position有四个取值：
static自动定位(默认的定位方式)relative相对于元素在文档流中的位置进行定位absolute相对于已经定义好的父元素的位置进行定位fixed相对于浏览器窗口进行的定位
六：偏移量
精确定位元素的位置，取值是数值或百分比。
top顶端偏移量left左边偏移量right右边偏移量bottom下边偏移量
七：层叠属性
当对元素进行定位时，可能会出现堆叠现象;可以使用z-index属性来设置元素的堆叠顺序。z-index的取值是整数(0、正整数、负整数)。取值越小，层叠顺序越在下面。
八：语义标签
1、：表示表格的头部
2、
：表示表格的主体3、
4、：表示导航栏
5、：表示页面或区域的底部
6、：表示页面中独立的文档内容
7、：用于对页面内容进行分块
8、：表示页面的附属信息(侧边栏、广告等)
九：命名规范
1、避免使用中文命名；不能以数字开头；不能占用关键字；用最少的字母达到最好理解的意义(见名知义) 2、驼峰式命名：除第一个单词之外，其他单词首字母大写; 帕斯卡命名：每个单词之间用"_"连接。
3、CSS文件的命名：
文件命名主样式文件master.css模块样式module.css字体样式font.css基本样式base.css布局样式(版面)layout.css表单样式forms.css
💡 关键要点
文章目录 一：网页布局的目的二：如何布局（1）：确定“版心”（2）：分析模块 三：页面元素的定位机制（1）流式布局（2）浮动-float（3）绝