(一)定位
1、边偏移
在CSS中,通过top 、bottom、 left、 right属性定义元素的边偏移
top:顶端偏移量,定义元素相对于其父元素上边线的距离。
bottom:底部偏移量,定义元素相对于其父元素下边线的距离。
left:左侧偏移量,定义元素相对于其父元素左边线的距离。
right:右侧偏移量,定义元素相对于其父元素右边线的距离。
定位的盒子有了边偏移才有价值
2、定位模式
语法: 选择器 { position:属性值 }
定位模式的分类:
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
定位=定位模式(static,relative,absolute,fixed)+边偏移(top、bottom、left、right)
(1)静态定位
static:默认的定位方式意思是无定位,按照标准流摆放位置,没有边偏移,静态定位在布局时几乎不用
(2)相对定位:relative(重要!!!)
相对定位是元素相对于它原来在标准流中的位置来移动的
特点:原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它
(3)绝对定位:absolute(重要!!!)
<1>、绝对定位,如果父级没有定位,那么绝对定位的子级盒子会以浏览器的为准来移动位置
<2>、如果父级元素(爸爸,爷爷都可以,只要是比他大的就可以)有定位(不管父元素是什么定位,只要有定位即可,但除了static外),那么子元素就会以父级元素为准进行定位
<3>绝对定位不会保留原来的位置,完全脱标,若某盒子使用了绝对定位,那么它下面的盒子便会占据它原来的位置
因此使用绝对定位的时候,要和父级一起搭配使用
子绝父相:子级元素用绝对定位,父级元素用相对定位(重要!!!)
(4)固定定位:fixed)(重要!!!)
固定定位是绝对定位的一种特殊形式
<1>完全脱标:完全不占位置;
<2>只认浏览器的可视窗口
跟父元素没有任何关系;单独写就可以了
不随滚动条滚动;
3、定位的拓展
(1)、绝对定位的盒子居中
注意:绝对定位(absolute)/固定定位(fixed)的盒子,不能通过设置margin:auto水平居中对齐
方法:
left:50%;让盒子的左侧移动到父级元素的水平中心位置
margin-left:-XXpx;让盒子左移动自身宽度的一半
上下移动是看高,左右移动是看宽
(2) 堆叠顺序(z-index)
加了定位的盒子,默认后来者居上,后面的盒子会压住前面的盒子
因此通过z-index层叠性可以调整盒子顺序
z-index的特性:
<1>属性值:正整数,负整数或0 ,默认值是0,数值越大,盒子越靠上;
<2>如果属性值相同,按照书写顺序,后来居上;
<3>数字后面不加单位
注意:z-index 只能应用于相对定位,绝对定位和固定定位的元素,其他标准流,浮动和静态定位无效
(3)定位改变display属性
<1>float默认将元素转换成行内块(类似,但并完全一样,因为浮动是脱标的)
<2>绝对定位和固定定位也和浮动类似,默认转换属性转换为行内块
因此如果一个行内盒子,如果有了固定定位或绝对定位或浮动,就不用在加display了,可以直接给宽高
注意:定位的盒子如果需要通栏,我们宽度就给100%
(4)浮动元素、绝对定位,固定定位的元素都不会触发外边距合并的问题,(我们以前使用padding boder overflow解决的),但是现在如果给盒子改了浮动或者定位,就不会有垂直外边距合并的问题了。
圆角矩形设置四个角,是有顺序的:
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
连写的格式:(顺时针)
border-radius: 左上角 右上角 右下角 左下角
没有写的要用0表示
圆角设置就是写成高度的一半,这样那个角就会变成圆角了
(5)想让某个盒子贴近版心的固定位置的话,其公式是:
left:50%
然后 往左走版心的一半 +自己的宽度