一.CSS盒子模型（BoxModel)
1.基本概念
所谓的盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是装内容的容器。
盒子模型的组成 : 边框，外边距，内边距，内容。
2.边框（border)
（1）边框的组成：
宽度 ，样式，颜色
border-with: 粗细 /* 一般用px作为单位*/
border-style：样式（ solid实线 dashed 虚线边框 dotted 点线边框 )
boder-color：颜色
demo
div {
width: 300px;
height: 200px;
border-width: 5px;
border-style: solid;
border-color: pink;
}
（2）复合写法：
border: width style color (没有顺序）
（3）边框分开写
设置上边框为蓝色，其他为红色
写法一
div {
width: 200px;
height: 200px;
border-top: 1px solid blue;
border-bottom: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
}
写法二,利用层叠性
div {
width: 200px;
height: 200px;
border: 1px solid red;
border-top: 1px solid blue;
}
(4）表格合并相邻的边框
原因
相邻的两个表格的边框，粗细会叠加，影响美观，可以用border-collapse来合并
demo
table,
td,
th {
border: 1px solid pink;
border-collapase: collapase
font-size: 14px;
text-align: center;
}
注意点：
边框会影响盒子的大小，在设置盒子的大小的时候用，用测量盒子实际大小减去border的大小。（前提是盒子设置了，width和height)
2.内边距（padding)
内边距是边框和内容的边距。
(1)分开写法
div {
width: 200px;
height: 200px;
padding-top: 1px ;
padding-bottom: 1px ;
padding-left: 1px ;
padding-right: 1px ;
}
（2）复合写法
padding: 5px; 代表上下左右的都有内边距
padding： 5px 10px; 代表上下内边距是5px 左右是10px
padding: 5px 10px 20px; 代表上边距5px ，左右10px 下边距20px
padding :5px 10px 20px 30px; 代表上边距5px,右边距10px,下边距20px,左边距为30px（顺时针）
注意点:
1.padding会影响盒子的实际大小，会使盒子撑大（前提是盒子设置了，width和height)
2.在设置盒子大小的时候要用实际测量大小减去padding的值。
实际盒子大小 = padding + 设置大小
demo
/*比如要设置一个200px*200px的盒子，而padding等于20*/
div {
width: 160px;
height: 160px;
padding: 20px;
}
/*最后盒子的实际大小为（160+40）px *（160+40）px
3.盒子的外边距（margin)
margin属性用于控制盒子和盒子之间的距离。
（1）分开写
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下边距
注：
margin复合简写和padding一样
（2）外边距的运用
外边距可以让块级盒子水平居中，要满足的条件：
1，盒子必须指定了宽度width
2.盒子左右边距都设置为auto
demo
.div {
width: 200;
margin: 0 auto;
}
注：
如果是行内元素或行内块元素水平居中可以给父级元素添加 text-align: center。
（3）外边距的覆盖
同时使用margin定义块级的垂直外边距时，可能会出现外边距的覆盖。（数值大的覆盖掉小的，最终只显示数值大的margin)
<style>
.div1 {
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 10px;
}
.div2 {
width: 200px;
height: 200px;
background-color: blueviolet;
margin-top：30px;
}
</style>
<body>
<div class="div1">盒子一</div>
<div class="div2">盒子二</div>
</body>
注释
合并后的margin大小并不是（10 + 30）px，而是30px(数值大的覆盖了数值小的margin）
（4）margin塌陷问题
产生的条件
1.两个嵌套关系（父子关系）的块元素，在子元素上设置了margin-top,这个margin-top会作用到父级盒子上。（造成父级盒子塌陷）
2.两个嵌套关系（父子关系）的块元素，在子元素上和父元素同时设置了margin-top，两个margin-top都会作用到父级盒子上（造成父级盒子更大的塌陷）
塌陷之前
两个盒子都没有设置margin-top
<style>
.father {
width: 200px;
height: 200px;
background-color: red;
}
.sun {
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
<body>
<div class="father">
<div class="sun"></div>
</div>
</body>
效果
塌陷之后
其中一个盒子设置了margin-top
<style>
.father {
width: 400px;
height: 400px;
background-color: red;
margin-top: 50px;
}
.sun {
width: 200px;
height: 200px;
background-color: blueviolet;
margin-top: 60px;
}
</style>
<body>
<div class="father">
<div class="sun">盒子二</div>
</div>
</body>
效果
处理方法
方法一: 定义父级元素上边框
border: 1px solid transparent
方法二: 为父级元素定义内边距
padding: 1px
方法三：可以为父级元素添加
overflow: hidden
4.清除内外边距
网页元素很多带有内外边距，而且不同浏览器默认的也不一样，因此在布局之间，首先要清除网页元素的内外边距。
* {
padding: 0;
margin: 0;
}
注：
行内元素为了兼容性，尽量只设置左右边距，如果要设置上下边距可以转换成为块元素或者行内块元素。
二.浮动（float)
1.网页布局的本质
用css来摆放盒子。把盒子摆放到相应的位置。
三种传统的布局方式： 标准流，浮动和定位。
2.标准流
标准流就是按照规定好默认方式排列。（最基本的布局方式）
（1).块级元素会独占一行，从上向下顺序排列。（div hr p h1~h6 ul ol dl form table)
（2).行内元素会按照顺序，从左到右顺序排列，碰到父级元素边缘自动换行。（span a i em等）
3.浮动
语法：
选择器 { float: 属性值；00
}
属性值
| 属性值 | 作用 |
|---|---|
| none | 元素不浮动（默认） |
| left | 左浮动 |
| right | 右浮动 |
(1)浮动的作用：
改变元素标签的排列方式。最典型的运用让多个块级元素一行内排列显示。
4.浮动特性
（1）脱标
- 脱离标准普通流的控制移动（浮）到指定的位置（俗称浮动）
2.浮动的盒子不在保留原先的位置（标准流的盒子可以进行占位）
（2）浮动元素在一行显示
如果多个盒子都设置了浮动，则它们会在一行内显示，并且顶端对齐排列。
(3)左浮动和右浮动
** 注：**
- 浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级盒子宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
- 任何元素都可以浮动，设置浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，添加浮动后，它的大小根据内容来决定。浮动元素经常和标准流父级搭配使用
4.先用标准的父元素排列上下位置，之后内部子元素采用浮动排列左右位置，复合网页布局第一准则。
5.一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他的盒子也因该浮动，以防止引起问题
6.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
5.清除浮动
(1)原因
由于父级元素在很多情况下不好设置高度，子盒子浮动不占有位置，最后父级元素高度为0时，就会影响下面的标准流盒子。(父级没高度 子盒子浮动了 影响下面布局）
(2) 本质
消除浮动元素的影响。
(3)策略
闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的盒子。
6.清除浮动的方法
（1）额外标签法（隔墙法)
额外标法是指在浮动元素末尾添加一个空的块标签。
选择器 { clear: 属性值
属性值： left right both
demo
<div style="clear:both"></div>
优点 ：
通俗易懂，书写方便
缺点 ：
添加许多无意义的标签，结构化较差。
（2）父级添加overflow
overflow: hidden | auto |scroll
(3）:after伪元素法
：after 方式是额外标签法的升级版。也是给父级元素添加
.clearfix:afterr {
content: "";
display: block;
height: 0;
clear: bloth;
visibility: hidden;
}
.clearfix { /*IE6,7专有 */
*zoom: 1;
}
(4)双伪元素法
双伪元素法，也是给父级元素添加
.clearfix:before,clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
八.定位
1.定位与浮动
1.浮动可以让多个块级盒子没有间隙的在一行排列显示,经常用于横向排列盒子。
2.定位则是可以让盒子自由的在某个盒子内移动或者在固定在屏幕中某个位置，并且可以压住其他盒子。
2.定位组成
定位 = 定位模式 + 边偏移
(1)定位的模式（position)
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
(2)边偏移
| 属性 | 示例 | 描述 |
|---|---|---|
| top | top: 80px | 顶端偏移 |
| bottom | bottom：80px | 底部偏移 |
| left | left: 80px | 左偏移 |
| right | right: 80px | 右偏移 |
4.定位的分类
（1）静态定位(无定位）
选择器 {
position: static;
}
静态定位按照标准流摆放位置，它没有边偏移
(2)相对定位（relative)
选择器 {
position: relative;
边偏移： 值；
}
特点 ：
- 移动位置的时候是参照自己原来的位置的
2.不脱标，继续保留原来的位置。
（3）绝对定位（absolute)
选择器 {
position : absolute
边偏移： 值；
}
特点 ：
1.如果没有父元素或者父元素没有定位，则以浏览器来转定位(Document文档）
2.如果父级元素有多个，并且都有定位（相对，绝对，固定定位），则以最近一个父级元素来定位。
3.绝对定位不会占有原先的位置（脱标）
(4）子绝父相
原因：
父级盒子需要占有位置（相对定位），子盒子不需要占有位置需要在父级盒子里面移动，所以是绝对定位。
注
如果父级盒子不需要占有位置，子绝父绝也可能会遇到。
（5）固定定位
选择器 {
position: fixed;
边偏移：值；
}
注意点：
1.固定定位是以浏览器的可视窗口为参照点移动元素，和父级元素没有关系。
2.固定定位不占有位置（托标）
（6) 粘性定位
选择器：{
position: sticky;
边偏移： 值；
}
注意点：
- 以浏览器的可视窗口为参照移动元素。
2.粘性定位占有位置 - 必须添加top right left bottom其中的一个。
4.可以理解为粘性定位和固定定位的结合，但是兼容性差，IE不支持。
5.定位的叠放顺序
选择器： { z-index: 1;}
注：
1.数值可以是正整数，复数或者0，默认是auto,数值越大，盒子越靠上
2. 如果属性值相同，则按照书写的顺序，后来居上
3.只有有定位的盒子才有z-index属性
6.定位的拓展
（1）定位的特殊性
1.绝对定位和固定定位也和浮动类似：
2.行内元素添加了绝对或者固定定位也可以直接设置高度和宽度
3.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
（2）脱标的盒子不会触发外边距塌陷
浮动元素，绝对定位（固定定位）元素都不会触发外边距合并的问题。
（3）定位和浮动
绝对定位（固定定位）会完全压住下面标准流的所有的内容。
浮动只会压住下面的盒子，但是不会压住标准流盒子里面的文字和图片。