网页布局基础之盒子模型与浮动

盒子模型

属性：边框 border，内边距 padding，外边距 margin

3D模型 ：border ，content+padding,background-image,background-color,margin(为最后一层)

例：

设置内边距 44px，15px，15px，15px

padding:44px 15px 15px;

设置1px的实线，颜色为#b1adaa

border:1px solid #b1adaa;

设置外边距 上下为10px，左右为18px

margin:10px 18px;

初始化 *{}

*{margin:0; padding:0; font-size:12px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋体";}

样式追加

<div class="content profile">

浮动

关于overflow:hidden的设置

有这么一段解释

当子元素设置了浮动，父元素没有设置浮动而导致的父元素高度不能自动扩展，缩成一条线，子元素从父元素中溢出时，适合使用同时设置width:100%（或固定宽度值）+overflow:hidden的方式来清除浮动；此法可同时去除紧邻的块级受到的浮动影响，而不需要再对受到浮动影响的紧邻块级元素设置去除浮动。

#mainbody {    background:#FC0;        width:100%;    overflow:hidden;}.left {width:800px;height:200px;background:#000;float:left;}.right {width:140px;height:500px;background:#690;float:right;}#footer {background:#639;width:100%;    }