css常见功能实现

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()函数使用标准的数学运算优先级规则;

css常见功能实现

上一篇:CSS(4)属性选择器(常用)


下一篇:net 通用接口返回类型