/* B元素默认不显示 */
.B {
display: none;
}
/* A元素hover时显示B */
.A:hover .B {
display: block;
}
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size: 14px;
transform: scale(0.8);
transform:scale()`这个属性只可以缩放可以定义宽高的元素,而行内元素是没有宽高的,我们可以加上一个`display:inline-block;
<div class="parent" style="background-color: gray;">
<div class="child" style="background-color: light-blue;">demo</div>
</div>
? 当被设置元素为定宽块级元素时用text-align:center;就不起作用了。可以通过设置“margin: 0 auto;”来实现居中的。
.child {
width: 200px;
margin: 0 auto;
}
在实际工作中,我们会遇到需要为“不定宽度的块级元素”设置居中,如网页上的分页导航,因为分页的数量是不确定的,所以,不能通过设置宽度来限制它的弹性。
可以直接给块级元素设置text-align:center;来实现,也可以给父元素加text-align:center;来实现居中效果。
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
.container {
text-align: center;
background: beige;
}
.container ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
.container li {
margin-right: 8px;
display: inline-block;
}
和水平居中一样,垂直居中,首先需设定两个条件即父元素是盒子容器且高度已经设定
? 这种情况下,需要通过设定父元素的line-height为其高度来使得子元素垂直居中
<div class="wrap line-height">
<span class="span">111111</span>
</div>
.wrap {
width: 200px;
height: 300px;
line-height: 300px;
border: 2px solid #ccc;
}
.span {
background: red;
}
可以通过给父元素设定display:table-cell;vertical-align:middle;来解决。
var(custom-property-name, value)
值 | 描述 |
---|---|
custom-property-name | 必需。自定义属性的名称,必需以 -- 开头。 |
value | 可选。备用值,在属性不存在的时候使用。 |
calc() 函数用于动态计算长度值。
width: calc(100% - 10px)
;原文:https://www.cnblogs.com/yxyc/p/14929319.html