css 优先级是怎么计算的

第一优先级：!important 会覆盖页面内任何位置的元素样式
1.内联样式，如 style="color: green"，权值为 1000
2.ID 选择器，如#app，权值为 0100
3.类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为 0010
4.标签、伪元素选择器，如 div::first-line，权值为 0001
5.通配符、子类选择器、兄弟选择器，如*, >, +，权值为 0000
6.继承的样式没有权值

前端实现动画有哪些方式？

前端常用的动画实现方式有以下种：

css3的transition 属性
css3的animation 属性
原生JS动画
使用canvas绘制动画

1.css3的`transition`

transition:1s; 等价于 transition: all 1s ease 0;

其中timing-function的值有如下：

值	描述
linear	匀速（等于 cubic-bezier(0,0,1,1)）
ease	从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	慢慢变快（等于 cubic-bezier(0.42,0,1,1)）
ease-out	慢慢变慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)），渐显渐隐效果
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

例子：

transition-property: width, height, background-color, border-width; 
transition-duration: 2s; 
transition-timing-function: ease-in; 
transition-delay: 500ms;

transform 转变动画

包含四个常用的功能：

translate：位移
scale：缩放
rotate：旋转
skew：倾斜

一般配合transition过度使用

transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);

3.css3的`animation`

animation属性与transition属性的区别：

transition只需指定动画的开始和结束状态，整个动画的过程是由特定的函数控制,你不用管它。
animation可以对动画过程中的各个关键帧进行设置

transition（过度）	用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形）	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）	只是transform的一个属性值，即移动
animation（动画）	用于设置动画属性，他是一个简写的属性，包含6个属性

CSS动画和JS实现的动画分别有哪些优缺点？

CSS动画

优点

浏览器可以对动画进行优化
代码相对简单,性能调优方向固定
对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

缺点

运行过程控制较弱,无法附加事件绑定回调函数
代码冗长，想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

JS动画

优点

控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
CSS3有兼容性问题，而JS大多时候没有兼容性问题

缺点

代码的复杂度高于CSS动画
JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况

盒子模型

一个盒子由四个部分组成：content、padding、border、margin

CSS中，盒子模型可以分成：

W3C 标准盒子模型
IE 怪异盒子模型

默认情况下，盒子模型为W3C 标准盒子模型

标准盒子模型

IE 怪异盒子模型

Box-sizing

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

box-sizing: content-box|border-box|inherit;

content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
inherit 指定 box-sizing 属性的值，应该从父元素继承

css选择器有哪些？优先级分别是什么？哪些属性可以继承？

一、选择器

关于css属性选择器常用的有：

- id选择器（#box），选择id为box的元素
- 类选择器（.one），选择类名为one的所有元素
- 标签选择器（div），选择标签为div的所有元素
- 后代选择器（#box div），选择id为box元素内部所有的div元素
- 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
- 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
- 群组选择器（div,p），选择div、p的所有元素

还有一些使用频率相对没那么多的选择器：

伪类选择器

:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素

伪元素选择器

:before : 选择器在被选元素的内容前面插入内容 
:after : 选择器在被选元素的内容后面插入内容

属性选择器

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素

在CSS3中新增的选择器有如下：

伪类选择器

:first-of-type 父元素的首个元素
:last-of-type 父元素的最后一个元素
:only-of-type 父元素的特定类型的唯一子元素
:only-child 父元素中唯一子元素
:nth-child(n) 选择父元素中第N个子元素
:nth-last-of-type(n) 选择父元素中第N个子元素，从后往前
:last-child 父元素的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择被禁用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择非 <selector> 元素的所有元素

属性选择器

[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

二、优先级

内联 > ID选择器 > 类选择器 > 标签选择器

三、继承属性

在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性
关于继承属性，可以分成：

字体系列属性

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体

文本系列属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

元素可见性

visibility

列表属性

list-style-type：文字前面的小点点样式 
list-style-position：小点点位置 
list-style：以上的属性可通过这属性集合

光标属性

cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

a 标签的字体颜色不能被继承

无继承的属性

display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after

em/px/rem/vh/vw 这些单位有什么区别？

px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值
rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算
vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

隐藏页面元素方式

实现方式

display:none
visibility:hidden
opacity:0
设置height、width模型属性为0
position:absolute
clip-path

display:none

元素不可见，不占据空间，无法响应点击事件性能消耗较大,页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流）

visibility:hidden

是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；元素不可见，占据页面空间，无法响应点击事件修改元素只会造成本元素的重绘,性能消耗较少,不会引起回流

opacity:0

改变元素透明度，元素不可见，占据页面空间，可以响应点击事件修改元素会造成重绘，性能消耗较少

设置height、width属性为0

元素不可见，不占据页面空间，无法响应点击事件

position:absolute

特点：元素不可见，不影响页面布局

clip-path

通过裁剪的形式

元素不可见，占据页面空间，无法响应点击事件

最常用的还是`display:none`和`visibility:hidden`

什么是重绘和回流

1.重绘
简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。
2.回流
当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。
总结
重绘不会引起dom结构和页面布局的变化，只是样式的变化，有重绘不一定有回流。
回流则是会引起dom结构和页面布局的变化，有回流就一定有重绘。
不管怎么说都是会影响性能。

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流

浏览器优化机制

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列

如何减少

避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘

如果使用CSS提高页面性能？

二、实现方式

实现方式有很多种，主要有如下：

内联首屏关键CSS
异步加载CSS
资源压缩
合理使用选择器
减少回流、重绘
减少http请求 cssSprite bas64
CSS3动画

内联首屏关键CSS

通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染

而如果外部引用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码，再渲染

所以，CSS内联使用使渲染时间提前

注意：但是较大的css代码并不合适内联初始拥塞窗口(没有缓存），而其余代码则采取外部引用方式

资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

合理使用选择器

css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下：

先找到h3标签元素
然后去除祖先不是.content的元素
最后去除祖先不是#markdown的元素

如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高

所以我们在编写选择器的时候，可以遵循以下规则：

不要嵌套使用过多复杂选择器，最好不要三层以上
使用id选择器就没必要再进行嵌套
通配符效率最低，避免使用

其他

减少回流、重绘
继承的属性的重复编写
cssSprite，合成所有icon图片，用宽高加上backgroud-position的背景图方式显现出我们要的icon图，减少了http请求
把小的icon图片转成base64编码减少一个图片的http请求
CSS3动画

CSS3新增了哪些特性？

新样式

边框

css3新增了三个边框属性，分别是：

border-radius：创建圆角边框
box-shadow：为元素添加阴影
border-image：使用图片来绘制边框

文字

word-wrap

语法：word-wrap: normal|break-word

normal：使用浏览器默认的换行
break-all：允许在单词内换行

text-overflow

text-overflow设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择：

clip：修剪文本
ellipsis：显示省略符号来代表被修剪的文本

text-shadow

text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

text-decoration

CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：

text-fill-color: 设置文字内部填充颜色
text-stroke-color: 设置文字边界填充颜色
text-stroke-width: 设置文字边界宽度

颜色

css3新增了新的颜色表示方式rgba与hsla

rgba分为两部分，rgb为颜色值，a为透明度
hsla分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

transition 过渡

transform 转换

transform属性允许你旋转，缩放，倾斜或平移给定元素

transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)

使用方式：

transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜

六、animation 动画

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬

animation也有很多的属性

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向
animation-paly-state：动画播放状态
animation-fill-mode：动画填充模式

渐变

颜色渐变是指在两个颜色之间平稳的过渡，css3渐变包括

linear-gradient：线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

radial-gradient：径向渐变

linear-gradient(0deg, red, green);

CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

其他

关于css3其他的新特性还包括flex弹性布局、Grid栅格布局，多列布局、媒体查询、混合模式等等......

CSS 预编语言

预处理语言

sass
less
stylus

基本使用

嵌套

变量

代码模块化

模块化就是将Css代码分成一个个模块

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

link属于HTML标签，而@import是css提供的；
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
@import只在IE5以上才能识别，而link无兼容问题；
link方式的样式的权重高于@import的权重。

浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
影响页面显示的结构。

清除浮动的方式：

最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。

元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

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

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？

解决方法：

浮动元素，float:left;
在父级元素中用font-size:0;

什么是CSS Sprites？

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能。

优点

减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；

缺点

图片合成比较麻烦；

CSS 中有哪几种定位方式？

	Static	Relative	Absolute	Fixed
定位	默认	相对	绝对	绝对
方式	正常文档流中	父，父所剩未被占用的空间	最近非static定位的父。若父都是static定位，以当前窗口定位	浏览器窗口
占用页面空间	会	会	不会	不会
top，bottom，left，right移动		可	可	可
z-index在z轴上移动		可	可	可

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

常见的解决方案有：

zoom
-webkit-transform:scale()

Zoom

zoom 的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸

zoom:50%，表示缩小到原来的一半
zoom:0.5，表示缩小到原来的一半

<style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block;
        zoom: 0.8;
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
</style>
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>

-webkit-transform:scale()

针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩

注意的是，使用scale属性只对可以定义宽高的元素生效，所以，下面代码中将span元素转为行内块元素

<style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block;
        -webkit-transform:scale(0.8);
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
</style>
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>

总结

Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排
-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化

如何实现单行／多行文本溢出的省略样式？

如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号

单行文本溢出

二、实现方式

单行文本溢出省略

文本在一行内显示，超出部分以省略号的形式展现

overflow:hidden
white-space:nowrap; 设置文本不换行
text-overflow:
-   clip：当对象内文本溢出部分裁切掉
-   ellipsis：当对象内文本溢出时显示省略标记（...）

text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的

html和css中的图片加载与渲染规则是什么样的？

浏览器渲染Web页面大约会经过六个过程：

解析HTML，构成DOM树
加载解析样式，构建样式规则树
加载JavaScript，执行JavaScript代码
DOM树和样式规则树进行匹配，构成渲染树
计算元素位置进行页面布局
绘制页面，最终在浏览器中呈现

css加载会造成阻塞吗？

css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行

为了避免让用户看到长时间的白屏时间，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法:

使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)
对css进行压缩
合理的使用缓存
减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

js和css是如何影响DOM树构建的？

CSS不会阻塞DOM的解析，但是会影响JAVAScript的运行，javaSscript会阻止DOM树的解析，最终css（CSSOM）会影响DOM树的渲染，也可以说最终会影响渲染树的生成。

JavaScript脚本在html页面中

<html>
  <body>
    <div>1</div>
    <script> 
      let div1 = document.getElementsByTagName('div')[0]
      div1.innerText = 'time.geekbang'
    </script>
    <div>test</div>
  </body>
</html>

当解析到script脚本标签时，HTML解析器暂停工作，javascript引擎介入，并执行script标签中的这段脚本。脚本执行完成之后，HTML解析器回复解析过程，继续解析后续的内容，直至生成最终的DOM。

变成引入javaScript文件的模式

<html>
  <body>
    <div>1</div>
    <script type="text/javascript" src='foo.js'></script>
    <div>test</div>
  </body>
</html>

执行到JAVAScript标签时，暂停整个DOM的解析，这里需要重点关注下载环境，因为javascript文件的下载过程会阻塞DOM解析

优化机制：

谷歌浏览器做了很多优化，解析到相关文件之后，会开启一个预解析线程提前下载这些文件。
也能使用 CDN 来加速 JavaScript 文件的加载
或者压缩 JavaScript 文件的体积。
如果 JavaScript 文件中没有操作 DOM 相关代码，就可以将该 JavaScript 脚本设置为异步加载，通过 async 或 defer 来标记代码

使用方式如下所示：

<script async type="text/javascript" src='foo.js'></script>
<script defer type="text/javascript" src='foo.js'></script>

async和defer区别：

async：脚本并行加载，加载完成之后立即执行，执行时机不确定，仍有可能阻塞HTML解析，执行时机在load事件派发之前。
defer：脚本并行加载，等待HTML解析完成之后，按照加载顺序执行脚本，执行时机DOMContentLoaded事件派发之前。

html页面中有css样式

如果代码里引用了外部的 CSS 文件，那么在执行 JavaScript 之前，还需要等待外部的 CSS 文件下载完成，并解析生成 CSSOM 对象之后，才能执行 JavaScript 脚本。

总结：JavaScript 会阻塞 DOM 生成，而样式文件又会阻塞js的执行。

你知道哪些css模块化的方案？

目前主流的 css 模块化分为 css modules 和 css in js 两种方案。

css modules

CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性, 编译时会将 css 类名加上唯一 hash。

css module 需要 webpack 配置 css-loader 或者 scss-loader , module 为 true

{
    loader: 'css-loader',
    options: {
        modules: true, // 开启模块化
        localIdentName: '[path][name]-[local]-[hash:base64:5]'
    }
}

IconFont 的原理是什么

IconFont 的使用原理来自于 css 的 @font-face 属性。这个属性用来定义一个新的字体，基本用法如下：

@font-face {
  font-family: <YourFontName>;
  src: <url> [<format>],[<source> [<format>]], *;
  [font-weight: <weight>];
  [font-style: <style>];
}

如何检测浏览器所支持的最小字体大小？

可以使用 JS 设置 DOM 的字体为某一个值，然后再取出来，如果值设置成功，就说明支持

如何使用css来实现禁止移动端页面的左右划动手势？

CSS属性 touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。

html{
 touch-action: none;
 touch-action: pan-y;
}

还可以直接指定对应元素的宽度和overflow：

html{
 width: 100vw;
 overflow-x: hidden;
}

行内元素和块级元素的区别

占据空间
起始行
width, height属性
margin 和 padding
居中

行内元素只占据它对应标签所包含的空间。 块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。 行内元素只占据内容撑起来的区域，而块级元素占据了一整行的区域 1、默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。

行内元素在一行内排不下的时候才会换行，而且其宽度随着元素的内容而变化。块级元素的则宽度自动填满其父元素宽度。
2、块级元素可以设置 width, height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。 而行内元素设置width, height无效。

3、块级元素可以设置margin 和 padding。 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果
但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（也就是水平方向有效，竖直方向无效）

4、块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素

想在<span>标签内包含<div>标签是不被允许的。而在<div>标签中包含<span>标签是经常看到的。

5、设置居中。

将块级元素当中的行内元素居中。

三、常见的行内元素和块级元素

1、常见的行内元素

<span> <a> <lable> <strong> <b> <small> <abbr> <button> <input> <textarea> <select> <code> <img> <br> <q> <i> <cite> <var> <kbd> <sub> <bdo>

2、常见的块级元素

<div> <p> <li> <h1> <h2> <h3> <h4> <h5> <h6> <form> <header> <hr> <ol> <address> <article> <aside> <audio> <canvas> <dd> <dl> <fieldset> <section> <ul> <video>

下面这段代码中，class为content的元素，实际高度是100px吗？

答案：不是

首先，content元素的 height 设置为 “100%”，在父级的高度为固定值时，直接继承该高度，也就是600px。

但父级设置了 display:flex ，在高度固定的前提下，子元素的高度会按比例进行缩放，所以content元素最后的高度应该是 600 * (600/(200+600+200)) = 360px

如何从html元素继承box-sizing？

不会覆盖其他组件的 box-sizing 值，又无需为每一个元素重复设置 box-sizing:border-box;

脱离文档流有哪些方法？

float
absolute
fixed

假设下面样式都作用于同一个节点元素`span`，判断下面哪个样式会生效

body#god div.dad span.son {width: 200px;} body#god span#test {width: 250px;}

先比较高权重位，即第一个样式的高权重为 #god = 100
第二个样式的高权重为 #god + #text = 200
100 < 200
所以最终计算结果是取 width: 250px;
若两个样式的高权重数量一样的话，则需要比较下一较高权重！

答案是 width: 250px;

下面代码中，p标签的背景色是什么？

答案是 red

什么是硬件加速

硬件加速就是将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得 animation 与 transition 更加顺畅。

我们可以在浏览器中用css开启硬件加速，使GPU (图形处理器)发挥功能，从而提升性能。

现在大多数电脑的显卡都支持硬件加速。鉴于此，我们可以发挥GPU的力量，从而使我们的网站或应用表现的更为流畅。

flexbox（弹性盒布局模型）是什么，适用什么场景？

flex布局.png

CSS中的 “flex:1;” 是什么意思？

flex
flex: auto	1 1 auto
flex: none	0 0 auto
(flex: 2) 非负数字: flex-grow值	2 1 0%
(flex: 0) 0时: flex-grow值	0 1 0%
(flex: 0%) 长度或百分比: flex-basis值	1 1 0%
(flex: 2 3) 两个非负数字:flex-grow flex-shrink值	2 3 0%
(flex: 11 32px) 一个非负数字和一个长度或百分比: flex-grow 和 flex-basis	11 1 32px

.item {
flex: 1
}
.item {
    flex-grow: 1
    flex-shrink: 1
    flex-basis: 0%
}

两栏布局、三栏布局、响应式布局

如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

两栏布局

使用float
flex实现

1. 使用float

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满

使用 float 左浮左边栏
右边模块使用 margin-left 撑出内容块做内容展示
为父级元素添加BFC，防止下方元素飞到上方内容

2. flex弹性布局

flex容器的一个默认属性值:align-items: stretch; 这个属性导致了列等高的效果。为了让两个盒子高度自动，需要设置: align-items: flex-start

三栏布局

三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之

两边使用 float，中间使用 margin
两边使用 absolute，中间使用 margin
两边使用 float 和负 margin
display: table 实现
flex实现
grid网格布局

两边使用 float，中间使用 margin

<style>
    .wrap {
        background: #eee;
        overflow: hidden; <!-- 生成BFC，计算高度时考虑浮动的元素 -->
        padding: 20px;
        height: 200px;
    }
    .left {
        width: 200px;
        height: 200px;
        float: left;
        background: coral;
    }
    .right {
        width: 120px;
        height: 200px;
        float: right;
        background: lightblue;
    }
    .middle {
        margin-left: 220px;
        height: 200px;
        background: lightpink;
        margin-right: 140px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
    <div class="middle">中间</div>
</div>

两边使用 absolute，中间使用 margin

基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序

<style>
  .container {
    position: relative;
  }
  
  .left,
  .right,
  .main {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background: green;
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    background: green;
  }

  .main {
    margin: 0 110px;
    background: black;
    color: white;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边固定宽度</div>
  <div class="main">中间自适应</div>
</div>

使用 display: table 实现

<style>
  .container {
    height: 200px;
    line-height: 200px;
    text-align: center;
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .left,
  .right,
  .main {
    display: table-cell;
  }

  .left,
  .right {
    width: 100px;
    background: green;
  }
 
  .main {
    background: black;
    color: white;
    width: 100%;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="main">中间自适应</div>
  <div class="right">右边固定宽度</div>
</div>

使用flex实现

<style type="text/css">
    .wrap {
        display: flex;
        justify-content: space-between;
    }

    .left,
    .right,
    .middle {
        height: 100px;
    }

    .left {
        width: 200px;
        background: coral;
    }

    .right {
        width: 120px;
        background: lightblue;
    }

    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>

什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？

响应式网站常见特点：

同时适配PC + 平板 + 手机等
标签导航在接近手持终端设备时改变为经典的抽屉式导航
网站的布局会根据视口来调整模块的大小和位置

实现方式

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

实现响应式布局的方式有如下：

媒体查询
百分比
vw/vh
rem CSS3 中的增加了更多的媒体查询

@media screen and (max-width: 1920px) { ... }
// 当视口在375px - 600px之间，设置特定字体大小18px
@media screen (min-width: 375px) and (max-width: 600px) { 
    body { 
        font-size: 18px; 
    } 
}

百分比

通过百分比单位 " % " 来实现响应式的效果

vw/vh

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。
任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一

rem

rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px

可以利用前面提到的媒体查询，针对不同设备分辨率改变font-size的值，如下：

@media screen and (max-width: 414px) {
  html {
    font-size: 18px
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 16px
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 12px
  }
}

为了更准确监听设备可视窗口变化，我们可以在css之前插入script标签，内容如下：

//动态为根元素设置字体大小
function init () {
    // 获取屏幕宽度
    var width = document.documentElement.clientWidth
    // 设置根元素字体大小。此时为宽的10等分
    document.documentElement.style.fontSize = width / 10 + 'px'
}

//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

小结

响应式设计实现通常会从以下几方面思考：

弹性盒子（包括图片、表格、视频）和媒体查询等技术
使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围
使用相对单位使得内容自适应调节

响应式布局优点可以看到：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

垂直水平居中实现方式

// 定宽高
<div class="box" style="width: 200px;height: 200px;">
    <div class="children-box" style="width: 50px;height: 50px;">111</div>
</div>

// 不定宽高
<div class="box" style="width: 200px;height: 200px;">
    <div class="children-box">111</div>
</div>

CSS模块-速记版本总结

css 优先级是怎么计算的

前端实现动画有哪些方式？

1.css3的transition

transform 转变动画

3.css3的animation

CSS动画和JS实现的动画分别有哪些优缺点？

CSS动画

优点

缺点

JS动画

优点

缺点

盒子模型

标准盒子模型

IE 怪异盒子模型

Box-sizing

css选择器有哪些？优先级分别是什么？哪些属性可以继承？

一、选择器

二、优先级

三、继承属性

无继承的属性

em/px/rem/vh/vw 这些单位有什么区别？

隐藏页面元素方式

实现方式

display:none

visibility:hidden

opacity:0

设置height、width属性为0

position:absolute

clip-path

最常用的还是display:none和visibility:hidden

什么是重绘和回流

浏览器优化机制

如何减少

如果使用CSS提高页面性能？

二、实现方式

内联首屏关键CSS

资源压缩

合理使用选择器

其他

CSS3新增了哪些特性？

新样式

边框

文字

word-wrap

text-overflow

text-shadow

text-decoration

颜色

transition 过渡

transform 转换

六、animation 动画

渐变

CSS3新增伪类有那些？

其他

CSS 预编语言

预处理语言

基本使用

嵌套

变量

代码模块化

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

浮动带来的问题：

元素竖向的百分比设定是相对于容器的高度吗？

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

两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？

什么是CSS Sprites？

优点

缺点

CSS 中有哪几种定位方式？

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

Zoom

-webkit-transform:scale()

总结

如何实现单行／多行文本溢出的省略样式？

二、实现方式

单行文本溢出省略

html和css中的图片加载与渲染规则是什么样的？

css加载会造成阻塞吗？

1.css3的`transition`

3.css3的`animation`

最常用的还是`display:none`和`visibility:hidden`

假设下面样式都作用于同一个节点元素`span`，判断下面哪个样式会生效