css常见功能实现
CSS实现hover控制显示隐藏
/* B元素默认不显示 */
.B {
display: none;
}
/* A元素hover时显示B */
.A:hover .B {
display: block;
}
利用translate()进行水平垂直居中
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
对于默认字体最小为12px解决方法
font-size: 14px;
transform: scale(0.8);
transform:scale()`这个属性只可以缩放可以定义宽高的元素,而行内元素是没有宽高的,我们可以加上一个`display:inline-block;
水平居中问题
如果被设置的元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将子元素的设置为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 {
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 {
200px;
height: 300px;
line-height: 300px;
border: 2px solid #ccc;
}
.span {
background: red;
}
子元素是块级元素但子元素高度没有设定,在这种情况下,实际上是不知道子元素的高度的,无法通过计算得到padding或margin来调整。
可以通过给父元素设定display:table-cell;vertical-align:middle;来解决。
CSS 函数
CSS var() 函数
CSS 语法
var(custom-property-name, value)
值 | 描述 |
---|---|
custom-property-name | 必需。自定义属性的名称,必需以 -- 开头。 |
value | 可选。备用值,在属性不存在的时候使用。 |
calc() 函数
定义与用法
calc() 函数用于动态计算长度值。
- 需要注意的是,运算符前后都需要保留一个空格,例如:
calc(100% - 10px)
; - 任何长度值都可以使用calc()函数进行计算;
- calc()函数支持 "+", "-", "*", "/" 运算;
- calc()函数使用标准的数学运算优先级规则;