前端提高篇（三十八）CSS进阶6：盒模型及使用（IE6混杂盒模型，拖拽，轮廓）

这两篇文章都有很详细的解释：文一，文二

案例：关于一行放三个li的问题

1.定义一个ul，宽度300，底下跟着3个li，每个li宽度100

ul,li {

padding: 0;

margin: 0;

}

ul {

width: 300px;

height: 100px;

}

li {

width: 100px;

height: 100px;

display: inline-block;

background-color: rosybrown;

}

效果：可以看到，一行放不下三个li，因为我们在写li时，有换行，系统就会把换行当作空格显示

我们在ul设置font-size为0，可以解决这个问题，（li内没有出现空格问题，是li之间有空格，所以找ul解决）

而li是会继承font-size的设置的

在上面写出的css代码中，我们没有设置li里的font-size，li会向上找