css的布局与定位

盒子模型的属性

height高度
width宽度
border边框
padding内边距
margin外边距
边框、内外边距都有top、right、bottom、left四个方向的属性

1.border属性的简写顺序为width、style、color

border:1px solid red;

2.margin属性垂直方向会合并，水平方向不会
3.盒子中图片的间距可用font-size设置，0表示无间距
4.内容溢出盒子时可用overflow属性，hidden表示超出部分不可见，scroll表示显示滚动条，auto表示如有超出部分，显示滚动条
5.消除元素默认内外边距：

*{
Padding:0;
Margin:0;
}

6.圆形边框：

Border-radius:xx%;

7.margin、padding的简写：
padding/margin：上 右 下 左；
注：
一个，上下左右
两个，上下 左右
三个，上 左右 下

padding:10px; /*上下左右都是10px*/
padding:10px 20px; /*上下10px，左右20px*/
padding:10px 20px 30px; /*上10px 左右20px 下30px*/

元素的定位方式

1.通过文档型定位
通过display属性设置
可取值为none（不显示）、block、inline、inlin-block
block：独占一行，height、width、margin、padding都可以设置
如：div p h1~h6、ol、ul等
inline：不独占一行，height、width不可设置
如：a span
inline-block：不独占一行，height、width、margin、padding都可以设置
如：im
2.浮动定位
先设置水平居中margin：0 aotu；
通过float属性设置
可取值为left左浮动、right右浮动、none不浮动
通过clear属性清除浮动
both清除左右两边的浮动元素
left和right清除左右一个方向的浮动元素
none为默认值
3.层定位
注:坐标原点始终在参照物的左上角
通过position属性设置
可取值为static默认值，fixed 固定定位，relative相对定位，absolute 绝对定位fixed:
相对于浏览器窗口进行定位(移动滚动条位置不变)
relative :
不会改变文档流的位置，相对于直接父元素进行定位
absolute :
改变文档流元素的位置，相对于非static父元素进行定位(如果父层中都未定义则相对body进行定位)
注:常用父元素相对定位，子元素绝对定位也可以设置z-index值，值大的在上面
接下来使用top (bottom) 和left (right) 属性进行设置位置