通配符选择器的作用:去掉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定位
圆圈的画法:
还有一个固定定位:
比如网页上的一些广告之类的,固定位置,不会随滚动条滚动位置有变化