文章目录
一：网页布局的目的
通过网页布局，可以使网页的内容更加清晰，有条理，同时更加易读。
二：如何布局
（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,有四个取值。
| 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、<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文件的命名：
| 文件 | 命名 |
|---|---|
| 主样式文件 | master.css |
| 模块样式 | module.css |
| 字体样式 | font.css |
| 基本样式 | base.css |
| 布局样式(版面) | layout.css |
| 表单样式 | forms.css |
2185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
