CSS布局内幕，轻松掌握常见布局

今日背诵小纸条

三种定位机制

CSS的定位机制共有三种：文档流(标准流)、浮动和定位

文档流，根据标签样式，自左往右，自上而下显示

浮动

浮动，一般设置浮动时，将先设置父级盒子来控制可浮动范围

设置浮动后，将转化为行内块元素

定位

定位，常用定位方式：子绝父相

Static，主要用来清除定位

Relative，占位置，不脱标

Abosolute，不占位置，脱标

注意事项

浮动和绝对定位都能脱离文档流

布局方式1 通栏布局

不建议设置宽度，默认宽度即为100%

布局方式2 左右布局

设置父级盒子，子盒子设置左右浮动

布局方式3 平均分布布局

设置父级盒子宽度，用宽度分离法，设置嵌套盒子，定义外盒子宽度为25%，内子盒子宽度则可使用margin和padding进行自由布局