定位
默认定位(static)
这个属性在css中用于DOM元素,修改DOM的布局
假如我们并没有设置任何position属性浏览器会自动为所有DOM元素,添加position:static
相对定位(relative)
如果我们想在当前位置进行偏移,同时不影响整体页面布局。可以使用 relative
当我们想要将图片向下偏移时
.first {
position: relative;
left: 50px;
top: 50px;
}
left:50px,表示距离原来的位置左侧50px,
top:500px,表示距离原来位置的顶部50px。
但是其无论是left,right,top,bottom,的调整都是相对于当前元素static的位置布局进行调整的。
绝对定位(absolute)
相对定位并没有脱离文档流,但是绝对定位脱离了文档流。
相对定位相对于其默认的定位,但是绝对定位并不是。
1.文档第一张下面的所有 DOM元素,自动往上移动占据了第一张图片的位置,文档流(布局) 已经没有为第一张图预留空间了
2.第一张图片脱离了文档流,变成了第二个图层,再在新的图层中往右下偏移 50px。
在MND中
绝对定位absolute,表示不为元素预留空间,通过指定元素相对于最近的非static定位祖先元素的偏移,,来确定元素位置。
标注:cursor:pointer可以让我们鼠标停留在元素上,变成可点击的形状。
形式诸如:
position: absolute;
right: 0px;
top: 0px;
固定定位(fixed)
固定定位与绝对定位类似,但元素的包含块为屏幕视口。
固定定位不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
fixed中的使用跟上面相同都有着top,,bottom,left,,right之分。
如果标题被 固定后在移动时被遮挡。可以通过z-index来解决。
z--index可以改变不同图层的优先级。
1.默认非 static 元素的 z-index 都为0.
2.z-index 越大,则越在最上面,离观察者越近
3.同样的 z-index,在HTML 中的元素越靠后,则越在最上面,离观察者越近
粘性布局(sticky)
我们设置的标签随之滚动的距离是我们所设置的top,,bottom,left,right。当到达这个值时便固定到原位置不动。
Float
float 是 CSS 中最常用的布局属性,使用他可以让元素靠左或者靠右排版.
nav表示此区块是导航区块,main表示这块是网页的主体区域。
背景颜色
渐变方向
渐变方向使用的语义化英文实现,具体有如下值
to right / to left 向右/向左
to top / to bottom 向上/向下渐变
to right bottom / to right top 向右下/向右上渐变
to left bottom / to left top 向左下/向左上渐变
xxxdeg xxx范围(0到360) 更精确的渐变方向
渐变位置
渐变不一定是从开始到结束,我们可以设置各种中间状态。
们可以在每个色值后面跟一个值 百分比,PX,来约定变色起止位置。
背景图片
使用background-image:url(xxxxx);图片地址不需要引号包裹
1.背景出现重复
当背景图片长宽任意一项小于容器的长宽,默认 CSS 会让图片重复,直到铺满整个容器位置。
可以使用background-repeat:no-repeat;禁止图片的重复。
repeat 这是默认值,如果背景图片比容器小,将在垂直和水平方向进行重复
repeat-x 背景图片只在水平方向重复
repeat-y 背景图片只在垂直方向重复
no-repeat 背景图片将只显示一次,不重复
2.背景图片不居中
默认情况下,背景图片是从容器的左上角开始布局,为了使容器垂直水平居中,我们可以使用 background-position: center;解决。
高级特性
背景图片充满整个容器框
(以上图片仅供个人学习,诺侵权联系删除)
cover 就是满足图片长宽中较小的一方撑满屏幕。 contain 就是满足图片长宽中较大的一方撑满屏幕。
background合并写法
可以将
background-image: url(https://style.youkeda.com/img/ykd-components/logo.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
合并为
background: url(https://style.youkeda.com/img/ykd-components/logo.png)
no-repeat center / contain;