自己所能理解的CSS（五）

通配符选择器的作用：去掉margin和padding，初始化标签

盒模型

盒子的组成部分：margin border padding element 

padding等复合属性的四个方向顺序：

4个----顺时针  （上，右，下，左）

3个----上，（左，右），下

2个----（上，下），（左，右）

1个-----（上，下，左，右）

如果你这样设置会发现元素和浏览器顶部有点距离，这个距离是body的margin，距离为8px

将body的margin设置为0 ，就可以顶着浏览器边框了

当然，一般都是用通配符去将所有标签的margin和padding都设置为0

--------------------------------------------------------------------------------------------------------------

下面就是层模型了

定位：

绝对定位的属性

position:absolute;

脱离原来位置进行定位

设定了absolute定位属性的元素，层级要比没有设定的时候高一级

绝对定位可以定位到界面的9个点（左上，上中，右上，左中，中间，右中，左下，中下，右下）

这是定位到页面中间的方法，其他的同理

transform是相对于自己，移动多少的位置，上面代码中translate的意思是指向x轴和y轴的反方向移动自己的50%长度。

translateX，translateY不能一起使用，要使用就使用translate

相对定位属性

position:relative;

相对属性也可以做到定位到页面上的9个点

相对属性定位也是将自己移动到上一个层级，只不过自己原来的位置是不能够被占用的，即absolute出现了层叠情况，relative没有出现层叠情况

保留原来的位置进行定位

当两个一起使用的时候：

absolute是相对于最近的有定位属性的父级元素进行定位，如果没有，就相对于网页页面进行定位

relative是相对于自己原来的位置进行定位

总结：一般来说让参照物用relative定位，让要定位的元素用absolute定位

圆圈的画法：

还有一个固定定位：

比如网页上的一些广告之类的，固定位置，不会随滚动条滚动位置有变化