css布局

padding

 

样式名分边

 padding-top

 padding-right

 padding-bottom

 padding-left

多个样式值

 padding: 2px（四边）

 padding: 5px 10px（上下、左右）

 padding: 5px 10px 4px（上、左右、下）

 padding: 5px 10px 4px 8px（上、右、下、左）

 

Border

 

border-style

 border-top-style、border-right-style、

border-bottom-style、border-left-style

border-width、border-color：四边

 

例 p.aside {border-style: solid dotted dashed double

//上、下

 p {border-style: solid; border-width: 15px 5px

15px 5px;} //上、下

 

margin

 

margin-top、margin-right、margin-bottom、margin-left

p {margin: 20px 30px 30px 20px;}

 

 

盒子模型

 

盒子模型示意图

 元素：width, height

 内边距：padding

 边框：border

 外边距：margin

 

合并问题模板

样式名称：是否分边

样式值：多个值的含义

 

流布局

 

流布局（默认布局方式）

1 行内元素在同一行中水平排列

2 块级元素的盒子占据一整行

3行内元素从左至右

4块级元素从上至下

5 block样式

 

浮动布局

 

1浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

2由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

 

定位布局

 

相对定位（position: relative）

• 相对于流布局再定位

• 原本所占的空间仍保留

 

绝对定位（position: absolute）

• 以距离它最近的设置了定位属性的父元素为基准

• 脱离标准流

 

 

 

 

所学随便做的一个小事例