1、关于ul的padding-left:40px的问题;
首先，我们来看一段代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ul的padding-left:40px的问题</title> 6 <style type="text/css"> 7 ul.imglist{ 8 width:536px; 9 height:20px; 10 border:1px solid #000; 11 } 12 </style> 13 </head> 14 <body> 15 <ul class="imglist"></ul> 16 </body> 17 </html>
以上代码中，我们给ul元素设置了一个类属性，命名为imglist。
并在样式中，给ul设置宽度为：536px，高度：20px，边框为1像素的黑色实线。
显示的效果：
由上图，我们可以看出ul.imglist的宽度居然变成了578px，除去边框的2px，576px减去536px，整整多出了40px。
究其根本原因，是因为浏览器对HTML元素默认样式设置不同所产生的。
Firefox浏览器中的默认样式里面关于ul和ol的定义：
我们可以根据-moz-padding-start:40px，可以得出浏览器对ul和ol元素，默认会自动加上40px的填充。
那我们应该怎么样处理掉这浏览器默认的40px填充的像素？我们需要将常用的元素的内外边界初始化。
有以下两种解决办法：
1、在css的开头加上：
*{
margin: 0px;
padding: 0px;
}
但是这一种方式比较占资源
2、第二种方式，指它特定的标签设置：
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, table, th, td {
margin:0;
padding:0;
}
下面我们修改一下代码：对ul进行初始化设置。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ul的padding-left:40px的问题</title> 6 <style type="text/css"> 7 ul{ 8 margin:0px; 9 padding:0px; 10 } 11 ul.imglist{ 12 width:536px; 13 height:20px; 14 border:1px solid #000; 15 } 16 </style> 17 </head> 18 <body> 19 <ul class="imglist"></ul> 20 </body> 21 </html>
显示效果：
2、在代码中，中文字体为什么要用Unicode编码？
在代码中，我们常常把“宋体”写成“\5b8b\4f53”。当网页的编码是 utf-8时，某些情况下直接写：宋体、微软雅黑之类的中文字体名字时，会出现不能识别导致字体设置失效的问题，如果把字体名字转成对应编码如：‘\5b8b\4f53’，就不会出现这个问题。
3、font:14px/22px "\9ED1\4F53";是什么意思呢？
font:14px/22px "\9ED1\4F53";
14px是指字体大小，font-size。
22px是指行距，line-height。
"\9ED1\4F53"是指黑体。
4、margin:0 auto;的作用？
（1）语法格式
margin:0 auto;设置对象的上下间距为0，左右自动。
margin:0 auto可拆分为：margin: 0 auto 0 auto
margin-top: 0; margin-right: auto;margin-bottom: 0;margin-left: auto;（上、右、下、左）
下面，让我们看一段代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .aa,.bb{ 8 width:300px; 9 height:50px; 10 } 11 .aa{ 12 border:1px solid #F00; 13 margin-bottom:30px; 14 } 15 .bb{ 16 border:1px solid #00F; 17 } 18 </style> 19 </head> 20 <body> 21 <div class="aa"></div> 22 <div class="bb"></div> 23 </body> 24 </html>
显示效果：
小结：我们在类名为aa的div中设置属性：margin-bottom: 30px;，效果如上图所示。
（2）作用
在div标签上设置margin:0 auto样式，是为了让div在浏览器中水平居中。
布局居中，水平居中，均可加入：margin:0 auto样式即可。
（3）关键点
关键点是：auto(自动，自适应)
将上面的代码进行修改，如下所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .aa,.bb{ 8 width:300px; 9 height:50px; 10 margin:0 auto; 11 } 12 .aa{ 13 border:1px solid #F00; 14 margin-bottom:30px; 15 } 16 .bb{ 17 border:1px solid #00F; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="aa"></div> 23 <div class="bb"></div> 24 </body> 25 </html>
显示效果：
小结：以上例子中，我们统一设置div(aa)和div（bb）的宽度为：300px，边框1px。
可以测量出，浏览器的body长度为：1366px，因为设置了margin:0 auto，左右的边距自动，浏览会自动去解析div，左右边距自动设置值为(body长度-
（div长度+2*边框）)/2，即为(1366px-(300+2))/2等于532px。
具体距离显示如下：
（4）为什么要设置margin:0 auto？
1、让div布局，水平居中于浏览器；
2、兼容各大浏览器让布局居中；
注意点：加入div居中布局中，如果果入了margin::0 auto就不能加入float浮动样式，避免逻辑错误，造成布局居中不兼容。
5、理解overflow: hidden的作用
我们先来看一段代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .container{ 8 background-color:black; 9 } 10 .div1{ 11 background-color:aqua; 12 width:100px; 13 height:100px; 14 } 15 .div2{ 16 background-color:red; 17 width:100px; 18 height:100px; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="container"> 24 <div class="div1"></div> 25 <div class="div2"></div> 26 </div> 27 </body> 28 </html>
显示效果如下：父级div(container)的高度是auto,可以被子div无限的撑大，如下图的所示。
1、隐藏溢出；
现在我们给上段代码中的div(container),设置高度：height: 150px;
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .container{ 8 background-color:black; 9 height:150px; 10 } 11 .div1{ 12 background-color:aqua; 13 width:100px; 14 height:100px; 15 } 16 .div2{ 17 background-color:red; 18 width:100px; 19 height:100px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="container"> 25 <div class="div1"></div> 26 <div class="div2"></div> 27 </div> 28 </body> 29 </html>
显示效果：
现在我们给上段代码中的父div(container),设置高度：height: 150px的同时，加入overflow: hidden;代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .container{ 8 background-color:black; 9 height:150px; 10 overflow:hidden; 11 } 12 .div1{ 13 background-color:aqua; 14 width:100px; 15 height:100px; 16 } 17 .div2{ 18 background-color:red; 19 width:100px; 20 height:100px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="container"> 26 <div class="div1"></div> 27 <div class="div2"></div> 28 </div> 29 </body> 30 </html>
显示效果：
小结：在默认情况下，当我们设置了父div(container)的高度为150px，子级div(div1, div2)的高度和为：200px，大于父级div(container)的高度，所以
此时子级div就会溢出父级div，如上图所示。
当我们在父div(container)上设置了：overflow: hidden;的时候，情况就发生变化了。overflow对子div(div1, div2)进行控制，设置overflow: hidden;
属性可以将超出父级div的子div进行溢出隐藏。
2、清除浮动
我们来看下面一段代码：
当父元素的高height:auto时，子元素分别设置：float:left时，使用overflow: hidden;来清除浮动。
①不清除浮动的时候
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .container{ 8 background-color:black; 9 } 10 .div1{ 11 float:left; 12 background-color:aqua; 13 width:100px; 14 height:100px; 15 } 16 .div2{ 17 float:left; 18 background-color:red; 19 width:100px; 20 height:100px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="container"> 26 <div class="div1"></div> 27 <div class="div2"></div> 28 </div> 29 </body> 30 </html>
显示效果：
小结：我们很容易发现一个问题，就是为黑色背景的父元素div(container)消失了？
为什么会出现这样的情况呢？
原因是：子元素是浮动的，浮动的元素脱离文档元素，不占据空间。
不浮动的父级元素会直接无视这些浮动的子元素，又加之父元素div(container)的height:auto，即我们并没有设置，所以父元素div就没有显示出来了。
②清除浮动的时候
（1）方法一：使用overflow: hidden;
代码始下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .container{ 8 background-color:black; 9 overflow:hidden; 10 } 11 .div1{ 12 float:left; 13 background-color:aqua; 14 width:100px; 15 height:100px; 16 } 17 .div2{ 18 float:left; 19 background-color:red; 20 width:100px; 21 height:100px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="container"> 27 <div class="div1"></div> 28 <div class="div2"></div> 29 </div> 30 </body> 31 </html>
（2）方法二：给父div(container)设置float
当然，我们还可以有另外一种方法清除浮动，那就是父div(container)本身也设置float；
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .container{ 8 float:left; 9 background-color:black; 10 } 11 .div1{ 12 float:left; 13 background-color:aqua; 14 width:100px; 15 height:100px; 16 } 17 .div2{ 18 float:left; 19 background-color:red; 20 width:100px; 21 height:100px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="container"> 27 <div class="div1"></div> 28 <div class="div2"></div> 29 </div> 30 </body> 31 </html>
显示效果：
小结：我们没有看到黑色的父div(container)的身影，但是我们可以借助浏览器，很明显的看到父div(container)，包含了两个子div(div1,div2)。这是因为浮动的div已经失去了“独霸一行”的能力，当我们手动为其设置一个宽度，如下代码所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .container{ 8 float:left; 9 background-color:black; 10 width:500px; 11 } 12 .div1{ 13 float:left; 14 background-color:aqua; 15 width:100px; 16 height:100px; 17 } 18 .div2{ 19 float:left; 20 background-color:red; 21 width:100px; 22 height:100px; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="container"> 28 <div class="div1"></div> 29 <div class="div2"></div> 30 </div> 31 </body> 32 </html>
显示效果如下：
小结：（1）方法一：使用overflow: hidden; （2）方法二：给父div(container)设置float
以上两种方法，一种是使用了清除浮动的战略，一种是使用了浮动的战略，使父div接受子div。两者的区别在于如果都浮动的话，需要额外的设置父div的
宽度，因为浮动起来的div失去了独占一行的特征，而清除浮动的div仍然霸道。
3、解决坍塌
（1）可以使用overflow:hidden解决margin坍塌；
坍塌是不分父级div的高度是否固定的。
首先，我们要知道什么叫做坍塌？
我们在div1中加入margin-top: 50px;代码如下，我们来看看不坍塌时的效果。
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .container{ 8 overflow:hidden; 9 background-color:black; 10 } 11 .div1{ 12 margin-top:50px; 13 background-color:aqua; 14 width:100px; 15 height:100px; 16 } 17 .div2{ 18 background-color:red; 19 width:100px; 20 height:100px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="container"> 26 <div class="div1"></div> 27 <div class="div2"></div> 28 </div> 29 </body> 30 </html>
显示效果：
当去掉 overflow: hidden;代码如下：
我们来测量一下：
我们可以发现，div1的上端距离浏览器的顶部距离是50px，而不是对它的父div。这就是坍塌。
这种坍塌指针对父亲的第一个儿子div1，div2设置margin-top: 50px;
则不会有影响。
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .container{ 8 background-color:black; 9 } 10 .div1{ 11 background-color:aqua; 12 width:100px; 13 height:100px; 14 } 15 .div2{ 16 margin-top:50px; 17 background-color:red; 18 width:100px; 19 height:100px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="container"> 25 <div class="div1"></div> 26 <div class="div2"></div> 27 </div> 28 </body> 29 </html>
显示效果：
（2）考虑用符动来解决坍塌的问题；
我们给父div设置高度height:200px，然后给子div设置float:left；代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>margin:0 auto;的作用</title> 6 <style type="text/css"> 7 .container{ 8 background-color:black; 9 height:200px; 10 } 11 .div1{ 12 margin-top:50px; 13 float:left; 14 background-color:aqua; 15 width:100px; 16 height:100px; 17 } 18 .div2{ 19 float:left; 20 background-color:red; 21 width:100px; 22 height:100px; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="container"> 28 <div class="div1"></div> 29 <div class="div2"></div> 30 </div> 31 </body> 32 </html>
显示效果：
显然易见，只要是符动的div就避免了坍塌的问题了。（无论是父div是否浮动）
总结：可以使用overflow:hidden来解除坍塌，浮动的div根本不用考虑坍塌；overflow:hidden的用法在溢出和清除浮动上主要针对父div是否有固定的高度加以区分。它还额外肩负了解除坍塌的重任。