0809
盒子模型：
盒模型：是css布局的基石，规定了网页之间的位置关系
组成：内容区，填充区padding，边框区，外边距
内容区：content，显示内容的区域
填充区：padding，边框和内容之间的空白区
边框区：border，显示边缘的区域
外边距：margin，显示盒子边缘以外的空白区
1.标准盒模型：
计算方式：标准盒模型的实际占有空间为content(width/height)+padding+border+margin
padding和border会把盒子撑大
margin不会将盒子的宽撑大
保持原有的宽高不变，需要减掉相应的padding和border
2.怪异盒模型：
<input type="submit"> border和padding不会把盒子的宽高撑大，而是把内容区挤小，margin不会改变元素的宽高；
实际占有空间的方式：
width/height(content+padding+border) + margin；
默认遵循怪异盒模型：table，button，input为按钮类型的时候
3.盒模型的转换
box-sizing:;
content-box 显示为标准盒模型
border-box 显示为怪异盒模型
盒子模型—padding属性:
padding属性：内边距
说明:padding对背景无效，背景可以显示到padding区域，内容不可以
padding不能设置负值
作用：
父子元素之间的关系
使用：
1.单独设置某一方向的padding值：
padding-top：上
padding-left：左
padding-bottom：下
padding-right：右
2.复合属性：
padding：上/下/左/右1
padding：上/下 左/右2
padding：上 左/右 下3
padding：上 右 下 左4
盒子模型—margin属性：
说明：
显示在元素边框以外的空白区
可以设置负值
margin的属性值可以为auto，目前只能设置左右，上下的auto值需要在特殊情况下生效；
auto:自由显示，自动分配
作用：同辈元素之间的位置关系
使用：与padding一致
margin：
上下两个元素之间的margin会重叠，以最大值显示
解决方法：给其中一个添加
margin塌陷：
父元素里的第一个子元素的margin-top会向父元素传递
解决方法：
1.给父元素添加overflow:hidden；(推荐使用)
2.给父元素或子元素添加浮动属性；
3.给父元素添加上边框；
盒子模型—border属性:
说明：
显示在元素边缘的位置上，在标准盒模型会撑大
作用：
1.修饰性线条
2.作为分割线使用
使用：
1.设置边框的复合属性：
border:width color style;
2.单独设置边框的属性：
设置边框宽度：border-width：Value；默认值：3px
设置边框颜色：border-color：；默认值：#000
设置边框线型：border-style；
默认值：none
solid 实线
dashed 虚线
dotted 点线
double 双线
3.单独设置某一个方向的样式：
border-top：width color style;
4.设置某一方向的宽度：
border-top-width：；
5.设置边框宽度的复合属性：
border-width：上 右 下 左；
其他同理
使用border创建三角形：
宽高为0，为边框设置transparent属性值
元素类型：
根据CSS显示，把html的标签分为三大类
1.块元素：
1.独占一行，自上而下排列
2.直接定义宽高，不定义宽高时，宽度会以100%显示，高度会根据内容显示
3.会严格遵循盒模型的显示规则，可以正确显示padding、margin、border等属性
4.可以嵌套块元素和行内元素
5.p和h1-h6是不能嵌套其他块元素
2.行内元素：
1.自左向右依次排列，<br>/元素边缘才会折行
2.不能直接定义宽高，宽高根据内容显示
3.遵循盒模型的显示规则，padding-top/bottom,margin-top/bottom,borderr-top/bottom显示是不正确的
4.img是比较特殊的行内元素，也称作置换元素，有默认的宽高比，是通过属性添加的内容，input也属于置换元素
3.行内块元素：
1.自左向右依次排列，br/元素边缘才会折行
2.可以直接定义宽高，不写宽高根据内容显示
3.严格遵循盒模块的显示类型
4.常见的行内块元素：td、input、button、textarea、select...
元素类型的转换：
属性：display:;
属性值：
none 隐藏元素类型
block 块元素类型
inline 行内元素类型
inline-block 行内块元素类型
