CSS面试题

最新推荐文章于 2024-03-06 10:00:31 发布

ellieokokok

最新推荐文章于 2024-03-06 10:00:31 发布

阅读量371

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_26327971/article/details/104846810

版权

文章目录

Cascading Style Sheet 层叠样式表

CSS3新特性

新增选择器 p:nth-child(n)（匹配父元素中的第 n 个子元素，元素类型没有限制）
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
变形 transform
旋转 transform: rotate(20deg);
倾斜 transform: skew(150deg, -10deg);
位移 transform: translate(20px, 20px);
缩放 transform: scale(.5);

注：
平移，参考自己的位置来平移
translateX：向X轴平移，填正数往右平移，填负数，往左平移
translateY：向Y轴平移，填正数往下平移，填负数，往上平移

CSS选择器

分类

标签选择
id选择器
class选择器
后代选择（div a）
子代选择（div > p）
相邻选择（div + p）
通配符选择（*）
否定选择器 :not(.link){}
伪类选择器
伪元素选择器 ::before{}
属性选择器

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

CSS3选择器
p:first-of-type
p:last-of-type
p:only-of-type

:nth-child(n) //第几个
-n+3 //前3个
n+3 //从第3个起，包括第3个
其他值： even odd 5n

其他:
:first-child
:last-child

通过类型选择: 推荐使用
e:nth-of-type(n)
其他:

伪元素选择器

:hover
:focus
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled 选择器匹配每个已启用的元素（大多用在表单元素上）。
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中
::selection 用户选中的区域
:empty 一般用来隐藏内部什么都没有的元素
:not(selecter)

*通用选择器：选择所有元素，不参与计算优先级，兼容性IE6+
#X id选择器：选择id值为X的元素，兼容性：IE6+
.X 类选择器：选择class包含X的元素，兼容性：IE6+
X Y后代选择器：选择满足X选择器的后代节点中满足Y选择器的元素，兼容性：IE6+
X 元素选择器：选择标所有签为X的元素，兼容性：IE6+
:link，：visited，：focus，：hover，：active链接状态：选择特定状态的链接元素，顺序LoVe HAte，兼容性: IE4+
X + Y直接兄弟选择器：在X之后第一个兄弟节点中选择满足Y选择器的元素，兼容性： IE7+
X > Y子选择器：选择X的子元素中满足Y选择器的元素，兼容性： IE7+
X ~ Y兄弟：选择X之后所有兄弟节点中满足Y选择器的元素，兼容性： IE7+
[attr]：选择所有设置了attr属性的元素，兼容性IE7+
[attr=value]：选择属性值刚好为value的元素
[attr~=value]：选择属性值为空白符分隔，其中一个的值刚好是value的元素
[attr|=value]：选择属性值刚好为value或者value-开头的元素
[attr^=value]：选择属性值以value开头的元素
[attr$=value]：选择属性值以value结尾的元素
[attr=value]*：选择属性值中包含value的元素
[:checked]：选择单选框，复选框，下拉框中选中状态下的元素，兼容性：IE9+
X:after, X::after：after伪元素，选择元素虚拟子元素（元素的最后一个子元素），CSS3中::表示伪元素。兼容性:after为IE8+，::after为IE9+
:hover：鼠标移入状态的元素，兼容性a标签IE4+，所有元素IE7+
:not(selector)：选择不符合selector的元素。不参与计算优先级，兼容性：IE9+
::first-letter：伪元素，选择块元素第一行的第一个字母，兼容性IE5.5+
::first-line：伪元素，选择块元素的第一行，兼容性IE5.5+
:nth-child(an + b)：伪类，选择前面有an + b - 1个兄弟节点的元素，其中n
>= 0，兼容性IE9+
:nth-last-child(an + b)：伪类，选择后面有an + b - 1个兄弟节点的元素
其中n >= 0，兼容性IE9+
X:nth-of-type(an+b)：伪类，X为选择器，解析得到元素标签，选择前面有an + b - 1个相同标签兄弟节点的元素。兼容性IE9+
X:nth-last-of-type(an+b)：伪类，X为选择器，解析得到元素标签，选择后面有an+b-1个相同标签兄弟节点的元素。兼容性IE9+
X:first-child：伪类，选择满足X选择器的元素，且这个元素是其父节点的第一个子元素。兼容性IE7+
X:last-child：伪类，选择满足X选择器的元素，且这个元素是其父节点的最后一个子元素。兼容性IE9+
X:only-child：伪类，选择满足X选择器的元素，且这个元素是其父元素的唯一子元素。兼容性IE9+
X:only-of-type：伪类，选择X选择的元素，解析得到元素标签，如果该元素没有相同类型的兄弟节点时选中它。兼容性IE9+
X:first-of-type：伪类，选择X选择的元素，解析得到元素标签，如果该元素
是此此类型元素的第一个兄弟。选中它。兼容性IE9+

CSS的继承属性

关于文字排版的属性如：
font
word-break
letter-spacing
text-align
text-rendering
word-spacing
white-space
text-indent
text-transform
text-shadow
line-height
color
visibility
cursor

权重问题

!important > 行间样式 > id选择器 > （(类选择器 | 属性选择器 | 伪类选择器 ) ） > 标签选择器 > 通配符选择器

权重值：
!important（正无穷）
行间样式（1000）
id选择器（100）
属性选择器||class选择器||伪类（10）
标签选择器||伪元数（1）
通配符选择器（0）

!important 优先级最高，但也会被权重高的important所覆盖
行内样式总会覆盖外部样式表的任何样式(除了!important)
单独使用一个选择器的时候，不能跨等级使css规则生效
如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效
如果两个相同权重的选择器作用在同一元素上：后面出现的选择器为最后规则
权重相同时，与元素距离近的选择器生效

CSS单位

px 绝对单位。传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。
% 父元素宽度的比例。
1. 如果html 元素设置的font-size 为百分比值，则是以浏览器默认的字体大小16px为参照计算的（所有浏览器的默认字体大小都为 16px），如62.5%即等于10px（62.5% * 16px = 10px）。
em 相对单位。不同的属性有不同的参照值。
1. 对于字体大小属性（font-size）来说，em 的计算方式是相对于父元素的字体大小
2. border, width, height, padding, margin, line-height）在这些属性中，使用em单位的计算方式是参照该元素的 font-size，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。
rem 是相对于根元素 html 的 font-size 来计算的，所以其参照物是固定的。
好处：rem 只需要修改 html 的 font-size 值即可达到全部的修改，即所谓的牵一发而动全身。
vw, vh, vmin, vmax 相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。
vw：基于视窗的宽度计算，1vw 等于视窗宽度的百分之一
vh：基于视窗的高度计算，1vh 等于视窗高度的百分之一
vmin：基于vw和vh中的最小值来计算，1vmin 等于最小值的百分之一
vmax：基于vw和vh中的最大值来计算，1vmax 等于最大值的百分之一

名词

伪元素和伪类

伪类是一种状态比如:hover
伪元素是一个真实存在的元素，可以有样式有内容

作用和区别
伪元素: 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们

content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式

p::before {content:"第一章：";}
p::after {content:"Hot!";} //在指定元素的内容前面插入内容
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类: 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF} //选择被鼠标悬浮着元素
p:first-child {color: red}

::before 和 :after 中双冒号和单冒号有什么区别？

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等

伪元素在 CSS1 中已存在，当时语法是用 : 表示，如 :before 和 :after
后来在 CSS3 中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类；由于低版本 IE 对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素

综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容 IE 的老语法

a 标签上四个伪类的使用顺序是怎么样的？

link > visited > hover > active
简称 lvha(love-ha)

伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活）

比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色

响应式设计

响应式设计就是网站能够兼容多个不同大小的终端，而不是为每个终端做一个特定的版本
基本原理是利用 CSS3 媒体查询，为不同尺寸的设备适配不同样式
对于低版本的 IE，可采用 JS 获取屏幕宽度，然后通过监听window.onresize 方法来实现兼容

CSS预处理器

嵌套
反映层级和约束
变量和计算
减少冗余代码
entend和mixin
代码片段重用
mixin是直接把CSS代码每个地方重复写一份
extend是使用逗号分割的选择器来为多个不同的地方使用同一段CSS
循环
-适用于复杂有规律的样式
import
CSS模块化

CSS 优化、提高性能的方法有哪些？

抽象提取公共样式，减少代码量
多个 css 合并，尽量减少 HTTP 请求
压缩CSS代码
使用css 雪碧图
选择器优化嵌套，尽量避免层级过深（用‘>’替换‘ ’）
属性值为 0 时，不加单位
避免使用 CSS 表达式
它们要计算成千上万次并且可能会对你页面的性能产生影响。

css sprite

CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 用数字能精确的定位出背景图片的位置。

优点：

减少HTTP请求数，节省带宽，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：

图片合并麻烦
维护麻烦，修改一个图片可能需要从新布局整个图片，样式

FOUC

Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再重新显示文档，造成页面闪烁。

当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象：没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为 FOUC
产生原因：当样式表晚于结构性 html 加载时，加载到此样式表时，页面将停止之前的渲染，等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。
解决方法：使用 link 标签将样式表放在文档 head

页面导入样式时，使用 link 和@import 有什么区别？

link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS, rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加载CSS;
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现[FOUC]

在渲染过程中遇到 < link> 引入式样式 : 异步操作（link 会提高页面渲染速度）
浏览器会新开辟一个 HTTP 的请求线程，专门去服务器加载 CSS 样式内容
此时 GUI 线程还可以继续向下渲染（不用管 CSS 是否回来）
如果遇到的是 @import 导入式样式 : 同步操作
不会开辟新的线程去加载 CSS ，而是当前线程去加载
这样只要 CSS 没有加载回来，下面的代码都不会继续渲染（阻碍页面渲染）

import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题; 浏览器对link支持早于@import（老浏览器不支持import）可以使用@import对老浏览器隐藏样式
link可以通过rel="alternate stylesheet"指定候选样式
@import必须在样式规则之前，可以在css文件中引用其他文件

总体来说：link优于@import

盒模型

盒模型有两种， IE 怪异盒子模型、W3C标准盒子模型；

盒模型是由：内容(content)、内边距(padding)、边框(border)、外边距(margin) 组成的。

标准模型的宽高是指的content区宽高；
IE盒模型的宽高是指的content+padding+border的宽高。

CSS如何设置这两种盒模型？

标准盒模型：

box-sizing: content-box;

怪异盒模型：

box-sizing: border-box;

BFC

W3C对BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

1）BFC(Block formatting context) “块级格式化上下文”。
它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域的外部毫不相干。

2）BFC原理 布局规则

在BFC这个元素的垂直方向上的边距会发生重叠
内部的Box会在垂直方向，一个接一个地放置。
（属于同一个BFC的两个相邻的Box的margin会发生重叠）
具备BFC的元素不会与浮动元素float相互重叠，一般用来清除浮动
BFC在页面中是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素
计算BFC高度时，浮动元素也参与计算

3）如何生成BFC （触发bfc）
（脱离文档流，满足下列的任意一个或多个条件即可）

根元素，即HTML元素（最大的一个BFC）
浮动元素（float不是none）
绝对定位元素（position不是static或relative，即取值为absolute或fixed，）
display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素（visible是默认值：内容不会被修剪，会呈现在元素框之外）

4）BFC作用：

利用BFC避免外边距折叠（阻止父子元素的margin折叠）
清除内部浮动（撑开高度）
触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内
避免文字环绕
分属于不同的BFC时，可以阻止margin重叠
多列布局中使用BFC
可以包含浮动元素
不被浮动元素覆盖

例如：
子元素float后，脱离文档流，父元素相当于是一个空元素，会导致一系列问题
父元素下面的元素可能会挤上来，影响布局。解决：给父元素overflow: 触发bfc,
使父元素可以包含浮动元素，解决高度坍塌问题

注：

BFC（Block formatting contexts）：块级格式上下文
IFC（Inline formatting contexts）：内联格式上下文
GFC（GrideLayout formatting contexts）：网格布局格式化上下文
FFC（Flex formatting contexts）:自适应格式上下文

外边距折叠(collapsing margins)

所有毗邻的两个或更多margin将会合并为一个margin共享之。
毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

折叠发生规则：

两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
浮动元素/inline-block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠（触发BFC）
创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
元素自身的margin-bottom和margin-top相邻时也会折叠

折叠结果遵循下列计算规则：

父与子之间：子级的上下margin会与父级上下margin重叠，以最大值为标准去渲染；
空元素：如果设置了margin-top和margin-bottom，它会在这两者之间取一个最大值作为它的最终边距值；
兄弟元素之间：每个兄弟之间都有上边距或者每个兄弟之间都有下边距，原则就是取最大值；

其他：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
两个外边距一正一负时，折叠结果是两者的相加的和

line-height

line-height与font-size？line-height与所属元素的height？

行距 =（ line-height） - （font-size）
CSS中起高度作用的应该就是height以及line-height。height是用来设置元素的高度，比如img的高度、div的高度等

不设置div的高度时，高度height等于line-height，且文字垂直居中
对父元素设置固定高度时，由于高度固定，居中模型的盒子还是在那儿，只不过由于height不等于line-height，所以就会导致文本处于父元素居中位置之上，或者之下，

行高是指文本行基线间的垂直距离。基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿

行高的构成

行高是由 line-box 组成的
line-box 是由一行里的内联元素 inline-box 组成的
内联元素inline-box中最高的那个，或字体最大的那个决定行高

line-height 三种赋值方式有何区别？

带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
百分比：将计算后的值传递给后代

你对 line-height 是如何理解的？

line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离（文本行基线间的垂直距离）
如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
一个容器没有设置高度，那么撑开容器高度height的是 line-height 而不是容器内的文字内容
把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
line-height 和 height 都能撑开一个高度，height 会触发 haslayout（一个低版本IE的东西），而 line-height 不会

区别

display: none与visibility: hidden的区别和关于隐藏的点点滴滴

display : 隐藏对应的元素但不挤占该元素原来的空间（布局树里面没有display为none的元素）
visibility: 隐藏对应的元素并且挤占该元素原来的空间。

相同点：它们都能让元素不可见、他们都依然可以被 JS 所获取到

1）结构

display:none
会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
visibility: hidden
不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0
不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，（透明度为0）可以点击

2）继承

display: none和opacity: 0
非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden
（视力可继承，读屏器读取） 继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

3）性能

display:none
修改元素会造成文档回流。读屏器不会读取display: none元素内容，性能消耗较大
visibility:hidden
修改元素只会造成本元素的重绘，性能消耗较少。读屏器读取visibility: hidden元素内容
opacity: 0
修改元素会造成重绘，性能消耗较少

4）读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

rgba() 和 opacity 的透明效果有什么不同？

opacity 作用于元素以及元素内的所有内容（包括文字）的透明度
rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

注： “隐藏”的探究
1.display:none; //释放原来的空间
2.opacity:0 //不会释放原来的空间
3.rgb(0,0,0,0) //不会释放原来的空间

请列举几种隐藏元素的方法

display: none; 元素会变得不可见，并且不会再占用文档的空间（回流）
visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在
opacity: 0; CSS3 属性，设置 0 可以使一个元素完全透明
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
<div hidden=“hidden”> HTML5 属性,效果和 display:none;相同，但这个属性用于记录一个元素的状态
height: 0; 将元素高度设为 0 ，并消除边框
filter: blur(0); CSS3 属性，将一个元素的模糊度设置为 0

display: block 和 display: inline 的区别&延伸

行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。

块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。
行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高（不能设置height，此时，高度由line-height决定）
行内块元素(inline-block)：结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排（img和input为行内块元素。）

级别	元素
行内元素	a,b,strong,span,img,label,button,input,select,textarea
块级元素	header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

block元素特点：

1.处于常规流时，如果width没有设置，会自动填充满父容器
2.可以应用margin/padding
3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
5.忽略vertical-align

inline元素特点

1.水平方向上根据direction依次布局
2.不会在元素前后进行换行
3.受white-space控制
4.margin/padding在竖直方向上无效，水平方向上有效
5.width/height属性对 span（非替换行内元素）无效，宽度由元素内容决定
6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定
6.浮动或绝对定位时会转换为block
7.vertical-align属性生效（设置元素的垂直对齐方式）

替换元素就是浏览器根据标签的元素、属性来决定如何显示，比如img、video、input、textarea
非替换元素就是div、span、p、h1-h6

注： display 有哪些值？说明他们的作用

block 像块类型元素一样显示。
none 此元素将显示为块级元素，此元素前后会带有换行符。
inline 内联元素，元素前后没有换行符。
inline-block 象行内元素一样定位，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值

在这里插入图片描述
display：inline-block的间隙（双栏布局出现过）

相邻的 inline-block 元素的标签之间有换行或空格分隔的情况下，两个并列的inline-block中间会有一条裂缝间距
非 inline-block 水平元素设置为 inline-block 也会有水平间距

原因：
相邻的 inline-block 元素的标签之间有空白空格，html网页会把这些合并，产生一个间隙

解决

删除两个标签间的空格，但是这样html排版不好
可以借助 vertical-align:top; 消除垂直间隙
可以在父级容器加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
把 li 标签写到同一行可以消除垂直间隙，但代码可读性差

图片下面有一个缝隙是因为什么

因为 img 也相当于一个 inline 的元素， inline 就要遵守行高的构成，它会按照base基线对齐，基线对齐的话那么它就会和底线间有一个缝隙。

如何解决：因为它会遵守文字对齐方案，那么就把图片的对齐方式修改为 vertical-align: bottom。或者让他display: block，这样图片虽然会换行，但是没有间隙了

PNG,GIF,JPG的区别及如何选

参考资料：选择正确的图片格式
GIF: 适合简单动画

8位像素，256色
无损压缩
支持简单动画
支持boolean透明

JPEG：适合照片

颜色限于256
有损压缩
可控制压缩质量
不支持透明

PNG：适合图标、背景、按钮

有PNG8和truecolor PNG
PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画

css hack

在一部分不合法，但是在某些浏览器上生效的写法就叫CSS Hack，一般用来兼容老的浏览器，缺点是难理解、难维护、易失效

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。

替代方案：

特征检测
针对性的加class
- 比如第一步检测是IE6，那么只需要添加一个专门的 class 名来兼容IE6就好

写Hack时需要注意

标准属性写在前面， hack代码写在后面

常见的hack有：1）属性hack 2）选择器hack 3）IE条件注释

IE条件注释：适用于[IE5, IE9]常见格式如下

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

选择器hack：不同浏览器对选择器的支持不一样

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

属性hack：不同浏览器解析bug或方法

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

specified value,computed value,used value计算方法

文档树上的每个元素的 CSS 属性值会涉及到以下四种值：
Specified values 指定值
Computed values 计算值
Used values 应用值
Actual values 实际值

实际值应该就是我们平时看到的最终值，属性的最终值是4步计算的结果：值通过指定来确定（specified value），接着处理得到一个用于继承的值（computed value），然后如果有必要的话转化为一个绝对值（used value），最后根据本地环境限制进行转换（actual value）

specified value:
如果样式表设置了一个值，使用这个值
如果没有设置值，但这个属性是继承属性，从父元素继承
如果没设置，并且不是继承属性，使用css规范指定的初始值
computed value:
以specified value根据规范定义的行为进行计算，通常将相对值计算为绝对值，
例如em根据font-size进行计算。一些使用百分数并且需要布局来决定最终值的属性，如width，margin。百分数就直接作为computed value。line-height的无单位值也直接作为computed value。这些值将在计算used value时得到绝对值。computed value的主要作用是用于继承
used value：属性计算后的最终值，对于大多数属性可以通过window.getComputedStyle获得，尺寸值单位为像素。以下属性依赖于布局，
- background-position
- bottom, left, right, top
- height, width
- margin-bottom, margin-left, margin-right, margin-top
- min-height, min-width
- padding-bottom, padding-left, padding-right, padding-top
- text-indent

IE6浏览器有哪些常见的bug, 缺陷或者与标准不一致的地方,如何解决

IE6 双倍水平外边距BUG

解决办法：给浮动块框设置display:inline解决问题
出现条件：
1、没有设置display:inline的块元素
2、浮动元素
3、设置了水平外边距（浮动的方向和水平外边距设置的方向一致）
4、元素与父容器之间

备注：因为浮动都有其相对应的对象，只有相对于其父容器的浮动才会出现这样的问题。第一个元素是相对父容器的，而第二个是相对第一个兄弟元素的，所以第二个浮动元素不会出现双倍水平外边距问题。而且只有设置水平外边距的值才会出现双倍外边距，垂直外边距没有关系。

原因分析：这个现象仅当块框设置了浮动才会出现，行内框浮动不会出现此问题。因为行内框默认display:inline，给其float后自动就具有块框特性，
所以如果是span之类的行内框，浮动后是不需要再单独设置display:inline就可以自动消除双倍水平外边距。

IE6不支持min-height，解决办法使用css hack：

.target {
    min-height: 100px;
    height: auto !important;
    height: 100px;   // IE6下内容高度超过会自动扩展高度
}

ol内li的序号全为1，不递增。解决方法：为li设置样式display: list-item;
未定位父元素overflow: auto;，包含position: relative;子元素，子元素高于父元素时会溢出。解决办法：1）子元素去掉position: relative;; 2）不能为子元素去掉定位时，父元素position: relative;

<style type="text/css">
.outer {
    width: 215px;
    height: 100px;
    border: 1px solid red;
    overflow: auto;
    position: relative;  /* 修复bug */
}
.inner {
    width: 100px;
    height: 200px;
    background-color: purple;
    position: relative;
}
</style>

<div class="outer">
    <div class="inner"></div>
</div>

IE6只支持a标签的:hover伪类，解决方法：使用js为元素监听mouseenter，mouseleave事件，添加类实现效果：

<style type="text/css">
.p:hover,
.hover {
    background: purple;
}
</style>

<p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>

<script type="text/javascript">
function addClass(elem, cls) {
    if (elem.className) {
        elem.className += ' ' + cls;
    } else {
        elem.className = cls;
    }
}
function removeClass(elem, cls) {
    var className = ' ' + elem.className + ' ';
    var reg = new RegExp(' +' + cls + ' +', 'g');
    elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');
}

var target = document.getElementById('target');
if (target.attachEvent) {
    target.attachEvent('onmouseenter', function () {
        addClass(target, 'hover');
    });
    target.attachEvent('onmouseleave', function () {
        removeClass(target, 'hover');
    })
}
</script>

IE5-8不支持opacity，解决办法：

.opacity {
    opacity: 0.4
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}

IE6在设置height小于font-size时高度值为font-size，解决办法：font-size: 0;
IE6不支持PNG透明背景，解决办法: IE6下使用gif图片
IE6-7不支持display: inline-block解决办法：设置inline并触发hasLayout

    display: inline-block;
    *display: inline;
    *zoom: 1;

IE6下浮动元素在浮动方向上与父元素边界接触元素的外边距会加倍。解决办法：
1）使用padding控制间距。
2）浮动元素display: inline;这样解决问题且无任何副作用：css标准规定浮动元素display:inline会自动调整为block
通过为块级元素设置宽度和左右margin为auto时，IE6不能实现水平居中，解决方法：为父元素设置text-align: center;

定位

几种定位

absolute 生成绝对定位的元素，相对于值不为 static 的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed （老 IE 不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位（相对定位，相对的是自己，并且自己的原来空间，依然会保留）
因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
inherit ：规定应该从父元素继承 position 属性的值。

display, float, position的关系

display属性规定元素生成框的类型。较为常见的有none-缺省值（用于隐藏元素，元素会消失于视界和文档流中），block-块级元素，inline-block-行内块级元素，list-item列表样式块级元素
position属性规定元素的定位类型，常用于布局。
float属性，定义一个元素浮动方向，最初用于图像使文本环绕，现在是一种布局方式。不论浮动元素本身是何种框类型，浮动后会生成一个块级框。

如果display为none，那么position和float都不起作用，这种情况下元素不产生框
否则，如果position值为absolute或者fixed，（框就是绝对定位的）float的计算值相当于none，display根据下面的表格进行调整。
否则，如果float不是none，那么框是浮动的，display根据下表进行调整
否则，如果元素是根元素，display根据下表进行调整
其他情况下display的值为指定值

总结起来：绝对定位、浮动、根元素都会改变display

指定值	计算值
inline-table	table
inline, table-row-group,table-column,table-column-group,table-header-group,table-footer-group,table-row, table-cell,table-caption,inline-block	block
others	same as specified

如何确定一个元素的包含块(containing block)

根元素的包含块叫做初始包含块，在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin；对于paged media，它的尺寸等于page area。初始包含块的direction属性与根元素相同。
position为relative或者static的元素，它的包含块由最近的块级（display为block,list-item, table）祖先元素的内容框组成
如果元素position为fixed。对于连续媒体，它的包含块为viewport；对于paged media，包含块为page area
如果元素position为absolute，它的包含块由祖先元素中最近一个position为relative,absolute或者fixed的元素产生，规则如下：
如果祖先元素为行内元素，the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.
其他情况下包含块由祖先节点的padding edge组成

如果找不到定位的祖先元素，包含块为初始包含块

层叠上下文

深入理解CSS中的层叠上下文和层叠顺序

配合：（三）渲染流程

DOM层级顺序与z-index

z轴上的默认层叠顺序如下（从下到上）：

根元素的边界和背景
常规流中的元素按照html中顺序
浮动块
positioned元素按照html中出现顺序

如何创建stacking context：

根元素
z-index不为auto的定位元素
opacity小于1的元素
在移动端webkit和chrome22+，z-index为auto，position: fixed也将创建新的stacking context

浮动

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止

浮动框脱离文档流，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。

设置元素浮动后，该元素的 display 值自动变成 block

元素"浮动"

脱离文档流
不脱离文本流
位置尽量靠上，并靠左或右

对自己的影响

形成"块"(BFC)
这个块会负责自己的布局，宽高由自己决定

比如 span 中用 float 这个span就形成了一个BFC，就可以设置宽高了

对兄弟元素的影响

上面贴非float元素
靠边贴float元素或边
不影响其他块级元素位置
影响其他块级元素文本

对父级元素的影响

从布局上"消失"
高度塌陷

清除浮动
浮动的元素布局时不会占据父元素的布局空间，即父元素布局时不会管浮动元素，浮动元素有可能超出父元素，从而对其他元素造成影响。

容器包含若干浮动元素时如何清理(包含)浮动

容器元素闭合标签前添加额外元素（空 div 标签）并设置clear: both

<div class="parent">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

<style>
    .left {float:left}
    .clearfloat{clear:both}
</style>

父元素触发块级格式化上下文，让父元素变为一个BFC。
父元素 overflow: auto/hidden
必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
设置容器元素伪元素进行清理推荐的清理浮动方法
（前后是空content, table布局，后面再clear both，整体zoom1）

/**
* 在标准浏览器下使用
* 1 content内容为空格用于修复opera下文档中出现
*   contenteditable属性时在清理浮动元素上下的空白
* 2 使用display使用table而不是block：可以防止容器和子元素top-margin折叠,这样能使清理效果与BFC，IE6/7zoom: 1;一致
**/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
* IE 6/7下使用
* 通过触发hasLayout实现包含浮动
**/
.clearfix {
    *zoom: 1;
}

高度塌陷导致的布局问题

高度塌陷？
父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题。

如何来解决高度塌陷？
方案一：给父元素一个固定的高度
缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。

方案二：给父元素添加属性 overflow: hidden;
缺点：当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉。

方案三：在子元素的末尾添加一个空的 div ，并设置下方样式

div{
	clear: both;
	height: 0;
	overflow: hidden;
}

优点：所有浏览器都支持，并且容器溢出不会被裁剪；
缺点：在页面中添加无意义的div，容易造成代码冗余。

方案四：万能清除浮动法
通过伪元素清除

.clearFixed:after {
	display: block;
	content: “”;
	clear: both;
	height: 0;
	visibility: hidden; //隐藏
}

.clear {
	*zoom: 1; //支持ie: 6,7;
}

优点：不会造成代码冗余，剩余代码性能优化，推荐使用。

块级元素脱离文档流后，高度和宽度会被文字撑开；
内联元素脱离文档流后会变成块级元素

居中

零散

为什么要初始化 CSS 样式？

不同浏览器对有些标签样式的默认值解析不同
不初始化 CSS 会造成各现浏览器之间的页面显示差异
可以使用 reset.css 或 Normalize.css 做 CSS 初始化

Normalize.css 理解
Normalize.css 是一种现代的，为 HTML5 准备的优质替代方案。
创造 normalize.css 有下几个目的：

保护有用的浏览器默认样式而不是完全去掉它们
一般化的样式：为大部分 HTML 元素提供
修复浏览器自身的 bug 并保证各浏览器的一致性
优化 CSS 可用性：用一些小技巧
解释代码：用注释和详细的文档

浏览器解析CSS
CSS中，浏览器查找元素是通过选择权从后往前找的，这样做的目的是加快CSS解析速度，排除法

iconfont原理
icon font ，图标字体，也叫字体图标，顾名思义，就是字体做的图标。
优点：自由的变化大小，且不会模糊；比图片小，加载快；可以任意改变颜色
但只能被渲染成单色或者CSS3的渐变色

利用编码让图标编为一个字符
引入字体
利用before伪元素向页面中插入一个文字

base64的使用

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

元素竖向的百分比设定是相对于容器的宽度，而不是高度
1)文字折行

overflow-wrap(word-wrap)通用换行控制
- 是否保留单词
word-break 针对多字节文本文字
- 中文句子也是单词
white-space 空白处是否换行

2)装饰属性及其他

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

3)单行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;

4)多行文本溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

5)实现同一行中文字与图片的居中对齐
vertical-align:middle; //还有很多其他对齐选项,常用于图片垂直居中

6) 盒模型
box-sizing: border-box; 怪异盒模型
box-sizing:content-box; 标准盒模型

7)position: sticky;
设置吸顶效果

8)tansfrom与animition
tansfrom需要通过一些方式触发，只能完成一些简单的动画
animation自动触发，可以完成一些复杂的动画效果

9)滚动

visible 滚动条隐藏, 文字超出显示
hidden 滚动条隐藏, 文字超出不显示
scroll 滚动条一直显示，无论文字是否够多
auto 滚动条自动隐藏

10) li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？(也称幽灵字符)

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符, 这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为 0，就没有空格了

介绍使用过的 CSS 预处理器

CSS 预处理器基本思想：
为 CSS 增加了一些编程的特性（变量、逻辑判断、函数等）
Web 页面样式设计，再编译成正常的 CSS 文件使用.

sass, less, stylus

变量 (定义主题色)
函数 (计算值)
混合器（代码段的复用）
父级选择器

抽离样式模块怎么写，说出思路？

CSS 可以拆分成 2 部分：公共 CSS 和业务 CSS：

网站的配色，字体，交互提取出为公共 CSS。这部分 CSS 命名不应涉及具体的业务
对于业务 CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的 CSS

什么是视差滚动效果，如何给每页做不同的动画？

视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验
一般把网页解剖为：背景层、内容层和悬浮层。当滚动鼠标滚轮时，各图层以不同速度移动，形成视差

实现原理

以 “页面滚动条” 作为 “视差动画进度条”
以 “滚轮刻度” 当作 “动画帧度” 去播放动画的
监听 mousewheel 事件，事件被触发即播放动画，实现“翻页”效果

如果设计中使用了非标准的字体，你该如何去实现？

用图片代替
web fonts 在线字库
@font-face

参考链接：如果设计中使用了非标准的字体，你该如何去实现？

怎么让 Chrome 支持小于 12px 的文字？

  .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

font-style 属性 oblique 是什么意思？

font-style: oblique; 使没有 italic 属性的文字实现倾斜

如果需要手动写动画，你认为最小时间间隔是多久？

16.7ms

渲染进程的帧是什么？可以拿放电影电影来解释，通常，电影的帧速是24，也就是说每秒切换24幅画面，其中的每幅画面就是一帧。
由于目前大多数设备的屏幕刷新率为 60 次/秒。因此，如果页面中有一个动画、或一个渐变效果、或者用户正在滚动页面，那么浏览器渲染动画的频率至少要和刷新频率保持一致，也就是每秒需要更新60次，这样我们就能计算出来生成每帧的预算只有（1/60）毫秒，也就是16毫秒多一点(1 秒/ 60 = 16.66 毫秒)。如果超过16毫秒，帧率将下降，并且会出现画面抖动现象，此现象通常被称为卡顿，会对用户体验产生负面影响。

所以，如果想要保证画面的流畅，就需要尽量降低每帧的渲染时间，所以局部更新流水线显得非常重要了，能大大减少处理每帧所消耗的时间。

如何修改 Chrome 记住密码后自动填充表单的黄色背景？

产生原因：由于 Chrome 默认会给自动填充的 input 表单加上 input:-webkit-autofill 私有属性造成的
解决方案 1：在 form 标签上直接关闭了表单的自动填充：autocomplete=“off”
解决方案 2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右侧小图标如何美化？

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}

网站图片文件，如何点击下载？而非点击预览？

<a href="logo.jpg" download>下载</a> 
<a href="logo.jpg" download="网站LOGO" >下载</a>

如何优化网页的打印样式

<link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />

其中 media 指定的属性就是设备，显示器上就是 screen，打印机则是 print，电视是 tv，投影仪是 projection。

```html
 <link rel="stylesheet" type="text/css" media="print" href="yy

但打印样式表也应有些注意事项：

打印样式表中最好不要用背景图片，因为打印机不能打印 CSS 中的背景。如要显示图片，请使用 html 插入到页面中。
最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用 pt 和 cm。
隐藏掉不必要的内容。（@print div{display:none;}）
打印样式表中最好少用浮动属性，因为它们会消失。

transform变形
transition是做过渡动画的，
而translate是用来做平移的。

请问为何要使用 transform 而非 absolute positioning，或反之的理由？为什么？

使用 transform 或 position 实现动画效果时是有很大差别。
功能都一样。但是 translate 不会引起浏览器的重绘和重排

使用 transform 时，可以让 GPU 参与运算，动画的 FPS 更高。
使用 position 时，最小的动画变化的单位是 1px，而使用 transform 参与时，可以做到更小（动画效果更加平滑）

反之

transform 改变 fixed 子元素的定位对象
transform 改变元素层叠顺序
transform 的副作用

transform属性

none
- 定义不进行转换。
matrix(n,n,n,n,n,n)
- 定义 2D 转换，使用六个值的矩阵。
translate(x,y)
- 从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）
translate3d(x,y,z)
- 定义 3D 转换。
translateX(x)
translateY(y)
translateZ(z)
scale(x[,y]?)
- 定义 2D 缩放转换。
scale3d(x,y,z)
- 定义 3D 缩放转换。
scaleX(x)
scaleY(y)
scaleZ(z)
rotate(angle)
- 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)
- 定义 3D 旋转。
rotateX(angle)
rotateY(angle)
rotateZ(angle)
skew(x-angle,y-angle)
- 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)
skewY(angle)
perspective(n)
- 为 3D 转换元素定义透视视图。

用纯 CSS 创建一个三角形的原理是什么？

元素的border是由三角形组合而成
元素的内容尺寸设置为0
其它border边的颜色设置为白色或透明色：

纯 CSS 实现绘制各种三角形

        #div1 {/*三角朝上*/
            width: 0;
            height: 0;   
            /* 分别设置  只与三边的border有关*/ 
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;/*按四角平分的时候的值，边有宽度但是透明的*/
            border-bottom: 100px solid red;/*下面红三角 要拉长，变成等腰*/
        }
        #div5{/*直角边Top Left -> 设置top right ->上下不变，左右相反*/
            width: 0;
            height: 0;
            border-top: 100px solid plum;
            border-right: 100px solid transparent;
        }

带边框的三角形
三角形叠放，即把当前三角形叠放在更大的三角形上方，需要利用绝对定位方法：
1.外围蓝三角
2.随后需要定义黄色三角形，由于黄色三角形的定位需要参考蓝色三角形的位置，所以需要用到绝对定位方法。为此还需要将黄色三角形作为蓝色三角形的子元素。一个可行的办法是在蓝色三角形内部定义一个额外的标签以表示黄色三角形，但为了节约标签起见，更好的办法是使用伪元素:

怎样美化一个checkbox ?

让原本的勾选框隐藏
input + label 背景图没选中
input:checked + label 背景图选中

.checkbox input{
  display: none;
}
.checkbox input + label{
  background:url(./没选中.png) left center no-repeat;
  background-size:20px 20px;
  padding-left:20px;
}
.checkbox input:checked + label{
  background-image:url(./选中.png);
}

<div class="checkbox">
  <input type="checkbox" id="handsome"/>
  <label for="handsome">我很帅</label>
</div>

一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度

方案 1： .sub { height: calc(100%-100px); }
方案 2： .container { position:relative; } .sub { position: absolute; top: 100px; bottom: 0; }
方案 3： .container { display:flex; flex-direction:column; } .sub { flex:1; }