• 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()函数使用标准的数学运算优先级规则;
  • 相关阅读:
    Context都没弄明白,还怎么做Android开发?
    Android中Drawable分类汇总
    查找首个非重复字符
    七个对我最好的职业建议(译文)
    Android:最全面的 Webview 详解
    Android开发之微信底部菜单栏实现的几种方法汇总
    android 底部菜单栏实现(转)
    Android实现顶部底部双导航界面功能
    Android BottomNavigationBar底部导航控制器的使用
    Android底部导航栏的四种实现
  • 原文地址:https://www.cnblogs.com/yxyc/p/14929319.html
Copyright © 2020-2023  润新知