内边距 边框 外边距
margin padding 简写顺序：顺时针方向。未声明的一边会应用对边的值
border三个属性
border-wdith 默认值medium
border-style 默认值none
border-color 默认值 black
写代码时最好先声明*{margin:0px;padding:0px}
在设置两个元素间的垂直外边距时，同一个外边距只会采用margin较大的那个值，不会叠加。而水平外边距会叠加。
文本元素的边距通常上下边距使用em,左右边距使用px
CSS盒模型
（1）没有设置宽度的元素始终会拓展到和其父元素宽度相同为止
（2）有设置宽度的元素设置内边距，边框，外边距都会增加元素的宽度
border-box 默认是content-box ,设置为box-sizing可以实现content-box的效果
浮动
浮动元素会脱离文档流,实现的效果就是尽可能的向左上角或者右上角迁移
浮动非图片元素时必须设置宽度，图片有自身的默认宽度因而不用设置
有父元素的控制方式：
（1）设置overflow:hidden,可靠的使父元素包含浮动的子元素
（2）设置父元素也浮动，同时设置父元素的兄弟元素clear:left，这样父元素的兄弟元素不会与父元素并排在同一行
（3）在父元素的最后添加一个非浮动的子元素，clear:left。或者应用.clearfix规则
.clearfix:after{
content:‘.‘,
display:block,
visibility:hidden,
clear:both,
height:0
}
注：句点是最小的内容。可以使用clear:both来设置，同时包含了left和right的情况
在没有父元素的情况下，使用clearfix规则，最合适。
定位position
默认值static
相对定位relative:相对的是原来它在文档流中的位置
绝对定位absolute:相对body元素进行定位。在未设置父元素的position属性时，设置父元素的postion之后，子元素会相对于父元素进行定位
固定定位fixed:相对上下问的视口定位
显示属性display
块级元素变内联元素：display:inline 反之：display:block
inline元素的宽度随内容变化，无法设置width和height,也无法设置除了左右之外的边距
inline-block 相当于将block元素inline展示，可以设置宽高及上下边距
背景
border-color的颜色在未设置的情况下会等于color
background-image:url(path/filename) 修改平铺方式background-repeat 修改平铺起点background-position
background-repeat: repeat-x repeat-y no-repeat round 通过调整图片大小来适应背景区域 space通过在图片间添加空白来适应背景区域
通过设置
background-positon:50% 50%; background-repeat:no-repeat;
实现背景图片的居中效果，表示图片50% 50%的位置和元素50% 50%的位置对齐
在设置background-position最好使用百分比
background-size用来调整背景图片的大小 cover拉大图片 contain缩放图片
background-attachment 表示背景图片是否随着元素的滚动而移动
background简写
background: url() position color repeat size attachment
添加多张背景图片
background: url(images/turq_spiral.png) 30px -10px no-repeat, url(images/pink_spiral.png) 145px 0px no-repeat, url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;
先列处的图片显示在上方
渐变
linear-gradient线性渐变 radial-gradient 放射性渐变
原文：https://www.cnblogs.com/goOtter/p/9655871.html