• z-index、display、selector选择器优先级css优先级面试用到


    z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面。
    relative、absolute、fixed这三种情况可以使用z-index。
    static不可以使用。

    display属性:
    常见属性值:
    1.none;隐藏对象(对象完全消失于文档流)而opacity:0;(透明度)完全透明,hidden也是隐藏,但是还留有位置。
    2.inline;指定对象为内联元素
    3.block; 指定对象为块元素
    4.inline-block;指定对象为内联块元素

    5.table-cell;指定对象作为表格单元格:
    我们在使用table时,单元格是有垂直居中的特性的。
    原因是单元格具有“table-cell”属性,我们为了使其他元素具有这种属性添加:
    display:table-cell;和vertical-align:middle;这两个属性,使它里面的内容可以居中显示。

    (加了table-cell属性的行内元素可以设置宽和高。)例子:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <style type="text/css">
    table,div{border: 1px solid red;}
    td,div{ 300px; height: 100px;}
    div{display: table-cell; vertical-align: middle;}
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td>allalalal</td>
    </tr>
    </table>
    <div>allalalal</div>
    </body>
    </html>
    此例两个显示一样。
    如果用line-height也可以做到,但是line-height要跟随元素的高度,如果修改需要手动修改,而
    table-cell是自适应的,比较方便。


    css优先级:
    优先级数值比较,以数值大的为准:(有一种更高的优先级!important,但是这不属于正常的形式,不建议使用。)
    style{行内样式} = 1000
    id=100
    class="10"
    element(元素也叫selector)=1
    通常面试时问到的css选择器是指“基础选择器”的优先级,如下:
    id>class>元素>*

    important>内联>ID>类>标签|伪类|属性选择器>伪元素>集成>通配符

  • 相关阅读:
    JAVA中的集合框架
    JAVA异常
    体检套餐
    浅谈面向对象三大编程的特征
    JAVA.C#堆和栈的区别
    linux 安装nginx 详解
    解决Fatal: Not a gitflow-enabled repo yet. Please run 'git flow init' first
    JMeter实现多用户并发功能测试-打卡功能测试
    关于Spring boot中读取属性配置文件出现中文乱码的问题的解决(针对application.properties)
    IDEA项目左边栏只能看到文件看不到项目结构
  • 原文地址:https://www.cnblogs.com/1111duguxiaoyu/p/6212678.html
Copyright © 2020-2023  润新知