CSS盒子

页面布局三大核心：盒子模型、浮动和定位

盒子模型：Box Model
边框、外边距、内边距Padding和实际内容

1. 边框border
   border-width
   border-style：solid(实线) dashed(虚线) dotted(点线)
   border-color
   简写：border：1px solid red;
   border-top border-botton border left border-right
   边框会影响盒子的实际大小

2. 内边距也会影响盒子的实际大小
   内边距Padding：
   padding-left padding-right padding-top padding-bottom
   width/height减去内边距或者是边框大小

padding:5px;上下左右都有5像素
padding:5px 10px;上下是5像素，左右是10像素
padding:5px 10px 20px；上是5像素，左右是10像素，下是20像素
padding:5px 10px 20px 30px;上是5像素，右是10像素，左是20像素，下是30像素

如果没有指定盒子的宽度或者是高度，那么加入padding没有影响相应的大小

表格细线边框：
border-collapse:collapse;
原来每个单元格都有边框，它可以合并单元格边框

3. 外边距margin：
   规则和内边距一样。

外边距让块级盒子水平居中：
条件：盒子指定宽度，左右的外边距设置为auto
行内元素或者是行内块元素水平居中：给其父亲元素添加text-align:center；
margin:0 auto；外边距可以让盒子水平居中
margin:auto；
margin-left:auto；margin-right:auto；

使用垂直外边距时，可能会出现外边距的合并：
1. 相邻块元素垂直外边距的合并：
当上下相邻的两个块元素相遇时，则他们的垂直间距不是margin-bottom和margin-top之和，而是取最大值。
解决：尽量只给一个盒子添加margin的值
2. 嵌套块元素垂直外边界的塌陷：
塌陷：当父子关系的块元素中，父亲有上边距，儿子也有上边距的话，父元素会塌陷较大的外边距，子元素不变。
解决：
为父元素添加边框、内边距、overflow：hidden
浮动的盒子不会有外边距合并的问题

4. 清除内外边距
   每个网页都有自己的内外边距

• {
  margin:0;
  padding:0;
  }
  制作每个页面都要添加这个代码

5. 行内元素尽量设置左右的内外边距，上下边距不起作用

CSS3新增样式：
I9以及I9以上版本支持

圆角边框：
border-radius:length;
制作一个圆：先制作一个正方形，length为正方形的一半(50%)
制作圆角矩形：length为高度的一半(50%)
简写：左上角、右上角、右下角和左下角
两个值：对角线一致
可以分开设置：border-top-left-radius

盒子阴影:
box-shadow:为盒子添加阴影
box-shadow：h-shadow v-shadow blur spread color insert;
必须：
v-shadow垂直阴影，阴影在上为正，下为负
h-shadow:水平阴影，阴影在右为正，左为负
可选：
blur：模糊距离，阴影的虚实
spread：阴影尺寸，阴影的大小
color：阴影颜色
inset：将外部阴影outset改内部阴影
阴影默认为外阴影，且不占用空间

文字阴影：
text-shadow：h-shadow v-shadow blur color
必须：
h-shadow水平阴影
v-shadow垂直阴影
blur模糊的距离
color阴影颜色

备注：
去掉li前面的项目符号(小圆点)
list-style:none;

传统网页布局的三种方式：

1. 标准流(普通流、文档流)
   按照默认规定的排列方式
   块级元素：div hr p h1-h6 ul ol li form table
   行内元素：span a i em

2. 浮动
   可以改变标签的默认方式
   多个块级元素纵向排列找标准流
   多个块级元素横向排列找浮动
   定义：
   选择器{ float:属性值 }
   属性值：none、left、right
   特性：

3. 浮动元素会脱离标准流(脱标)
   脱离标准流的控制，移动到指定位置
   浮动的盒子不保留原先的位置

4. 如果盒子都设置浮动，同一行顶端对齐，互相贴在一起没有缝隙，如果父级宽度装不下浮动的盒子，多出的盒子将会另起一行

5. 任何元素都可以浮动，加了浮动就变成行内块元素
   块级元素盒子没有设置宽度的话就和父级一样，添加浮动后，宽度大小根据内容而定
   先将标准流的父元素排列上下，之后内部子元素采取浮动元素排列左右
   浮动的盒子只会影响后面的盒子

6. 清除浮动的原因：一般的页面中父盒子不方便给高度，而子盒子浮动不占有空间，导致父盒子高度为0，就会影响后面标准流

7. 清除浮动适用于父盒子没有高度
   选择器{
   clear：属性值；
   }
   属性值：left right both

8. 清除浮动的方法
   策略：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子

推荐额外标签法(隔墙法)
浮动元素末尾添加一个空标签(块元素)，然后设置它的样式为clear:both

父级添加overflow属性
属性值：hidden、auto和scroll

父级添加after伪元素
.??::after { /生成新盒子在浮动元素的后面/
content:"";
display:block; /插入的盒子必须是块级/
height:0;
clear:both;
visibility:hidden; /看不见这个元素/
}
.?? {
*zoom:1;
}
i6、i7专有

父级添加双伪元素
.??:before,
.??:after {
content:"";
display:table; /如果是block，则before和after上下排列。table转化成块级元素且一行显示/
}
.??:after {
clear:both;
}
.??{
*zoom:1;
}