HTML04

1.盒子模型

概念:是一种思维模型，主要用于实现的布局效果。有宽高+边框+内边距+外边距组成
1.宽高
设置宽度：

width：*px|*%是父元素的百分比

设置高度：

height：*px|*%是父元素的百分比

设置背景颜色 backgroundcolor:颜色;
2.边框
设置四边框 border：*px 线性 颜色；
(上右下左) top，right，bottom，left
线性有：solid实线 douuble双线 dashed虚线 dotted点线
注意：如果有单个复合，必须保证复合属性在前，单个在后。
3.内边距:盒子边框和他里面内容之间的间间隔
设置四边框边框 padding：{*px，*px，*px，*px}
【值可以是1-4个，对应规则：上出发，顺时针，有缺省，取对边】
设置上右下左内边距：padding-top/right/bottom/left:*px;
注意：padding会撑大盒子，如果要保证原来大小，及的修改对应宽度属性。
4.外边距:盒子边框和他之外的元素间隔
设置四边框边框 margin：{*px，*px，*px，*px}
【值可以是1-4个，对应规则：上出发，顺时针，有缺省，取对边】
设置上右下左内边距：margin-top/right/bottom/left:*px;
5.其他细节说明
1.清楚所有元素的内外边距
*{
margin:0;
padding:0;
}
2.盒子自动水平居中
margin:0 auto;
3.padding会撑大盒子，不可以为负数，margin可以
4.行级元素不是完整的盒子，不可以设置宽高和垂直方向的内外边距
6.margin的问题
a.垂直方向的粘连问题-父随子动
方案1: 给父元素设置padding替代[记得修改高度!]
方案2:给父元素设置透明的上边框border-top:1px solid transparent;
方案3:给父元素设置超出隐藏overflow:hidden;
b.垂直方向的塌陷问题[在一个元素身上设置足够的间隔]

2.浮动:实现一行多列效果语法:

float:left; 靠在父元素的左边
float:right; 靠在父元素的右边
注意:浮动会让元素脱离文档流