前端面试之路一(HTML+CSS面试整理)

值得关注的选择器

选择器分类

元素选择器             a{}

伪元素选择器         ::before{} //真实存在的容器

类选择器                 .link{}

属性选择器             [type=radio]{}

伪类选择器             :hover{} //元素的状态

ID选择器               #id{}

组合选择器             [type=checkbox] + label{}

否定选择器             :not(.link){}

通用选择器             *{}

选择器权重

ID选择器器             +100

类 属性 伪类器       +10

元素 伪元素器         +1

其它选择器器          +0

计算一个不进位的数字

#id .link a[href]

计算：

#id          +100

.link       +10

a               +1

[href]      +0

结果：111

#id .link.active
#id       +100
.link       +10
.active   +10
结果：120

不进位

只要有id选择器，就是最大，类选择器再多也不会进位，只能在自己位上

百位    十位    个位

其他选择器权重

!important优先级最高

元素属性优先级高 //元素的属性 > 外部样式表 (style标签，外部样式表)

相同权重后写的生效

非布局样式

字体、字重、颜色、大小、行高

背景、边框

滚动、换行

粗体、斜体、下划线

字体族

serif(衬线字体)

sans-serif(非衬线字体)

monospace(等宽字体，例如代码)

cursive(方正静蕾体)

fantasy

多字体fallback机制

指定多个字体，如果找不到会按照顺序使用其他字体，或者用同类字体

font-family:Monaco PingFangSC

英文字体用Monaco,但是Monaco没有中文字体，所以如果碰到中文会使用PingFangSC，一个字体一个字体的找

font-family:"Microsoft Yahei",serif

字体族不需要引号，因为不是具体的字体

.chinese{
    font-family:"PingFang SC","Microsoft Yahei",monospace
}

指定在mac系统上用PingFang SC,windows上用Microsoft Yahei，把单个平台独有的字体写到前面

网络字体、自定义字体

自定义字体

@font-face{
    font-family:"IF";
    src:url("./IndieFlower.ttf");
}

.custom-font{
    font-family:IF;
}

网络字体：注意跨域

iconfont

字体机制

先把只有一个平台才有的写到最前面

引用远程字体有问题的话，要注意跨域问题

阿里巴巴的图标库，自选 iconfont.cn

行高的构成

行高由line-box决定

line-hight会撑起inline-box的高度，并不会影响本身布局的高度，但是会影响外部元素(line-box)

inline-box组成line-box，line-box高度是由inline-box决定

行高的相关现象

一般做垂直居中用line-height做就行了

默认情况是按照base-line对齐，如果要居中对齐就用vertical-align:middle

底线、顶线和文字的顶和文字的底是不一样的

经典图片空隙问题

原理：按照inline排版，如果按照inline排版的话，默认按照基线排版(base-line)

基线和底线之间有距离的，如果12px字体那么缝隙可能就是3px

解决方案：按照底线对齐，vertical-align:bottom 或者display:block

背景颜色

HSL

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

S：Saturation(饱和度)。取值为：0.0% - 100.0%

L：Lightness(亮度)。取值为：0.0% - 100.0%
background:hsl(0,100%,50%)

RGB(A)

背景图

渐变色背景

background: webkit-linear-gradient( left, red, green); //老式写法

background: linear-gradient(to right,red, green) ;

background: linear-gradient (45deg, red, green);

background: linear-gradient( 135deg, red 0, green 50%, blue 100%)

background: linear-gradient ( 135deg, transparent 0, transparent 49.5%,green 50%)

多背景叠加

background: linear-gradient( 135deg, transparent 0, transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%),linear-gradient( 45deg, transparent 0, transparent 49.5%,green 49.5%,green 50.5%,transparent 50.5%,transparent 100%)

background-size:30px 30px

background实现各种渐变背景，可以通过叠加实现，放射渐变

背景图片和属性(雪碧图)

优点：

减少加载网页图片时对服务器的请求次数

提高页面的加载速度

由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。
单张的 GIF 只有相关的一个色表，而多带带分割的每一张 GIF
都有自己的一个色表，这就增加了总体的大小。
因此，多带带的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小

缺点：

单个图片大小，考虑网络环境比较差的情况

内存使用问题。大量空白你就会最终使用大量的无用的空白。

一个例子是来自于WHIT TV的网站。
注意这是一个1299×15,000像素的PNG图片。
它也被压缩的很好——实际下载大小只有大概26K —
但是浏览器并不会渲染压缩后的图片数据。当这个图片被下载并被解压缩之后

维护比较麻烦，

base64和性能优化

一种文本格式，显示的是一串文本，而这串文本就是图片本身

优点

传输性能，减少http请求

缺点：

增大了体积的开销

图片本身提交增大1/3

增大css体积

增加了解码的开销

适用：小图标，例如：loading图

用法：一般用在构建中转，打包

多分辨率适配

边框的属性

线型

大小

颜色

边框背景图

border-img("./border.img") 30 round;

//repeat：可能会导致不完整
//round：整数个拼，可能会有一些空间上的压缩

边框衔接(三角形)

原理：利用边框衔接过程是斜切

width:0px;
border-bottom:30px solid red;
border-left:20px solid transparent;
border-right:20px solid transparent;

滚动行为和滚动条

visible:内容直接显示，撑出容器

hidden：超出容器部分隐藏

scroll:超出容器滚动，始终显示滚动条

auto:超出容器滚动，当内容比较短不需要滚动条的时候不显示滚动条

在mac系统上收系统设置影响

overflow-wrap(word-wrap)通用换行控制

- 兼容性不太好，经常还用word-wrap
- 是否保留单词
- `normal`    只在允许的断字点换行（浏览器保持默认处理）。
- `break-word`    在长单词或 URL 地址内部进行换行。

word-break

- 针对多字节文字，中文句子也是单词
- `break-all`    允许在单词内换行。
- `keep-all`    只能在半角空格或连字符处换行，中文句子也不换行，兼容性还有点问题

white-space

- 空白处是否断行
- 不换行的话    `white-space: nowrap` 

overflow-wrap: break-word ;
word-break: keep-all;
white-space: normal ;

字重(粗体) font-weight

斜体font-style:itatic

下划线text-decoration

指针cursor

Hack看起来不合法但生效的写法

主要用于区分不同的浏览器，只在特定的浏览器生效

缺点

难理解

难维护

易失效

替代方案

特性检测

针对性加class

使用注意

标准属性写到前面，hack写到后面

作用

浏览器兼容性

典型案例

checkbox

tabs

CSS布局

早期以table为主(简单)

解析并不是流式的，以前可能等待时间长，现在已经可以流式布局

后来以技巧性布局为主(难)

现在有flexbox/grid(偏简单)

响应式布局是(必备知识)

常用布局方式

table表格布局

float浮动+margin

inline-block布局

flexbox布局

布局方式(表格)

display:table

display:table-row

盒模型

宽度和高度是只对内容区生效
占据的空间是content + padding + border

#### display/position

display确定元素的显示类型：

block

inline

inline-block:有宽高有可以与其他元素排在同一行

position确定元素的位置：

static:静态布局，按照文档流布局

relative:相对于元素本身的偏移，relative偏移时，元素所占据的文档空间不会产生偏移

absolute：从文档流脱离，相对于最近的父级absolute或者relative，如果父级不是的话，会一直网上到body

fixed:相对于屏幕/可视区域

定位于relatvie、absolute、fixed都可以设置z-index，数值越大附带

弹性盒子

盒子本来就是并列的

指定宽度即可

低版本IE不支持

出过三个版本，市面上各个浏览器都有对应的解析，会导致一些兼容性问题

移动浏览器基本兼容,react Native和微信小程序可以直接用来布局

弹性布局用法详解

float

元素“浮动”

脱离文档流

但不脱离文本流

float对自身的影响：

形成“块”(BFC),inline元素也可以设置宽高(BFC背后的神奇原理)

位置尽量靠上

位置尽量靠左(右)

float本意就是要做文字环绕、图文混排等内容的

对兄弟的影响

上面贴着非float元素

旁边贴float元素

不影响其他块级元素位置

影响其他块级元素内部文本

对父级元素的影响

从父级元素上“消失”

高度“塌陷”

解决“高度塌陷”的方案

让父元素形成BFC来接管自己的高度

overflow:auto/hidden

当里面的元素超出的时候自动滚动

用其他元素撑起来

container2::after{
    content:"";
    clear:"both";       //保证这个元素左右都是"干净"的，没有浮动元素
    display:block;      
    height:0;           //不占高度
    visibility:hidden   //不用显示
}
//比较经典的清除浮动布局的方式    

float布局

兼容性好

float和margin实现两栏布局和三栏布局

两栏布局：

float:left(左)

margin-left:左元素的宽度(右)

三栏布局：记住“尽量往左靠，尽量往右靠”

float:left(左)

float:right(右)

中间元素写在最后，否则右边的float元素不会对其

margin-left:左元素的宽度

margin-right:右元素的宽度

像文本一样排block元素

没有清除浮动等问题

需要处理间隙

处理间隙

间隙来源：html中的空白

处理办法：

直接把两块html写在一起；

两块中间加一个注释；

父字体设置font-size:0;子块重新加上字体font-sizi:14px;

响应式设计和布局

在不同的设备上正常使用

一般主要处理屏幕大小的问题

主要方法：

隐藏+折行+自适应空间

rem/viewport/media query

viewport：

适配的第一部永远是加上viewport

viewport`可视区大小=屏幕大小`，有些设备默认屏幕宽度980px

如果固定使用width，可以使不同页面等比放大

也可以根据window.innerWidth动态计算页面的宽度

media query:

@media(max-width:640px){
    .left{
        display:none;
    }
}

rem：

    html{
        font-size:16px; // 默认16个像素，为了好记一般设置10px，20px
    }

@media (maxwidth: 375px){
    html{
        font-size :24px ;
    }
}    
@media (max-width: 320px){
    html{
        fonts ize: 20px;
    }
}    
@media (max-width: 640px){
    intro{
        margin: .3rem auto ;
        display: block;
    }
}

//精确性要求高的地方不要使用`rem`布局

float布局:兼容性好

表格布局 display:table

float+margin布局(清理浮动)

inline-block布局(处理间隙)

flexbox布局(兼容性不是特别好)

前者相对于最近的absolute/relative

后者相对屏幕(viewport)

如果要兼容老的设备，fixed兼容性不是很好

原因:空白字符

解决:消灭字符(标签写到一起不要加空白，或者中间写上注释)或者消灭间距

浮动元素不会占据父元素空间，因此父元素不会管浮动元素，很可能超出父元素，对其他元素产生影响。作为父元素一定要清除浮动，保证对外没有影响

清除浮动原理

让盒子负责自己的布局

overflow:hidden(auto)

::after{clear:both}(也可以用多带带的元素)

首先适配viewport(页面宽度和移动端适配)

rem/viewport/media query(大小方面的适配)

设计上:隐藏折行自适应

效果属性

box-shadow

text-shadow

border-radius

background

clip-path

营造层次感(立体感)

充当没有宽度的边框

特殊效果

一个div画xx系列，可以用box-shadow，其他图形可以通过点，确定是可能有性能问题

立体感

印刷的品质感

圆角矩形

圆形(圆角足够大 border-radius:50%)

百分比是宽高的百分比

半圆/扇形

一些奇怪的角角

多背景叠加(颜色、图片、渐变)
效果

纹理、图案

渐变

雪碧图动画

.i{
    width: 20px ;
    height :20px ;
    background: url(./background.png) no repeat;
    background-size: 20px 40px;
    transition: background-position .4s ;
}
.i:hover{
    background-position: 0 20px;
}

背景图尺寸适应方案

对容器进行裁剪

常见几何图形

自定义路径

clip-path支持动画且不改变容器大小

clip-path: inset(100px 50px);

clip-path: circle(50px at 100px 100px);

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);

  clip-path: url(#clipPath);
  background-size: cover; 
 transition:clip-path .4s;

支持svg

transform

变换transform(2D)

translate(translateZ 3D立体)

scale

skew(斜切)

rotate

transform:translateX(100px) translateY(100px) rotate(25deg)

transform:rotate(25deg) translateX(100px) translateY(100px) 

//有顺序

缺点：性能不是很好

复杂场景下出现渲染不一样问题

box-shadow无限投影
::before
::after

box-shadow

outline

border-radius:50%

clip-path:(svg)

border-radius组合：

有无边框

边框粗细

圆角半径

background-position
background-repeat
background-size(cover/contain)

transform:translateX(100px)
transform:scale(2)

perspective:500px;              //指定透视的角度
transform-style:preserve-3d;    //保留3D效果
transform:translate rotate;        

动画的原理：

视觉暂留作用

画面逐渐变化

动画的作用

愉悦感

引起注意

操作进行反馈

掩饰(程序在后台加载)

动画类型

transition补间动画(中间的过程浏览器脑补起来)

keyframe关键帧动画(也是补间动画，但是有很多关键帧)

逐帧动画(特殊的逐帧动画，无法使用补间动画)

位置-平移(left/right/margin/transform)

方位-旋转(transform)

大小-缩放(transform)

透明度(opacity)

其他-线性变换(transform)

[深入了解transition动画](https://www.cnblogs.com/xiaoh...
)

transition: [动画类型] [动画时间]

transition-delay //延迟多长时间执行

transition-delay:width 1s,background 3s; //多个效果叠加

transition-timing-function

timing(easing)：定义动画进度和时间的关系

linear

ease-in-out

自定义贝塞尔曲线

相当于多个补间动画

与元素状态的变化无关

定义更加灵活

animation:run 1s linear;

animation-direction //reverse:反向

animation-fill-mode:forword //forwards,backwards决定动画最终停留在哪里

animation-iteration-count //infinite:循环次数

animation-play-state:pause //js控制它的停和动

每帧都是关键帧，中间没有补间过程

依然使用关键帧动画

属于关键帧动画中的一种特殊情况

适用于无法补间计算的动画

资源较大(适合时间短、资源小的动画，一定要控制好大小的时长)

使用steps()

例如：图片合成的动画

animation-timing-function:steps(1)

指定时间和动画进度关系

中间不要加东西，每个区间就只有一个状态，静止

step是指定每个区间帧数

transition

keyframes(animation)

过度动画需要有状态变化，关键帧动画不需要有状态变化

关键帧动画能控制更精细

使用关键帧动画

去掉补间(steps)

性能不差

部分情况下优于JS

但JS可以做到更好

部分高危属性，box-shadow等

介绍

基于CSS的另一种语言

通过工具编译成CSS

添加了很多CSS不具备的特性(变量)

能提升CSS文件的组织方式

less和sass的区别

less

基于node

优点：用JS写的，编译速度比较快，有个浏览器中可以直接使用的版本，不需要预先编译,入门简单

缺点：在一些复杂特性上比较繁琐

sass(scss)

ruby写的比较慢，但是有解决方案，可以使用它的移植版本node-sass

CSS预处理器

嵌套                              反映层级和约束

变量和计算                   减少重复代码

Extend和Mixin          代码片段

循环                               适用于复杂有规律的样式

import CSS                  文件模块化

less
加上 &：并不是父子关系而是同级
CSS中并不允许这么嵌套写，less和sass允许，结构关系清晰

body{
    padding:0px;
    margin: 0px;
}
.wrapper{
    background: white;
    .nav{
        font-size: 12px;
    }
    &:hover{                      //伪类
        background: red
    }
}

打包指令

lessc a.less > a.css

sass

npm install node-sass

sass的输出有多重格式

node-sass  a.scss>a.css  --output-style expanded 

使用这条命令时候，我们编译的路径，不能有中文名，否则会报错，之后只要我们更改scss文件，保存后，就会自动修改编译后的css文件

变量为了可以参与运算，提供了各种运算的函数，包括颜色

less:@fontSize

sass:$fontSize

less的理念：尽量的接近css的语法

sass的理念：尽量避免产生混淆

CSS中并没有提供复用CSS的方法，而是通过HTML复用

less

.block(@fontSize){
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.block(@fontsize+2px);

不加括号也可以，不加括号.block{}不会被编译出来，加了会被编译出来

sass

@mixin block($fontSize) {
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

@include block(font-size+2px);

区别在于需要显示的声明和调用，而且不能既做class又做mixin

场景：mixin清除浮动

作用

减少重复代码

不会复制重复代码

选择器提取出来，公共的样式写到一起

less
写法:

.block{
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

引用:

 .nav:extend(.block){
        font-size: @fontSize;
    }

 .content{
        font-size: @fontSize + 2px;
        &:extend(.block);
    }

生成效果:

.block,
.wrapper .nav,
.wrapper .content {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

sass
写法：

.block {
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

引用：

@extend .block;

生成效果：

.block, .wrapper {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px; 
}

less
less中实际上没有循环的语法,通过递归来实现相应的效果
引用方法:

.gen-col(@n) when (@n > 0 ){
    .gen-col(@n - 1);
    .col-@{n}{
        width: 1000px/12*@n;
    }
}

.gen-col(12);

生成效果:

.col-1 {
  width: 83.33333333px;
}
.col-2 {
  width: 166.66666667px;
}
.col-3 {
  width: 250px;
}
.col-4 {
  width: 333.33333333px;
}
.col-5 {
  width: 416.66666667px;
}
.col-6 {
  width: 500px;
}
.col-7 {
  width: 583.33333333px;
}
.col-8 {
  width: 666.66666667px;
}
.col-9 {
  width: 750px;
}
.col-10 {
  width: 833.33333333px;
}
.col-11 {
  width: 916.66666667px;
}
.col-12 {
  width: 1000px;
}

应用场景：表格、特效等

sass

mixin方式：

@mixin gen-col($n) {
    @if $n>0 {
        @include gen-col($n - 1);
        .col-#{$n} {
            width: 1000px/12*$n;
        }
    }
}

@include gen-col(12);

sass是支持循环的，不需要递归

@for $i from 1 through 12 {
    .col-#{$i} {
        width: 1000/12*$i;
    }
}

使得CSS变得更像一门变成语言

预处理器的变量跨文件

@import "logo";
@import "nav";
@import  "content";

预处理器的模块化，提供了按需使用他人代码的可能

SASS-Compass

Less-Lesshat/EST(国内)

提供现成mixin

提供JS类库，封装常用功能

有兼容性问题的封装成mixin统一处理

Less(Node.js)

Sass(Ruby，有Node版本)

帮助更好地组织CSS代码

提高代码复用率

提升可维护性

嵌套 反应层级和约束

变量和计算 减少重复代码

Extend和Mixin 代码片段

循环 适用于复杂有规律的样式

import CSS文件模块化

优点：提高代码复用率和可维护性

缺点：需要引入编译过程 有学习成本

前端工程化发展起来了，预处理器的热度有所下降

介绍

一个CSS框架

twitter出品

提供通用基础样式

Bootstrap4

兼容IE10+(bootstrap3兼容到IE9)

使用flexbox布局

抛弃Nomalize.css

提供布局和reboot版本

功能

基础样式

常用组件

JS插件

现在用sass编写

用于组件交互

dropdown(下拉)

modal( 弹窗)

基于jQuery

依赖Popper.js

bootstrap.js

使用方式

基于data-属性

基于JS-API

不同的分辨率下面又不同的分配

使用CSS同名类覆盖

修改源码重新构建                             //修改彻底，但是需要了解整个框架

使用SCSS源文件，修改变量           //对结构的要求更高

把bootstrap当初一个预处理文件来使用，十一个更干净的使用方式

优点：CSS代码结构合理，现成的样式可以直接使用

缺点：定制较为繁琐，体积大

原理：通过media query设置不同分辨率的class

使用：为不同分辨率选择不同的网格class

使用CSS同名覆盖

修改源码重新构建

引用SCSS源文件，修改变量

CSS工程化介绍

组织

优化

构建

维护

PostCSS本身只有解析能力

各种神奇的特性全靠插件

目前至少有200多个插件

import模块合并

autoprefixier自动加前缀

cssnano压缩代码

cssnext使用css新特性

precss

变量

条件

循环

MIxin Extend

import

属性值引用

postCSS支持的构建工具

Webpack        postcss-loader

Gulp              gulp-postcss

Grunt            grunt-postcss

Rollup          rollup-postcss

css-loader将css文件变成js文件

style-loader将变成js的css文件注入到页面中

直接将class名全部换掉，确保组件样式不冲突

var styles = require("component.css");

style.green ...

css-loader                  将 CSS变成JS

style-loader              将JS样式插入head

ExtractTextPlugin     将CSS从JS中提取出来

css modules                 解决css命名冲突的问题(映射表)

less-loader                sass-loader各类预处理器

postcss-loader           PostCSS处理

less sass 等CSS预处理器

PostCSS插件(postCSS-import/precss等)

webpack处理CSS(css-loader+style-loader)

取决于插件可以做什么

autoperfixer cssnext precss等，兼容性处理

import模块合并

css语法检查、兼容性检查

压缩文件

解决类名冲突的问题

使用PostCSS或者webpack等构建工具进行编译

在HTML模板中使用编译过程产生的类名

JS作为入口，管理资源有天然优势

将组件的结构、样式、行为封装到一起，增强内聚

可以做更多处理(webpack)

Angular各版本

Angular.js(1.x)

没有样式集成能力

Angular(2+)

typeScript

提供了样式封装能力

与组件深度集成

shadowDOM

逻辑上是一个DOM

结构上存在子集集合

shadowDOM介绍

Scoped CSS

限定了范围的CSS

无法影响外部元素

外部样式一般不影响内部

可以通过/deep/或>>>穿透

兼容性还存在问题

模拟Scoped CSS

方案一：随机选择器(不支持)

方案二：随机属性

内置CSS解决方案
模拟Scoped CSS