0_3 CSS文档流、盒模型、浮动、高度塌陷、外边距折叠、BFC
------------恢复内容开始------------
1、盒模型:
CSS将页面中的元素都设置为了一个矩形的盒子,布局变为把不同的盒子放在不同的位置
组成:内容区content,内边距padding,边框border,外边距margin
box-sizing用来设置盒子尺寸的计算方式(width,height),
默认值为content-box内容区,
border-box指整个盒子可见框(content、padding、margin)
1.1水平布局:margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 (必须满足)
等式若不成立,且无值设为auto,则自动调整margin-right
auto设置:其中width 、margin-left 、 maring-right可设置为auto
若width和一个margin设为auto,则width最大,margin为0
若将三个值都设置为auto,则外边距都是0,宽度最大
若将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值,即在父元素中水平居中
1 width:xxxpx; 2 margin:0 auto;
1.2垂直布局:
1.3垂直外边距的合并(折叠)
相邻的垂直方向外边距会发生重叠现象,兄弟(一般不需处理)、父子、自己自己
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
1.4 行内元素的盒模型
不支持设置width、height,可以设置padding、border、margin,但垂直方向的不会影响布局
display用来显示元素显示的类型
1.5 轮廓和圆角(:hover常用)
2、文档流:
网页是一个多层的样式,通过css为每一层设定样式,用户只能看到最上面一层;
最下面一层是文档流,即是网页的基础,创建的元素默认都在文档流排列;
对于我们元素主要有两个状态:在文档流、(脱离)文档流
在文档流特点
块元素:
在页面中独占一行;默认宽度是父元素全部(把父元素撑满);默认高度是被内容撑开(子元素)
行内元素:
不会独占页面一行,只占自身大小,默认自左向右,换行;默认高度和宽度都是被内容撑开
3、浮动(脱离文档流)
3.1、float属性:
none 默认值; left 元素向左浮动; right 元素向右浮动
3.2、脱离文档流特点
3.3、高度塌陷的问题
.clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; }
4、BFC
开启BFC会使该元素变成一个独立的布局区域
4.1、特点
4.2、开启方式
------------恢复内容结束------------