浮动和盒子模型

元素类型

块级元素：默认独占一整行，可以设置宽高等
行级元素：有多宽占据多宽，不是完整的盒子，不可以设置宽高等。
行内块元素：（特殊的行级元素)有多宽占据多宽，可以设置宽高
注：块级可以包含行级和块级，行级只能包含行级。
<P><p/>里不能放块级；
<a><a/>里可以放块级

浮动

主要用于布局，实现一行多列效果。

语法

float: left | right;

left会让元素排列在父元素的左边或者同浮动的兄弟的旁边
right会让元素排列在父元素的右边或者同浮动的兄弟的旁边 [从右到左]

应用

1.实现文字环绕
2.实现一行多列

盒子模型

概念

是一种思维模型，主要用于布局。

组成

尺寸 + 边框 + 内边距 + 外边距。

尺寸

设置宽度 width:*px | *%;
设置高度 height:*px | *%;

边框

设置边框 border:粗细 线型 颜色; [设置四边]

方向：上top 下bottom 左left 右right

设置单边边框：
border-方向：粗细 线性 颜色;
border-top: 粗细 线型 颜色；
border-bottom: 粗细 线型 颜色；
border-left: 粗细 线型 颜色；
border-right: 粗细 线型 颜色；

线型： solid实线 dashed虚线 dotted点线

内边距

盒子边框和内容之间的间隔

语法： padding:*px;
属性值可以是1-4个，对应规则是：上出发，顺时针。有缺省，取对边。
设置单个方向的内边距：
padding-方向：*px;

注意：padding会撑大盒子！

外边距

盒子边框与盒子之外的内容的间隔

语法： margin:*px;
属性值可以是1-4个，对应规则同padding
设置单个方向的外边距：
margin-方向：*px;

margin的问题
1.父随子动（父子）
解决方案：
a.给父元素设置边框。 transparent透明色
b.用padding实现 【记得修改高度】
c.给父元素设置 overflow:hidden;

2.塌陷（兄弟关系）
解决方案：在一个元素身上设置足够的间隔

margin和padding的应用：
1. *{ margin:0;padding:0; }
2. margin:0 auto; 让一个盒子水平居中