css 布局的几种方式

参考:css 布局的几种方式

CSS布局

1 常用布局方法css 布局的几种方式_第1张图片
2、盒子模型
css 布局的几种方式_第2张图片
3、
block 有独立宽高 占据一行
inline-block 对外表现的像inline 对内像block 有宽高
inline 不能设置宽高 设置也没有意义
4、display 与 position
display 决定元素的类型 参考:
css之display 常用的几种属性
display:none
display:block
display:inline
display:inline-block
CSS-position常用属性
css定位
position 决定元素的位置
static —默认值
relative —相对定位
absolute —绝对定位
fixed —固定定位

position-absolute :
绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时,则相对于ICB(inital container block, 初始包含块(根元素所在的包含块))。
因为默认是static所以一般我们使用绝对定位时给祖先元素(经常是父级元素)加上position:relative。
在布置文档流中其它元素时,绝对定位元素不占据空间。
绝对定位的元素则脱离了文档流。

flexbox 布局

1、
css 布局的几种方式_第3张图片

你可能感兴趣的:(前端)