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

     

  • 相关阅读:
    openVolumeMesh example 程序学习
    使用字符串创建java 对象
    HDU-1501-Zipper
    UVA-10285-Longest Run on a Snowboard
    HDU-2182-Frog
    HDU-2044-一只小蜜蜂
    POJ-1163-The Triangle
    HDU-1159-Common Subsequence
    HDU-2069-Coin Change
    HDU-4864-Task
  • 原文地址:https://www.cnblogs.com/yijieyufu/p/14969871.html
Copyright © 2011-2022 走看看