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 Server 2008 R2 上 Windows Update 无法失败，提示 8024402F

    1.同步服务器时间 2.打开 services.msc,停止 Windows Update Service 3.手动下载 KB3138615 补丁:https://support.microsoft. ...

  2. The underlying connection was closed: An unexpected error occurred on a send

    操作系统是Windows Server 2003 x64 SP2,使用Framework 4.0,在使用WebClient访问某些特定的HTTPS站点时,会引发异常: Unhandled Except ...

  3. XMind破解版，2019年8月好使

    越来越多的公司用思维导图了,进行编写测试用例,以下为破解版,亲身实验才发 的  ,中国时间2019年8月5日 下载安装包: 链接:https://pan.baidu.com/s/1-ubJLPSEpH ...

  4. Java自学-集合框架 泛型Generic

    ArrayList上使用泛型 步骤 1 : 泛型 Generic 不指定泛型的容器,可以存放任何类型的元素 指定了泛型的容器,只能存放指定类型的元素以及其子类 package property; pu ...

  5. mockjs 在项目中vue项目中使用

    一.为什么要使用mockjs 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模 ...

  6. VS2010 报错该文件包含不能在当前代码页(936)中表示的字符。请将该文件保存为 Unicode 格式以防止数据丢失

    尤其代码是从linux平台复制过来: 报错如图: 更有甚者基本函数都报错: 当下检查发现if else break case等基本函数并无问题时,报错行数明显不一致等一定要注意文档编码格式, 最简单的 ...

  7. Qt背景不显示问题

    背景不显示的只有主窗口会发生,原因是主窗口使用的QWidget类 解决办法 重构paintEvent事件,添加即可 void LoginWidget::paintEvent(QPaintEvent * ...

  8. cpu开多少线程合适（转）

    影响最佳线程数的主要因素: 1.IO 2.CPU 根据公式:服务器端最佳线程数量=((线程等待时间+线程cpu时间)/线程cpu时间) * cpu数量 一般来说是IO和CPU.IO开销较多的应用其CP ...

  9. Linux命令——ethtool

    转自:https://www.cnblogs.com/kelamoyujuzhen/p/10116423.html 参考:9 Linux ethtool Examples to Manipulate ...

  10. linux(02)基础shell命令

    Linux(02)之shell命令 一,Linux命令行的组成结构 在我们的linux启动,登陆成功之后会显示: 这就是linux的命令行的组成结构 二,常见命令 1,Linux系统命令操作语法格式 ...