定位
使用 配合位移偏移量
-
默认 static
-
相对定位(relative)
应用场景:1 微调自己的位置 2 给绝对定位作为参考
相对定位是相对于自身的位置进行偏移,不脱离文档流,子绝父相 -
固定定位(fixed)
应用场景: 1 吸顶效果 2 返回顶部 3 模态窗口
固定定位是相对于浏览器窗口进行偏移,会脱离文档流,类似于行内块元素,(在不设置宽的时候,宽度由内容进行决定,也可以设置宽高) -
绝对定位(absolute)
绝对定位是以最近一定义的“父”元素来说的 ,如果没有定位父元素,那么相对于html来说。
子绝父相 ,子绝父固
z-index 应用 绝对/相对/固定定位用来改变层级关系 默认是auto 相当于0 值越大层级越高
方向偏移量 只应用在绝对/相对/固定定位 静态定位没有 -
块级元素水平垂直居中
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
* { margin: 0; padding: 0;}
.box { width: 300px; height: 300px; background: pink; position: relative; }
/* .content{ width: 100px; height: 100px; background: #f00;position:absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } */
.content { width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; background: #f00; }
</style>
</head>
<body>
<div class="box">
<div class="content">
</div>
</div>
</body>
</html>
元素脱离文档流的方法:float(right,left) position(relative ,absolute,fixed)
浮动定位的相同和不同点:
浮动和定位都会脱离文档流 并且是他们转为类似于行内块的元素(不设置宽的时候 。。。 设置宽的时候。。。)
不同:
浮动不会使文字脱离文本流 类似于文本流只是提升了半层 在1.5层的意思
但是定位不仅脱离文档流还脱离文本流
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<style>
*{ margin: 0; padding: 0; }
.box1{ width: 500px; height: 500px; background: pink; } .box1 div:nth-child(1){ width: 100px; height: 100px; background: #f00; float: left; }
.box1 div:nth-child(2){ width: 150px; height: 150px; background: #00f; }
.box2{ width: 500px; height: 500px; background: pink; position: relative; }
.box2 div:nth-child(1){ width: 100px; height: 100px; background: #f00; position: absolute; left: 0; top: 0; } .box2 div:nth-child(2){ width: 150px; height: 150px; background: #00f; }
</style>
</head>
<body>
<div class="box1">
<div>
</div>
<div>浮动脱离文档流但是不会脱离文本流浮动脱离文档流但是不会脱离文本流浮动脱离文档流但是不会脱离文本流浮动脱离文档流但是不会</div>
</div>
<div class="box2">
<div></div>
<div>浮动脱离文档流会脱离文本流浮动脱离文档流会脱离文本流浮动脱离文档流会脱离文本流</div>
</div>
</body></html>
圆角 border-radius:50%;
一个值 两个值 三个值 四个值分别代表的值(找对角)
显示和隐藏
第一种:(不占位置)
display:none; 和display:block;
第二种:(会占位置)
visibility:visible; 显示 visibility:hidden;
溢出隐藏(父容器)
overflow:
hidden scroll auto visible(默认)
某个方向 overflow-x overflow-y