【HTML/CSS】单选栏

62 阅读1分钟

知识点总结

1.定位position:static/relative/fixed/absolute/sticky

附属属性:top,bottom,left,right

  • static:没有定位,遵循正常的文档流对象,不受附属属性的影响

image.png

  • fixed:相对于浏览器窗口是固定的,受到附属属性的影响 注:与文档流无关,不占空间,窗口滚动他不会移动

image.png

  • relative:相对其正常位置的定位,移动相对定位的元素,原本所占的空间不会改变 注:相对定位元素经常未作绝对定位元素的容器块

image.png

  • absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于 注:absolute 定位使元素的位置与文档流无关,因此不占据空间。 absolute 定位的元素和其他元素重叠。 absolut与fixed相同点:与文档流无关,不占空间 不同:fixed不随滚动移动,absoulute随滚动移动 image.png

2.浮动float

技巧点总结

1.height:用来设置元素的高度,当height:100%时充满整个父元素 2.居中的方法1:当margin属性的值为auto时自动平分左右距离 3.浮动的元素会尽量的向左或向右移动,就导致当一个容器中的子元素设置为浮动后会使下一行的内容跑上来,可以设置浮动元素