1.CSS样式（选择器）的优先级？

1.1 权重的计算规则

  1. 第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。
  2. 第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
  3. 第二等：ID选择器，如：#header，权值为0100.
  4. 第三等：类选择器、如：.bar， 权值为0010.
  5. 第四等：类型（标签）选择器和伪元素选择器，如：div ::first-line 权值为0001.
  6. 通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
  7. 继承的样式没有权值。

[!NOTE]

CSS选择器的优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 其他

1.2 实际案例

<style>

    a{color: yellow;} /*权值：0,0,0,1*/

    div a{color: green;} /*权值：0,0,0,2*/

    .demo a{color: black;} /*权值：0,0,1,1*/

    .demo input[type="text"]{color: blue;} /*权值：0,0,2,1*/

    .demo *[type="text"]{color: grey;} /*权值：0,0,2,0*/

    #demo a{color: orange;} /*权值：0,1,0,1*/

    div#demo a{color: red;} /*权值：0,1,0,2*/

</style>

<body>

    <a href="">第一条应该是黄色</a> <!-适用第1行规则->

    <div class="demo">

    <input type="text" value="第二条应该是蓝色" /><!-适用第4、5行规则，第4行优先级高->

    <a href="">第三条应该是黑色</a><!-适用第2、3行规则，第3行优先级高->

    </div>

    <div id="demo">

    <a href="">第四条应该是红色</a><!-适用第5、6行规则，第6行优先级高->

    </div>

</body>

2.雪碧图的作用？

[!NOTE]

减少HTTP的请求次数，提高加载的性能

在一些情况下可以减少图片的大小

关键在于对background-position概念的理解和使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>购物车特效</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        .select{

            margin: 0 auto;

            display: block;

            width: 1000px;

            height: 35px;

            background-color:#F5FFFA;

        }

        div{

            width: 42px;

            height: 34px;

            background-image: url(amazon-sprite_.png);

            background-repeat: no-repeat;

            background-position: -8px -335px;

        }

        div:hover{

            background-image: url(amazon-sprite_.png);

            background-repeat: no-repeat;

            background-position: -55px -335px;

        }

    </style>

</head>

<body>

    <a href="https://www.baidu.com" target='_blank' class="select">

        <div></div>

    </a>

</body>

</html>

3.自定义字体的使用场景？

[!NOTE]

宣传/品牌/banner等固定文案

字体图标中使用

<style>

@font-face{

     font-family: '字体名称随便起';

     src: url('../font/字体名称.eot');

     src:url('../font/字体名称.woff') format('woff'),

         url('../font/字体名称.ttf') format('truetype'),

         url('../font/字体名称.svg') format('svg');

}

/* 使用方法：html中的代码中加一个h1或者其他的，里面写你自己想要的特殊文字 */

h1{

    font-size:36px;

    color:#ccc;

    font-family: "字体名称随便起";

}

</style>

4.Base64的使用？

4.1 概念

Base64就是一种基于64个可见字符(26个大写字母，26个小写字母，10个数字，1个+，一个 / 刚好64个字符)来表示二进制数据的表示方法。

[!NOTE]

扩展：不可见字符其实并不是不显示，只是这些字符在屏幕上显示不出来，比如：换行符、回车、退格......字符。

Base64字符表中的字符原本用6个bit就可以表示，现在前面添加2个0，变为8个bit，会造成一定的浪费。因此，Base64编码之后的文本，要比原文大约三分之一

4.2 原理

  • 第一步，将待转换的字符串每三个字节分为一组，每个字节占8bit，那么共有24个二进制位。
  • 第二步，将上面的24个二进制位每6个一组，共分为4组。
  • 第三步，在每组前面添加两个0，每组由6个变为8个二进制位，总共32个二进制位，即四个字节。
  • 第四步，根据Base64编码对照表（见下图）获得对应的值。

[!NOTE]

两个字节：两个字节共16个二进制位，依旧按照规则进行分组。此时总共16个二进制位，每6个一组，则第三组缺少2位，用0补齐，得到三个Base64编码，第四组完全没有数据则用“=”补上。因此，上图中“BC”转换之后为“QKM=”；

一个字节：一个字节共8个二进制位，依旧按照规则进行分组。此时共8个二进制位，每6个一组，则第二组缺少4位，用0补齐，得到两个Base64编码，而后面两组没有对应数据，都用“=”补上。因此，上图中“A”转换之后为“QQ==”；

4.3 作用

  • 用于减少HTTP请求
  • 适用于小图片
  • base64编码图片之后的体积约为原图的4/3

5.伪类和伪元素的区别？

  • 伪元素是真的有元素
  • 前者是单冒号，后者是双冒号
<style>

li:first-child {

    height: 20px;

    width: 100px;

    background-color: #139aff;

}

li:last-child {

    height: 60px;

    width: 100px;

    background-color: #89ff56;

    line-height: 60px;

}

p:first-of-type {

    background-color:  red;

}

p:last-of-type {

    background-color:deeppink;

}

/*每个p标签之前新增一个Hello文本*/

.container p::before {

    content: 'Hello';

}

.container p::after {

    content: 'Thanks';

}

.container p::first-letter {

    font-size: 32px;

}

.container p::first-line {

    background-color: #f1ffad;

}

/*所有选中的元素会变色*/

.container p::selection {

    background-color: #1025ff;

    color: red;

}

</style>

<body>

    <ul>

        <li>111</li>

        <li>222</li>

        <li>333</li>

        <li>444</li>

        <li>555</li>

    </ul>

<div>

    <h1>h1文本</h1>

    <p>p文本1</p>

    <p>p文本2</p>

    <p>p文本3</p>

    <p>p文本4</p>

</div>

<div class="container">

    <p> css1 </p>

    <p> css2 </p>

    <p> css3 </p>

    <p>我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素</p>

</div>

</body>

</html>

6.如何美化CheckBox？

[!NOTE]

  1. label[for]和id
  2. 隐藏原生的input
  3. :checked + label 选择器
<style>

#value1{

        display: none;

}

#value1:checked+label{

    color:blue;

    background: #4cda60;

}

#value1:checked+label:before{

    left:31px;

}

#value1+label{

    cursor: pointer;

    color:red;

    display: block;

    width:60px;

    height: 30px;

    background: #fafbfa;

    border-radius: 15px;

    position: relative;

    box-shadow:inset 0 0 0 0 #eee,0 0 1px rgba(0,0,0,0.4);

    transition: background 0.1s;

    -webkit-transition: background 0.1s;

    -moz-transition: background 0.1s;

    -o-transition: background 0.1s;

}

#value1+label:before{

    content:'';

    position: absolute;

    background: #fff;

    top:1px;

    left:1px;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    box-shadow:0 3px 1px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.3);

    transition: left 0.1s;

    -webkit-transition: left 0.1s;

    -moz-transition: left 0.1s;

    -o-transition: left 0.1s;

}

</style>

<body>

    <input type="checkbox" name="timeType" value="1" id="value1" checked="checked"/>

    <label for="value1"></label>

</body>

【前端知识体系-CSS相关】CSS基础知识强化的更多相关文章

  1. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  2. Atitit 知识图谱解决方案：提供完整知识体系架构的搜索与知识结果overview

    Atitit 知识图谱解决方案:提供完整知识体系架构的搜索与知识结果overview   知识图谱的表示和在搜索中的展1 提升Google搜索效果3 1.找到最想要的信息.3 2.提供最全面的摘要.4 ...

  3. 前端知识体系-NodeJS相关】NodeJS基础知识全面总结

    NodeJS基础知识 1. Node的全局对象和全局变量 1.1 全局对象:所有模块都可以调用的 global:表示Node所在的全局环境,类似于浏览器的window对象. process:该对象表示 ...

  4. C/C++知识总结 二 C/C++基础知识

    C/C++基础知识 C/C++基本格式说明 C/C++基本常识说明 C/C++基本格式说明 C语言基本格式 #include<stdio.h> //预处理文件 int main() //自 ...

  5. CSS选择器、层叠相关的基础知识

    CSS是Cascading Style Sheets的英文缩写,即层叠样式表.CSS2.1是W3C于2007年发布,现在推荐使用的.CSS3现在还处于开发中,有部分浏览器的新版本支持. 1. CSS ...

  6. 【前端知识体系-HTML相关】HTML基础知识强化总结

    1.如何理解HTML? HTML类似于一份word"文档" 描述文档的"结构" 有区块和大纲 2.对WEB标准的理解? Web标准是由一系列标准组合而成.一个网 ...

  7. 【前端知识体系-JS相关】JS基础知识总结

    1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...

  8. CSS的一些基础知识

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>标题&l ...

  9. 【前端知识体系-JS相关】对移动端和Hybrid开发的理解？

    1.hybrid是什么,为何使用hybrid呢? 概念: hybrid就是前端和客户端的混合开发 需要前端开发人员和客户端开发人员配合完成 某些环节也可能会涉及到server端 大前端:网页.APP. ...

  10. 【前端知识体系-JS相关】组件化和React

    1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...

随机推荐

  1. Windows Form父子两个窗体之间的传值测试

    1:先看测试的效果图: 2:全部的代码 using System; using System.Windows.Forms; namespace WindowsForms { public partia ...

  2. C/C++中new的使用规则

    本人未重视new与指针的使用,终于,终于在前一天船翻了,而且没有爬上岸: 故此,今特来补全new的用法,及其一些规则: 话不多说 C++提供了一种“动态内存分配”机制,使得程序可以在运行期间,根据实际 ...

  3. Mobx总结以及mobx和redux区别

    Mobx解决的问题 传统react使用的数据管理库为Redux.Redux要解决的问题是统一数据流,数据流完全可控并可追踪.要实现该目标,便需要进行相关的约束 Redux由此引出dispatch ac ...

  4. BBR加速 Centos

    BBR是什么 BBR 是 Google 提出的一种新型拥塞控制算法,可以使 Linux 服务器显著地提高吞吐量和减少 TCP 连接的延迟. BBR项目地址 https://github.com/goo ...

  5. 【转】Git使用教程之BUG分支

    1.bug分支 在开发中,会经常碰到bug问题,那么有了bug就需要修复,在Git中,分支是很强大的,每个bug都可以通过一个临时分支来修复,修复完成后,合并分支,然后将临时的分支删除掉. 比如我在开 ...

  6. Linux 初识Libevent网络库

    初识Libevent libevent是用c写的高并发网络io库,只要有文件描述符,就都可使用libevent. libevent使用回调函数(callback) . 有了libevent,网络编程我 ...

  7. I2C 挂死，SDA一直为低问题分析【转】

    转自:https://blog.csdn.net/winitz/article/details/72460775 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csd ...

  8. 程序员代码面试指南 IT名企算法与数据结构题目最优解

    原文链接 这是一本程序员面试宝典!书中对IT名企代码面试各类题目的最优解进行了总结,并提供了相关代码实现.针对当前程序员面试缺乏权威题目汇总这一痛点,本书选取将近200道真实出现过的经典代码面试题,帮 ...

  9. DVWA之CSRF

    CSRF:跨站请求伪造攻击 Security:Low 级别分析 核心代码 输入数据,以便Burp代理获得请求参数        这里可以将第一行拿出来进行构造链接, http://202.100.10 ...

  10. 论文笔记系列-AutoFPN

    原论文:Auto-FPN: Automatic Network Architecture Adaptation for Object Detection Beyond Classification 之前 ...