开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情
文章概览
- 文档流
- 盒子模型
文档流
由于网页是一个多层次的结构，使用CSS就可以分别为每一层都设置不同样式，但是用户只可以看到最上面的一层。在这些层中，最下面的一层叫做文档流，文档流是网页的基础，我们所有的元素都默认是在文档流中进行排列的。
元素在文档流中的特点
块元素
- 块元素在页面中占据一行（自上而下的垂直排列）
- 默认宽度是父元素的全部（会把父元素填满）
- 默认高度是被内容填充（子元素）
行内元素
- 行内元素并不会独自占据页面的一整行，仅仅会占据自身的大小。
- 行内元素在页面中从左向右水平排列，如果一行不够会跳转到下一行，仍是从左向右排列。
- 行内元素的默认宽度和高度被内容填充。
元素可以分为两种状态：在文档流中、不再文档流中（脱离文档流）
盒子模型
CSS将页面划分为一个个矩形的盒子，如果将元素设置为盒子后，页面布局就演变为将不同盒子摆放到不同的位置。
盒子的组成
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边框（margin）
其中内容区所有元素的子元素和文本内容都在内容区中排列，内容区的大小由属性width和height来指定。
边框
通常使用边框来对盒子进行限制，边框是合资的边缘，边缘里属于盒子内部，边框外属于盒子外部边框的大小决定了整个盒子的大小。
设置盒子大小的方式
- 边框的宽度：border-width
- 边框的颜色：border-color
- 边框的样式：border-style
