今天学习一下html中盒子模型的部分。
首先了解盒子模型之前,我们需要了解一下什么是 normal flow(文档流)。
网页是一个多层的结构,设置样式,也是一层一层的设置,最终我们看到的最上面的一层
文档流是网页最底层。我们创建的元素默认情况下,都在文档流中。元素分为两种状态:在文档流中,脱离文档流。
元素在文档流中的特点:
块元素类
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素(行内元素)
1:不会独占一行
2:宽度高度默认都是被内容撑开的,不能自己定义宽高
行内块元素
元素脱离文档流后的特点
元素脱离文档流之后,就不再区分块元素,行内元素,行内块元素, 也就是块元素不会独占一行,行内也可以设置宽高,三像素问题也没有。
脱离文档流的途径有: 浮动 绝对定位 flex 等。
把元素布局到页面,就像买个家具,想要把它摆放到合适的位置,你需要了解它的大小和尺寸,以及如何组合它们,对此我们把这些元素都想想成盒子(一盒矩形)。
影响盒子大小的因素有:内容区(盒子里的内容),边框(border),内边框(padding),外边距(margin)则不影响盒子大小。
1.内容区(content) 元素中所有的子元素和文本内容都在内容区中排列。
width 设置内容区的宽度
height 设置内容区的高度
2.边框(border)元素设置边框
边框属于盒子边缘,边框里面属于盒子内部,出了边框都是盒子的外部。
设置边框必须指定三个样式 分别是颜色,大小,样式。
border-color: ; 设置边框的颜色。
(1)、有默认值,默认颜色是黑色。
(2)、可以写多个颜色 以空格隔开。
4个 上 右 下 左
3个 上 左右 下
2个 上下 左右
1个 上下左右
(3)、border-xxx-color 特指top right bottom left某一边颜色
border-width: ; 设置边框的大小
(1)、默认值 默认值大概1-3px
(2)、也可以跟多个值 以空格隔开
4个 上 右 下 左
3个 上 左右 下
2个 上下 左右
1个 上下左右
(3)、border-xxx-width 特指top right bottom left某一边宽度
border-style: ; 设置边框的样式
(1)、默认值 none
(2)、solid 实线
dashed 虚线
dotted 点状虚线
double 双线
border简写有以下几种形式:
border:颜色,大小,样式;
border-top:颜色,大小,样式;
border-right:颜色,大小,样式;
border-bottom:颜色,大小,样式;
border-left:颜色,大小,样式;
3.内边距(padding)指的是内容区和边框之间的距离。
padding-top 上内边距;
padding-right 右内边距;
padding-bottom 下内边距;
padding-left 左内边距;
4.margin 外边距 指的是当前盒子和其他盒子之间的距离。
margin-top 上外边距 盒子正值向下移动,负值向上移动;
margin-right 右外边距 默认情况,设置margin-right是没有效果;
margin-bottom 下外边距 盒子自己不动,挤下面的盒子移动,正值向下,负值向上;
margin-left 左外边距 盒子正值向右移动,负值向左移动;
注:大小可正可负!
margin: 后也可跟多个值,4个,3个,2个,1个皆可,规则跟padding一样。