慕课网CSS工作应用+面试（2）

深碍√TFBOYSˉ_ 2022-03-15 11:38 234阅读 0赞

**3.CSS基础**

全面讲解CSS基础知识，包括层叠样式表的基本规则和含义、选择器（分类、特性、权重、性能）、非布局样式属性、CSS hack以及一些案例分析（checkbox等）。

3.1选择器

CSS（Cascading Style Sheet）层叠样式表

**A.CSS权重问题：**

内联样式 > style样式 > link

选择器权重：  
内联样式，如`style=" "`，权值为1000.  
ID选择器，如`#contene`，权值为100  
class选择器、伪类选择器、属性选择器，权重为10  
元素、伪元素，权重为1

除了考虑权重，还有下面可能影响样式显示：  
1.！important  
2.元素属性，优先级高（内联样式研究生）  
3.相同权重，后写的生效

附注：在不进位的数字计算下，并不是10个类选择器可以等于一个ID选择器，只要有ID选择器就大过类选择器。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]  
上面11个类选择器权重还是不如ID选择器高。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

上面文本Dijkstra的颜色是orange。

**继承**：关于继承，如果设置了样式，就不会继承了，看下面示例。

//不会继承yellow这个颜色
    .father{
      color: yellow;
    }
    .father span{
      color: red;
    }
    #jicheng{
      color: blue;
    }
    
    <div class="father">
      <p id="jicheng">样式继承</p>
      <p><span>样式继承</span></p>
    </di

**！import对样式设置影响**

在CSS中，有一个特别的语法可以让一条规则总是优先于其他规则：!important。把它加在属性值的后面可以使这条声明有无比强大的力量。

#test p{
      color: blue;
    }
    .fontstyle{
      color:red !important;
    }
    
    <div id="test">
      <p class="fontstyle">
        !important
      </p>
    </div>

覆盖`!important`可以用另外一个`!important`

**B.浏览器解析CSS方式：**

从右往左解析，加快浏览器对CSS解析速度，更快找到CSS样式对应元素。

比如下面，是从.hello -> div -> body 进行解析

body div .hello{
    	color:red;
    }

**C.选择器分类：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]  
伪选择器不是选择元素，而是元素的某些部分，或仅在某些特定上下文中存在的元素。它们有两种主要类型 ： 伪类和伪元素。

**伪类选择器：**

和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

由于【状态】是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

//在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。
    a:link|a:visited|a:hover|a:active
    
    :focus
    /* 伪类将应用于拥有键盘输入焦点的元素。 */
    :first-child
    /* 伪类将应用于元素在页面中第一次出现的时候。 */
    :lang
    /* 伪类将应用于元素带有指定lang的情况。 */

**伪元素选择器**

伪元素选择器，伪元素的效果是需要通过添加一个实际的元素才能达到的。

伪元素只是在页面显示的时候起了作用，在构建dom树的时候它被忽略的

/* 为某个元素的第一行文字使用样式。 */
    ::first-line
    /* 为某个元素中的文字的首字母或第一个字使用样式。 */
    ::first-letter
    /* 在某个元素之前插入一些内容。 */
    ::before
    /* 在某个元素之后插入一些内容。 */
    ::after

伪类是一种状态，对一种状态设置样式。

伪元素是不会出现在HTML中，也不会出现在DOM树中，但是是一个真实存在的元素，可以显示内容，设置样式。

参考文章：  
[https://www.cnblogs.com/zcynine/p/5008985.html][https_www.cnblogs.com_zcynine_p_5008985.html]  
[https://www.cnblogs.com/EricZLin/p/8857405.html][https_www.cnblogs.com_EricZLin_p_8857405.html]

3.2非布局样式

与布局无关的样式设置

文字：字体、字重、颜色、大小、行高  
盒子：背景、边框  
页面：滚动、换行  
装饰性样式：粗体、斜体、下划线  
其他

**字体**

字体族、多字体fallback、网络字体/自定义字体、iconfont

**行高line-height**

行高的构成：行高是由linebox决定的，linebox是由inlinebox组成的，inlinebox的高度会决定行高的高度。

![在这里插入图片描述][20190322164119748.png]

每一行称为一条Line Box，它又是由这一行的许多inline-box组成，它的高度可以直接由line-height决定，line boxes的高度垂直堆叠形成了containing box的高度，就是我们见到的div或是p标签之类的高度了。

可以参考：[https://segmentfault.com/a/1190000005155084][https_segmentfault.com_a_1190000005155084]

再看一个例子：

<div style="border:solid 1px red;">
            <span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
                居中xfg 
            </span></div>
    <div class="c1">

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]  
line-height大于字体size时候，会在外部有对应的块盒子模型。

为什么设置height和line-height一样时候会垂直居中，因为子元素会在line-height自动垂直居中。

一个问题：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]  
如上图，会出现一段空白，原因是img相当于inline元素，inline元素就要遵守行高的构成，会按baseline对齐，也就是基线对齐，基线到底线之间会有空隙，那如何解决（图片下面有空隙怎么办？如何清除？）？

原理就是会按inline进行排版，排版时候字体对齐，默认按照baseline对齐，baseline和底线之间有偏差，这个问题也有称经典的图片3px问题，解决方法是第一种设置对齐方式`vertical-align:bottom`或者改变inline设置`display:block`

**背景**

背景颜色、渐变色背景、多背景叠加、背景图片和属性（雪碧图）、base64和性能优化、多分辨率适配

hsl：色相、饱和度、亮度  
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

渐变色背景：

//线性渐变
    background: linear-gradient(red, blue); /* 标准的语法 */
    
    //径向渐变
    background: radial-gradient(red, green, blue); /* 标准的语法 */

雪碧图：

.c2{
        width:20px;
        height:20px;
        background:url(./test_bg.png) no-repeat;
        background-position: -17px -5px;
        background-size: 261px 113px;
    }
    .c3{
        width:20px;
        height:20px;
        background:url(./test_bg.png) no-repeat;
        background-position: -169px -23px;
        background-size: 261px 113px;
    }
    
    <div class="c2">
    
    </div>
    <div class="c3">
    
    </div>

原图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]  
效果图（利用偏移实现）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]  
多分辨率适配：利用background-size把大图做小。

base64：文本格式，代替url，节省HTTP连接数，但是体积增大，图片本身体积增大（4/3），相当于文件从img下图片增加到css中，css文件增大，所以适合比较小的图标，比如loading图标。  
还有base64在传输上有优势，也就是节省HTTP连接数，但是一是增加了体积，二是增加了解码的工作（从base64到图片），我们实际工作中写的时候还是图片，到打包的时候再转base64.

**边框**

边框的属性：线型、大小、颜色

边框背景图

边框衔接（三角形）

//利用边框绘制出一个三角形
    .c3{
         width:400px;
         height: 200px;
         border-bottom:30px solid red;
         /* border-right:30px solid blue; */
         border-left:30px solid transparent;
         border-right:30px solid transparent;
    }

![在这里插入图片描述][20190322212341523.png]

**滚动**

内容比容器多的时候产生滚动。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]  
**文本折行**

overflow-wrap（word-wrap）：通用换行控制

word-break：针对多字节文字（是否把字母看成一个单位）

white-space：空白处是否断行

**装饰性属性**

字重（粗体）font-weight  
斜体 font-style：itatic  
下划线 text-decoration  
指针 cursor

3.3hack和案例

我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

CSS Hack：Hack即不合法但生效的写法，主要用于区别不同浏览器。

Hack缺点：难理解 难维护 易失效

替代方案：  
1.特性检测  
2.针对性加class

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。  
1.属性前缀法(即类内部Hack)：例如 IE6能识别下划线`"_"`和星号`" * "`，IE7能识别星号`" * "`，但不能识别下划线`"_"`，IE6~IE10都认识`"\9"`，但firefox前述三个都不能认识。  
2.选择器前缀法(即选择器Hack)：例如 IE6能识别`*html .class{}`，IE7能识别`*+html .class{}`或者`*:first-child+html .class{}`。  
3.IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ``，针对IE6及以下版本： ``。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

更多参考文章：[https://www.cnblogs.com/mumble/p/4576489.html][https_www.cnblogs.com_mumble_p_4576489.html]

3.4面试题

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

计算权重确定  
！import（能覆盖的就是再对另外加！import）  
内联样式  
后写的优先级高

2.雪碧图的作用

主要利用background-position

作用是减少HTTP请求数，提高加载性能

有一些情况下可以减少图片大小（比较有限）

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

宣传/品牌/banner等固定文案  
字体图标

4.base64的使用

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

5.伪类和伪元素的区别

伪类表示一种状态  
伪元素是真的有元素（before、after）  
前者单冒号，后者双冒号（大部分浏览器）

6.如何美化checkbox

label\[for\]和id  
隐藏原生input  
：checked+label

具体可以看视频Hack和案例（2）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220315/520f48b167124805b0cf02aeb9d6f9e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220315/3068d9390a6e4781b181b78bb703cf33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220315/19a6c9aaeda544099e110046ebe65973.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220315/ba5d2135c5924c06ad69357b43ef1a4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220315/501fa7e2f60f4b45b542a429f640de59.png
[https_www.cnblogs.com_zcynine_p_5008985.html]: https://www.cnblogs.com/zcynine/p/5008985.html
[https_www.cnblogs.com_EricZLin_p_8857405.html]: https://www.cnblogs.com/EricZLin/p/8857405.html
[20190322164119748.png]: /images/20220315/e0906407261f45fdb974497c9c8de587.png
[https_segmentfault.com_a_1190000005155084]: https://segmentfault.com/a/1190000005155084
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20220315/61ee814db3cd452e89157c1a0a003b53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20220315/f8b414dd45fe4c67ad68b9a572665c09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 7]: /images/20220315/baad4d5254ba4e5883f43fd4193f29cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 8]: /images/20220315/64ccbaabec7b4bd5884bea7efa48caf7.png
[20190322212341523.png]: /images/20220315/a1bb54b8589349bf8b61209e61511c77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 9]: /images/20220315/fd20ace54a9747da901743f757828e44.png
[https_www.cnblogs.com_mumble_p_4576489.html]: https://www.cnblogs.com/mumble/p/4576489.html