本文详细讲解了CSS中的背景元素属性，包括background-color、background-image、background-repeat、background-position等，并探讨了清除浮动的四种方法，如设置overflow、使用伪元素等。此外，还介绍了position定位，包括relative、absolute和fixed的区别，以及浮动元素的特点和清除浮动的实践应用。
一、 background背景元素
1. background-color背景颜色
可以简写 background；默认值是transparent。（透明） 不能继承
2. background-image背景图片
可以简写background
- url（“图像的url路径地址”）图像的URL；
- none 表示背景上没有设置任何图像，这是默认值；
- inherit 指定背景图像应该从父元素继承
- background-image：url（‘pic.png’）,url(‘pic1.png’)…可以引入多张图片
3.background-repeat背景重复
不可以简写background
- 指定如何重复背景图像，默认情况下，重复background-image的垂直和水平方向。
- repeat 背景图像将向垂直和水平方向重复，默认
- repeat-x 只有水平位置会重复背景图像
- repeat-y 只有垂直位置会重复背景图像
- no-repeat background-image不会重复，不平铺
- inherit 指定background-repea属性设置应该从父元素继承
４. background-position背景定位
- background-position属性设置背景图像的起始位置
- xpos ypos第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是长度px，关键字和百分数值
- 关键字成对出现left right top bottom center，如果仅指定一个关键字，其他值将会是"center"
- x% y% 第一个值是水平位置，第二个值是垂直。左上角是0%0%。右下角是100%100%.如果仅指定了一个角，其他值将是50%，默认0%0%
５. background-attachment背景关联
- 设置背景图像是否固定或者随着页面的其余部分滚动
- scroll 背景图片随着页面的其余部分滚动- 默认
- fixed 背景图像是固定的
- inherit 指定backgrund-attachment的设置应该从父元素继承
6. background-size设置对象的背景图像的尺寸大小
- length用长度值指定背景图像大小、不允许负值
- percentage用百分比指定背景图像大小。不允许负值
- auto 背景图像的真实大小
- cover 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器
- contain 将背景图像等比缩放到宽度或高度与容器的宽度与高度相等，背景图像始终被包含在容器内；
7、background-origin设置背景图像的参考原点（位置）
- padding-box：从padding区域（含padding)开始显示背景图像；
- border-box：从border区域（含border）开始显示背景图像
- content-box：从content区域开始显示背景图像；
8. background-clip设置对象的背景图像向外裁剪的区域
- padding-box：从padding区域（不含padding）开始向外裁剪背景
- border-box：从border区域（不含border）开始向外裁剪背景
- content-box：从content区域开始向外裁剪背景；
- text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果
二．overflow 内容溢出的显示方式
1.overflow：hidden的多个作用
①溢出隐藏(超出内容之外的内容隐藏起来)
②用来清除浮动产生的影响
③解决margin-top的传递问题
2.overflow：auto浏览器自动判断内容是否超出元素的高度，如果超出就会出现滚动条，没有超出，则不显示滚动条
3.overflow：scroll不管元素的宽高是否超出，都出现滚动条
三.让多个元素在一行显示的方法（面试题）
（1）display:inline:（设置宽高属性不起作用）
（2）display：inline-block；(会受空格/换行键的影响，会有默认的边距）
（3）float：left/rigth；(需要清除浮动，给设置浮动元素的父元素设置overflow：hidden)
【display：inline-block元素的特点】
① 让盒子横向排列
②vertical-align属性会影响inline-block元素，你可能会把它的值设置为top
③ 你需要设置每一列的宽度
④ 如果html源代码之间有空格，那么列与列之间会产生空隙
解决办法：
（1）去掉空格和换行键的影响，让标签都在一行（这种办法不推荐，阅读行差）
（2）给加了display：inline-block属性的元素的父元素加font-size为0；（文字内容会消失，需要在元素身上加一个font-size属性把父元素的font-size：0覆盖）----《推荐使用最佳方法》 )
【display：inline-block元素的兼容问题】
不兼容IE6 和IE7
解决办法：在设置display：inline-block的元素里面加上
*display：inline;/* css hack */ ie浏览器可以识别
*zoom：1；/* 触发css hack 的layout*/
四、position定位
position：relative；相对定位
- 不脱离文档流
- 发生位置改变时，原来的位置还占用
- 层级大于文档流其他元素（会盖在其他元素之上）
- 参照物是本身
- 给绝对定位当参照物-常用
- 相对定位同时设置top和bottom值时top生效。同时设置left和right时，left生效
- 当盒子本身自己发生变化，而不影响其他元素，这时我们就可以用相对定位
position：absolute；绝对定位
脱离文档流
- 在不设置参照物时，参照物是body
- 人为设置参照物时，需要这个绝对定位的父级元素
- 参照物必须带有定位属性
- 平级之间不能作为参照物来用
- 当绝对定位不设置四个方向值时，这个绝对定位元素前面有其他元素，就会默认排在这个元素的后面
- 同时设置top和bottom值时top生效。同时设置left和right时，left生效
- 当绝对定位在设置宽高为100%时，继承的是参照物的宽度和高度
固定定位 position：fixed；
- 参照物是可视窗口
- 当固定定位不设置宽高时，宽高是由本身决定的
- 一般用在页面中的侧边导航或者回到顶部
<a href="#">回到顶部</a>
给href的标签属性值添加了"#"号或者为空，可以做到回到顶部的作用
改变定位的层级关系
- 当定位元素是平级的时候，哪个元素在上面就设置哪个元素的z-index值，让它的z-index值最高，在最上面那层
- 当定位的父级元素同时设置z-index值时，子级元素和父级元素相比较
是不生效的
五、float浮动
- left 左浮动，是从左向右排布
- right 右浮动，是从右向左排布
- none 去掉浮动这个属性，不是清除浮动
（1） 浮动的特点
脱离文档流（父级找不到子级），相当于来到了第二层级，平行默认文档流之上
- 在不设置宽高时，宽高是由内容决定的
- 所有的元素都可以设置css浮动这个属性，无论是img，a，span，div… …
- 行内元素、行内块级元素和文字会围绕浮动元素排布（图文混编）
- 给元素设置了浮动这个属性，这个元素相当于行内块级元素（可以设置宽高）
css清除浮动的四种方法（面试题）
1.给父级元素设置一个高度，不管子级元素有没有内容，高度都是一定的
2.给父级元素设置一个css属性overflow：hidden；
把子级元素拉回到文档流内
3.给最后一个浮动元素后面加<div style="clear-both"></div>(必须保证三个前提)
- 使用这个属性的元素必须是块级元素
- 使用这个属性的元素必须放在最后一个浮动元素之后
- 使用这个属性的元素不能带有float属性
4.利用伪元素来清除浮动
<style>
.clear:after{
display:block;
content:"";
clear:both;/**清除浮动--兼容高版本浏览器**/
}
.clear{
*zoom:1;/**兼容低版本浏览器**/
}
</style>
用伪元素清除浮动示例
<style>
*{margin:0;padding:0;}
ul{
list-style:none}
li{
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div style="height:200px;background: orange;" >
</body>
由图可见float浮动会影响其他元素布局， 块状元素，会钻进浮动元素的下面，被浮动元素所覆盖，
<style>
.clear:after{
display:block;
content:"";
clear:both;/**清除浮动--兼容高版本浏览器**/
}
.clear{
*zoom:1;/**兼容低版本浏览器**/
}
*{margin:0;padding:0;}
ul{
list-style:none}
li{
float: left;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<ul class="clear">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div style="height:200px;background: orange;" >
</body>
给设置浮动属性的父级元素添加clear伪元素后，下面div盒子脱离浮动影响，恢复正常布局
扫一扫
1072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
