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

盒子模型

属性：边框 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%;

}