前端面试题----html css_<style> html, body { margin: 0; padding: 0; } h1 {-CSDN博客

本文链接：https://blog.csdn.net/qq_45422185/article/details/128320605

一阶段面试题集锦

1 、 rem em vw vw 百分比区别

相同点：

rem ， em ， vw ， vh ， vw 属于前端开发除了 px 单位之外的另外几种单位取值；但是具体含义存

在区别

不同点：

px ：是像素单位，属于绝对单位，是一个具体的大小

rem ：相对于根元素进行设置

em ：如果自身有字体大小的设置，那么就相对于自身字体大小设置，如果自身没有字体大小

设置，那么就相当于父元素进行设置。

vw ： 1vw 相当于浏览器窗口宽度的百分之一

vh ： 1vh 相当于浏览器窗口高度的百分之一

百分比：相对于父元素宽度或者高度的百分之几

注意： vw 和 vh 是视口可以观看的区域的大小；如果没有滚动条的话，则宽度设置成 100vw 和

100% 的时候实现的效果一直；如果有滚动的话，则 100vw 中不是包括滚动条的， 100% 是包括

滚动条的距离的

2 、 750 的设计图， 20px 为多少 rem

<style>

*{ margin : 0 ; padding : 0 }

html , body {

height : 100% ;

}

.box1 {

width : 100% ;

height : 500px ;

background-color : red ;

}

.box2 {

width : 100vw ;

height : 500px ;

background-color : green ;

}

</style>

<div class = "box2" ></div> 750 的设计图， 20px 为多少 rem

首先设计图是 UI 设计提供给前端开发工程师的设计稿， 750 的设计图出自于手机屏幕为 375px*667px 的 iphone678 手

机屏幕的设计稿，这里也可以称之为 2 倍图。 20px 的字体大小涉及到了单位的转换，页面中默认的字体大小为 16px ，

那么此时的 1rem = 16px;

那么 20px 通过计算得出公式 1rem = 16px; ?rem = 20px; 得出结果为 :1.25rem !(pic1.png)

3 、 app 怎么做适配的

基于手机系统开发的 app( 原生 Android/IOS)

另外一种是 webapp

设置以下标签：

具体的含义为： app 完成的页面的宽度等于设备的宽度，页面的缩放比例为 1.0 ，不允许最大缩

放；

使用媒体查询和响应式做适配

使用媒体查询检测设备屏幕的大小改变布局样式，但是成本耗费比较大，不易操作

使用单位自己单位中经常使用的封装好的 flexble.js 文件做适配

封装好的 flexble.js 文件文件可以做到适配，并且原理是已经封装好的视口和设备像素比基于

webapp 开发

4 、 bfc 是什么，清楚浮动的原理

BFC 含义：

块格式化上下文（

Block Formatting Context ， BFC ）是 Web 页面的可视 CSS 渲染的一部分，是块

盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域

BFC 触发条件：

根元素

float 属性不为 none （脱离文档流）

position 为 absolute 或 fixed

display 为 inline-block,table-cell,table-caption,flex,inine-flex

overflow 不为 visible

BFC 布局规则：

内部的 Box 会在垂直方向，一个接一个地放置。

Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠（按照

最大 margin 值设置）

每个元素的 margin box 的左边，与包含块 border box 的左边相接触

BFC 的区域不会与 float box 重叠。

BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

计算 BFC 的高度时，浮动元素也参与计算

5 、简单的一个盒子移动到另一个盒子，你用什

么方式实现动画效果

方法一：使用 HTML+CSS 里面的 transition 过渡动画结合 2d 的位移 translate 设置

扩展 1 ：

因为他的设备像素比（ dpr= 物理像素 /CSS 像素）是 2 ； dpr 是一个固定的比值；不同的手机型号比值不应：

物理像素：可以理解成你 ps 里面测量的距离的大小

CSS 像素：你编写开发代码的时候 CSS 里面给定的像素值；

dpr 固定值如下如：

*{ margin : 0 ; padding : 0 }

div {

float : left ;

}

.box1 {

width : 200px ;

height : 200px ;

background-color : red ;

}

.box2 {

width : 100px ;

height : 100px ;

background-color : green ;

transition : all linear 1s ;

}

.box1 : hover + .box2 {

transform : translateX ( -100px );

}

</style>

方法二：使用 HTML5+CSS3 中的 animation 动画属性结合 2d 里面的位移 translate 进行实现

<style>

*{ margin : 0 ; padding : 0 }

div {

float : left ;

}

.box1 {

width : 200px ;

height : 200px ;

background-color : red ;

}

.box2 {

width : 100px ;

height : 100px ;

background-color : green ;

animation : mover linear 1s ;

}

@keyframes mover {

0% {

transform : translateX ( 0px );

}

100% {

transform : translateX ( -100px );

}

</style>

方法三：复杂方法，可以使用 js 封装一个动画函数，直接使用鼠标移动移入事件或者点击事件触发

移动

// 获取元素

// 设置 x 和 y 的值

// 绑定鼠标移入事件 == 缓慢移动 x 的位置进行移动自减 6 、 boder 实现 0.5 像素

实现方法： CSS3 有缩放的属性，我们可以利用这个属性，缩小 50% 的 1px 的边框，来实现这个功能代码如

下：

7 、场景题（两个盒子，左边固定宽，右边自适

应，你能想到几种方法）

公共 HTML 代码部分

方法一： float 来和 BFC 实现

// 绑定鼠标移出事件 == 缓慢移动 x 的位置进行移动自增

</script>

<style>

*{ margin : 0 ; padding : 0 }

div { float : left }

.box1 { width : 300px ; height : 300px ; background-color : red }

.box2 { width : 100px ; height : 100px ; background-color : green }

</style>

<div class = "content" > 伪类设置的边框 </div>

</div>

<style>

margin : 0 ; padding : 0

}

.border3 {

position : relative ;

}

.border3 : before {

content : '' ;

position : absolute ;

width : 200% ;

height : 200% ;

border : 1px solid red ;

transform-origin : 0 0 ;

transform : scale ( 0.5 , 0.5 );

box-sizing : border-box ;

}

</style>

</div>

<style>

.content {

border : 1px solid #000 ;

height : 800px ;

padding : 20px ; }

.left {

width : 200px ;

height : 100% ;

background : red ;

float : left ;

}

.right {

height : 100% ;

background : pink ;

overflow : hidden ;

}

</style>

方法二： absolute 定位和 margin 值实现

<style>

.content {

border : 1px solid #000 ;

height : 800px ;

padding : 20px ;

}

.left {

width : 200px ;

height : 100% ;

background : red ;

position : absolute ;

}

.right {

height : 100% ;

background : pink ;

margin-left : 200px ;

}

</style>

方法三： calc(100% - 固定内容的宽度 ) 用 calc 函数动态计算数值

<style>

.content {

border : 1px solid #000 ;

height : 800px ;

padding : 20px ;

}

.left {

width : 200px ;

height : 100% ;

background : red ;

float : left ;

}

.right {

height : 100% ;

background : pink ;

float : left ;

width : calc ( 100% - 200px );

}

</style>

方法四： flex 布局轻松搞定 <style>

.content {

border : 1px solid #000 ;

height : 800px ;

padding : 20px ;

display : flex ;

}

.left {

width : 200px ;

height : 100% ;

background : red ;

}

.right {

height : 100% ;

background : pink ;

flex : 1 ;

}

</style>

方法五：使用 table 和 table-cell 实现

<style>

.content {

border : 1px solid #000 ;

width : 100% ;

height : 800px ;

display : table ;

}

.left {

width : 200px ;

height : 100% ;

background : red ;

display : table-cell ;

}

.right {

height : 100% ;

background : pink ;

display : table-cell ;

}

</style>

方法六：使用 inline-block 携手 calc 函数设置宽度

<style>

.content {

border : 1px solid #000 ;

width : 100% ;

height : 800px ;

font-size : 0 ;

}

.left {

width : 200px ;

height : 100% ;

background : red ;

display : inline-block ;

vertical-align : top ;

}

.right { 8 、 css 选择器有哪些，权重是什么样的

9 、 css 布局，左侧宽度最小 150px ，最大 25 % ，

右侧自适应。怎么实现

方法一： 1.float+BFC 【 BFC 区域不会和设置浮动的区域重合】

height : 100% ;

background : pink ;

display : inline-block ;

vertical-align : top ;

width : calc ( 100% - 200px );

font-size : 16px ;

}

</style>

选择器含义：选择器是查找页面元素的一种方式方法，选择器的种类有很多种。

常用的选择器有以下内容：

1 、 ID #id

2 、 class .class

3 、标签 p

4 、通用 *

5 、属性 type="text"

6 、伪类 :link :visited :hover :active

7 、伪元素 ::first-line :first-letter

8 、子选择器 div>p

9 、后代选择器 div p

10 、相邻兄弟 div+p

11 、通用兄弟 div~p

12 、结构伪类 :nth-child :first-child :last-child

权重计算规则：

1 、第一等：代表内联样式，如 : style=”” ，权值为 1000 。

2 、第二等：代表 ID 选择器，如： #content ，权值为 0100 。

3 、第三等：代表类，伪类和属性选择器，如 .content ，权值为 0010 。

4 、第四等：代表类型选择器和伪元素选择器，如 div p ，权值为 0001 。

5 、通配符、 * 权值为 0000 。

6 、继承的样式没有权重值。

important > 内联 > ID > 类 | 伪类 | 属性选择 | 伪对象 > 标签 > 继承 > 通配符

<style>

.left {

min-width : 150px ;

max-width : 25% ;

height : 300px ;

background-color : red ;

float : left ;

}

.right {

height : 300px ;

background-color : yellow ;

overflow : hidden ; 方法二：弹性盒子

10 、 CSS 的基本语句构成是？

CSS 被称之为：层叠样式表（

Cascading Style Sheets ）是对页面结构的一种修饰；

CSS 的基本语法是：选择器 { 属性 : 属性值 ; 属性 : 属性值 ; 属性 : 属性值 }

CSS 基本语法构成两个部分组成：选择器和 {} 样式规则（样式声明）组成；样式规则（样式声明）由

两个部分组成的分别是属性和属性值；

使用 CSS 语法注意事项是

属性和属性值使用（：）链接

属性和属性值结束之后需要使用（；）结束

如果属性和属性值是最后一组的话可以不用分号结束；但是建议添加上为了防止后面继续添加

属性

11 、 css 复用

CSS 复用代表的是 CSS 的重复使用，主要是为了做到网站开发的优化，可以简化多重 CSS

}

</style>

<body>

内容

</div>

</body>

<!-- 给父元素设置弹性盒子，然后给左侧设置最小宽度 150px ，最大宽度 25%; 右侧不设置宽度，加属性 flex:1, 让右

侧自适应剩下的宽度 -->

<style>

padding : 0 ;

margin : 0 ;

}

body {

display : flex ;

}

.left {

min-width : 150px ;

max-width : 25% ;

height : 300px ;

background : green ;

}

.right {

flex : 1 ;

height : 300px ;

background : red ;

}

</style>

<body>

</body> CSS 复习：目的是为了创建一套可以不依赖内容的可重复使用的类名及公共的样式 , 沿着复用这条思

路走下去 , 久而久之基本可以构建一套全新的 UI 组件库而无需编写过多新的 CSS 。

例如：我们在单位中实际开发的时候经常使用的公共样式表，重置样式表是一样的道理

12 、 CSS 选择符有哪些？哪些属性可以继承？优

先级算法如何计算？

CSS 选择符（就是选择器）

基础选择器

通配符选择器 *{}

标签选择器标签名 p{}

class 类选择器 .class 属性值 {}

多类名选择器 . 类名 n{} 标签中 class 属性为 class=" 类名 1 类名 2 ... 类名 n"

id 选择器 #id 属性值 {}

群组选择器选择器 1, 选择器 2,...{}

结构选择器

子元素选择器 E>F{} F 必须是 E 的子元素

后代选择器 E F{} F 必须是 E 的后代

相邻兄弟选择器 E+F{} F 是紧挨这 E 后面的兄弟元素

通用选择器 E~F{} F 是 E 后面所有的兄弟元素

属性选择器

[Eattr] 元素 E 中存在 attr 属性

[Eattr="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值为 value

[Eattr~="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值为 value 或者 "value value1 ..." 的形式

[Eattr^="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值以 value 开始

[Eattr$="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值以 value 结尾

[Eattr*="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值存在 value

[Eattr|="value"] 元素 E 中存在 attr 属性 , 并且 attr 的属性值为 value 或者 value- 的形式

结构伪类选择器

X:first-child 匹配子集的第一个元素

X:last-child 匹配父元素中最后一个 X 元素

X:nth-child(n) 用于匹配索引值为 n 的子元素。索引值从 1 开始

X:only-child 这个伪类一般用的比较少，比如上述代码匹配的是 div 下的有且仅有一个的 p ，也就是说，如果

div 内有多个 p ，将不匹配。

X:root 匹配文档的根元素。在 HTML （标准通用标记语言下的一个应用）中，根元素永远是 HTML

X:empty 匹配没有任何子元素（包括包含文本）的元素

目标伪类

E:target 选择匹配 E 的所有元素，且匹配元素被相关 URL 指向

UI 状态伪类

E:enabled 匹配所有用户界面（ form 表单）中处于可用状态的 E 元素

E:disabled 匹配所有用户界面（ form 表单）中处于不可用状态的 E 元素

E:checked 匹配所有用户界面（ form 表单）中处于选中状态的元素 E

E:selection 匹配 E 元素中被用户选中或处于高亮状态的部分

否定伪类 E:not(s) （ IE6-8 浏览器不支持 :not() 选择器。）匹配所有不匹配简单选择符 s 的元素 E

动态伪类

E:link 链接伪类选择器选择匹配的 E 元素，而且匹配元素被定义了超链接并未被访问过。常用于链接

描点上

E:visited 链接伪类选择器选择匹配的 E 元素，而且匹配元素被定义了超链接并已被访问过。常用于链接

描点上

E:active 用户行为选择器选择匹配的 E 元素，且匹配元素被激活。常用于链接描点和按钮上

E:hover 用户行为选择器选择匹配的 E 元素，且用户鼠标停留在元素 E 上。 IE6 及以下浏览器仅支持

a:hover

E:focus 用户行为选择器选择匹配的 E 元素，而且匹配元素获取焦点

属性继承

继承： html 元素可以从父元素那里继承一部分 css 属性，即使当前元素没有定义该属性。

1. 字体系列属性 font ， font-family ， font-weight ， font-size ， font-style

2. 文本系列属性 text-indent ， text-align ， line-height ， word-spacing ， letter-spacing ，

text-transform ， color

3. 元素可见性 visibility

4. 表格布局属性 caption-side ， border-collapse ， border-spacing ， empty-cells ， table-

layout

5. 列表布局属性 list-style-type ， list-style-image ， list-style-position ， list-style

选择器优先级的算法

优先级就近原则，同权重情况下样式定义最近者为准 ;

载入样式以最后载入的定位为准 ;

优先级为：同权重 : 内联样式表（标签内部） > 嵌入样式表（当前文件中） > 外部样式表（外部

文件中）。

!important > id > class > tag important 比内联优先级高

13 、 css 引入的方式有哪些， link 和 @import 的

区别是什么

区别 1 ： link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。

区别 2 ：当一个页面被加载的时候（就是被浏览者浏览的时候）， link 引用的 CSS 会同时被加载，而

@import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时

开始会没有样式（就是闪烁），网速慢的时候还挺明显。

区别 3 ： @import 是 CSS2.1 提出的，所以老的浏览器不支持， @import 只有在 IE5 以上的才能识别，而

link 标签无此问题。

区别 4 ：使用 dom(document object model 文档对象模型 ) 控制样式时的差别：当使用 javascript 控制

dom 去改变样式的时候，只能使用 link 标签，因为 @import 不是 dom 可以控制的 .

14 、 css ：一个容器（页面），里面有两个 div 左

右摆放并且高度和容器高度一致，左 div 不会随

着页面左右伸缩而变化，右 div 随页面左右伸缩

宽度自适应（手写）

<div class = "container" > 15 、 CSS3 动画知道吗，怎么实现的

知道的， CSS3 动画主要是通过 animation 这个属性来进行实现，使用动画的时候需要先进行声明动

画然后再去调用，哪里需要产生动画效果哪里就使用 animation 进行调用

基本语法

<div class = "right" > 北京千锋互联科技有限公司（下面简称 “ 千锋教育 ” ），成立于 2011 年 1 月，立足于职业

教育培训领域，公司现有教育培训、高校服务、企业服务三大业务板块。教育培训业务分为大学生技能培训和职后技能

培训；高校服务业务主要提供校企合作全解决方案与定制服务；企 ... </div>

</div>

<style>

margin : 0 ;

padding : 0 ;

}

.container {

max-width : 1000px ;

height : 500px ;

background-color : yellow ;

margin : 20px auto ;

display : flex ;

}

.container .left {

width : 300px ;

background-color : orange ;

}

.container .right {

flex : 1 ;

background-color : red ;

}

</style>

<style>

*{ margin : 0 ; padding : 0 }

div {

width : 200px ;

height : 200px ;

background-color : red ;

/* 调用动画 */

animation : movers 20s linear infinite alternate

}

/* 声明动画 */

@keyframes movers {

form {

width : 200px ;

height : 200px ;

background-color : red ;

}

to {

width : 400px ;

height : 400px ;

background-color : green ;

border-radius : 50% ;

} 语法注意事项

16 、 CSS3 新增了哪些东西

CSS3 里面的新增主要有： CSS 选择器，盒子中的修饰，背景，文本效果，字体， 2D/3D ，过渡动画，

多列布局等等

CSS 选择器

盒子修饰

CSS 新增背景模块

CSS 文本效果模块

}

</style>

animation: 复合属性

animation-name 规定需要绑定到选择器的 keyframe 名称。。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。

form 初始状态

to 结束装填

可以替换成

0% 初始状态

100% 结束状态

后面的百分比可以称之为关键帧动画

1 、 p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

2 、 p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

3 、 p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

4 、 p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

5 、 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

新增了边框属性：

1 、 border-radius

支持浏览器： IE9+ 、 Firefox 、 Chrome 、 Safari 、 Opera

2 、 box-shadow 向方框添加一个或多个阴影

支持浏览器： IE9+ 、 Firefox 、 Chrome 、 Safari 、 Opera

3 、 border-image

支持浏览器： Firefox （旧版本需要前缀 -moz- ）、 Chrome （旧版本需要前缀 -webkit- ）、

Safari （ Safari 5 以及更老的版本需要前缀 -webkit- ）、 Opera （

需要前缀 -o- ）

1 、 background-size 规定背景图片的尺寸

支持浏览器： IE9+ 、 Firefox （旧版本需要前缀 -moz- ）、 Chrome 、 Safari 、 Opera

2 、 background-origin 规定背景图片的定位区域，背景图片可以放置于 content-box 、 padding-

box 或 border-box 区域。

支持浏览器： IE9+ 、 Firefox 、 Chrome 、 Safari 、 Opera

3 、 background-clip 规定背景的绘制区域

支持浏览器： IE9+ 、 Firefox 、 Chrome 、 Safari 、 Opera CSS 引入字体模块

2D/3D

过渡动画

多列布局

17 、当 margin-top 、 padding-top 的值是百分比

时 , 分别是如何计算的 ?

可以对元素的 margin 设置百分数，百分数是相对于父元素的 width 计算，不管是 margin-top/margin-

bottom 还是 margin-left/margin-right 。（

padding 同理）

如果没有为元素声明 width ，在这种情况下，元素框的总宽度包括外边距取决于父元素的 width ，这

样可能得到 “ 流式 ” 页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档

设置样式，使其元素使用百分数外边距，当用户修改浏览窗口的宽度时，外边距会随之扩大或缩

小。

为什么 margin-top/margin-bottom 的百分数也是相对于 width 而不是 height 呢？

1 、 text-shadow 可向文本应用阴影

支持浏览器： IE10 、 Firefox 、 Chrome 、 Safari 、 Opera

2 、 word-wrap 允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分

支持浏览器：所有主流浏览器

@font-face

1 、 transform 向元素应用 2D 或 3D 转换

支持浏览器：

IE10 ： 2D 、 3D 都支持（ 2D IE9 需要前缀 -ms- ）；

Firefox ： 2D 、 3D 都支持；

Chrome ： 2D 、 3D 都支持（ 2D 、 3D 需要前缀 -webkit- ）；

Safari ： 2D 、 3D 都支持（ 2D 、 3D 需要前缀 -webkit- ）；

Opera ：只支持 2D

1 、 transition 过渡属性

支持浏览器： IE 10 、 Firefox 、 Chrome （ Chrome 25 以及更早的版本，需要前缀 -webkit- ）、

Opera 、 Safari （

需要前缀 -webkit- ）

2 、 @keyframes 用于创建动画。

在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

支持浏览器： IE 10 、 Firefox 、 Chrome （ Chrome 25 以及更早的版本，需要前缀 -webkit- ）、

Opera 、 Safari （

需要前缀 -webkit- ）

3 、 animation 动画调用属性

支持浏览器： IE 10 、 Firefox 、 Chrome （ Chrome 25 以及更早的版本，需要前缀 -webkit- ）、

Opera 、 Safari （

需要前缀 -webkit- ）

1 、 column-count======= 划分列数

2 、 column-gap========= 属性规定列之间的间隔大小

3 、 column-rule======== 设置或检索对象的列与列之间的边框

4 、 column-fill======== 设置或检索对象所有列的高度是否统一

5 、 column-span======== 设置或检索对象元素是否横跨所有列。

6 、 column-width======= 设置或检索对象每列的宽度我们认为，正常流中的大多数元素都会足够高于包含其后代元素（包括外边距），如果一个元素的

上下外边距是父元素的 height 的百分数，就可能导致一个无限循环，父元素的 height 会增加，以适

应后代元素上下外边距的增加，而相应的，上下外边距因为父元素 height 的增加也会增加，如此循

环。

18 、定位知道吗，说下，几种不同的定位分别

有什么特点，详细说明

定位的含义是将元素放在指定的位置上，在 css 中特指 position 属性，他一共有 5 种属性值。

分别是

static 静态定位，是元素自带的默认的定位方式。

relative 是相对定位，他是基于元素本身的位置进行定位的，不会脱离文档流。

fixed 是固定定位是基于浏览器窗口进行定位的，会脱离文档流。

absolute 是绝对定位，是基于最近的被设置了非静态定位的上级元素进行定位的，他会脱离文

档流，常用的场景是子绝父相。

sticky 是粘性定位，是 css 新增的属性值；可以说是相对定位 relative 和固定定位 fixed 的结合；它

主要用在对 scroll 事件的监听上，简单说在滑动过程中，某个元素距离其父元素的距离达到

sticky 粘性定位要求时； position:sticky 这时的效果就相对于 fixed 定位，固定到适当的位置。

使用定位的时候如果需要元素进行位置的调整需要配合偏移属性进行实现对应的效果。偏移属性有

四个： top ； right ； bottom ； left ；定位的属性决定了定位的偏移参照物

参照物问题

静态定位不会发生位置的调整所以不存在参照物的问题

相对定位添加偏移属性后，相对于自己原来的位置进行位置调整

绝对定位：如果父元素及外侧没有任何已经定位的元素，则参照浏览器屏幕左上角（

body 左

上角）进行位置的调整；如果父元素或者是就近的父级元素有定位则相对于就进行元素的左上

角进行位置的调整；绝对定位的参照物就是所谓的包含块的意思

固定定位：参照物是浏览器可视窗口位置的左上角进行位置调整，不会受到滚动条的滚动而影

响

粘性定位：粘性定位参照物在实现固定吸顶效果的时候参照物与固定定位一样

<style>

.fu {

width : 400px ;

height : 300px ;

background : blue ;

overflow : hidden ;

}

.zi {

width : 20px ;

height : 20px ;

background : red ;

margin-top : 50% ;

}

</style>

</div> 19 、 display 有哪几种属性值？分别代表什么？

Img 属于什么元素？

display 属性的含义： display 控制元素的显示类型；

display 属性的属性值可以分成两大类

常用的属性值

不常用的属性值

img 属于什么元素 ：浏览器中的 computed 计算属性中的图片的 display 的取值为 inline ，虽然为 inline

但是实际开发的时候图片是作为行内块元素进行使用的，因为遵循能设置宽度高度，并且还能横向

显示；所以属于行内块元素，但是有些程序员也会把图片认为是行内元素也是可以，从另一个角度

讲 img 也称作是置换元素；

20 、 display ： inline-block 后为什么有间距

display:inline-block 是让元素在一行显示，但是这些元素在 html 里面是上下行排列的，所以中间有换

行符，于是并排显示就有了换行符带来的空隙。

解决这种问题的方式有：

将 html 标签要 display:inline-block 的元素写在一行。缺点：代码可读性差。

none 代表为不显示：控制元素的隐藏

block 代表显示为块级元素：还可以让元素控制元素显示

块级元素的特点：默认站宽一整行，能设置宽度高度，纵向排列

块级元素有 :div,p,h1,h6,ol,ul,ol,li,dl,dt,dd,form,fieldset,legend,

table,header,footer,section,main,nav,article,aside 等等

inline 代表行内元素；

行内元素的特点：不能设置宽度高度，并且能横向显示

行内元素有 :a,b,strong,u,i,em,s,del,sup,sub,span,font,mark,var

inline-block 代表行内块元素

行内块元素的特点：能设置宽度高度并且横向显示

行内块元素有 :input,textarea,select,

flex 代表的是触发弹性盒子

grid 代表的是触发网格布局

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

compact CSS 中有值 compact ，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

marker CSS 中有值 marker ，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

table 此元素会作为块级表格来显示（类似 <table> ），表格前后带有换行符。

inline-table 此元素会作为内联表格来显示（类似 <table> ），表格前后没有换行符。

table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody> ）。

table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead> ）。

table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot> ）。

table-row 此元素会作为一个表格行显示（类似 <tr> ）。

table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup> ）。

table-column 此元素会作为一个单元格列显示（类似 <col> ）

table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th> ）

table-caption 此元素会作为一个表格标题显示（类似 <caption> ）

inherit 规定应该从父元素继承 display 属性的值。给父元素设置 font-size:0, 给子元素设置需要的 font-size 值。缺点 : 是子元素如果里面有文字，文

字会消失不见，所以又要给子元素设置 font-size, 增加了代码量。

给元素设置 float:left, 缺点需要清除浮动。

设置子元素的 margin-left 为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，

而每个浏览器的换行空隙大小不同，所以这个方法不通用。

设置父元素 display:table;word-spacing:-1em; 目前这个方法可以完美解决，且兼容其他浏览

器。

21 、 Doctype 的作用 ? 严格模式和混杂模式的区

分，以及如何触发这 2 种模式 ?

Doctype 的作用

1.< ！ DOCTYPE> 声明叫做文档类型 DTD ，它的作用就是用来标识浏览器使用哪种文档类型，让

浏览器知道以何种方式解析文档。

2. 必须位于 HTML 文档的第一行，处于标签之前，但是不属于 HTML 文档标签。

3. 声明文档的解析类型（

document.compatMode ），是为了避免浏览器的怪异模式。

严格模式和混杂模式的区别，以及如何触发两种模式

1. 严格模式： 浏览器按照 W3C 的标准解析代码，又称为标准模式。

2. 混杂模式： 浏览器按照自己的方式来解析代码，以一种向后兼容的方式呈现。

3.Doctype 可声明的三种 DTD 类型： 严格版本，过渡版本，基于框架的 HTML 版本。

4. 区别： 浏览器使用严格模式和混杂模式，与文档中的 DTD 直接相关

（

1 ）如果用文档中包含严格的 DOCTYPE ，则以严格模式呈现（严格 DTD-- 严格模式）

（

2 ）包含过渡 DTD 和 URL 的 DOCTYPE ，以严格模式呈现；包含过渡的 DTD 而没有 URL ，以

混杂模式呈现；（过渡 DTD+URL-- 严格，过渡 DTD （无 URL ） -- 混杂模式））

（

3 ） HTML5 中没有 DTD ，没有严格和混杂模式的区分， HTML5 中有相对宽松的语法，尽

可能实现向后兼容

（

4 ） DOCTYPE 不存在或者格式不正确，以混杂模式呈现（

DTD 不存在或格式不正确 -- 混

杂模式）

5. 严格模式和混杂模式解析语句的不同点

（

1 ）可以设置行内元素的宽高，在严格模式下给内联元素设置宽高都不起作用，在混杂

模式下生效

（

2 ）可设置百分比高度在严格模式下，如果没有给父元素设置高度，而子元素的高度以

百分比呈现，这时是不生效的

（

3 ）盒模型的宽高包含 padding 和 border 在 W3C 的标准下，给一个元素设置宽高，则呈现

的是内容的宽高。在 IE5.5 以下及其他浏览器的混杂模式下，盒子的宽度还包括 padding 和

border 。

（

4 ）使用 margin ： 0 auto 在 IE 下会失效使用 margin ： 0 auto 在严格模式下会水平居中，而

在混杂模式下会失效，但可以设置 text-align ： center 来水平居中。

（

5 ）混杂模式下的图片 padding 会失效， Table 中的字体属性将无法继承父元素的设置，

white-space ： pre 会失效。

（

1 ）如果用文档中包含严格的 DOCTYPE ，则以严格模式呈现（严格 DTD-- 严格模式）

（

2 ）包含过渡 DTD 和 URL 的 DOCTYPE ，以严格模式呈现；包含过渡的 DTD 而没有 URL ，以

混杂模式呈现；（过渡 DTD+URL-- 严格，过渡 DTD （无 URL ） -- 混杂模式））

（

3 ） HTML5 中没有 DTD ，没有严格和混杂模式的区分， HTML5 中有相对宽松的语法，尽

可能实现向后兼容（

4 ） DOCTYPE 不存在或者格式不正确，以混杂模式呈现（

DTD 不存在或格式不正确 -- 混

杂模式）

22 、对 WEB 标准以及 w3c 的理解与认识？

web 标准可以分为结构、表现和行为。

结构主要是有 HTML 标签组成。或许通俗点说，在页面 body 里面我们写入的标签都是为了页面

的结构。

表现即指 css 样式表，通过 css 可以是页面的结构标签更具美感。

行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有 js 组成。

web 标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表

现的变化，也使这三者的界限并不那么清晰。 W3C 对 web 标准提出了规范化的要求，也就是在实际

编程中的一些代码规范： 包含如下几点

1. 对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对 SEO 很有帮助

1 ）标签字母要小写

2 ）标签要闭合

3 ）标签不允许随意嵌套

2. 对于 css 和 js 来说

1 ）尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块，符合规范。同时提

高页面渲染速度，提高用户的体验。

2 ）样式尽量少用行间样式表，使结构与表现分离，标签的 id 和 class 等属性命名要做到见

文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

3 ）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

23 、 FireFox 中标签的居中问题的解决办法

24 、 Flex 的横向平铺填充

让父元素触发弹性和也就是 display:flex; 然后让所有的子元素均分使用 flex:1; 代码如下

25 、 flex 用法场景

场景一：移动端和 PC 端布局中；能够高效解决间距调整的问题（移动端布局和 PC 端布局）

</div>

<!-- 以上面结构为例，在 a 中设置 text-align 属性为 center 之后，还需要设置 b 的横向 margin 为 auto 。设置添加 b

的 CSS 样式为： margin: 0 auto;-->

</div> 场景二：能快速高效实现元素水平垂直居中（点击删除的弹窗）

场景三：能够实现快速元素均分，避免了百分比设置的不确定性

场景四：快速实现多列布局，能高效实现瀑布流布局

场景五：后台管理系统的两栏和三栏布局

26 、 flex:0 1 100px 什么意思？ flex 两个参数 , 三个

参数什么意思？表示三个参数， flex-grow 、

flex-shrink 、 flex-basis 分别是啥意思

flex 属性是弹性布局添加给项目（子元素）的属性，

flex 属性是 flex-grow （放大）、 flex-shrink （缩小）、 flex-basis （宽度）的简写属性。

flex-grow 默认值为 0 ，当值大于 0 时，当父元素有剩余空间时当前元素放大，父元素没有剩余

空间时，该元素不放大。

flex-shrnk 默认值为 1 ，父元素有剩余空间时，该元素不缩小，父元素没有剩余空间时，该元素

缩小。

flex-basis 相当于 width 属性。

flex:0 1 100px ；表示父元素有剩余空间当前元素不放大，父元没有剩余空间当前元素会缩小。 flex

有很多中赋值方式，可以写一个值，两个值或者三个值。

举例： 1.flex ： 1 解析为 flex ： 1 1 0% 。 2.flex ： auto 解析为 flex ： 1 1 auto 。 3.flex ： none 解析为

flex ： 0 0auto 。 4.flex ：解析为 flex ： 0 0 auto 。 4.flex ： 0 auto 解析为 flex ： 0 1 auto 。

27 、父元素 visibility ： hidden ；子元素设置

visibility ： visible ，子元素显示吗

这时候子元素是显示的，原理如下：

当只是给父元素添加 visibility ： hidden ，子元素会继承父元素的 visibility ： hidden 的值，也会跟着父

元素隐藏。

如果给父元素添加 visibility ： hidden ；同时在给子元素添加 visibility ： visible ，子元素是显示的。原

因：添加给子元素 visibility ： visible 是大于父元素添加的 visibility ： hidden 的。所以优先执行子元素

的 visibility ： visible 属性。

28 、知道渐变嘛，说下你的了解

CSS3 渐变（

gradients ）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但，通过使用 CSS3 渐变（

gradients ），你可以减少下载

的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好， 因为渐变（

gradient ）是

由浏览器生成的 。

CSS3 定义了两种类型的渐变（

gradients ）：使用都是 background 属性

一、线性渐变 （

Linear Gradients ） - 向下 / 向上 / 向左 / 向右 / 对角方向

基本语法 :background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

二、径向渐变 （

Radial Gradients ） - 由它们的中心定义

基本语法 :background-image: radial-gradient(shape size at position, start-color, ..., last-

color);

为了创建一个径向渐变，你也必须至少定义两种颜色节点。

颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的

中心是 center （表示在中心点），渐变的形状是 ellipse （表示椭圆形），渐变的大小是

farthest-corner （表示到最远的角落）

size 的取值 closest-side ， farthest-side ， closest-corner ， farthest-corner

三、重复渐变

repeating-linear-gradient() 函数用于重复线性渐变：

repeating-radial-gradient() 函数用于重复径向渐变：

29 、一条 0.5px 的线，几种方法

方法一：采用 meta viewport 的方式

方法二：采用 transform: scale() 的方式

transform: scale(0.5,0.5);

方法三：直接利用边框

border: 0.5px solid red;//ios8 以上支持，以下显示为 0

方法四：渐变模拟：设置 1px 通过 css 实现的背景图片， 50% 有颜色， 50% 透明。

方法五：利用阴影

#grad {

/* 标准的语法 */

background-image : repeating-linear-gradient ( red , yellow 10% , green

20% );

}

#grad {

background-image : repeating-radial-gradient ( red , yellow 10% , green

15% );

}

scale=0.5, maximum-scale=0.5" />

<!--

这样子就能缩放到原来的 0.5 倍，如果是 1px 那么就会变成 0.5px

要记得 viewport 只针对于移动端，只在移动端上才能看到效果

-->

.border {

background-image : linear-gradient ( 180deg , red , red 50% , transparent 50% ),

linear-gradient ( 270deg , red , red 50% , transparent 50% ), linear-gradient ( 0deg , red ,

red 50% , transparent 50% ), linear-gradient ( 90deg , red , red 50% , transparent 50% );

background-size : 100% 1px , 1px 100% , 100% 1px , 1px 100% ;

background-repeat : no-repeat ;

background-position : top , right top , bottom , left top ;

padding : 10px ;

}

优点：兼容性较好，单边框、多边框可实现，大小、颜色可配置。

缺点：代码量多、无法实现圆角、同时占用了背景样式

*/ 方法六：边框图片 :

30 、行内元素有那些。块级元素有那些。空元

素有哪些

行内元素：不能实现宽度高度，横向显示

a,span,i,em,var,b,strong,sup,sub,s,del,label,font,mark

块级元素：能设置宽度高度，纵向显示，并且默认站宽一整行

h1~h6,p,div,ul,ol,li,dl,dt,dd,table,form,hr,fieldset,legend,marquee,iframe,header,nav,footer,sectio

n,main,figure,figcaption,hgroup,aside,article

行内块元素：能设置宽度高度，并且横向显示

input,img,select,textarea

空元素：就是单标签

input,img,br,meta,link,hr

置换元素：因为默认自带宽度告诉浏览器能进行根据类型路径加载对应的内容

input,img,select,textarea

31 、 Html 和 xhtml 有什么区别 ?

含义不同： HTML 是一种基本的 WEB 网页设计语言， XHTML 是一个基于 XMl 的置标语言

最主要的不同

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭

XHTML 标签名必须用小写字母

XHTMl 文档必须拥有根元素在 XHTML 中，、、都是必需的标签。

XHTML 必须设置标签的 xmlns 属性，且其值为 “ http://www.w3.org/1999/xhtml ” 。

XHTML 任何属性值要么用单引号引起来，要么用双引号引起来。如 class=page 就是不合法的，

而

class='page' 和 class="page" 均是合法的。所有属性必须有值。有些属性，比如

标签的 checked 属性，在 HTML 中可以使用简写形式，即

数据，

然后在 XHTML 中，必须这样编写：

数据

32 、 html 页面渲染方式和流程

用户输入 url 地址，浏览器根据域名寻找 IP 地址

-webkit- box-shadow : 0 1px 1px -1px rgba ( 0 , 0 , 0 , 0.5 );

利用 css 对阴影处理的方式模拟。

优点：兼容性较好，单边框、多边框、圆角可实现，大小、颜色、可配置。

缺点：模拟效果强差人意，颜色不好配置。

border-image : url () 2 0 stretch ; border-width : 0 0 1px ;

/* 缺点：图片边缘模糊，大小、颜色更改不灵活。 */ 浏览器向服务器发送 http 请求，如果服务器段返回以 301 之类的重定向，浏览器根据相应头中

的 location 再次发送请求

服务器端接受请求，处理请求生成 html 代码，返回给浏览器，这时的 html 页面代码可能是经过

压缩的

浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染

解析渲染该过程主要分为以下步骤 ：

解析 HTML---- 构建 DOM 树 ----DOM 树与 CSS 样式进行附着构造呈现树 ------ 布局、绘制

详细过程如下 ：

1) 用户输入网址（假设是个 html 页面，并且是第一次访问），浏览器向服务器发出请求，服务

器返回 html 文件。

2) 浏览器开始载入 html 代码，发现标签内有一个标签引用外部 CSS 文件。

3) 浏览器又发出 CSS 文件的请求，服务器返回这个 CSS 文件。

4) 浏览器继续载入 html 中部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了。

5) 浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图

片下载完，而是继续渲染后面的代码。

6) 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要

回过头来重新渲染这部分代码。

7) 浏览器发现了一个包含一行 Javascript 代码的标签，赶快运行它。

8)Javascript 脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个