CSS布局问题

布局分为三个板块

• 常规流：行级、块级、表格布局、FlexBox、Grid布局
• 浮动float
• 定位position

一个盒子的基本构造：

• width

指定content box宽度

取值为长度，百分数，auto

auto由浏览器根据其它属性确定, 百分数相对于容器的content box宽度

• height

指定content box高度

取值为长度，百分数，auto

auto取值由内容计算得来, 百分数相对于容器的content box高度，容器有指定高度时，百分数才生效

• padding

指定元素四个方向的内边距，百分数相对于容器宽度

值的取值可以为一个(四变都相同)，两个(上下，左右)，三个(未指定的内边距与对边相同)，四个

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QuaU0dEr-1658840754241)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a3630dc4bce4f2eb6b543e56080920e~tplv-k3u1fbpfcp-watermark.image?)]

• border

指定容器的边框样式，粗细，颜色（border-width,border-style,border-color)，也有四个方向

一般简写为：1px solid blue
但当四条边框颜色不同时：

• margin

• 指定元素四个方向的外边距
• 取值可以为长度，百分数，auto
• 百分数相对于容器宽度

运用：

1. 使用margin:0 auto让盒子水平居中
2. margin collapse外边距重叠问题:

当同时设置margin-top和margin-bottom属性时，实际会取较大值来作为两者之间间距
所以遇到上下两个并排块，最好只设置其中一个的margin就行

• box-sizing:border-box

设置该属性后，width就变成content-width+padding+border

• overflow

取值：visible(默认),hidden,scroll

1、 行级和块级

display属性

2 、常规流 Normal Flow

1、根元素、浮动、绝对定位的元素会脱离常规流

2、其它元素都在常规流之内(in-flow)

3、常规流中的盒子，在某种排版上下文中参与布局