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. Delphi - 16进制取反 Not

    //Not直接实现十六进制取反var I, J : word; begin I := $96E5; J := Not I; ShowMessage(Format('%x',[J])); end; 作者 ...

  2. 微信和QQ可以关闭广告了，每次能关6个月

    微信和QQ可以关闭广告了,这次腾讯真的是良心了,虽然不能完全关闭,但是每次能关6个月,也能清静不少时间. 关闭地址:点击进入

  3. C 数组、枚举类型enum

    传递数组给函数 告诉编译器函数要接受一个指针 skip //函数声明,数组的长度无需声明,因为编译器不会对形式参数进行边界检查 void myFunction(int param[]) //或者 vo ...

  4. 高强度学习训练第四天总结:JVM+Redis

    JVM 复习了JVM堆内存的几个模块. 复习了JVM的几个控制工具. 复习了JVM发展历史 Redis 复习了Redis的事务控制.

  5. pip python

    简介 pip 是一个安装和管理 Python 包的工具,python安装包的工具有easy_install, setuptools, pip,distribute.使用这些工具都能下载并安装djang ...

  6. 3-10 Pandas 常用操作

      1.构造数据 In [1]: import pandas as pd data=pd.DataFrame({'group':['a','a','a','b','b','b','c','c','c' ...

  7. django-图形验证码(django-simple-captcha)

    在网站开发的登录页面中,经常会需要使用到图形验证码来验证.在Django中,django-simple-captcha库包提供了图形验证码的使用. django-simple-captcha的安装 p ...

  8. Python语言基础01-初识Python

    本文收录在Python从入门到精通系列文章系列 1. Python简介 1.1 Python的历史 Python的创始人为吉多·范罗苏姆(荷兰语:Guido van Rossum) 1989年的圣诞节 ...

  9. Docker介绍及安装（一）

    一.Docker简介 1.1 docker介绍 Docker 使用 Google 公司推出的 Go 语言 进行开发实现,基于 Linux 内核的cgroup,namespace,以及 AUFS 类的 ...

  10. 201871010136—赵艳强《面向对象程序设计（java）》第十三周学习总结

    201871010136—赵艳强<面向对象程序设计(java)>第十三周学习总结   博文正文开头格式:(2分) 项目 内容 <面向对象程序设计(java)> https:// ...