前端面试基础点——CSS篇（一）
文字单行/多行溢出显示省略号
- 单行文本
p{
overflow:hidden
white-space:nowrap
text-overflow:ellipsis
}
- 多行文本
p{
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}
px、em和rem
- px 是固定的像素，一旦设置了就无法因为适应页面大小而改变
- em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，更适用于响应式布局
- em 是相对于其父元素设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道它父元素的大小；
- rem 是相对于根元素的
选择器
- 元素选择器
p { } - 类选择器
.class { } - ID选择器
#id { } - 属性选择器
a[href] { }或 a[href="http://www.baidu.com"] { } - 派生选择器
– 子元素选择器p > em { }
– 后代选择器p em { }
– 相邻兄弟选择器h1 + p { }
伪类 / 伪元素
伪类是一个选择处于特定状态的元素的选择器，伪类就是开头为冒号的关键字
伪元素用于创建一些不在文档树中的元素，并为其添加样式，伪元素开头为双冒号
- 常用伪类
| 选择器 | 描述 |
|---|---|
| :active | 在用户激活（例如点击）元素的时候匹配 |
| :blank | 匹配空输入值的 元素 |
| :checked | 匹配处于选中状态的单选或者复选框 |
| :empty | 匹配除了可能存在的空格外，没有子元素的元素 |
| :first | 匹配分页媒体的第一页 |
| :first-child | 匹配兄弟元素中的第一个元素 |
| :focus | 当一个元素有焦点的时候匹配 |
| :hover | 当用户悬浮到一个元素之上的时候匹配 |
| :invalid | 匹配诸如 的位于不可用状态的元素 |
| :last-child | 匹配兄弟元素中最末的那个元素 |
| :link | 匹配未曾访问的链接 |
| :is() | 匹配传入的选择器列表中的任何选择器 |
| :not | 匹配作为值传入自身的选择器未匹配的物件 |
| :nth-child | 匹配一列兄弟元素中的元素——兄弟元素按照 an+b 形式的式子进行匹配 （比如2n+1匹配元素1、3、5、7等。即所有的奇数个） |
| :nth-last-child | 匹配一列兄弟元素，从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配 （比如2n+1匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个） |
| :playing | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素 |
| :paused | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素 |
| :read-only | 匹配用户不可更改的元素 |
| :read-write | 匹配用户可更改的元素 |
| :required | 匹配必填的 form 元素 |
| :valid | 匹配诸如 元素的处于可用状态的元素 |
| :target | 匹配当前URL目标的元素（例如如果它有一个匹配当前 URL 分段的元素） |
| :visited | 匹配已访问链接 |
- 伪元素
| 选择器 | 描述 |
|---|---|
| ::after | 匹配出现在原有元素的实际内容之后的一个可样式化元素。 |
| ::before | 匹配出现在原有元素的实际内容之前的一个可样式化元素。 |
| ::first-letter | 匹配元素的第一个字母。 |
| ::first-line | 匹配包含此伪元素的元素的第一行。 |
| ::grammar-error | 匹配文档中包含了浏览器标记的语法错误的那部分。 |
| ::selection | 匹配文档中被选择的那部分。 |
| ::spelling-error | 匹配文档中包含了浏览器标记的拼写错误的那部分。 |
更多伪类和伪元素内容
选择器权重
- CSS选择器的进制是256进制
| 权重 | |
|---|---|
| ！important | infinity |
| 行间样式 | 1000 |
| id | 0100 |
| class | 属性 | 伪类 | 0010 |
| 标签 | 伪元素 | 0001 |
| 通配符 | 0000 |
| 继承的样式 | 无权重 |
水平垂直居中
此处内容来自 10种水平垂直居中对齐方式、CSS 拷问：水平垂直居中方法你会几种？
<style>
/* 公共代码 */
.wp {
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
background: green;
}
.box.size{
width: 100px;
height: 100px;
}
style>
<body>
<div class="wp">
<div class="box size">123123div>
div>
body>
1. absolute + 负 margin
.wp {
position: relative;
}
.box {
position: absolute;;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
- 缺点：需要固定居中元素的宽高
- 兼容性：IE 6+、Chrome 4+、Firefox 2+、Android 2.3+、iOS 6+
2. absolute + margin auto
.wp {
position: relative;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
-
原理：使用了 CSS 中的定位属性（absolute、fixed 等）后，如果 left 设置了具体值，没有设置 right 和 width，那么就会自动计算，把剩余的空间分配给 right 和 width。如果 left、right 和 width 都设置了具体值，并且没有占满横向空间，那么剩余空间就处于待分配状态，此时设置 margin: auto; 意味着把剩余的空间分配给 margin，并且左右均分，所以就实现了水平居中，垂直方向同理
-
副作用
left: 0; right: 0; 相当于 width: 100%;
top: 0; bottom: 0; 相当于 height: 100%; -
缺点：需要固定居中元素的宽高，否则其宽高会被设为 100%
-
兼容性：IE 6+、Chrome 4+、Firefox 2+、Android 2.3+、iOS 6+
3. absolute + calc
.wp {
position: relative;
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
background: green;
}
- 缺点：需要固定居中元素的宽高
- 兼容性：IE 9+、Chrome 19+、Firefox 4+、Android 4.4、iOS 6+
4. absolute + transform
.wp {
position: relative;
border: 1px solid red;
width: 300px;
height: 300px;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: green;
}
- 优点：不需要固定居中元素的宽高
- 兼容性：IE 9+、Chrome 4+、Firefox 3.5+、Android 3+、iOS 6+
5. lineheight
.wp {
border: 1px solid red;
line-height: 200px;
text-align: center;
font-size: 0px;
width: 300px;
height: 200px;
}
.box {
background: #eeeeee;
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: initial;
text-align: left; /* 修正文字 */
}
6. writing-mode
- writing-mode 可以改变文字显示方向
<div class="wp">
<div class="wp-inner">
<div class="box">123123div>
div>
div>
.wp {
writing-mode: vertical-lr;
text-align: center;
}
.wp-inner {
writing-mode: horizontal-tb;
display: inline-block;
text-align: center;
width: 100%;
}
.box {
display: inline-block;
margin: auto;
text-align: left;
}
-
缺点：需要修改 DOM 结构（为了居中元素，需要嵌套两层父元素）
-
优点：不需要固定居中元素的宽高
-
兼容性：IE 6+、Chrome 4+、Firefox 3.5+、Android 2.3+、iOS 5.1+
7. css-table
<div class="wp">
<div class="box">123123div>
div>
.wp {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
8. Flex
.wp {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
- 另一种写法
.wp {
display: flex;
}
.box {
margin: auto;
}
- 优点：不需要固定居中元素的宽高
- 兼容性：IE 10+、Chrome 4+、Firefox 2+、Android 2.3+、iOS 6+
9. Grid
.wp {
display: grid;
}
.box {
justify-self: center; /* 水平居中 */
align-self: center; /* 垂直居中 */
}
- 另一种用法
.wp {
display: grid;
}
.box {
margin: auto;
}
- 优点：不需要固定居中元素的宽高
- 兼容性：IE 10+、Chrome 57+、Firefox 52+、Android 6+、iOS 10.3+
经典布局
1. 圣杯布局
定义：常见的三栏式布局——两边等宽，中间自适应的三栏布局
2. 双飞翼布局
定义：双飞翼布局与圣杯布局相似。只不过少了 relative 与 left、right 的步骤和共同的元素，主元素多了层父元素
圣杯布局、双飞翼布局
3. 瀑布流布局
深度解析瀑布流布局
4. 三栏布局的实现及优点
| 布局方案 | 实现 | 优点 | 缺点 |
|---|---|---|---|
| Float布局 | 左右中三列，左列左浮动，右列右浮动，中间列设置左右margin | 比较简单，兼容性也比较好 | 浮动元素脱离文档流，使用的时候只需要注意一定要清除浮动 |
| Position布局 | 左中右三列（无顺序），根据定位属性去直接设置各个子元素位置 | 元素脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，有效性和可使用性比较差 | |
| Table布局 | 左中右三列，父元素display: table;子元素display: table-cell;居中子元素不设宽度 | ||
| Flex布局 | 左中右三列，父元素display: flex;两侧元素设宽；居中子元素flex: 1; | 存在IE上兼容性问题，只能支持到IE9以上 | |
| Grid布局 | 左中右三列，父元素display: grid;利用网格实现 | 兼容性不好，IE10+上支持，而且也仅支持部分属性 |
BFC
BFC详细介绍
定义：Block Formatting Contexts(块级格式化上下文)，具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
通俗来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
触发BFC特性：
- body根元素；
- 浮动元素(float除none以外的值)；
- 绝对定位元素；
- display为inline-block、table-cell、flex；
- overflow除了visible以外的hidden、auto、scroll
行内元素和块级元素
常见的块级元素：div、p、h1~h6、ul、li、table
常见的行内元素：span、img、input、a、button、select
- 行内元素会在一条直线上排列(默认宽度只与内容有关)，块级元素各占据一行
- 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或其他行内元素
- 行内元素与块级元素属性的不同，主要是盒模型上，行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
css盒模型
-
页面是由一个个盒模型组成的，每个 HTML 元素都可以叫盒模型，盒模型由内而外包括：边距(margin)，边框(border)，填充(padding)，内容(content)。它在页面占据的实际宽度是margin + border + padding + content 的宽度相加
-
盒模型分为标准盒模型和IE的盒模型
- 标准盒模型：盒模型的大小是content的大小（box-sizing:content-box|border-box|inherit）
- IE盒模型：盒模型的大小是 content+border+padding 的大小
Flex布局
弹性布局，用来为盒模型提供最大的灵活性
- flex-direction:决定主轴的方向(即项目的排列方向)。row|row-reverse|column|column-reverse
- flex-warp:默认情况下，项目都排列在一条线上。定义如果一条轴线上排不下，如何换行。nowarp|warp|warp-reverse
- flex-flow:是flex-direction和flex-warp属性的简写形式，默认值为row nowarp;
- justify-content:定义了项目在主轴上的对齐方式。flex-start|flex-end|center|space-between|space-around
- align-items:定义项目在交叉轴上如何对齐。flex-start|flex-end|center|baseline|stretch
- align-content:定义了多跟轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。flex-start|flex-end|center|space-between|space-around|stretch
浮动中高度塌陷
原因：父元素在没有设置高度的情况下，其子元素浮动后，脱离文档流，则父元素处于塌陷状态；因为子元素浮动后是不占据父元素的位置空间的。
清除浮动：
- clear清除浮动(添加空div方法)，在浮动元素下方添加空div，并给该元素写css样式(clear:both;height:0;overflow:hidden;)
- 给浮动元素父元素添加高度
- 父级元素同时浮动
- 父级设置inline-block，其margin:0 auto失效
- 利用br标签的clear属性
- 给父元素添加overflow:hidden清除浮动
- after伪元素清除浮动
- 父类添加 clearfix 类
CSS中 transition 和 animate 有何区别？
- transition 一般是用来过渡的，没有时间轴的概念，通过事件触发(一次)，没有中间状态(只有开始和结束)
- animate 是做动效，有时间轴的概念(帧可控)，可以重复触发和有中间状态
- 过渡的开销比动效小，前者用于交互比较多，后者用于活动页多
CSS3新特性
更多内容 CSS3有哪些新特性
- 选择器(:last-child，:first-child，:nth-child(n))
- 背景和边框(background-size，background-origin；border-radius/box-shadow)
- 文本效果(文本阴影：text-shadow；换行规则：word-break; )
- 2D/3D转换
- 过渡效果(transition)/动画(animation)
- 变形(transform)：旋转 rotate，移动 translate，缩放 scale，扭曲 skew，矩阵 matrix
CSS3 硬件加速(GPU 加速)
此处内容来自CSS3硬件加速
CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能
CSS 中的以下几个属性能触发硬件加速：
- transform
- opacity
- filter
- will-change
如果有一些元素不需要用到上述属性，但是需要触发硬件加速效果，可以使用一些小技巧来诱导浏览器开启硬件加速
.element {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/**或者**/
transform: rotateZ(360deg);
transform: translate3d(0, 0, 0);
}
要注意的问题
（1）过多地开启硬件加速可能会耗费较多的内存，因此什么时候开启硬件加速，给多少元素开启硬件加速，需要用测试结果说话
（2）GPU 渲染会影响字体的抗锯齿效果。这是因为 GPU 和 CPU 具有不同的渲染机制，即使最终硬件加速停止了，文本还是会在动画期间显示得很模糊
link 和 import的区别
| 区别 | link | @import |
|---|---|---|
| 从属关系 | link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等 | @import 是 CSS 提供的语法规则，只有导入样式表的作用 |
| 加载顺序 | 加载页面时，link 标签引入的 CSS 被同时加载 | @import 引入的 CSS 将在页面加载完毕后被加载 |
| 兼容性 | link标签作为 HTML 元素，不存在兼容性问题 | @import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别 |
| DOM可控性 | 可以通过 JS 操作 DOM ，插入link标签来改变样式 | 由于 DOM 方法是基于文档的，无法使用@import的方式插入样式 |
| 权重 | link引入的样式权重大于@import引入的样式 此处内容详解（link和@import的区别） |
前端常见的布局方式
| 布局方式 | 优点 | 缺点 |
|---|---|---|
| 静态布局(固定宽高) | 简单 | 尺寸固定 |
| 弹性布局(flex) | 适应性强，随意按照宽度、比例划分元素的宽高，轻松改变元素的显示顺序，网页布局实现快捷，维护起来更加容易 | 浏览器兼容性较差，只能兼容到IE9及以上 |
| 自适应布局(为不同的屏幕分辨率定义的布局，@media媒体查询技术) | 对网站的复杂程度兼容性更大，代码执行效果更高效，测试时更加容易、运营相对更加精准 | 增加开发成本，流程比较繁琐 |
| 流式布局(宽高用百分比，按屏幕分辨率调整，布局不发生变化) | 尽可能的适应各种分辨率 | 屏幕大小变化时，页面元素也随之变化但是布局不变，如果屏幕太大或太小都会布局时元素无法正常显示 |
| 响应式布局(适应布局和流式布局的综合方式) | 适应pc端和移动端，如果有足够的耐心，页面效果会很完美 | 只能适应主流的宽高，设计更需要多个版本，工作量增大 |
| 浮动布局 | 兼容性比较好 | 浮动带来的影响比较多，页面宽度不够的时候会影响布局 |
| 定位布局 | 很快捷，配合js使用很方便 | 绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的 |