总结

 

盒模型由四部分组成：边框broder;外边距margin;内边距padding;内容element

内边距：
padding ：

padding-bottom 设置元素的下内边距
padding-left 设置元素的左内边距
padding-top 设置元素的上内边距
padding-right 设置元素的右内边距

padding 不能为负数

padding:10px //4个方向
padding:10px 20px //上下、左右
padding：10px 20px 30px //上、左右、下
padding;10px 20px 30px 40px //上、右、下、左

边框

boder简写属性，用于把针对四个边的属性设置在一个声明

border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式

border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度

border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色

border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中

border-left 简写属性，用于把左边框的所有属性设置到一个声明中

border-right 简写属性，用于把右边框的所有属性设置到一个声明中

border-top 简写属性，用于把上边框的所有属性设置到一个声明中

三角形的做法：

div{ width:0px
heigt:0px
boder-top:20px solid transparent
boder-left:20px solid transparent
boder-right:20px solid transparent
boder-bottom：20px solid red

}

外边距

margin 简写属性。在一个声明中设置所有外边距属性

margin-bottom 设置元素的下外边距

margin-left 设置元素的左外边距

margin-right 设置元素的右外边距

margin-top 设置元素的上外边距

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的最大值。

display none 所有内容不显示,也不占文档空间.
display inline 此元素被显示为行内元素
display block 此元素被显示为块级元素
display inline-block 行内块元素

定位

Positioning

定位属性允许你对元素进行定位

static 静态定位(无定位)
relative 相对定位(偏移)
absolute 绝对定位(脱离文档流)
fixed 固定定位(脱离文档流)
float left/right 向左/右浮动

注意：
1、绝对定位原本位置会被占，显示出并不存在
2、相对于定位最初包含块定位，最先祖先元素
3、定位后生成块级框，原先位置被占
4、脱离文本框

浮动

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

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

left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。