HTML CSS 面试题解（不定期更新）

最新推荐文章于 2024-05-28 14:55:45 发布

材女的进击

最新推荐文章于 2024-05-28 14:55:45 发布

阅读量376

点赞数 1

分类专栏： CSS 前端前端面试

本文链接：https://blog.csdn.net/weixin_39987434/article/details/100986490

版权

前端同时被 3 个专栏收录

76 篇文章 2 订阅

订阅专栏

前端面试

36 篇文章 1 订阅

订阅专栏

CSS

20 篇文章 0 订阅

订阅专栏

1. HTML基础强化

HTML重要属性

a [href,target]
img [src,alt]
table td [colspan,rowspan]
form[target,method,enctype]
input[type,value]
button[type]
select>option[value]
label[for]

HTML语义化标签

代码结构清晰，易于阅读，像是一篇文章一样，利于开发和维护

方便其他设备解析（如屏幕阅读器）根据语义渲染网页

有利于搜素引擎（SEO），搜索引擎爬虫根据不同标签来赋予不同的权重

HTML版本

HTML4	XHTML	HTML5
标签允许不结束	标签必须结束	标签允许不结束
属性不用带引号	属性必须带引号	属性不用带引号
标签属性可大写	标签属性必须小写	标签属性可大写
Boolean属性可省略值	Boolean属性必须写值	Boolean属性可省略值

// HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

// XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

//HTML5
<!DOCTYPE html>
<html>

HTML5 新增标签

// 新区块标签

section :包含在文档中的独立部分，一般会包含一个标题

article ：独立结构，意在成为可或独立分配的或复用的结构，语义化比section强

nav

aside ：与页面内容关系不大的部分，通常为侧边栏或标注栏

// 新增内容

表单增强

日期、时间、搜索

表单验证

placeholder的自动聚焦

//新增语义

header/footer 头尾

section/article 区域

nav 导航 aside

不重要的内容

em / strong 强调

i icon

HTML元素分类

按默认样式分

块级 block

行内 inline

inline-block

按内容分

面试题：

doctype的意义是什么

让浏览器以标准模式渲染

让浏览器知道元素的合法性

HTML XHTML HTML5

HTML属于SGML

XHTML属于XML，是HTML进行XML严格化的结果

HTML5不属于SGML或XML，比XHTML宽松

HTML5有什么变化

新的语义化元素

表单增强

新的API（离线、音视频（audio，video）、图形（canvas）、实时通信（webSocket）、本地存储（localStorage,sessionStorage）、设备能力(定位等)）

分类和嵌套变更

em 和 i 的区别

em 是语义化标签，表强调

i是纯样式的标签，表斜体

html5中i不推荐使用，一般用作图标

语义化的意义

开发者易于理解

机器容易理解结构（搜索引擎和读屏软件）

有助于SEO

semantic microdata

哪些元素可以自闭合

表单元素 input

图片 img

br hr

meta link

HTML和DOM的关系

HTML是‘死’的

DOM是HTML解析而来，是‘活’的

js可以维护DOM

property 和attribute 的区别

property : JS对象的属性的获取和修改，是这个DOM元素作为对象，其附加的属性或者内容，如childNodes，firstChild等。

attribute ： HTML标签属性的修改，是DOM节点自带属性，例如我们在HTML中常用的id,class,src,title,alt等

我们常把他们弄混淆是因为，有些例如id,class,title常用的Attribute已经被作为Property附加在DOM对象上，也可以取值和赋值。但是自定义的Attribute就不能了，

form的作用有哪些

直接提交表单

使用submit、reset按钮

便于浏览器保存表单

第三方库可以整体提取值

第三方库可以进行表单验证

2. CSS 基础

选择器分类

元素选择器 a{}

伪元素选择器 ::before{}

类选择器 .link{}

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

伪类选择器：hover{}

ID选择器 #id{}

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

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

通用选择器 *{}

选择器权重

ID 选择器 +100

类属性伪类 +10

元素伪元素 +1

其他选择器 +0

！important 优先级最高

元素属性优先级高（内联属性比外部css优先级高）

相同权重后写的生效

字体

自定义字体的使用

行高

行高的构成

行高由line box决定，line box 由inline box组成，box的高度决定line box的高度

行高相关的现象和方案

设置 line-height 实现垂直居中

设置 vertical-align: middle;实现垂直居中

去除图片下面3px的空隙 : vertical-align : bottom

背景

背景颜色
渐变色背景
background: linear-gradient(135deg, red 0, green 30%,black 40%, yellow 50%, blue 100%);
多背景叠加

//实现了网格线
//实现了网格线
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%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
background-size: 30px 30px;
背景图片和属性
base64和性能优化

优点：

减少了http请求

某些文件可以避免跨域的问题

没有图片上传要重新上传，还要清理缓存的问题

缺点：

增加了CSS尺寸

增加了base64的编码成本

应用场景

这类图片很少被更新

这类图片实际尺寸很小

这类图片在网站中大规模使用

多分辨率的适配

边框

边框背景图

border:30px solid transparent; border-image:url(./border.png) 30 round; // round 显示比较完整

边框实现三角形

原理：边框之间衔接的地方是呈现45度斜线，将左右两边设置成透明，将盒子的宽度设置为0，就可以显示为三角形
width:0px;
height: 200px;
border-bottom:30px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;

// 倒三角
span{
    display:inline-block;
    width:0;
    height:0;
    border-width:20px;
    border-color:red transparent transparent transparent ;
    border-style : solid dashed dashed dashed;
}

滚动

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

文本折行

word-break overflow-wrap white-space

 // 文本不换行： white-space: nowrap;

CSS面试真题

CSS 样式的优先级

计算权重确定

ID 选择器 +100

类属性伪类 +10

元素伪元素 +1

其他选择器 +0

！important

内联样式

后写的优先级高

雪碧图的作用 (css aprite)

将背景图片整合到一张图片文件中

利用background-image background-repeat background-position 组合实现

减少http请求数，增加加载性能

有一些情况可以减少图片大小

自定义字体的使用场景

宣传、品牌。banner等固定文案

字体图案

base64的使用

减少http请求

适用于小图片

base64的体积会增大

伪元素和伪类的区别

前者单冒号，后者双冒号

伪类与伪元素都是用于向选择器加特殊效果

伪类与伪元素的本质区别就是是否抽象创造了新元素

伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现

伪类只要不是互斥可以叠加使用

伪元素在一个选择器中只能出现一次，并且只能出现在末尾

如何美化CheckBox

label[for]和id

隐藏原生input

:checked + label

3. CSS 布局

常用布局方法

table表格布局

float + margin

inline-block布局

flexbox布局

table 表格布局

<div class='table'>
    <div class='tabel-row'>
        <div class='left table-cell'>左
        </div>
        <div class='right table-cell'>右
        </div>
    </div>
</div>

// css
.table-row{
            display: table-row;
        }
.table-cell{
            vertical-align: center;
            display: table-cell;
        }

盒模型
display / position

确定元素的显示类型

block/inline/inline-block

确定元素的位置

static/relative/absolute/fixed

relative 相对于自身的默认位置

absolue 脱离文档流，是相对于最近的absolute 或relative定位

fixed脱离文档流，相对于视图

层叠顺序

定位为fixed relative absolute的可以设置z-index调节层叠顺序

使用最多的场景是：子绝父相即子元素使用绝对定位，父元素相对定位

例子：小盒子在大盒子中实现水平居中

先设置子绝父相，然后给子盒子设置left：50%，此时子盒子移到了父盒子宽度的一半，然后设置margin-left：-子盒子宽度值的一半（注意一定要是负值），实现居中。

拓展：

如果文字和图片在同一行中的话，文字的基线会和图片的底部对齐。

flexbox

弹性盒子

盒子本来是并列的

指定宽度即可

float布局

元素浮动

脱离文档流

但不脱离文本流

对自身的影响：

形成‘块’

位置尽量考上

位置尽量靠左或右

对兄弟元素的影响：

上面贴非float元素

旁边贴float元素

不影响其他块级元素的位置

影响其他块级元素文本位置

对父级元素的影响：

从布局上“消失”

高度塌陷

设置overflow ：hidden解决

浮动对页面的影响

如果一个父盒子中有一个子盒子，并且父盒子的高度没有设置，子盒子设置了浮动，则会导致父盒子的高度为0，子盒子浮动元素并不会将父盒子撑起来，而是会脱离文档流。父盒子的兄弟元素会自动补位。所以需要清除浮动。

清除浮动的方式：

1. 在浮动元素下面加一个空白标签，该标签添加 clear：both

2. 在浮动元素的父元素中添加overflow：hidden ，

2. 伪元素：
.container2::after{
            content: ' ';
            clear:both;
            display: block;
            visibility: hidden;
            height:0;
        }
float实现三栏布局
<div class='container'>
    <div class='left'>左
    </div>
    <div class='right'>右
    </div>
    <div class='middle'>中
    </div>
</div>
 .container{
            width:800px;
            height:200px;
        }
.left {
    float:left;
    width:200px;
    height:100%;
}
.right{
    float:right;
    width:200px;
    height:100%;
}
.middle{
    margin-left : 200px;
    margin-right:200px; 
}

inline-block 布局

像文本一样排block元素

没有清除浮动等问题

需要处理间隙通过设置父元素的font-size：0 ，子元素各自设置font-size解决

有时候inline-block还会遇到顶部不在一个基准线的情况（垂直方向上产生的间隙），解决办法：在每一个子元素上加一个属性：vertical-align:top（或bottom）;

响应式设计和布局

主要方法：

隐藏 + 折行 + 自适应空间

rem/ viewport/ media query
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

面试真题

实现两栏（三栏）布局的方法

表格布局

float+margin布局（注：清除浮动）

inline-block布局（注：间隙的处理）

flexbox布局

position:absolute / fixed 有什么区别

absolute相对最近的 absolute / relative元素

fixed x相对于屏幕（viewport）

display ： inline-block 间隙问题

原因：字符间距

解决：消除字符或消除间距

父级元素设置：

font-size ：0 去除换行符间隙

letter-spacing：-3px; // 负值

如何清除浮动

让盒子负责自己的布局

在浮动元素末尾添加一个空的标签
<div style="clear:both"></div>
父元素设置 overflow : hidden(auto)
.container {
    overflow : auto;
    ...
}
使用 :after 伪元素
.clearfix:after {
    content:'';
    display:block;
    height:0;
    clear:both;
    visibility: hidden
}

如何适配移动端的适配

viewport

rem/viewport/media query

设计上：隐藏折行自适应

圣杯布局/双飞翼布局

注：width：100%，只会继承父元素盒子content的宽度，不是整个盒子的宽度

特点：左右两边的内容不变，中间的内容随屏幕大小而改变

<div class="content">
    <div class="left"></div>
    <div class="left"></div>
    <div class="left"></div>
</div>


// css code
.content{
    padding:0 200px;
    height:200px;
    min-width:200px;
}

.left{
    width:200px;
    height:200px;
    background-color:red;
    float:left;
    margin-left:-200px;
}

.right{
    width:200px;
    height:200px;
    background-color:blue;
    float:right;
    margin-right:-200px;
}

.center{
    width:100%;//宽度继承的是content的宽度，不是整个盒子的宽度，是整行宽度-左右padding的宽度
    min-width:200px;
    height:200px;
    background-color:green;
    float:left;
}

元素在父元素中垂直水平都居中对齐的方式

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

1. 定位方法（1）

.wrap{
	width: 300px;
    height: 300px;
    background: yellow;/*加颜色是为了看界面效果*/
    position: relative;
}
.inner{
  	width: 40px;
   	height: 40px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin:auto;
    background: orange;/*加颜色是为了看界面效果*/
 }

2. 定位方法（2）

.wrap{
    width: 300px;
    height: 300px;
    position: relative;
    background: yellow;/*加颜色是为了看界面效果*/
}
.inner{
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left:-20px;
    margin-top: -20px;
    background: orange;/*加颜色是为了看界面效果*/

3. flex

.wrap{
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: yellow;
    }
    .inner{
        width: 40px;
        height: 40px;
        background: orange;
    }

4. CSS 效果

box-shadow

利用bax-shadow绘制机器猫

.container{
            position: relative;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin: 300px auto;
            background-color: #C63D01;               
            box-shadow: 0px 0px 0 1px #000,
                -20px -26px 0 -10px #333333,
                -34px -40px 0 15px #fff,
                -34px -40px 0 16px,
                20px -26px 0 -10px #333333,
                34px -40px 0 15px #fff,
                34px -40px 0 16px,
                0px 55px 0 75px #fff,
                0px 55px 0 76px #000,
                0 22px 0 120px #08BDEB,
                0 22px 0 121px #000;
        }
        /*叮当猫的鼻子*/
        .container::before{
            content: '';
            position: absolute;
            bottom: -81px;
            left: 17px;
            height: 80px;
            width: 2px;
            background-color: #000;
        }
        /*叮当猫的嘴巴*/
        .container::after{
            content: '';
            position: absolute;
            bottom: -83px;
            left: -44px;
            width: 125px;
            height: 70px;
            border-bottom-right-radius: 28px;
            border-bottom: solid 2px black;
            border-bottom-left-radius: 28px;
        }

作用

营造层次感（立体感）

充当没有宽度的边框

特殊效果

text-shadow
border-radius

圆角矩形

圆形

border-radius ： 50%

半圆、扇形

border:0 solid red;
border-top-left-radius:100px;
border-top-right-radius:0;
border-bottom-left-radius:0;
border-bottom-right-radius:0;

一些奇怪的角

background

雪碧图动画

尺寸

clip-path

对容器进行裁剪

常见几何图形

自定义路径

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);
<svg>
        <defs>
            <clipPath id="clipPath">
                <!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> -->
                <polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon>
            </clipPath>
        </defs>
    </svg>

3D变换 transform

用transform做一个立方体

<style>
        .container{
            margin:50px;
            padding: 10px;
            border: 1px solid red;
            width: 200px;
            height: 200px;
            position: relative;
            perspective: 500px; //指定观察者与z平面的距离，使3D元素有透视效果
        }
        #cube{
            width:200px;
            height:200px;
            transform-style: preserve-3d;// 3D
            transform: translateZ(-100px);
            transition:transform .4s;
        }
        #cube div{
            width: 200px;
            height:200px;
            position: absolute;
            line-height: 200px;
            font-size:50px;
            text-align: center;
        }
        #cube:hover{
            transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
        } // 设置动画效果
        .front{
            transform: translateZ(100px);
            background:rgba(255,0,0,.3);
        }
        .back{
            transform: translateZ(-100px) rotateY(180deg);
            background:rgba(0,255,0,.3);
        }
        .left{
            transform: translateX(-100px) rotateY(-90deg);
            background:rgba(0,0,255,.3);
        }
        .right{
            transform: translateX(100px) rotateY(90deg);
            background:rgba(255,255,0,.3);
        }
        .top{
            transform: translateY(-100px) rotateX(-90deg);
            background:rgba(255,0,255,.3);
        }
        .bottom{
            transform: translateY(100px) rotateX(90deg);
            background:rgba(0,255,255,.3);
        }     
    </style>
<body>
    <div class="container">
        <div id="cube">
            <div class="front">1</div>
            <div class="back">2</div>
            <div class="right">3</div>
            <div class="left">4</div>
            <div class="top">5</div>
            <div class="bottom">6</div>
        </div>
    </div>
</body>

面试题

如何用一个div画 xxx

// 以机器猫为例

box-shadow 无限投影

:: after

:: before

如何产生不占空间的边框

box-shadow

outline

如何实现圆形元素（头像）

border-radius : 50%

如何实现IOS图标的圆角

clip-path:(svg)

如何实现半圆、扇形等图形

border-radius 组合：

有无边框

边框粗细

圆角半径

如何实现背景图居中显示、不重复、改变大小

background-position

background-repeat

background-size（cover/contain）

如何平移、放大一个元素

transform:translateX(100px)

transform:scale(2)

如何实现3D效果

正方体为例

perspective：500px

transform-style:preserve-3d

transform:translate rotate...

5. CSS 动画

动画的原理：

视觉暂留作用

画面逐渐变化

动画类型：

transition 补间动画

 <style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            /* transition: width 1s , background 3s; */
            transition: all 1s;
            transition-timing-function: linear;
            /* transition-timing-function: ease-in-out; */
            /* transition-timing-function: cubic-bezier(0.465, -0.460, 0.525, 1.435); */
            /* transition-delay: 1s; */
        }
        .container:hover{
            width: 800px;
            background:green;
        }
    </style>

keyframe 关键帧动画（animation）

相当于多个补间动画

与元素状态的变化无关

定义更加灵活

<style>
        .container{
            width: 100px;
            height: 100px;
            background: red;
            animation: run 1s linear;
            /* animation-direction: reverse; */
            /* animation-fill-mode: forwards; */
            /* animation-iteration-count: infinite; */
            /* animation-play-state: paused; */
        }
        @keyframes run{
            0%{
                width: 100px;
            }
            50%{
                width: 800px;
            }
            100%{
                width: 100px;
            }
        }
    </style>

逐帧动画

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

资源较大

使用steps

<style>
        .container{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background: url(./animal.png) no-repeat;
            animation: run 1s infinite;
            animation-timing-function: steps(1);//去掉补间
        }
        @keyframes run{
            0%{
                background-position: 0 0;
            }
            12.5%{
                background-position: -100px 0;
            }
            25%{
                background-position: -200px 0;
            }
            37.5%{
                background-position: -300px 0;
            }
            50%{
                background-position: 0 -100px;
            }
            62.5%{
                background-position: -100px -100px;
            }
            75%{
                background-position: -200px -100px;
            }
            87.5%{
                background-position: -300px -100px;
            }
            100%{
                background-position: 0 0;
            }
        }
    </style>

面试题

CSS动画的实现方式

transition 过渡动画

keyframes(animation) 关键帧动画

过渡动画和关键帧动画的区别

过渡动画需要有状态变化

关键帧不需要状态变化

关键帧动画能控制更精细

如何实现逐帧动画

使用关键帧动画

去掉补间steps()

CSS动画的性能

性能不差

部分情况下优于JS

但JS可以做的更好

部分高危属性

6. CSS预处理器

嵌套反映层级和约束

.wrapper{
    background:white;

    .nav{
        font-size: 12px;
    }
    .content{
        font-size: 14px;
        &:hover{
            background:red;
        }
    }
}

变量和计算减少重复代码

$fontSize: 12px;
$bgColor: red;

.wrapper{
    background:lighten($bgColor, 40%);

    .nav{
        font-size: $fontSize;
    }
    .content{
        font-size: $fontSize + 2px;
        &:hover{
            background:red;
        }
    }
}

Extend 和Mixin 代码片段

// mixin 用法
$fontSize: 12px;
$bgColor: red;

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

.wrapper{
    background:lighten($bgColor, 40%);

    .nav{
        @include block($fontSize);
    }
    .content{
        @include block($fontSize + 2px);
        &:hover{
            background:red;
        }
    }
}

// @extend 用法
$fontSize: 12px;
$bgColor: red;

.block{
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.wrapper{
    background:lighten($bgColor, 40%);
    .nav{
        @extend .block;
        color: #333;
    }
    .content{
        @extend .block;
        &:hover{
            background:red;
        }
    }
}

循环适用于负责有规律的样式

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

import CSS文件模块化

// import.main.scss
@import "./6-import-variable";
@import "./6-import-module1";

// 6-import-module1.scss
.module1{
    .box{
        font-size:$fontSize + 2px;
        color:$themeColor;
    }
    .tips{
        font-size:$fontSize;
        color:lighten($themeColor, 40%);
    }
}
// 6-import-variable.scss
$themeColor: blue;
$fontSize: 14px;

CSS 预处理器框架

SASS - Compass

Less-Lesshat /EST

提供现成的mixin

类似JS类库

面试题

常见的CSS预处理器

Less (node.js)

Sass (Ruby 有node版本)

预处理器的作用

更好组织CSS代码

提高代码复用率

提升可维护性

预处理器的能力

嵌套反映层级和约束

变量和计算，减少重复代码

extend 和mixin 重用代码

循环适用于有规律的样式

import CSS文件模块化

预处理器的优缺点

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

缺点：需要编译有学习成本

材女的进击

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS 面试题解（不定期更新）

1. HTML基础强化HTML重要属性a [href,target]img [src,alt]table td [colspan,rowspan]form[target,method,enctype]input[type,value]button[type]select>option[value]label[for]HTML语义化标签代码结构清晰，易于阅读，像是...
复制链接

扫一扫

专栏目录