CSS 文档流与盒模型

2022-07-10 本文已影响0人 cy_Wey

文档流方向

inline 元素：从左到右，会跨两行。
常见的元素有：span，a，strong，em等。

block 元素：从上到下，独占一行。
常见的元素有：div，p，h1～h6，form，ul，ol等。

inline-block 元素：从左到右，不会跨两行。
常见的元素有：img，input等。

inline 元素不接受宽度设置。
inline 元素的高度是由行高间接确定的，行高会继承。

block 元素的宽度默认是 auto，不一定是 100%，能有多宽占多宽，可以设置宽度，永远不要设置宽度为 100%。
block 元素的高度由文档流元素高度总和决定的，可以设置高度。
如果 block 元素中没有内容，高度为 0。

inline-block 元素的宽度能有多窄占多窄，可以设置宽度。
inline-block 的高度和 block 的高度一样，可以设置高度。

内容比宽高大，就会溢出。

内容溢出可以设置 overflow 属性。
overflow: auto; 灵活显示。
overflow: scroll; 全都显示，会出现滚动条。
overflow: hidden; 溢出部分隐藏。
overflow: visible; 直接显示溢出部分，不会出现滚动条。

也可以单独设置 x 或者 y 的 overflow 属性，overflow-x 或 overflow-y。

position: absolute; 或者 position: fixed;。
float: left;。

脱离文档流，不计算宽高。

CSS 盒模型有两种，content-box 和 border-box。

box-sizing: border-box; 默认 content-box。

width 和 height 为 content 的宽高。

width 和 height 为 content ＋ padding ＋ border 的宽高。

当上下相邻两个 block 元素相遇，上边元素设置的margin-bottom，下边元素设置 margin-top 时，中间的间距不是两者之和，而是取两者之间的最大值，这称为外边距合并，也叫外边距塌陷。

第一个子元素和最后一个子元素和父外边距上下重叠。

外边距上下合并，左右不会合并。

1、添加 pardding，border。
2、设置 overflow: hidden;。

资料来源：饥人谷