一、学习路线
二、盒子模型
- 在页面布局中，为了将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范，称为盒子模型。
- 页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，通过盒子之间的嵌套、叠加或并列，最终形成了页面。
- 盒子模型是由内容（content）、边框（border）、内边距(padding)和外边距(margin)四部分组成。
- 盒子的实际宽度（高度）是由content、padding、border、margin共同组成的
三、内容区content - 内容区（content）是盒子模型的中心，包含了盒子的主要信息内容，例如文本、图片等。内容区拥有width、height和overflow三个属性：
- 其中：overflow属性用于当content中的信息太多，并超出内容区所占的范围时，通过该属性来指定溢出内容的处理方式，具体如下表所示。
- 其中：overflow属性用于当content中的信息太多，并超出内容区所占的范围时，通过该属性来指定溢出内容的处理方式，具体如下表所示。
四、边框区border
- 边框（border）是指围绕元素的内容和内边距的一条或多条线，通过border-top-style、border-right-style、border-bottom-style和border-left-style四个属性对“上右下左”四个方向的边框样式分别进行设置，每条边框又有宽度、颜色、样式和圆角等特征：
- 元素的边框的样式包括宽度、样式和颜色等
- 可以通过border-width、border-style和border-color属性对边框进行统一设置
- 可以通过border-top-width、border-top-style和border-top-color等属性对某一条边进行设置
- 4.1 边框宽度
- 边框宽度border-width的取值范围为指定的关键字或数值，其中关键字包括thin（细边框）、medium（默认值，中等边框）、thick（粗边框）。
- 边框的参数可以是1~4个，当边框宽度有4个参数时，将按“上->右->下->左”的顺序作用到边框上，即遵循TRBL原则（按照Top、Right、Bottom、Left 顺时针方向依次赋值）
- 当边框宽度有3个参数时，将按“上->左+右->下”的顺序作用到边框上
- 当边框宽度有2个参数时，将按“上+下->左+右”的顺序作用到边框上
- 当边框宽度有1个参数时，四个方向的边框宽度取值相同
- 边框宽度的取值也可以使用关键字进行设置
- 4.2 边框样式取值
- 4.3 圆角边框
- 通过border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius属性分别对左上角、右上角、右下角、左下角的样式进行设置
- 也可以使用border-radius属性对四个角的样式统一进行设置。
- 当border-top-left-radius具有一个参数时，水平半径与垂直半径相同
- 当border-top-left-radius属性有两个参数时，第一个参数是水平半径，第二个参数是垂直半径
- 元素的圆角不仅可以单独设置，还可以统一设置；
- 根据border-radius的取值情况可分以下几种情况：
- 水平半径与垂直半径相等
- 水平半径与垂直半径不相等
- 4.3.1 圆角边框–水平半径与垂直半径相等
- （1）当border-radius属性只有一个参数时，元素的top-left、top-right、bottom-right和bottom-left取值均相同
- （2）当border-radius属性有两个参数时，如：
样式属性名: 属性值1 属性值2;- top-left和bottom-right相同，取值均为属性值1；
- top-right和bottom-left相同，取值均为属性值2。
- （3）当border-radius属性有三个参数时，如：
样式属性名: 属性值1 属性值2 属性值3;- top-left取值为属性值1
- top-right和bottom-left相同，取值均为属性值2
- bottom-right取值为属性值3
- （4）当border-radius属性有四个参数时，如：
样式属性名: 属性值1 属性值2 属性值3 属性值4;- top-left、top-right、bottom-right和bottom-left分别对应4个不同的属性值，即从左上角开始按照顺时针方向依次赋值
- 4.3.2 圆角边框–水平半径与垂直半径不相等
- 当水平半径与垂直半径不同时，需要用斜线（/）隔开
- 水平半径（或垂直半径）的参数都也可以是1~4个
- （1）当border-radius属性有一个水平半径和一个垂直半径时，如：
样式属性名: 水平值 / 垂直值- 斜线（/）的前后参数分别表示水平半径和垂直半径
- 水平值用于指定元素的四个角的水平半径
- 垂直值用于指定元素的四个角的垂直半径
- （2）当border-radius属性有两个水平半径和两个垂直半径时，如：
样式属性名: 水平值1 水平值2 / 垂直值1 垂直值2- 斜线（/）的前后参数分别表示水平半径和垂直半径
- top-left和bottom-right的水平半径采用水平值1，垂直半径采用垂直值1
- top-right和bottom-left的水平半径采用水平值2，垂直半径采用垂直值2
- （3）当border-radius属性有三个水平半径和两个垂直半径时，如：
样式属性名: 水平值1 水平值2 水平值3/ 垂直值1 垂直值2- 斜线（/）的前后参数分别表示水平半径和垂直半径
- top-left的水平半径采用水平值1
- top-right和bottom-left的水平班级采用水平值2
- bottom-right的水平半径采用水平值3
- top-left和bottom-right的垂直半径采用垂直值1
- top-right和bottom-left的垂直半径采用垂直值2
- （1）当border-radius属性有一个水平半径和一个垂直半径时，如：
- 4.4 边框阴影
- 边框阴影（box-shadow）可以为元素的边框添加一个或多个阴影
- box-shadow的属性可以由2~6个参数构成
box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];- h-shadow用于指定水平阴影的位置，该值允许取负值
- v-shadow用于指定垂直阴影的位置，该值允许取负值
- blur用于指定模糊距离
- spread用于指定阴影的尺寸
- color用于指定阴影的颜色
- inser用于将外部阴影改为内部阴影
- 4.5 图像边框
五、内边距padding
- 内边距（padding）是指内容区与边框之间的距离
- 通过padding-top、padding-right、padding-bottom和padding-left属性对元素的“上右下左”四个方向的内边距进行设置
- 通过padding属性可以在一个样式声明中设置该元素的所有内边距
六、外边距margin
- 外边距（margin）是指元素与元素之间的距离，即围绕在元素边框之外的空白区域，通过外边距可以为元素创建额外的“空间”。
- 外边距与内边距相似，可以对“上下左右”四个外边距分别进行设定，也可以统一进行设定。
- 外边距合并：外边距合并（叠加）是指当两个垂直外边距相遇时，将形成一个外边距。
合并后的外边距的高度，等于合并前的两个外边距中的较大者。 - 外边距合并时，只有普通的页面流中块级元素的垂直外边距会发生外边距的合并。
行内元素、浮动元素和绝对定位元素之间的外边距不会进行合并。- 上下元素间的外边距合并
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距将发生合并
- 包含元素间的外边距合并
当一个元素包含在另一个元素中，父元素没有内边距和边框，且子元素没有外边距时，父元素与子元素的上边距（或下外边距）也会发生合并。
- 空元素的外边距合并
空元素只包含外边距而无边框和填充时，上外边距与下外边距就会碰到了一起，元素的上下外边距也会产生合并。
当合并后的外边距再次遇到其他元素的外边距时，还会发生合并操作
- 上下元素间的外边距合并
七、DIV+CSS布局
- 一个标准的Web页面是由结构、外观和行为三部分组成。其中，页面结构用于对页面的信息进行整理与分类，涉及HTML、XHTML等；页面外观是对结构化的内容进行修饰，涉及CSS样式；页面行为是指与页面元素进行的交互操作，设计JS、JQuery等
- 页面布局的核心目标是实现页面的结构与外观相分离，常见的布局方式有三种：表格布局、框架布局和DIV+CSS布局。
- 表格布局不足：当页面布局需要调整时，往往需要重新制作表格。而多重表格的嵌套时，由于标签的层次过深，页面不利于搜索引擎的抓取。
- 框架布局不足：
- 但一个页面会依赖多个页面，不方便进行管理；
- 搜索引擎对框架中的内容检索时存在困难，有些搜索引擎只会检索框架集页面，导致页面检索不完整；
- 框架对打印支持效果不够好，只能实现分框架页面的打印；
- 在HTML 5中不再支持
<frameset>标签。
- DIV+CSS布局优点：可以简化页面的代码量，提高页面的浏览速度；其结构清晰，代码嵌套层次少，容易被搜索引擎检索到；页面结构与表现相分离，便于维护与扩展。