margin:
1.定义:margin 属性用于设置外边距,即控制盒子和盒子之间的距离
. 特点: margin不会影响盒子大小
- 外边距可以让块级盒子水平居中,但是必须满足两个条件 :
- 盒子必须指定了宽度(width)
- 盒子左右的外边距都设置为 auto
如:
.header{ width:960px; margin:0 auto;}
注意:以上方法是让块级元素水平居中,而不能用于行内元素和行内块元素。行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可(text-align:center给其父元素添加)
浮动特性
- 浮动元素会脱离标准流(脱标:浮动的盒子不再保留原先的位置)
- 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性
一行显示
- 浮动的元素会一行内显示并且元素顶部对齐
- 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列
注意: 浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
浮动元素-行内块
- 浮动的元素会具有行内块元素的特性
margin 0 auto 对浮动元素无效
浮动的父元素要设置宽和高
浮动之后的块级元素的宽度会根据内容变化,需要设置宽度和高度