1.文档流与盒模型

文档流（normal flow）

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

块元素

• 块元素会在页面中独占一行(自上向下垂直排列)
• 默认宽度是父元素的全部（会把父元素撑满）
• 默认高度是被内容撑开（子元素）

行内元素

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

盒模型

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。 每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义，内容边界Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界Margin Edge。如图所示，形成了四个区域：内容区3 Content、内边距 2 Padding 、边框1 Border、外边距4 Margin 。

1，2，3决定页面中盒子的大小，4决定盒子所处的位置。

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

边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部， 边框的大小会影响到整个盒子的大小

要设置边框，需要至少设置三个样式：

• 边框的宽度 border-width
• 边框的颜色 border-color
• 边框的样式 border-style

border-width可以用来指定四个方向的边框的宽度值的情况顺时针方向

• 四个值：上 右 下 左
• 三个值：上 左右 下
• 两个值：上下 左右
• 一个值：上下左右

    border-color也可以省略不写，如果省略了则自动使用color的颜色值

    border-style 指定边框的样式
        solid 表示实线
        dotted 点状虚线
        dashed 虚线
        double 双线

        border-style的默认值是none 表示没有边框
        

border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
        border: 10px red solid;

注意： margin会影响到盒子实际占用空间

2.元素的水平布局

元素的水平布局有7个属性共同决定；

• margin-left
• border-left
• padding-left
• width
• padding-right
• border-right
• margin-right

一个元素在其父元素中，水平布局必然要满足下列等式

7个属性值相加 = 父元素内容区的宽度

如果设置的属性值不满足，则为过度约束，将自动调其中的某个属性值。

调整的情况：

• 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足
• 这七个值中有三个值和设置为auto width margin-left maring-right
• 如果某个值为auto，则会自动调整为auto的那个值以使等式成立

     0 + 0 + 0 + auto + 0 + 0 + 0 = 800  auto = 800
     0 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 600
     200 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 400
     auto + 0 + 0 + 200 + 0 + 0 + 200 = 800  auto = 400
     auto + 0 + 0 + 200 + 0 + 0 + auto = 800  auto = 300

• 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
• 如果将三个值都设置为auto，则外边距都是0，宽度最大。
• 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值。所以我们经常利用这个特点来使一个元素在其父元素中水平居中。

width:xxxpx;
margin:0 auto;  水平居中

3.垂直布局

子元素是在父元素的内容区中排列的， 如果子元素的大小超过了父元素，则子元素会从父元素中溢出， 使用 overflow 属性来设置父元素如何处理溢出的子元素。

可选值：
    visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
    hidden 溢出内容将会被裁剪不会显示
    scroll 生成两个滚动条，通过滚动条来查看完整的内容
    auto 根据需要生成滚动条

4.垂直外边距的重叠（折叠）

相邻的垂直方向外边距会发生重叠现象

    - 兄弟元素
    - 兄弟元素间的相邻垂直外边距会取*两者之间的较大值*（两者都是正值）
    - 特殊情况：
        如果相邻的外边距一正一负，则取两者的和
        如果相邻的外边距都是负值，则取两者中绝对值较大的

    - 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理


- 父子元素
    - 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

父子外边距的折叠会影响到页面的布局，必须要进行处理

5.行内元素的盒模型

• 行内元素不支持设置宽度和高度
• 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
• 行内元素可以设置border，垂直方向的border不会影响页面的布局
• 行内元素可以设置margin，垂直方向的margin不会影响布局

display 用来设置元素显示的类型 可选值：

• inline 将元素设置为行内元素
• block 将元素设置为块元素
• inline-block 将元素设置为行内块元素。行内块，既可以设置宽度和高度又不会独占一行
• table 将元素设置为一个表格
• none 元素不在页面中显示

visibility 用来设置元素的显示状态 可选值：

• visible 默认值，元素在页面中正常显示
• hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置

6.默认样式

默认样式：

• 通常情况，浏览器都会为元素设置一些默认样式
• 默认样式的存在会影响到页面的布局， 通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）

<!-- <link rel="stylesheet" href="./css/reset.css"> -->
<link rel="stylesheet" href="./css/normalize.css">

重置样式表：专门用来对浏览器的样式进行重置的。 reset.css 直接去除了浏览器的默认样式（常用）； normalize.css 对默认样式进行了统一。

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）

可选值：

• content-box 默认值，宽度和高度用来设置内容区的大小

• border-box 宽度和高度用来设置整个盒子可见框的大小

  width 和 height 指的是内容区 和 内边距 和 边框的总大小

7.轮廓与圆角

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局 
    第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
    第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
    第三个值 阴影的模糊半径
    第四个值 阴影的颜色
    
box-shadow: 10px 20px 30px rgba(0, 0, 0, .3) ;

/* border-radius: 用来设置圆角 圆角设置的圆的半径大小*/
border-radius：50%