Skip to main content

定位

float#

浮动，说白了，就是让块级元素，在一行显示，可左可右，且可以允许文字和行元素对其环绕、

块与块之间贴合链接

写法

.box1{        width: 200px;        height: 200px;        background: red;        float: left;        margin-left: 20px;
    }

值：left right none默认

float具有行内块特性

清除浮动#

浮动的元素一般在父div里面，但是father不一定有固定高度，所以最后的结过会使下来的标准块，跑到浮动块下面

因为我们要清除浮动，方法有很多

方法1：额外标签法

结尾闭合浮动，在所有浮动最后一个元素后面加一个块

<div style="clear: both"></div>

然后我们会发现，我们有浮动的father它的高会自动适应浮动块的高度，这样下面的标准块就能正常显示了

方法2：父级添加overflow

给浮动的父级添加css属性 overflow: hidden;

 .bigbox{        border: 1px black solid;        width: 500px;        overflow: hidden;    }

方法3：：after伪元素

同样是给父级元素加属性

.clearfix:after{        content:"";        display:block;        height: 0;        clear: both;        visibility: hidden;
    }    .clearfix{        *zoom:1;    }

然后在father中添加clearfix 类

方法4：双伪元素

 .clearfix:before,.clearfix:after{        content: "";        display: table;    }    .clearfix:after{        clear: both;    }    .clearfix{        *zoom:1;    }

定位组成#

定位=定位模式+边偏移

static#

静态定位 position:static 该关键字指定元素使用正常的布局行为

它没有边偏移，特性和标准流一样

relative#

相对定位

.box1{        position: relative;        top: 20px;        left: 20px;        background: blue;    }

再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）

absolute#

绝对定位

.box1{        position: absolute;        top: 20px;        left: 20px;               background: blue;            margin: 50px;    }.bigbox{        position: relative;    }

元素会被移出正常文档流并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移(如果没有就是body)，来确定元素位置.绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed#

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

sticky#

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为

z-index叠放次序#

对于一个已经定位的盒子（即其 position 属性值不是 static，这里要注意的是 CSS 把元素看作盒子），z-index 属性指定：

  1. 盒子在当前堆叠上下文中的堆叠层级。

  2. 盒子是否创建一个本地堆叠上下文。

    /* 字符值 */z-index: auto;
/* 整数值 */z-index: 0;z-index: 3;z-index: 289;z-index: -1;/* 使用负值降低优先级 */
/* 全局值 */z-index: inherit;z-index: initial;z-index: unset;

元素显示与隐藏#

displasy隐藏#

display:none;

元素直接就隐藏了，特点：原来的位置也消失

visibility隐藏#

visibility:hidden

默认值：inherit 根据父元素

hidden：隐藏，但保留原有位置

visible:显示

overflow隐藏#

overflow属性就是超出盒子部分处理方式

值：

visible是默认值，就是显示

hidden就是超出部分隐藏

scroll总是显示滚动条

auto有超出部分时显示滚动条