• 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 {
         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()函数使用标准的数学运算优先级规则;
  • 相关阅读:
    November 13th 2016 Week 47th Sunday The 1st Day
    November 12th 2016 Week 46th Saturday
    November 11th 2016 Week 46th Friday
    November 10th 2016 Week 46th Thursday
    November 9th 2016 Week 46th Wednesday
    November 8th 2016 Week 46th Tuesday
    windows 7文件共享方法
    Win7无线网络共享设置方法
    常量指针和指针常量
    如何查找局域网的外网ip
  • 原文地址:https://www.cnblogs.com/yxyc/p/14929319.html
Copyright © 2020-2023  润新知