这是我参与「第四届青训营 」笔记创作活动的第3天

本文章接着上一次对css的讲解进行叙述

- 文档流(normal flow)

网页是一个多层结构，一层落着一层，通过css可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层 这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列 对于我们来说元素主要有两个状态

在文档流中
不在文档流中(脱离文档流)

- 元素在文档流中的特点

块元素

块元素会在页面中独占一行
默认宽度是父元素的全部(会把父元素撑满)
默认高度是被内容撑开(子元素)

行内元素

行内元素不会独占页面的一行，只占自身大小
行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素 则元素会换到第二行继续自左向右排列(书写习惯一致)
行内元素的默认宽度和高度都被内容撑开

- 盒子模型

盒模型，盒子模型，框模型(box model)

css将页面中所有元素都设置为一个矩形的盒子 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置 每一个盒子都由以下几个部分组成 内容区(content) 内边距(padding) 边框(border) 外边距(margin)

内容区：

内容区(content),元素中的所有的子元素和文本内容都在内容区中排列
内容去的大小由width和height两个属性来设置
width 设置内容区的宽度
height 设置内容区的高度

内边距(padding)：

内容区与边框之间的距离
一共有四个方向的内边距 padding-top、padding-right、padding-bottom、padding-left
内边距的设置会影响盒子的大小
背景颜色会延伸到内边距上
一个盒子可见框的大小是由内容区，内边距和边框共同决定
所以在计算盒子大小时，需要将这三个区域加到一起计算
padding 内边距的简写属性，可以同时指定四个方向的内边距

边框：

边框的宽度border-width

border-width有默认值，一般都是3个像素
border-width可以用来指定四个方向的边框宽度
值的情况：
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
除了border-width还有一组border-×××-width ×××可以是top right bottom left 用来单独制定某一个边的宽度
————————————————————————————

边框的颜色border-color

border-color用来指定边框的颜色，同样可以分别指定四个边的边框 规则和border-width一样
border-color也可以不写，如果省略，则自动使用color的颜色值 ————————————————————————————

边框的样式border-style

border-style指定边框的样式
solid表示实线
dotted点状虚线 dashed虚线
double双线
border-style的默认值是none 表示没有边框
border-style: double;
border简写属性：
通过该属性可以同时设置边框所有的相关样式，并没有顺序要求
border: solid 10px orange; border-×××:solid 10px orange;

外边距：

外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置
一共有四个方向的外边距

margin-top

上外边距，设置一个正值，元素会向下移动

margin-right

默认情况下设置margin-right不会产生任何效果

margin-bottom

下外边距，设置一个正值，其下面的元素会向下移动

margin-left

左外边距，设置一个正值，元素会向右移动

margin也可以设置负值，如果是负值则元素会向相反方向移动
元素在页面中是按照自左向右的顺序排列
所以默认情况下如果我们设置的是左和上外边距会移动元素自身
而设置下和右外边距会移动其他元素
margin简写属性可以同时设置四个方向的外边距
margin会影响到盒子实际占用空间
用法和padding一样

总结

通过对css的学习以及了解，让我可以更加好的对页面进行布局，进行设计。