css常见功能实现

Posted 2021-06-25 一星一辰

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 {
    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;
}

子元素是块级元素但子元素高度没有设定，在这种情况下，实际上是不知道子元素的高度的，无法通过计算得到padding或margin来调整。

可以通过给父元素设定display:table-cell;vertical-align:middle;来解决。

CSS 函数

CSS var() 函数

CSS 语法

var(custom-property-name, value)

值	描述
custom-property-name	必需。自定义属性的名称，必需以 -- 开头。
value	可选。备用值，在属性不存在的时候使用。

calc() 函数

定义与用法

calc() 函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；