布局(layout)

  • 块布局(block layout), designed for laying out documents. The block layout contains document-centric features, like the ability to float elements or to lay them out over multiple columns.
  • 行内布局(inline layout), designed for laying out text.
  • 表格布局(table layout), designed for laying out tables.
  • 定位布局(positioned layout), designed for positioning elements without much interaction with other elements.
  • 弹性盒子布局( flexible box layout), designed for laying out complex pages that can be resized smoothly.
  • 网格布局(grid layout), designed for laying out elements relative to a fixed grid.

    常规流(Normal flow)

在常规流中,盒一个接着一个排列。在块级格式化上下文里面, 它们竖着排列;在行内格式化上下文里面, 它们横着排列。 当 position 为 static 或 relative,并且 float 为 none 时会触发常规流。

display 默认宽度 可设宽高 起始位置
block 父元素宽度 换行
inline 内容宽度 同行
inline-block 内容宽度 同行(整块换行)
  • vertical-align默认值会对display:inline-block产生一些影响,请选用其他值。
  • display:nonevisibility:hidden最大的区别在于,前者不占据空间,而后者会。
  • IE6,7版本下可以通过触发haslayout实现inline-block。
1
2
3
display:inline-block;
*display:inline;
*zoom:1;

绝对定位(Absolute positioning)

position 默认宽高 参考物 是否脱离文档流
relative 根据display属性 元素本身
absolute 内容宽度 第一个定位祖先/根元素
fix 内容宽度 视窗
  • top/right/bottom/left元素边缘距参照物(定位元素)边缘的距离
  • z-index的具体用法参考:css层叠上下文

浮动(Floats)

默认宽度为内容宽度,脱离文档流,向指定方向移动。

float的副作用

  • 块状元素,会钻进浮动元素的下面,被浮动元素所覆盖
  • 行内元素,例如文字,则会环绕在浮动元素的周围,为浮动元素留出空间
  • 浮动元素的父元素坍缩

float的清除

  • 清除浮动(Enclosing float):通过在浮动元素的末尾添加一个空元素,设置 clear:both属性
  • 闭合浮动(Clearing float):通过设置父元素 overflow 或者display:table 属性来闭合浮动(触发BFC)

推荐使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
/*利用伪类选择器清除浮动*/
.clearfix:after{
content:".";
display:block;
height:0;
overflow:hidden;
visibility:hidden;
clear:both;
}
/*IE6,7触发haslayout清除浮动*/
.clearfix{
zoom:1;
}

参考:那些年我们一起清除过的浮动

负margin

css
css
  • margin 上方负值以包含块(Containing block) 内容区域的上边或者上方相连元素 margin 的下边为参考线
  • margin 左方负值以包含块(Containing block) 内容区域的左边或者左方相连元素 margin 的右边为参考线
  • margin 下方负值以元素本身 border 的下边为参考线
  • margin 右方负值以元素本身 border 的右边为参考线

总结:margin-top和margin-left决定定位,margin-bottom和margin-right决定大小。

参考:那些年我们用过的负边距

flex布局

css
css

flex方向

属性 描述
flex-direction 设定主轴方向(默认值:row)
flex-wrap flex item换行规则(默认值:nowrap)
flex-flow flex-direction和flex-wrap的值缩写
order flex item优先级(默认值:0)
  • flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap: nowrap | wrap | wrap-reverse;

flex弹性

属性 描述
flex-grow flex item的放大比例(默认值:0不放大)
flex-shrink flex item的缩小比例(默认值:1)
flex-basis flex item在主轴方向的大小(默认值:auto)
flex flew-grow,flex-shrink,flex-basis三者的值缩写
  • flex-grow的计算flex-basis+flex-grow/sum(flex-grow)*remain

参考:flex-grow和flex-shrink

flex对齐

属性 描述
justify-content 主轴方向对齐方式(默认值:flex-start)
align-items 侧轴方向对齐方式(默认值:stretch)
align-self 单个flex item的侧轴方向对齐方式
align-content 多行/多列的侧轴方向对齐方式
  • flex-start | flex-end属性是根据主轴方向来确定的
  • justify-content: flex-start | flex-end | center | space-between | space-around;
  • align-items: flex-start | flex-end | center | baseline | stretch;
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

注意:

  • 多栏布局模块的 column-* 属性对弹性项目无效。
  • float 与 clear 对弹性项目无效。使用 float 将使部分元素的 display 属性转化成table/block。
  • vertical-align 对弹性项目的对齐无效。
  • ::first-line 和 ::first-letter 伪元素不适用于弹性容器,而且弹性容器不为他们的祖先提供第一个格式化的行或第一个字母。
  • 绝对定位元素不参加弹性布局!

参考:
Flex指南

深入理解flex布局

补充:
‘display’、’position’ 和 ‘float’ 的相互关系