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）

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

• 脱离标准流

所学随便做的一个小事例

css布局

原文：https://www.cnblogs.com/lpf666/p/11226346.html