css布局——BFC、IFC
常见的FC有:1.BFC(块格式化上下文)【1】根元素,即HTML元素【2】float的值不为none【3】overflow的值不为visible【4】display的值为inline-block、table-cell、table-caption【5】position的值为absolute或fixed 规则:1.BFC的区域不会与float box重叠。2.BFC就是页面上的一个隔离的独立容器,
·
常见的FC有:
1.BFC(块格式化上下文)
【1】根元素,即HTML元素
【1】 font-size
【2】line-heigh
【3】heigh
【4】vertical-aligin
特点:
1.水平方向根据direction依次布局
2.不会在元素前后换行
3.受white-space属性的影响
4.margin/padding 在竖直方向无效,水平方向有效的
5.white/height 对非替换行内元素无效,宽度由元素内容决定。(替换元素在下面解释
6.非替换行内元素的行框高由line-height决定而替换行内元素的行框高则是由height,padding,border,margin决
7.浮动或者绝对定位会转化为bloc
8.vertical-align属性生效
input a img span 以及display 属性值为inline-block的元素
替换元素:
<img><input>
<textarea>,<select><object>等这些都是替换元素。
1.BFC(块格式化上下文)
【1】根元素,即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
规则:
1.BFC的区域不会与float box重叠。
2.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
3.计算BFC的高度时,浮动元素也参与计算。
用途:
1.自适应两栏布局
2可以阻止元素被浮动元素覆盖
3可以包含浮动元素——清除内部浮动
4.分属于不同的BFC时可以阻止margin重叠
【1】 font-size
【2】line-heigh
【3】heigh
【4】vertical-aligin
特点:
1.水平方向根据direction依次布局
2.不会在元素前后换行
3.受white-space属性的影响
4.margin/padding 在竖直方向无效,水平方向有效的
5.white/height 对非替换行内元素无效,宽度由元素内容决定。(替换元素在下面解释
6.非替换行内元素的行框高由line-height决定而替换行内元素的行框高则是由height,padding,border,margin决
7.浮动或者绝对定位会转化为bloc
8.vertical-align属性生效
input a img span 以及display 属性值为inline-block的元素
替换元素:
<img><input>
<textarea>,<select><object>等这些都是替换元素。
更多推荐
已为社区贡献1条内容
所有评论(0)