Skip to content

Latest commit

 

History

History
111 lines (74 loc) · 7.92 KB

css_layout.md

File metadata and controls

111 lines (74 loc) · 7.92 KB

CSS 布局

基础知识《学习CSS》：http://zh.learnlayout.com/

正常文档流

  • 块级元素（display:block）
  • 行内元素（display:inline | inline-block）
  • 包含块（containing block），一个元素的尺寸和位置经常受其包含块的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样

盒模型公式

assets\cssflow

块级元素在默认情况下（box-sizing默认值）的水平方向计算公式如下：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 包含框的内容区域宽度

margin值为auto时，会自动补全剩余宽度，如果margin-left和margin-right都是auto则均分。

浮动

​浮动的九条准则：

  • 【容易忽略】元素被视作块级元素，相当于display设置为“block”；
  • 【容易忽略】元素具备包裹性，会根据它所包含的元素实现宽度、高度自适应；
  • 浮动元素前后的块级兄弟元素忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素（可以实现文字环绕效果）；
  • 浮动元素前后的行内元素环绕浮动元素排列；
  • 浮动元素之前的元素如果也是浮动元素，且方向相同，它会紧跟在它们后面；父元素宽度不够，换行展示；
  • 浮动元素之间的水平间距不会重叠；
  • 当包含元素中只有浮动元素时，包含元素将会高度塌陷；
  • 浮动元素的父元素的非浮动兄弟元素，忽视浮动元素存在，覆盖浮动元素；
  • 浮动元素的父元素的浮动兄弟元素，会跟随浮动元素布局，仿佛处在同一父元素中；

​清除浮动的方法：https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use

更为详细的CSS浮动标准的介绍文章：http://www.10tiao.com/html/399/201612/2651493371/1.html

BFC（块格式化上下文 Block Formatting Context）

BFC是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

下列方式会创建块格式化上下文：

  • 根元素或包含根元素的元素
  • 浮动元素（元素的float不是none）
  • 绝对定位元素（元素的position为absolute或fixed）
  • 行内块元素（元素的display为inline-block）
  • overflow值不为visible的块元素
  • 表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的display为table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table）
  • display值为flow-root的元素
  • contain值为layout、content或strict的元素
  • 弹性元素（display为flex或inline-flex元素的直接子元素）
  • 网格元素（display为grid或inline-grid元素的直接子元素）
  • 多列容器（元素的column-count或column-width不为auto，包括column-count为 1）
  • column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

应用的案例1：[不定宽度的左图右文布局](http://jsbin.com/gijixiz/1/edit?html,css,output

浮动定位和清除浮动时只会应用于同一个BFC内的元素，浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。

应用的案例2：overflow:hidden可以清除内部浮动

外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间

绝对定位

z-index顺序：两个绝对定位元素的先后顺序由他们最顶层的不相同的“position值非static”的祖先元素（没有的话就是自己）的z-index来决定的。

position:absolute元素的宽度如果是百分比，则是相对于其包含块的。包含块是它的最近的“position值非static”的祖先元素的内边距区的边缘组成。

CSS Flex

TBD

CSS Grid

TBD

网格系统（Grid System）

栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。 来自Wiki。

网页设计中网格系统应用的也很多，例如以前常见的基于960px的网格系统。在响应式设计流行之后，常见的CSS库都已经支持基于百分比的网格系统。

开源库 实现方式 浏览器支持成都
purecss inline-block IE 8+, iOS 6+, Android 4.x+
bootstrap v3 float IE 8+
bootstrap v4 flexbox IE10+, iOS 7+, Android 5.x+

常见布局问题