一、CSS盒子模型
- 组成：margin+border+padding+content(width+height)
- 设置宽高：取决于box-sizing属性值
- 默认值content-box：宽度为内容宽度
- border-box：宽度要算上边框宽度（总宽度：边框+内容宽度）
二、常见布局方式
- 正常流（浏览器默认布局）：按照盒子/元素类型及指定布局方向进行布局
- 元素类型
- 块元素：独占父元素一行（宽度默认100%，可修改）
- 内联元素：不独占父元素一行（宽度取决于内容宽度，无法直接修改）
- 行内块元素：不独占父元素一行（宽度可直接修改）
- 布局方向
- 受语言书写方向和阅读习惯影响：
“从上到下，从左到右”、“从上到下，从右到左”都属于阅读习惯 - direction:rtl（从右向左）/ltr（从左向右）
从哪里开始哪里就是文本内容的对齐基线 - 关于内容换行
- 中文默认自动换行
- 数字被当成一个字符串默认不换行（可用overflow-wrap: break-word换行）
- 受语言书写方向和阅读习惯影响：
- 举例：
- 元素类型
- flex/弹性盒子布局（一维布局）
- 两种盒子
- Flex容器：内部采用Flex布局的元素
- Flex项目：Flex容器的直接子元素
- 实现
- 要在哪个元素内使用Flex布局，就在哪个元素上设置display:flex/inline-flex
- 采用flex属性值，元素对外显示块元素
- 采用inline-flex属性值，元素对外显示内联元素
- 设置主轴
- 方向：flex-direction
- row、row-reverse、column、column-reverse
- 是否换行：flex-wrap
- nowrap、wrap、wrap-reverse
- 方向：flex-direction
- 设置项目
- 在主轴上的对齐方式： justify-content
- flex-start、flex-end、center、space-between、space-around
- 在交叉轴上的对齐方式：align-items
- flex-start、flex-end、center、baseline、stretch
- 在主轴上的对齐方式： justify-content
- 设置单个flex项目
- 在交叉轴上的对齐方式：align-self：同align-items
- 简写方式：flex-flow
- flex-direction flex-warp
- 要在哪个元素内使用Flex布局，就在哪个元素上设置display:flex/inline-flex
- 举例：
- 两种盒子
- grid/网格布局（二维布局）
- 两种盒子
- 网格容器：内部采用grid布局的元素
- 网格项目：网格容器的直接子元素
- 实现
- 要在那个元素内使用Flex布局，就在哪个元素上设置display:gird/inline-grid
- 设置列的宽度：grid-template-columns
- fr做单位：1fr 1fr 2fr 表示该行每列宽度比例为1：1：2
- 设置行的宽度：grid-template-rows
- 同上
- 将某个项目放入特定网格里：
- 第一种方法：grid-column:grid-column-start / grid-column-end
grid-area:开始行 / 开始列 / 结束行 / 结束列- 占据start->(end-1)那一块列
- 第二种方法：grid-column:grid-column-start / span number
grid-area:开始行 / 开始列 / span number / span number- 从start开始，跨越number列
- 第一种方法：grid-column:grid-column-start / grid-column-end
- 举例：
- 两种盒子
- 浮动：
- 实现：给元素设置float后，元素会向指定方向浮动，一直浮动到碰到包含框边框或另一个浮动框边框的位置
- 举例
- img设置浮动前
- img设置浮动后（为img设置了opacity透明度0.5，便于观察）
- img设置浮动前
- 定位
- 相对定位 position:relative
- 元素依然占据文档流中的位置，可使用top等属性实现相对于原先元素位置偏移
- 绝对定位 position:absolute
- 元素脱离文档流，并相对于其最近的已定位的祖先元素进行定位，如果没有则相对于浏览器窗口定位
- 固定定位 position:fixed
- 元素脱离文档流和父元素，相对于浏览器视口进行定位
- 相对定位 position:relative
