目录
为什么本章讲的是盒子模型,我却说起了文档流呢?
答:认识文档流会更方便我们去了解盒子模型。
文档流
我们知道网页是一个多层的结构。设置样式,也是一层一层的设置,最终我们看到的是最上面的一层,文档流是网页的最底层。我们创建的元素默认情况下,都在文档流中,元素分为两种状态:在文档流中、脱离文档流。
元素在文档流中的特点
块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素(行内元素)
1:不会独占一行
2:宽度高度默认都是被内容撑开的,不能自己定义宽高
行内块元素
1、不会独占一行,可以设置宽高
注意:一旦元素通过某种方式,例如浮动、绝对定位等等,脱离文档流,则原来在文档流中划分的元素类型、特点都不复存在!
盒子模型
盒子模型又称盒模型或框模型,英文名称为Box Model。
在学习盒子模型时,你可能会疑惑:什么是盒子模型,为什么要用盒子模型,影响盒子模型的大小因素都有哪些?
什么是盒子模型?
把所有的网页元素都看成一个盒子,它具有:padding(内边距)margin(外边距)border(边框)内容(content)[也就是元素本身的width,height] 四个属性,这就是盒子模型。
为什么要用盒子模型?
盒子模型主要是用来针对页面布局,它规范了我们页面所有元素的一个布局规范(是由外向内进行布局)。
影响盒子模型的大小因素都有哪些?
如果将盒子模型比作买冰箱,内容区是冰箱的主体,边框是最外面包裹冰箱的纸盒子,内边距则是冰箱与纸盒子之间的泡沫板,而外边距就相当于冰箱与你的距离。所以内容区,内边距,边框会影响盒子的大小,外边距不会影响。
内容区 (content)
元素中所有的子元素和文本内容都在内容区中排列。默认情况:设置width,height都是内容区宽高。
边框(border)
边框属于盒子边缘,边框里面属于盒子内部,出了边框都是盒子的外部。设置边框必须指定三个样式:边框大小:border-width、边框样式:border-style、 边框颜色:border-color。
边框的大小
注意:如果省略,必有默认值,大概1-3px ,不同的浏览器默认大小不一样。
border-width:10px 20px 30px 40px; 四个值 上 右 下 左
border-width:10px 20px 30px; 三个值 上 左右 下
border-width:10px 20px; 二个值 上下 左右
border-width:10px; 一个值 上下左右
也可以单独设置某一边的边框宽度
border-top-width:10px; 上边框宽度
border-bottom-width:10px; 下边框宽度
border-left-width:10px; 左边框宽度
border-right-width:10px; 右边框宽度
边框的样式
border-style:none; 默认值
solid 实线
dashed 虚线
double 双线
dotted 点状虚线
边框的颜色
注意:如果省略,必有默认值,且默认值为黑色。
border-color:red yellow blue green; 四个值 上 右 下 左
border-color:red yellow blue; 三个值 上 左右 下
border-color:red yellow; 二个值 上下 左右
border-color:red; 一个值 上下左右
也可以单独设置某一边的边框颜色
border-top-color:red; 上边框颜色
border-bottom-color:red; 下边框颜色
border-left-color:red; 左边框颜色
border-right-color:red; 右边框颜色
border简写
1、 可以同时设置边框的大小,颜色,样式,没有顺序要求。
border: 3px solid red;
2、可以单独设置一个边框。
border-top:3px solid red; 设置上边框
border-right:3px solid red; 设置右边框
border-bottom:3px solid red; 设置下边框
border-left:3px solid red; 设置左边框
3、去除某个边框。
border:none; 去除所有边框
border-top:none; 去除上边框
border-right:none; 去除右边框
border-bottom:none; 去除下边框
border-left:none; 去除左边框
内边距 (padding)
内边距是内容区和边框之间的距离,会影响到整个盒子的大小。
padding:10px 20px 30px 40px; 四个值 上 右 下 左
padding:10px 20px 30px; 三个值 上 左右 下
padding:10px 20px; 二个值 上下 左右
padding:10px; 一个值 上下左右
可以单独设置内边距。
padding-top:10px; 上内边距
padding-right:10px; 右内边距
padding-bottom:10px; 下内边距
padding-left:10px; 左内边距
外边距 (margin)
外边距不会影响到盒子的大小,但可以控制盒子的位置
margin:10px 20px 30px 40px; 四个值 上 右 下 左
margin:10px 20px 30px; 三个值 上 左右 下
margin:10px 20px; 二个值 上下 左右
margin:10px; 一个值 上下左右
可以单独设置外边距。
margin-top:; 正值 元素向下移动 负值 元素向上移动
margin-left:; 正值 元素向右移动 负值 元素向左移动
margin-bottom:; 正值 元素自己不动,其靠下的元素向下移动,
负值 元素自己不懂,其靠下的元素向上移动。
margin-right:; 正值负值都不动