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. PHP获得毫秒数

    因为前端需要写函数处理时间戳,比较麻烦,所以我们有的时候,需要接口传递毫秒数给前端. 下面可以通过这个函数来获得毫秒数 <?php function getMillisecond() { lis ...

  2. mp4文件格式解析二

    目前MP4的概念被炒得很火,也很乱.最开始MP4指的是音频(MP3的升级版),即MPEG-2 AAC标准.随后MP4概念被转移到视频上,对应的是MPEG-4标准.而现在我们流行的叫法,多半是指能播放M ...

  3. 【初识Spring】对象（Bean）实例化及属性注入（注解方式）

    通过xml的方式进行对象的实列化或属性注入或许有一些繁琐,所以在开发中常用的方式更多是通过注解的方式实现对象实例化和属性注入的. 开始之前 1.导入相关的包(除了导入基本的包还要导入aop的包): 创 ...

  4. ios 点击webview获取图片url （js交互）

    加手势 -(void)handleSingleTap:(UITapGestureRecognizer *)sender { CGPoint pt = [sender locationInView:_c ...

  5. EM算法-完整推导

    前篇已经对EM过程,举了扔硬币和高斯分布等案例来直观认识了, 目标是参数估计, 分为 E-step 和 M-step, 不断循环, 直到收敛则求出了近似的估计参数, 不多说了, 本篇不说栗子, 直接来 ...

  6. odoo10学习笔记十三：qweb报表

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189336.html 一:概述 报表是使用qweb定义的,报表的pdf导出是使用wkhtmltopdf来完 ...

  7. 简单C语言程序

    #include<stdio.h> int main(void) { /* 计算两个时间的时间差 */ int hour1, minute1; int hour2, minute2; pr ...

  8. nginx geoip_module 地域信息读取

    1.安装geoip yum -y install nginx-module-geoip 2.安装完成后在cd /etc/nginx/modules/ 能看到安装的模块 # cd /etc/nginx/ ...

  9. jQuery的DataTables中的TableTools的基本使用

    DataTables的TableTools插件提供复制,导出excel.pdf,打印等功能. DataTables官网:http://datatables.net TableTools示例:http: ...

  10. day17_7.19包与logging模块，深浅拷贝

    一.包 在模块的定义里,模块就是方法的集合,可以将一些常用的方法封装到一个py文件中,通过调用使用,而且,其中的表现形式也有以包的形式导入. 其实,包就是一系列模块的结合体,表示形式就是一个文件夹,在 ...