diff --git a/css.md b/css.md index efef1d8ada73d53ed5832851c199973b05c2464c..09e2e187984fb3c959fca2ddbb0ed46c64426efc 100644 --- a/css.md +++ b/css.md @@ -89,3 +89,42 @@ ```` #### position详细 +#### 清除浮动 +1. 当父元素没有确定高度时,子元素浮动,则需要清除浮动,达到撑起父元素高度的目标 +2. 清除浮动的方法 + > 在子元素的最后加上 br 清除浮动 + > 父块元素添加overflow overflow:hidden + +#### position +1. 作用:固定盒子的位置 static relative absolute fixed +2. 边偏移: top bottom right left +3. > relative 相对于自身进行定位 ---------- 原来的位置仍然在,不脱离文档流 + > fixed 相对于浏览器------------ 不占有原来的位置,脱离文档流 + >> 固定定位紧贴版心的右边缘 left:50% (浏览器宽度) margin-left:版心的一半; + + > absolute 相对于父元素(相对于最近的有定位的父元素定位) ------------ 不占有原来的位置,脱离文档流 +4. 子绝父相(子元素绝对定位 父元素相对定位) + > 父元素使用相对定位,则占有文档流原来的位置,后面的元素不受影响。 + > 子元素使用绝对定位,脱离文档流,不影响后面的兄弟盒子的定位 +5. z-index 叠放顺序 只对有定位的盒子有效 +6. 使用了absolute定位的盒子,使用margin:0 auto; 不能水平居中 +7. 固定定位的元素(块元素和盒内元素都可以设定宽 高) +8. 固定定位的元素会压住下面的盒子,但是压不住盒子里的内容 + + +#### float 浮动 +> 1.设置的浮动样式只对元素本身有效果。对其他的兄弟没有影响。 +> 2.标准的文档流可以看做是三维坐标轴(z=0)的平面。 +> 3.浮动的文档流可以看做是三维坐标轴(z=1)的平面。因此 浮动会遮盖标准的文档流的元素。但是遮不住标准文档流的内容 +> 4.margin:0 auto 对浮动盒子的水平居中无效果。只能用于z=0 +> 5. 清除浮动,作用是使盒子独占一行 + + + +#### display +none block inline inline-block +none(隐藏后不保留位置) block 常用于块元素的显示隐藏 + +visibility: hidden(隐藏后保留位置,常用于广告) visible +overflow: hidden 对溢出的内容进行隐藏 +### question