zoukankan      html  css  js  c++  java
  • 布局 and BFC

    1. 横向布局

    (1)     转化为inline-block 

    元素换行会产生空格,给父级加font-size:0;进行处理

    转化为inline-block之后记得给元素加上vertical-align:top;(默认基线对齐         方式改为顶部对齐,处理底部出现空隙的问题)

    (2)     浮动 

    记得清除浮动

    2. 文档流(normal flow)

    文档流,也叫正常流、普通流。

    指页面中的默认布局:元素从左至右、从上到下显示。

    3. BFC(Block Formatting Context )块级格式化上下文

    一个独立渲染区域的名称(布局环境的名字),只有Block-level box参与,它规定了内部的Block-level box 如何布局,并且不影响BFC区域以外的内容,当然BFC以外的也影响不了里面的。

    在这一套规则下面,【元素里面的内容不会干扰元素外面的内容】,所有的元素都会按照文档流的排列方式进行排列。

     

    (1)BFC的作用:

    - 包含浮动元素,解决父级高度塌陷问题

    - 阻止margin的传递

    - 不被浮动元素覆盖

    (2)BFC的触发条件:

    - float值不为none;

    - overflow值不为visible

    - display的值为inline-block、table-cell、table-caption

    - position的值为absolute 、 fixed

     

  • 相关阅读:
    JavaScript--Function类型(11)
    CSS--清除浮动
    JavaScript--正则表达式(笔记)
    JavaScript--模块化编程(笔记)
    原生javascript-图片滚动按需加载
    原生javascript-图片按钮切换
    原生javascript-图片弹窗交互效果
    对CSS了解-overflow:hidden
    对CSS了解-选择器权重
    TaskTimer
  • 原文地址:https://www.cnblogs.com/yijieyufu/p/14969871.html
Copyright © 2011-2022 走看看