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

     

  • 相关阅读:
    Linux Shell 用法
    gdb调试用法
    grep 用法总结
    Cmake用法
    Win64/Linux 上PyMouse安装
    两道拓扑排序的问题
    hiho一下第76周《Suzhou Adventure》
    这类问题需要利用二进制的特殊性
    这种题应该诸位处理
    两道人数多,课程少,query多的题
  • 原文地址:https://www.cnblogs.com/yijieyufu/p/14969871.html
Copyright © 2011-2022 走看看