CSS布局基础
（初级）css布局 一、单列布局 1、基础知识 块级元素 div p ul li dl dt 行级元素 img span input strong同一行显示、无换行 2、盒子模型 盒子模型 （边框border、外边距margin、内边距padding、内容content） 盒子模型3维立体图：自上往下（边框、内容和内边距、背景图片、背景颜色、 外边距） 样式追求就近原则（行内样式>内部样式>外部样式） 3、自动居中 margin： 0px auto;实现自动居中（原理：外边距=（浏览器的宽度-外包含层的宽度）/2）（此时不能同时设置浮动和绝对定位） 一般情况下： 父层设置一宽度，子层设置100%就可以。（子层继承父层宽度） 4、css布局笔记 4-1 margin：auto #main { width: 600px; margin: 0 auto; } 设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。 唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案。 4-2 max-width 在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况