xpath定位元素⽅法_前端css基础篇（三）background背景元
素position。。。
⼀、 background背景元素
1. background-color背景颜⾊
可以简写 background；默认值是transparent。（透明） 不能继承
2. background-image背景图⽚
可以简写background
url（“图像的url路径地址”）图像的URL；
url
none 表⽰背景上没有设置任何图像，这是默认值；
none
inherit 指定背景图像应该从⽗元素继承
inherit
background-image：url（‘pic.png’）,url(‘pic1.png’)…可以引⼊多张图⽚
background-image
3.background-repeat背景重复
不可以简写background
指定如何重复背景图像，默认情况下，重复background-image的垂直和⽔平⽅向。
repeat 背景图像将向垂直和⽔平⽅向重复，默认
repeat
repeat-x 只有⽔平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
repeat-y
no-repeat background-image不会重复，不平铺
no-repeat
inherit 指定background-repea属性设置应该从⽗元素继承
４. background-position背景定位
background-position属性设置背景图像的起始位置
background-position
xpos ypos第⼀个值是⽔平位置，第⼆个值是垂直。左上⾓是0。单位可以是长度px，关键字和百分数值
xpos ypos
关键字成对出现left right top bottom center，如果仅指定⼀个关键字，其他值将会是"center"
x% y%
x% y% 第⼀个值是⽔平位置，第⼆个值是垂直。左上⾓是0%0%。右下⾓是100%100%.如果仅指定了⼀个⾓，其他值将是50%，默认0%0%
５. background-attachment背景关联
设置背景图像是否固定或者随着页⾯的其余部分滚动
scroll 背景图⽚随着页⾯的其余部分滚动- 默认
scroll
fixed 背景图像是固定的
fixed
inherit 指定backgrund-attachment的设置应该从⽗元素继承
inherit
6. background-size设置对象的背景图像的尺⼨⼤⼩
length⽤长度值指定背景图像⼤⼩、不允许负值
length
percentage⽤百分⽐指定背景图像⼤⼩。不允许负值
percentage
auto 背景图像的真实⼤⼩
auto
cover
cover 将背景图像等⽐缩放到完全覆盖容器，背景图像有可能超出容器
contain 将背景图像等⽐缩放到宽度或⾼度与容器的宽度与⾼度相等，背景图像始终被包含在容器内；
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 内容溢出的显⽰⽅式
overflow：hidden的多个作⽤
1.overflow：hidden
①溢出隐藏(超出内容之外的内容隐藏起来)
②⽤来清除浮动产⽣的影响
③解决margin-top的传递问题
overflow：auto浏览器⾃动判断内容是否超出元素的⾼度，如果超出就会出现滚动条，没有超出，则不显⽰滚动条
2.overflow：auto
overflow：scroll不管元素的宽⾼是否超出，都出现滚动条
3.overflow：scroll
三.让多个元素在⼀⾏显⽰的⽅法（⾯试题）
display:inline:（设置宽⾼属性不起作⽤）
（1）display:inline
display：inline-block；(会受空格/换⾏键的影响，会有默认的边距）
（2）display：inline-block
float：left/rigth；(需要清除浮动，给设置浮动元素的⽗元素设置overflow：hidden)
（3）float：left/rigth
【display：inline-block元素的特点】
① 让盒⼦横向排列
vertical-align属性会影响inline-block元素，你可能会把它的值设置为top
②vertical-align
③ 你需要设置每⼀列的宽度
解决办法：
④ 如果html源代码之间有空格，那么列与列之间会产⽣空隙解决办法
（1）去掉空格和换⾏键的影响，让标签都在⼀⾏（这种办法不推荐，阅读⾏差）
（2）给加了display：inline-block属性的元素的⽗元素加font-size为0；（⽂字内容会消失，需要在元素⾝上加⼀个font-size属性把⽗元素的font-size：0覆盖）----《推荐使⽤最佳⽅法》 )
【display：inline-block元素的兼容问题】
解决办法：在设置display：inline-block的元素⾥⾯加上
不兼容IE6 和IE7解决办法
*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的标签属性值添加了"#"号或者为空，可以做到回到顶部的作⽤
改变定位的层级关系borderbox
当定位元素是平级的时候，哪个元素在上⾯就设置哪个元素的z-index值，让它的z-index值最⾼，在最上⾯那层当定位的⽗级元素同时设置z-index值时，⼦级元素和⽗级元素相⽐较
是不⽣效的
五、float浮动
left 左浮动，是从左向右排布
left
right
right 右浮动，是从右向左排布
none 去掉浮动这个属性，不是清除浮动
none
（1）浮动的特点
脱离⽂档流（⽗级不到⼦级），相当于来到了第⼆层级，平⾏默认⽂档流之上
在不设置宽⾼时，宽⾼是由内容决定的
所有的元素都可以设置css浮动这个属性，⽆论是img，a，span，div… …
⾏内元素、⾏内块级元素和⽂字会围绕浮动元素排布（图⽂混编）
给元素设置了浮动这个属性，这个元素相当于⾏内块级元素（可以设置宽⾼）
css清除浮动的四种⽅法（⾯试题）
1.给⽗级元素设置⼀个⾼度，不管⼦级元素有没有内容，⾼度都是⼀定的
overflow：hidden；
2.给⽗级元素设置⼀个css属性overflow：hidden；
把⼦级元素拉回到⽂档流内
3.给最后⼀个浮动元素后⾯加<div ></div>(必须保证三个前提)
使⽤这个属性的元素必须是块级元素
使⽤这个属性的元素必须放在最后⼀个浮动元素之后
使⽤这个属性的元素不能带有float属性
4.利⽤伪元素来清除浮动
由图可见float浮动会影响其他元素布局， 块状元素，会钻进浮动元素的下⾯，被浮动元素所覆盖，
给设置浮动属性的⽗级元素添加clear伪元素后，下⾯div盒⼦脱离浮动影响，恢复正常布作者：志若鸿鹄，尺步⼨微
链接：前端css基础篇（三） background背景元素position定位以及清除浮动的四种⽅法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。