阐明基本概念网页的布局类似于在一个大盒子里放置不同的小盒子。在布局之前，我们首先要明确几个概念：1.块元素：在页面中占一行，高度默认由内容（子元素）展开，宽度为父元素的100%默认情况下，即auto（宽度和高度的组合，默认不是0，而是auto）。2、内联（inline）元素：在页面中不占据一行，只占据自身内容的大小，不能设置宽高。3.文档流：网页是多层结构，层层叠叠。我们透过屏幕看到的网页是网页的最上层，文档流是最底层。块元素和行内元素都放置在文档流中（浮动时不启用绝对定位和固定定位）。盒模型下图很好的解释了盒模型：盒模型在水平方向的布局水平方向的布局必须满足等式：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区域的宽度水平方向的布局必须满足这个等式。如果不满足此等式，则称为过约束。如果出现过约束，方程会自动调整，调整规则为：如果上面方程中的属性值都不是auto，则默认调整margin-right的值，使方程为真.【例子】没有auto.box1{width:800px;高度：100px；背景色：浅绿色；}.box2{宽度：100px；高度：100px；背景色：珊瑚色；左边距：100px；}如果上面等式中属性的属性值中有auto，则要根据情况考虑：【注意】上面的属性值中有3个属性可以是auto：margin-left，margin-right,和width1分别。如果有属性值是auto的话，默认调整值为auto属性的属性值。[例子]margin-left是auto.box1{width:800px;高度：100px；背景色：浅绿色；}.box2{宽度：100px；高度：100px；背景色：珊瑚色；左边距：自动；*margin-left调整为auto*/margin-right:200px;}2.如果margin和width属性之一为auto，则width的值调整为最大，margin的值调整为0。【示例】调整margin-left和width为auto.box1{width:800px;高度：100px；背景色：浅绿色；}.box2{宽度：自动；/*宽度也调整为自动*/height:100px;背景色：珊瑚色；左边距：自动；/*margin-right调整为自动*/margin-right:200px;}3.如果三个值都是auto，则将width的值调整为最大，将outermargin的值调整为0。[例子]margin-left,margin-right,width都是auto.box1{width:800px;高度：100px；背景色：浅绿色；}.box2{宽度：自动；/*宽度也调整为auto*/height:100px;背景色：珊瑚色；左边距：自动；/*margin-right调整为自动*/margin-right:auto;/*margin-left调整为自动*/}4.如果width的值是固定的，如果两个外边距的值为auto，那么margin-left和margin-right调整为相同的大小，使元素水平居中。一般用于元素的水平居中。【示例】宽度固定，边距为auto.box1{width:800px;高度：100px；背景色：浅绿色；}.box2{宽度：200px；/*固定宽度*/height:100px;背景颜色：珊瑚色；左边距：自动；/*margin-right调整为自动*/margin-right:auto;/*margin-leftadjustedtoauto*/}盒模型在垂直方向的布局，由于父元素在垂直方向的高度，子元素默认是拉伸的，所以垂直方向的布局并不复杂。盒模型布局相关的三个属性1.overflow是垂直方向布局的。如果子元素的高度超过父元素的高度，子元素就会溢出。overflow的作用是设置父元素如何处理溢出的子元素。可选值：visible：默认值子元素会溢出父元素，显示在父元素之外。hidden：溢出的内容会被裁剪掉，不显示。scroll：生成两个滚动条，通过滚动条显示完整的内容。auto：根据需要生成滚动条。另外，还可以设置overflow-x，overflow-y。2.visibilityvisibility用于设置元素的显示状态。可选值：visible：默认值，元素正常显示在页面上。hidden：元素隐藏在页面上，不显示，但仍然占据页面的位置。3.displaydisplay用于显示元素显示的类型。可选值：inline：将元素设置为块元素。block：将元素设置为块元素。inline-block：行内块元素，不占一行，不设置宽高。【小细节】如果有两个相邻的内联块元素，两个块元素之间会有空隙，这是由空格引起的。如果删除两个元素之间的所有空格，则不会有间隙。尽量不要使用这个值。table：将元素设置为表格。none：该元素不显示在页面上。注意：visibility:hidden和display:none的显着区别display:none和visibility:hidden可以隐藏元素。但是被visibility:hidden隐藏的元素在页面中仍然占据一个位置，也就是说元素后面的元素会为设置了visibility:hidden的元素腾出空间。display:none的隐藏元素将不再占据页面的位置。使用重置样式表（resetstylesheets）清除浏览器的默认样式。一般情况下，浏览器会自动为元素设置一些默认样式，这些默认样式会影响页面的布局。所以在写网页的时候，一定要把浏览器的默认样式（PC端的页面）去掉。去除浏览器的默认样式需要在页面中引入一个以.css结尾的重叠样式表文件。去除默认样式的方法：这里有两个适合学习。会在工作中使用吗？使用哪一个？取决于公司。reset.css2011版：直接去掉浏览器的默认样式normalize.css2018版：统一了浏览器的默认样式两种方式的具体区别在这里。【注意】在引入重置样式表时，重置样式表必须在其他导入的css文件之前，在
