盒模型
盒模型包括四个部分：
content：内容区。盒子中的内容(如图中的手机)。
padding：内边距。盒子与内容之间的距离。
border：边框。盒子的边缘(盒子本身)。
margin：外边距。盒子与盒子之间的距离。
注：块元素、内联块元素可以设置宽高。内联元素设置宽高无效，浏览器不支持。
width
默认值为auto
块级元素: 盒模型的宽度(m + b + p + w) = 包含块内容区的100%
内联元素,行内块: 靠内容撑开
绝对定位元素: 靠内容撑开
相对定位元素: 元素特性不变 盒模型的宽度(m + b + p + w) = 包含块内容区的100%
固定定位: 靠内容撑开
浮动元素:靠内容撑开
是否是继承属性 否
百分比参照于谁 包含块的width
height
默认值为auto
都是代表靠内容撑开
是否是继承属性 否
百分比参照于谁 包含块的height
padding
margin
默认值为0
是否是继承属性 否
百分比参照于谁 包含块的width
border
border-width (一般直接指定px值 不写百分比)
left right top bottom
默认值:auto
是否是继承属性 否
百分比参照于谁 包含块的width
计算盒模型
盒子的总宽度：width+padding-left+padding-right+border-left+border-right=122px
盒子的总宽度：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right=142px（盒子在浏览器中占用的空间大小）
mi demo
mi 8
盒模型的宽高
盒模式中 width 和 height 默认定义的是内容区的尺寸，不包括 padding，border 和 margin。
可以使用 px 和 %（占父元素的百分比） 定义内容区的大小。
盒模式的宽与高
child
padding--内边距
公式：四面相等，只设一个，对面相等，后者省略。
padding demo
lorem.
lorem.
lorem.
lorem.
border--边框
注：如果不设置边框的颜色border-color，则边框采用字体的颜色color.
border demo
lorem
lorem
border和padding可以设置给块元素、行内元素。
label{
padding: 10px;
border: 8px solid red;;
background: #4338e4;
}
margin--外边距
注意：margin 可以设置给块元素，对于行内元素只可以设置左右margin，不可以设置上下margin。
margin-01 demo
lorem.
lorem
lorem
lorem
外边距特性：
相邻元素的垂直margin合并--取下面元素的上边距和上面元素的下边距中较大的一个值。
margin demo
margin
合并
相邻元素的水平margin相加
margin demo
margin
合并
外边距塌陷问题
子元素的上下外边距没有正常显示。
外边距塌陷 demo
lorem
问题：上面的代码 .child 的外边距和 .parent 重叠，看起来 .child 的外边距消失。
解决外边距塌陷的方法
1.用边框border来解决，设置自父元素的border-top,border-bottom的值。
.parent {
......
border-top: 1px solid pink;/*解决上边距塌陷问题*/
border-bottom: 1px solid pink;/*解决下边距塌陷问题*/
}
2.用内边距padding来解决，设置父元素的padding-top,padding-bottom的值。
.parent {
......
padding-top: 1px; /*解决上边距塌陷问题*/
padding-bottom: 1px; /*解决下边距塌陷问题*/
}
3.用overflow来解决，设置父元素的overflow:hidden.
.parent {
......
overflow: hidden;
}
标准盒模型&怪异盒模型
border-box怪异模式
盒子本身的宽度=width(width中已经包含了border和padding的值)。
content-box标准模式
盒子本身的宽度=width+padding(左右)+border(左右)。
绝对定位
包含块
离他最近且开启了定位(非static)的祖先元素,若没有开启了定位的祖先元素，那么包含块为初始包含块
初始包含块
一个视窗大小的矩形，默认情况下位置与视窗重合
绝对定位的使用场景
垂直水平居中布局
绝对定位的元素的 margin + border + padding + width = 包含块的width + padding
//实现垂直水平居中布局
--
绝对定位模拟固定定位
在移动端，固定定位兼容性并不友好，所以用绝对定位来实现固定定位的效果。
思路：固定定位一般是参照视口来固定位置，一般不使用html或body来充当视口(这两个标签做视口效果时而不灵)，所以我们自己用一个div标签来充当视口。
1.禁用系统滚动条
html,body{
overflow:hidden;
}
2.将滚动条加给一个包裹元素
包裹元素的id/class{
overflow:auto;
}
- 让包裹元素充当视口
body html 包裹元素的 width和height为百分百
完整代码如下：
盒模型 浮动 定位的使用场景
margin为负值!!!!!
定位版的三列布局
浮动版的三列布局
圣杯
双飞翼
伪等高布局
粘连布局
mian
mian
mian
mian
mian
mian
mian
mian
mian
mian