HTML的学习

定位

2021-12-13  本文已影响0人  wy22

1.static

position 是定位属性,属性值包括:static(不定位,默认值)

2.relative

relative(相对定位),是相对于自己重新定位,通过top,bottom,left,right属性控制定位的偏移量

3.absolute

absolute(绝对定位)。绝对定位是根据离它最近的父级定位元素进行定位

如果它的父级中,没有定位元素,就根据浏览器的视口来定位

注意:绝对定位元素,会脱离标准文档流,所以,它下面的元素会去抢占它原来的位置

通常情况下:一个父容器里的子元素,如果要进行调整位置

父容器先设置为相对定位,并且不设置偏移量,子元素再设置为绝对定位,

这样,子元素就可以在该父元素中精细调整了

4.fixed

fixed(固定定位)。就是根据浏览器的视口进行定位

并且定位后的位置,不会随着浏览器滚动条的滚动而消失

5.z-index

元素定位后,默认情况下,后面的元素会盖住签名的元素

通过z-index属性,可以修改定位元素的层叠顺序,值越小越靠下,值越大越靠上,可以设置负数,默认值0

6.盒子水平和垂直方向居中

/* 子级设置为绝对定位 */position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;

非定位元素的实际宽度 = width + border-left + border-right + padding-left + padding-right + margin-left + margin-right

定位元素的实际宽度 = width + border-left + border-right + padding-left + padding-right + margin-left + margin-right + left + right

7.透明度

opacity属性,设置透明度,注意:是设置整个元素的透明度

取值范围是:0-1,0是全透明,1是不透明

8.背景样式补充

设置背景颜色 background-color

设置背景图片 background-image

设置背景平铺方式 background-repeat,默认是X轴和Y轴方向都平铺

设置背景图片的位置 background-position

设置背景图片的大小 background-size

设置背景的填充区域 background-clip

属性值有:

border-box 到边框,默认值

padding-box 到内填充

content-box 到内容

background-origin 只能设置背景图片的填充区域,不能控制背景颜色

background-attachment 设置背景图片的定位方式:

设置属性值为fixed,表示固定背景图片

在缩写属性中,如果同时设置了背景位置和背景大小,方式是:位置 / 大小

background:fixedurl()content-box40px40px/600px400px;

上一篇 下一篇

猜你喜欢

热点阅读