明确基本概念

网页的布局类似于在一个大盒子中摆放各不相同的小盒子。在布局之前，首先要明确几个概念：
1. 块元素：在页面中独占一行，高度默认被内容（子元素）撑开，宽度默认为父元素的100%，也即auto（width和height的默认值不是0，而是auto）。

2. 内联（行内）元素：在页面中不独占一行，只占自身内容的大小，不能设置宽和高。

3. 文档流：网页是一个多层结构，一层摞着一层。我们通过屏幕看到的网页就是网页的最顶部，而文档流是最底下的一层。块元素和行内元素都摆放在文档流中（在不开启浮动、绝对定位和固定定位的时候）。

盒模型

下图很好的解释了盒模型：

盒模型结构

盒模型水平方向上的布局

水平方向上的布局必须要满足等式：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区的宽度

水平方向上的布局必须满足该等式。如果该等式不满足，称为过度约束。如果发生过度约束，等式将自动进行调整，调整规则为：
如果上述等式中属性的属性值中没有为auto的，则默认调整margin-right的值以使等式成立。
【举例】属性值中没有auto

.box1{
          width:800px;
          height:100px;
          background-color: aqua;
          }
.box2{
          width:100px;
          height:100px;
          background-color: coral;
          margin-left:100px;
          }

属性值中没有auto

1、如果有一个属性值为auto的，则默认调整值为auto的属性
【举例】margin-left为auto

.box1{
            width:800px;
            height:100px;
            background-color: aqua;
        }
        .box2{
            width:100px;
            height:100px;
            background-color: coral;
            margin-left:auto;/*margin-left调整为auto*/
            margin-right:200px;
        }

margin-left为auto

2、如果有其中一个外边距和width的属性值为auto，则width的值调整至最大，外边距的值调整为0 。
【举例】margin-left和width调整为auto

        .box1{
            width:800px;
            height:100px;
            background-color: aqua;
        }
         .box2{
            width:auto;/*宽度也调整至auto*/
            height:100px;
            background-color: coral;
            margin-left:auto;/*margin-right调整至auto*/
            margin-right:200px;
        }

width和其中一个外边距为auto

box1{
            width:800px;
            height:100px;
            background-color: aqua;
        }
        .box2{
            width:auto;/*宽度也调整至auto*/
            height:100px;
            background-color: coral;
            margin-left:auto;/*margin-right调整至auto*/
            margin-right:auto;/*margin-left调整至auto*/
        }

margin-left,margin-right,width都为auto

4、如果width的值固定，两个外边距的值为auto,则调整margin-left和margin-right同样的大小，使元素水平居中。 一般用来做元素水平居中的效果。
【举例】宽度固定，外边距为auto

        .box1{
            width:800px;
            height:100px;
            background-color: aqua;
        }
        .box2{
            width:200px;/*宽度固定*/
            height:100px;
            background-color: coral;
            margin-left:auto;/*margin-right调整至auto*/
            margin-right:auto;/*margin-left调整至auto*/
        }

宽度固定，外边距为auto

盒模型垂直方向上的布局

由于垂直方向上，父元素的高度默认被子元素撑开，所以垂直方向上的布局并不复杂。

与盒模型布局有关的三个属性

1. overflow
   在垂直方向上布局，如果子元素的高度超过父元素的高度，子元素会溢出，overflow的作用就是用来设置父元素如何处理溢出的子元素。
   可选值：
   • visiable：默认值 子元素会从父元素中溢出，在父元素外部的位置显示。
   • hidden：溢出的内容会被裁剪，不显示。
   • scroll：生成两个滚动条，通过滚动条来显示完整内容。
   • auto：根据需要生成滚动条
     除此之外，还可以设置overflow-x，overflow-y。
2. visibility
   visibility用来设置元素的显示状态。
   可选值：
   • visible：默认值，元素在页面中正常显示。
   • hidden：元素在页面中隐藏不显示，但是依然占据页面的位置。
3. display
   display用来显示元素显示的类型。
   可选值：
   • inline：将元素设置为块元素。
   • block：将元素设置为块元素。
   • inline-block：行内块元素，既不会独占一行，也可以设置宽和高。【小细节】如果两个相邻的行内块元素，两个块元素中间会有一个空隙，是空格导致的，如果把两个元素之间的所有空格删掉，就不会有空隙了。尽量不使用这个值。
   • table：将元素设置为一个表格。
   • none：元素不在页面中显示。

注意：visibility:hidden和display:none的显著区别

display:none和visibility:hidden，都能够将元素隐藏。但是visibility:hidden隐藏的元素在页面中仍占据着位置，也就是说该元素后面的元素会给这个设置visibility:hidden的元素空出位置。而display:none隐藏的元素不会再占据着页面的位置。

使用重置样式表（reset stylesheets）清除浏览器的默认样式

通常情况下，浏览器都会自动为元素设置一些默认样式，这些默认样式会影响页面的布局。所以在编写网页的时候必须要去除浏览器的默认样式（PC端的页面）。
去除浏览器默认样式需要在页面中引入以.css结尾的重叠样式表文件。

去除默认样式的方法：这里分享两个适合学习时候用的。在工作中具体会不会用，用哪种取决于公司。

1. reset.css 2011年版本：直接去除了浏览器的默认样式
2. normalize.css 2018年版本：对浏览器的默认样式进行了统一
   两种方式的具体区别点这里。

【注意】在引入重置样式表的时候，要在其他引入的css文件之前和<style>标签之前引入重置样式表！！！

编程小白一直在学习，一直在路上。写文章的目的纯粹为了总结个人所学，如有不妥之处，望大家批评指正，我将虚心接受。希望我的分享也能给看到这篇文章的你一点收获。