定位、圆角属性
定位的应用场景和基本原理
定位的原理
- 在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变 自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性,允许定义标签框相对于其正常位置应该出现的位置,或者相对于父标签、 另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置
position
- static 默认 静态定位
- 默认的定位位置,不写就是静态定位
- relative 相对定位
- 相对于自己本身移动
- absolute 绝对定位
- 子绝父相(当找不到父标签有相对定位的时候,就会继续向上找)
- 相对于父标签(父标签相对定位,子标签绝对定位)
- fixed 固定定位
- 相对于浏览器窗口
- 不会随着滚动条滚动
position各个属性值的对比
-
定位 是否脱标 参考点 参数 static 否 无 relative 否 自己本身 left,right,top,bottom absolute 是 父标签(子绝父相) left,right,top,bottom fixed 是 浏览器窗口 left,right,top,bottom
定位的技巧与层级关系
居中技巧
-
1、方案 1 margin 负间距
(1)必需知道该 div 的宽度和高度;
(2)然后设置位置为绝对位置;
(3)距离页面窗口左边框和上边框的距离设置为 50%,这个 50% 就是指盒子左上角顶点距离页面左、上边 界的 50%;
(4)最后将该 div 分别左移和上移,使整个盒子居中,左移和上移的大小就是该 DIV( 包括 border 和 padding) 宽度和高度的一半 -
<style> * { padding: 0; margin: 0; } .box { width: 300px; height: 200px; background-color: red; position: absolute; left: 50%; top: 50%; margin-top: -100px; margin-left: -150px; } </style> </head> <body> <div class="box"></div> </body>
-
2、方案 2 margin:auto 实现绝对定位元素的居中(该方法兼容 ie8 以上浏览器)。 此方案代码关键点:
(1)上下左右均 0 位置定位;
(2)margin: auto。 -
<style> * { padding: 0; margin: 0; } .box { width: 300px; height: 200px; background-color: red; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; } </style> </head> <body> <div class="box"></div> </body>
定位标签的层级属性 z-index
- 1、标签的定位与文档流无关,所以它们可以覆盖页面上的其它标签;
- 2、z-index 属性指定了一个标签的堆叠顺序;
- 3、具有更高堆叠顺序的标签总是在较低的堆叠顺序标签的前面;
- 4、如果两个定位标签重叠,没有指定 z - index,那么默认值都是 0,最后定位在 HTML 代码中的标签将被 显示在最前面。数值越大,层级越高。
- 5、只有加了定位,z-index才可以生效
圆角属性
-
.box { width: 300px; height: 300px; background-color: red; /*border-radius 圆角属性 */ border-radius: 10px; /*四个角*/ border-radius: 10px 50px; /*左上右下、右上左下*/ border-radius: 10px 50px 100px; /*左上、右上左下、右下*/ border-radius: 10px 30px 50px 70px; /*左上、右上、右下、左下*/ /* 当一个正方形设置圆角为50%,就是一个正圆形*/ border-radius: 50%; }
- 半圆
-
.box { width: 400px; height: 200px; background-color: red; border-radius: 200px 200px 0 0 ; }