第十一章 用css进行布局

1、开始布局的注意事项

（1）、内容（html）与显示（css）分离

（2）、布局方法

• 固定宽度布局：整个页面和每一栏都有基于像素的宽度
• 响应式页面/流式页面：使用百分数定义宽度，允许页面随显示环境的改变进行放大或缩小

2、构建页面

（1）、恰当使用article、aside、nav、section、header、footer、div等元素将页面划分成不同的逻辑区块

（2）、按照一定的顺放置内容，确保页面在不使用css的情况下也是合理的

（3）、以一致的方式使用标题元素（h1~h6），从而明确地标识页面上这些区块的信息，并对他们按优先级排序

（4）、使用合适的语义标记剩余的内容，如段落、图和列表

（5）、使用注释来标识页面上不同的区域及其内容

3、对默认样式进行重置或标准化

（1）、使用css重置开始主样式表

（2）、使用Nicolas Gallagher和Jonathan Neal创建的normalize.css开始主样式表

4、盒模型

• 由内容区域、内容区域周围的空间（内边距、padding）、内边距的外边缘（边框，border）、边框外面将元素与相邻元素隔开的不可见区域（外边距）构成

5、控制元素的显示类型和可见性

（1）、指定元素的显示方式display

• block（显示为块级元素，就像开始新的段落）、inline（让元素显示为行内元素）、inline-block（让元素显示为行内元素，同时具有块级元素的特征，即可以为元素的四边设置with、heigh、margin、padding（padding-top、padding-bottom会越界进入相邻元素区域，而不是局限于该元素本身的空间）等属性）、none（隐藏元素，并将其从文档流中完全移除）

（2）、控制元素可见性visiblity

• hidden(元素不可见，但在文档流中保留它)、visible（显示元素）

6、设置元素的高度和宽度width、height

• 宽度：长度（带单位 eg：px、em）、父元素的百分数。对顶宽页面使用像素，响应式Web设计使用百分数
• 高度：只用长度（带单位 eg：px、em）
• min-width、min-height、max-width、max-height属性设置最小和最大尺寸
• width、height不可继承
• min-height、min-width：希望元素至少具有某一特定高度、日后内容变多，元素的高度会自动按需增长

7、在元素周围添加内边距padding

• 带单位（em、px）的长度或父元素宽度的百分数
• padding-top、padding-right、padding-bottom、padding-left，单独为一个边添加内边距

8、设置边框

（1）、定义边框风格border-style

• none（默认）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（槽线）、ridge（脊线）、inset（凹边）、outset（凸边）

（2）、设置变框宽度border-width

• 宽度含单位（eg：4px）

（3）、设置边框颜色border-color

• 颜色名称、十六进制值、rgb、hsl、rgba、hsla

（4）、使用简记法同时设置多个边框属性border

• 一个值（应用四个边），两个值（前上下、后左右），三个值（前上，中左右，后下）
• -top、-right、-bottom、-left将边框效果限制在某一条边上
• 指定以上三种属性
• border-right-style，指定单边风格
• 不可继承
• border属性可用于表格及其单元格

9、设置元素周围的外边距margin

• 长度、相对父元素宽度的百分数、auto（依赖于width属性的值）
• margin-top、margin-right、margin-bottom、margin-left

10、使元素浮动float，让文本环绕元素

• left（元素浮动到左边，其他内容围绕在它右边）、right（元素浮动到右边，其他内容围绕在它左边）、none（元素完全不浮动）
• 不可继承

11、控制元素浮动的位置

（1）、

12、对元素经行相对定位（每个元素在页面的文档流中都有一个自动位置，相对于这个原始位置对元素进行移动）position:relative

.example{
    position:relative;
    top:
    right:
    bottom:
    left:
}

• 不可继承

13、对元素进行绝对定位（指定元素相对body、或最近的已定位祖先元素的精确位置，可以让元素脱离正常的文档流）position：absolute

.example{
    position:absolute;
    top:
    right:
    bottom:
    left:
}

• 根据需要，对希望成为绝对定位参照体的祖先元素添加position：relative；忽略这一步，元素相对body计算偏移量
• 不可继承

14、对元素进行固定定位（固定在浏览窗口中）position：fixed

.example{
    position:fixed;
    top:
    right:
    bottom:
    left:
}

• 不可继承

15、在栈中定位元素z-index：n

• n表示元素在定位过的对象堆中的层级的数字
• z-index的值越大，元素在堆中就越高
• z-index属性仅对定位过的元素有效
• 不可继承

16、处理溢出overflow:

• visible（让元素盒子中的所有内容可见，默认）、hidden（隐藏元素盒子容纳不下的内容）、sroll（无论元素是否需要，都在元素上添加滚动条）、auto（让滚动条仅在访问者访问溢出内容时出现）

17、垂直对齐元素vertical-align:

• baseline（元素的基准线对齐父元素的基准线）、middle（元素位于父元素中央）、supervision（元素成为父元素的上标）、sub（元素成为父元素的下标）、text-top（元素的顶部对齐父元素的顶部）、text-bottom（元素的底部对齐父元素的底部）、top（元素的顶部对齐当前行里最高元素顶部）bottom（元素的底部对齐当前行里最低元素的底部）、元素行高的百分比

18、修改鼠标的指针cursor

• pointer（指针）、default（箭头）、crosshair（+）、move、wait、help、text、progress、auto（显示特定情形下通常使用指针）、x-resize（双箭头，n（北）、nw（西北）、e（东）等）

附

（1）、文档流：默认情况下，元素会按照它们在HTML中自上而下出现的次序显示，并在每个非行内元素的开头和结尾出换行

转载于:https://www.cnblogs.com/zwfang/p/7226498.html