文档流

文档流（normal flow）
网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层
文档流是网页最底层

我们创建的元素默认情况下，都在文档流中
元素分为两种状态：在文档流中，脱离文档流
元素在文档流中的特点
块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素（行内元素）
1:不会独占一行
2:宽度高度默认都是被内容撑开的，不能自己定义宽高
行内块元素
1、不会独占一行，可以设置宽高
一旦元素通过某种方式，例如浮动、绝对定位等等，脱离文档流，则原来在文档流中划分元素类型，特点都不复存在

模型介绍与面题

面题：什么是盒子模型，为什么要用盒子模型，影响盒子模型的大
小因素有哪些？
把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大
小，形状，然后才能放到家里
所以我们把所有的元素都想成盒子，矩形，只需要考虑大小即可
盒模型、盒子模型、框模型（box model）
内容区
冰箱
内边距
泡沫
边框
纸盒子
外边距
快递的位置
影响盒子大小的因素：内容区，内边距，边框会影响盒子的大
小，外边距不会影响
1:内容区(content)
元素中所有的子元素和文本内容都在内容区中排列
默认情况：设置width，height都是内容区宽高
2:边框（border）元素设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框
都是盒子的外部
设置边框必须指定三个样式 边框大小、边框的样式、边
框的颜色

盒子模型—边框

边框（border）元素设置边框
边框属于盒子边缘，边框里面属于盒子内部，出了边框
都是盒子的外部
设置边框必须指定三个样式 边框大小、边框的样式、
边框的颜色
边框大小：border-width
边框样式：border-style
边框颜色：border-color
掌握：
跟多个值的情况、单独设置某一边、默认值、样式
的可选值
箭头的写法
边框的大小
如果省略，有默认值，大概1-3px ，不同的浏览器
默认大小不一样
border-width 后可跟多个值
四个值
上
右
下
左
三个值
上
左右
下
二个值
上下
左右
一个值
上下左右
单独设置某一边的边框宽度
border-bottom-width
border-top-width
border-left-width
border-right-width
边框的样式
border-style
可选值
默认值：none
实线
solid
虚线
dashed
双线
double
点状虚线
dotted
设置边框的颜色
默认值是黑色
border-color
也可以跟多个值
四个值
上
右
下
左
三个值
上
左右
下
二个值
上下
左右
一个值
上下左右
对应的方式跟border-width是一样
单独设置某一边的边框颜色
border-XXX-color: ;
写border
1、 同时设置边框的大小，颜色，样式，没有顺序要求
2、可以单独设置一个边框
border-top:; 设置上边框
border-right
设置右边框
border-bottom
设置下边框
border-left
设置左边框
3、去除某个边框
border:none;

盒子模型—内边距

内边距
padding
是内容区和边框之间的距离，会影响到整个盒子的大小
1、
padding-top: ; 上内边距
padding-left:;
左内边距
padding-right:;
右内边距
padding-bottom:;
下内边距
2、padding简写
可以跟多个值
四个值
上
右
下
左
三个值
上
左右
下
二个值
上下
左右
一个值
上下左右

盒子模型—外边距

外边距
不会影响到盒子的大小
可以控制盒子的位置
margin-top:;
正值 元素向下移动
负值 元素向上移动
margin-left:; 正值
元素向右移动
负值
元素向左移动
margin-bottom:;
正值
元素自己不动，其靠下的元素向下移动，负值 元素自己不懂，其靠下的元素向上移动
margin-right: ; 正值负值都不动
简写 margin
可以跟多个值
规则跟padding一样

最后

以上就是烂漫招牌为你收集整理的盒子模型1文档流模型介绍与面题盒子模型—边框盒子模型—内边距盒子模型—外边距的全部内容，希望文章能够帮你解决盒子模型1文档流模型介绍与面题盒子模型—边框盒子模型—内边距盒子模型—外边距所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。