HTML10 定位、背景

最新推荐文章于 2022-03-04 23:04:44 发布

ฅ逸魚

最新推荐文章于 2022-03-04 23:04:44 发布

阅读量105

点赞数

分类专栏： HTML+CSS 学习笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_47186832/article/details/110330586

版权

HTML+CSS 学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细解释了CSS中的定位属性（static, relative, absolute, fixed）及其应用，包括元素的层级管理和背景设置（如background-image, repeat, position, attachment）。实例演示了如何通过这些属性实现灵活的网页布局。

摘要由CSDN通过智能技术生成

1、定位

定位：
- 就是将指定的元素摆放到页面任意的位置
- 通过定位可以任意拜访元素
- 通过position来设置元素的定位
- 可选值：
  - static ：默认值，元素没有开启定位
  - relative ：开启元素的相对定位
  - absolute ：开启元素的绝对定位
  - fixed ：开启元素的固定定位（也是绝对定位的一种）
相对定位：
- 当元素的position属性设置为relative时，则开启了元素的相对定位
- 1、当开启了元素的相对定位，而不设置偏移量时，元素不会产生任何变化
- 2、当开启定位时（就是position属性值是一个非static值时）
  - 可以通过left、right、top、bottom四个属性来设置元素的偏移量
    - left ：元素相对于其定位位置的左边距离（左侧偏移量）
    - right ：元素相对于其定位位置的右边距离（右侧偏移量）
    - top ：元素相对于其定位位置的上边距离（上边偏移量）
    - bottom ：元素相对于其定位位置的下边距离（下边偏移量）
  - 通常偏移量只需要使用两个偏移量就可以对一个元素进行定位（一水平，一垂直）
- 3、相对定位是相对于元素在文档流中原来的位置进行定位
- 4、相对定位的元素不会脱离文档流
- 5、相对定位会使元素提升一个层级（原本能覆盖掉它的层反过来被他覆盖）
- 6、相对定位不会改变元素的性质，块元素还是块元素，内联还是内联
- ```
<style>
.box1{height:200px;background-color:red;position:relative;}
.box2{
	width:200px;
	height:200px;
	background-color:yellow;
	position:relative;
	left:200px;
	top:200px;
}
.box3{width:200px;height:200px;background-color:green;}
.s1{width:200px;height:200px;background-color:#00F;}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span class="s1">哈哈哈哈</span>
</body>
```
绝对定位：
- 当position属性设置为absolute时，则开启了绝对定位
- 绝对定位的特点：
  - 1、开启绝对定位会使元素脱离文档流
  - 2、开启绝对定位以后定位，不设置偏移量时，元素不会产生任何变化
  - 3、绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的
    - 如果所有的祖先元素都没有开启定位，那么就会相对于浏览器窗口进行定位
    - 一般来说，开启了子元素的绝对定位都会同时开启父元素的相对定位
  - 4、绝对定位会让元素提升一个层级
  - 5、绝对定位会改变元素的性质
    - 内联元素变成块元素
    - 块元素会被宽度和高度默认都被内容撑开
- ```
<style type="text/css">
.box4{height:200px;width:200px;background-color:red;}
.box5{
	width:200px;
	height:200px;
	background-color:yellow;
	position:absolute;
	left:100px;
	top:800px;
}
.box6{width:300px;height:300px;background-color:green;}
.box7{width:100px;height:100px;background-color:#bcf;}
.s2{
	width:100px;
	height:100px;
	background-color:#bcf;
	position:absolute;
}
</style>
<body>
<div class="box4"></div>
<div class="box5">
    <div class="box7"></div>
</div>
<div class="box6"></div>
<span class="s2">哈哈哈哈</span>
</body>
```

固定定位：

当元素的position属性设置fixed时，则开启了元素的固定定位
固定定位也是一种绝对定位，他的大部分特点都和绝对定位是一样
固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动
IE6不支持固定定位，如果要兼容的话，就要使用JS了

<style type="text/css">
.box11{
	width:200px;
	height:200px;
	background-color:red;
}
.box22{
	width:200px;
	height:200px;
	background-color:yellow;
	position:fixed;
	left:0px;
	top:0px;
}
.box33{
	width:200px;
	height:200px;
	background-color:green;
}
</style>
<body>
<div class="box11"></div>
<div class="box44" style="width:300px; height:300; background-color:#bcf;">
   <div class="box22"></div>
</div>
<div class="box33"></div>
</body>

元素的层级
- 如果定位元素的层级是一样的，那么在结构上下边的元素会盖住上边的元素
- 通过z-index属性可以用来设置元素的层级
- 可以为z-index属性指定一个正整数作为值，该值将会作为当前元素的层级
  - 层级越高，越先显示
  - 对于没有开启定位的元素不能使用z-index
- 父元素的层级再高，也不会盖住子元素

设置元素背景的透明：

opacity可以用来设置元素背景的透明
他需要一个0~1之间的值
- 0 ：表示完全透明
- 1 ：表示完全不透明
- 0.5 ：半透明
但是IE8及以下的浏览器不支持，所以需要filter来代替
- filter:alpha(opacity=透明的);
- 透明度需要0~100之间的值
- 这种方式支持IE6，只是在IE Tester中无法测试

<style>
.box41{
	width:200px;
	height:200px;
	background-color:red;
}
.box42{
	width:200px;
	height:200px;
	background-color:#CFF;
	position:absolute;
	left:100px;
	top:2100px;
	z-index:11;
	
}
.box43{
	width:200px;
	height:200px;
	background-color:green;
	position:relative;
	z-index:1;
}
.box55{
	width:200px;
	height:200px;
	background-color:orange;
	position:relative;
	z-index:20;
}
.box56{
	width:100px;
	height:100px;
	background-color:skyblue;
	position:absolute;
	z-index:10;
	opacity:0.5;
	filter:alpha(opacity=50);	
}
</style>
<body>
<div class="box41">41</div>
<div class="box42">42</div>
<div class="box43">43</div>
<div class="box55">
		<div class="box56">56</div>
</div>
</body>

2、背景

在box2里面的 background-attachment:fixed; 是相对于浏览器窗口进行定位的，
- 而box和浏览器窗口有默认的边距，所以只能显示一部分，还有一部分被藏起来了*/
background-image：设置背景图片
- 如果背景图片大于元素，默认会显示图片的左上角
- 语法：background-image:url(相对路径);
  - 相对路径写在哪，就相对于哪个文件夹
  - 如果背景图片小于元素大小，就默认将背景图片平铺以充满元素
  - 可以同时为一个元素指定背景颜色和背景图片，这样背景样式将会作为背景图片的底色
  - 一般情况下，都会将两者一起用
background-repeat：设置背景图片的重复方式
- 可选值:
  - repeat ：默认值，背景图片会双方向重复（平铺）
  - no-repeat ：背景图片不会重复，有多大就显示多大
  - repeat-x ：背景图像将在水平方向重复。
  - repeat-y ：背景图像将在垂直方向重复。
background-position：调整背景图片在元素中的位置
- 背景图片默认紧贴元素的左上角，使用background-position来调整背景图片在元素中的位置
- 可以使用top right left bottom center至少两个值组合来指定
  - 第二个值：垂直方向
    - 如果指定的值为正值，则图片向下移
    - 如果为负值，则图片向上移动
  - 第一个值：水平偏移量
    - 如果指定的值为正值，则图片向右移
    - 如果为负值，则图片向左移动
- 也可以指定偏移量：
  - 例如：top left 左上
  - 如果只给出一个值，则第二个值默认为center
background-attachment：设置背景图片是否随页面一起滚动
- 可选值：
  - scroll ：默认值，背景图像会随着窗口滚动
  - fixed ：背景图片会固定在某一位置，不随页面滚动。
    - 当背景图片的background-attachment设置为fixed时
    - 背景图片的浏览器永远相对于浏览器的窗口
- inherit ：规定应该从父元素继承 background-attachment 属性的设置。
  - 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素的

<style>
*{margin:0;padding:0;}
.box1{
	height:500px;
	width:500px;
	background-color:#bbf;
	margin:0 auto;
	background-image:url(hh.jpg);
	background-repeat:repeat-x;
}
.box2{
	height:1000px;
	background-color:#bfa;
	margin:0 auto;
	background-image:url(hhh.jpeg);
	background-repeat:no-repeat;
	/*background-position:left bottom;
	background-position:-100px -100px;*/
/*div是随着窗口滚动的，所以当窗口移动div不见时，图片也会不见*/
	background-attachment:fixed;	
}
body{
	background-image:url(hh.jpg);
	background-repeat:no-repeat;
	background-attachment:fixed; }
</style>
<body>
<body style="height:5000px;">
<div class="box1"></div>
<div class="box2"></div>
</body>

简写属性:
- 通过background可以同时设置所有背景相关的样式
- 并且没有顺序要求
- 没有数量的要求，不写的样式采用默认值
- 注意，和其他简写属性一样，如果单独将里面的属性重新定义在简写外的话
- 简写里面的默认值会覆盖掉你原先设置的值

<style type="text/css">
body{
	/*background-color:#bfc;
	background-image:url(hh.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:fixed;*/
	background:#bfc url(hh.jpg) center center no-repeat fixed;
}
</style>

<body>
<div class="box3"></div>
<!--<link rel="stylesheet" type="text/css" href="02701 外部脚本.css" />-->
</body>