在上篇文章中，我们再次学习了html的基础内容，本篇文章，我们再来学习一下css的基础内容。走起👉
一、选择器的分类
谈起css选择器，我就想给大家推荐一本由张鑫旭大神写的书《css的选择器》，大神在这本书中讲的很详细，遗憾的是我并没有阅读完这本书。关于css中的选择器，我罗列在下面的表格当中，你可以参阅一下：
| selector | demo |
|---|---|
| 元素选择器 | a{} |
| 伪元素选择器 | ::before{} |
| 类选择器 | .link{} |
| 属性选择器 | [type=radio]{} |
| 伪类选择器 | :hover{} |
| ID选择器 | #id{} |
| 组合选择器 | [type=checkbox] + label {} |
| 否定选择器 | :not(.link){} |
| 通用选择器 | *{} |
一、选择器权重
网页中的css样式会发生样式重叠的情形，在相同权重的情况下，写在后面的样式会覆盖写在前面的样式。但是在权重不同的情况下，权重大的自然会占有优先的权利。例如ID选择器和添加!important标记的样式，大致的计算规则如下表。此表只是用估算，并不具有完全适用的绝对意义。
| selector | 权重 |
|---|---|
| ID选择器 #id{} | +100 |
| 类 伪类 | +10 |
| 元素 伪元素 | +1 |
| 其他选择器 | +0 |
两个例子
| #id .link a[href] | #id .link.active |
|---|---|
| #id +100 | #id +100 |
| .link +10 | .link +10 |
| a+1 | .active +10 |
| [href] + 0 | - |
| 结果： 111 | 结果： 120 |
由计算的结果可知，第二个样式会占有预先权。但是您需要注意一点并不是11个.link 就可以等同于1个#id，不管有多少个.link,都不可能超过#id。
选择器权重
| 选择器权重 |
|---|
| ！important优先级最高 |
| 元素属性 优先级高 |
| 相同权重 后写的生效 |
三、文本折行
| 属性以及介绍 | 作用 |
|---|---|
| overflow-wrap（word-wrap） 通用换行符 | 是否保留单词 |
| word-break 针对多子节文字 | 中文句子也是单词 |
| white-space | 空白处是否断行, |
overflow-wrap:break-word:打断单词，但是依然保证单词的完整性。
overflow-wrap:break-word
overflow-wrap:break-all:打断所有的单词。
overflow-wrap:break-all
word-break:keep-all:让所有的单词保持完整性，中文的句子也保持完整性。
word-break:keep-all
white-space:nowrap:让句子不换行
white-space:nowrap
四、float属性的解释
1、float属性的特性
1、元素“浮动”
2、脱离文档流
3、但不脱离文本流
2、对兄弟的影响
1、上面贴非float元素
2、旁边贴float元素
3、不影响其他块级元素的位置
4、影响其他块级元素内部文本
3、对自身的影响
1、形成“块”（BFC）
2、位置尽量靠上
3、位置尽量靠左（右）
中间没有浮动的元素阻止了右侧浮动元素向上靠
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
.left{float:left;width:200px;margin-left:200px}
.right{float:right;width:200px;margin-right:200px}
.middle{}
解决这个问题的方法就是将HTML代码进行重新排行
<div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
五、css面试真题
问题一：CSS样式（选择器）的优先级
答案见上文。
问题二：雪碧图的作用
1、减少HTTP请求数 提高加载性能
2、有一些情况下可以减少图片大小
问题三：实现两栏三栏布局的方法
1、表格布局
2、float+margin布局
3、inline-block布局
4、flexbox布局
问题四：position:absolute/fixed有什么区别？
前者相对最近的absolute/relative
后者相对屏幕（viewport）
问题五：display:inline-block的间隙？
原因：字符间距
解决： 消灭字符或者消灭间距
问题六：如何清除浮动？
让盒子负责自己的布局（BFC）
overflow：hidden
::after{clear:both}
问题七：如何适配移动端页面？
viewport
rem/viewport/media query
设计上：隐藏 折行 自适应
问题八：自定义字体的实用场景？
1、宣传/品牌/banner等固有文案
2、字体图标
问题九：base64的使用？
1、用于减少HTTP请求
2、适用于小图片
3、base64的提及约为原图的4/3
问题十：伪类和伪元素的区别？
伪类表示状态
伪元素是真的有元素
前者单冒号，后者双冒号
问题十一：如何美化checkbox？
label[for]和id
隐藏原生input
：checked + label
网友评论