文档流
文档流(normal flow)
网页是一个多层的结构,css可以给每一层设置样式,最终我们看到是最上面的一层。
文档流是网页最底下的那一层
元素分为两种状态:在文档流中,脱离文档流
之前将元素分为三类,块元素、行内元素、行内块元素
分别具有一些特点,这些特点都是元素在文档流中的特点
块元素:
不会独占一行,宽是父元素内容区宽度,高是被内容撑开
行内元素;
不会独占一行,宽高是被内容撑开,不可以自定义宽高
行内块:
兼具块元素,行内元素的特点
注意:
1、一旦元素脱离文档流,以上的分类,以上分类的特点都不复存在
2、我们创建的元素默认是在文档流
盒子模型
布局相关样式
文档流默认的布局,浮动,定位,弹性盒子等
盒模型、盒子模型、框模型(box model)
网页中也有很多的元素,将各种元素摆放在合适的位置,盒模型将页面所有元素的形状都统一了,你在布局时, 只需要考虑到元素的大小即可
盒模型 快递
内容区 content 冰箱
内边距 padding 泡沫
边框 border 快递盒子
外边距 margin 快递离你的距离
盒子的大小:内容区、内边距、边框 有关系,跟外边距是没有关系</