背景位置 精确设定
[tabs]
[tab name=”属性” active=”true”]
1.背景位置
background-position：x y；
此属性可以改变图片在背景中的位置。
x y 代表坐标（length或position）
a.方位名称
top left right center bottom
如果只指定了一个方位名词，第二名词默认居中
b.精确位置
background-position：20px,20px;
如果只指定一个参数，一定是x的，y默认居中。
c.混合单位
精确单位和方位名词混合使用
2.文字在块元素中居中
line-height= 盒子高度；
3.背景固定
background-attachment
参数：scroll （滚动，默认属性） fixed（固定）
4.背景色半透明
background：rgba（0,0,0,0.3）
最后一个参数为alpha透明度
盒子半透明，文字不受影响
[/tab]
[tab name=”案例”]
<style>
.nav a{
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
line-height: 58px;
text-align: center;
color: #fff;
text-decoration: none;
}
.nav .bg1:hover {
background-color: red;
}
.nav .bg2:hover {
background-color: green;
}
.nav .bg3:hover {
background-color: blue;
}
.nav .bg4:hover {
background-color: yellow;
}
.nav .bg5:hover {
background-color: orange;
}
</style>
<body>
<div class="nav">
<a href="#" class="bg1">梦溪导航</a>
<a href="#" class="bg2">梦溪导航</a>
<a href="#" class="bg3">梦溪导航</a>
<a href="#" class="bg4">梦溪导航</a>
<a href="#" class="bg5">梦溪导航</a>
</div>
</body>[/tab]
[/tabs]
inline、block和inline-block的区别
block
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（很霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
inline
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
inline-block
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
