元素类型
块级元素:默认独占一整行,可以设置宽高等
行级元素:有多宽占据多宽,不是完整的盒子,不可以设置宽高等。
行内块元素:(特殊的行级元素)有多宽占据多宽,可以设置宽高
注:块级可以包含行级和块级,行级只能包含行级。
<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; 让一个盒子水平居中