Document

HTML+CSS面试题整理（持续更新）

2024-06-03
dfer
248
html css 前端 CSDN

1.网络中使用最多的图片格式有哪些

• gif 支持动画，只有全透明和不透明两种模式，只有 256 种颜色

• jpg 采用有损压缩算法，体积较小，不支持透明，不支持动画

• png 采用有损压缩算法，体积也相对较小，支持透明背景，不支持动画

• svg 一般会保存颜色及形状相对简单的图片，可任意放大图形显示，边缘异常清晰

• BMP 无损压缩格式，画质最好，文件太大，不利于网络传输

2. 请简述 css 盒子模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），

元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分，

这就是盒子模型。

3.视频/音频标签的使用

• 视频

o 属性： controls 控件、autoplay: 自动播放谷歌和火狐静音下支持 ie 支持、muted 静音播放、loop 循环、poster 未播放前显示的内容

• 音频

o 属性： controls 控件、autoplay 自动播放谷歌不支持，火狐静音下支持 ie 支持、loop 循环播放、muted 静音播放

4.HTML5 新增的内容有哪些

• h5 的语法

o DOCTYPE 可以使用小写

o 单标签没有结束标签

o 可以省略结束的标签: li、dt、dd、p、option、colgroup(用于对表格中的列进行组合，以便对其进行格式化)、thead、tbody、tfoot、 tr、td、th

o 可以省略的标签 html head body tbody

• 新增标签特点：语义化，ie8 及以下不生效

o header 标签头部

o section 划分板块

o article 与上下文无关的内容

o aside 可以放侧边工具栏

o nav 导航

o figure 和 figcaption 类似于 dl 标签

o footer 底部

o main 比较重要的部分

o mark 标记默认是黄色的高亮，可以修改样式内联10

• 多媒体标签

o 音频内联

type="audio/ogg">

type="audio/mpeg">

controls 控件

autoplay 自动播放谷歌不支持，火狐静音下支持 ie 支持

loop 循环播放

muted 静音播放

o 视频

controls 控件

autoplay: 自动播放谷歌和火狐静音下支持 ie 支持

muted 静音播放

loop 循环

poster 未播放前显示的内容

• 表单新增

o type 类型

email 邮件格式

number 限制输入是数字 min 最小值 max 最大值 step 每次增加的数

url 地址路径或者网址都可以

color 色块

time 时间

range 滑动条

o 属性

required 必填

placeholder 提示信息

autocomplete 自动提示 on 提示 off 不提示

autofocus 自动聚焦只能写一个

multiple 多选

pattern 正则限制输入的内容类型

限制输入 0-9 之间的数11

5.Css3 新增的特性

css3 选择器

o 属性选择器

[属性名] 可以选择到官方或者自定义的属性

[属性名=“属性值”] 匹配属性值

[属性名~=“”] 包含该值必须单独出现的

[属性名*=“”] 只要包含该值就行

[属性名^=“”] 以该值开头

[属性名$=“”] 以该值结尾

o 伪类选择器

构性伪类选择器（child 系列）

1.E:first-child E 必须是父元素里面的第一个孩子

2.E:last-child E 必须是父元素里面的最后一个孩子

3.E:nth-child(n) 不匹配前面的元素类型，如果对应的位置是该元素才匹

配

4.E:only-child 必须只有他自己一个孩子

结构性的伪类选择（type 系列）

1.E:first-of-type 匹配到该元素中的第一个孩子

2.E:last-of-type 匹配到该元素的最后一个孩子

3.E:nth-of-type(n) 匹配到该元素的第几个孩子 n 可以是表达式 2n 3n

2n+1 even(偶数) odd(奇数)

4.E:nth-last-of-type(n) 匹配到该元素的倒数第几个

目标伪类：结合锚点使用

状态伪类选择器

1.:enabled 元素可编辑

2.:disabled 元素不可编辑

3.:checked 选中

4.::selection 高亮状态一般修改字体颜色和背景色

动态伪类选择器

1.:link 未访问前

2.:visited 访问过后

3.:hover 鼠标滑过

4.:active 鼠标点击之后

层级选择器

后代选择器选择器选择器

子项选择器选择器>选择器

相邻的兄弟选择器+选择器紧挨着的兄弟

相邻的兄弟们选择器~选择器紧挨着的弟弟们

o css3 属性

阴影

box-shadow:x 轴偏移 y 轴偏移模糊距离阴影的颜色阴影的位置

（outset/inset）;12

text-shadow:x 轴偏移 y 轴偏移模糊距离阴影的颜色;透明

rgba 设置透明度

里面的内容不会被模糊

opacity:0-1; 0 完全透明 1 不透明

1.里面的内容也会被模糊

2.可以设置图片的模糊

3.过渡效果对 display 的隐藏和出现没有效果，可以通过设置 opacity 的值

背景

背景图的原点 background-origin

1.padding-box 默认值背景图从 padding 区域开始显示

2.content-box 背景图从 content 区域开始显示

3.border-box 背景图从 border 边框区域开始显示

背景图的裁切 background-clip

1.border-box 边框之外裁切

2.padding-box padding 之外裁切

3.content-box 内容区开始裁切

背景图大小的设置 background-size

圆角 border-radius

1.一个值四个角

2.两个值对角

3.三个值左上角右上角/左下角右下角

4.四个值左上角右上角右下角左下角（顺时针的角度）

5.正圆 border-radius: 50%/100%;

图片边框 border-image

1.border-image:图片路径偏移重复

2.border-image-source:url() 图片的路径

3.border-image-slice:数值图片的裁切不要加单位

4.border-image-repeat:平铺(repeat) 铺满(round) 拉伸(stretch)默认

过渡 transition：transition-property transition-duration transition-delay

transition-timing-function(顺序不固定，当只有一个时间的时候，表示

过渡时间，两个时间第一个表示过渡时间，第二个表示延迟时间)

transition-property 需要过渡的属性

transition-duration 过渡所需要的时间 s(秒)/ms(毫秒) 1s=1000ms

transition-delay 过渡延迟时间 s(秒)/ms(毫秒)

transition-timing-function 过渡效果

1.linear: 匀速

2.ease: 逐渐慢下来

3.ease-in: 加速

4.ease-out: 减速

5.ease-in-out 先加速后减速

动画 animation：animation

使用：animation: 动画名动画持续时间延迟时间动画效果执行次数13

animation-name: 动画名

animation-duration: 动画的持续时间 s/ms

animation-delay: 动画的延迟时间 s/ms

animation-timing-function: 动画的效果

animation-iteration-count: 具体的数值/infinite(无限循环)

anmiation-direction: 动画执行的方向

1.normal 正向

2.reverse 反向

alternate 正向和反向交替运动

animation-play-state 动画是否播放

1.running 播放默认值

2.paused 暂停

定义动画

css

@keyframes 动画名{ from{} ==>0% to{}==>100%

}

关键帧分的是时间

@keyframes 动画名{

0%{ css 属性:css 属性值

}

10%{} 0.5s

20%{} 1s

30%{}

100%{}

}

渐变

线性渐变

background-image/background:linear-gradient(方向,颜色 1,颜色 2……)

渐变方向

to bottom 向下

to right 向右

to top 向上

to left 向左

to right bottom 向右下角

to left top 向左上角

to right top 向右上角

to left bottom 向左下角

数值+deg(角度)

设置百分比

css

/* 0%-40% 是红色的纯色 40%-60% 红色到蓝色渐变

60%-100% ；蓝色的纯色*/14

background: linear-gradient(red 40%, blue 60%);

重复性的线性渐变

background:repeating-linear-gradient(red 40%, blue 60%);

径向渐变

bakrgound-image/background:radial-gradient(位置,颜色 1,颜色 2)

位置

center 中心

水平方向：left/center/right

垂直方向：top/center/bottom

兼容写法

css background: radial-gradient(left, red, blue);

background: -webkit-radial-gradient(left, red, blue); background: -

ms-radial-gradient(left, red, blue);

重复性的径向渐变

background: repeating-radial-gradient(red 20%, yellow 40%);

6.清除浮动的方式有哪些？请说出各自的优点

• 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置 clear： both）不推荐

o 优点：通俗易懂，方便

o 缺点：添加无意义标签，语义化差

• 父级添加 overflow 属性（overflow：hidden）不推荐

o 优点：代码简洁

o 缺点：内容增多的时候容易造成不会自动换行导致内容被隐蔽掉，无法显示要溢出的元素

• 给父级设置高度

o 优点：简单，代码少，容易掌握

o 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题

• 父级 div 定义 overflow:auto(必须定义 width 或 zoom:1，同时不能定义 height，使用 overflow:auto 时，浏览器会自动检查浮动区域的高度)

o 优点：简单，代码少，浏览器支持好

o 缺点：内部宽高超过父级 div 时，会出现滚动条。

• 使用 after 伪元素清除浮动（推荐使用）

.clear:after{
    content:"";
    display:block;
    clear:both;
    height:0;
    overflow:hidden;
    visibility:hidden
}

o 优点：符合闭合浮动思想，结构语义化正确

o 缺点：ie6-7 不支持伪元素：after，使用 zoom：1 触发 hasLayout

7.定位的属性值有何区别

• static 默认值

• relative 相对定位，参考自己本身的位置，不会脱离文档流，文字不能被遮挡

• absolute 绝对定位，参考有定位属性(除了 static)的祖先元素,定位元素通过一层一层向上找，找到有定位的祖先元素，如果找到 body 依然没有找到有定位的祖先元素，参考浏览器窗口(子绝父相)，脱离文档流，且文字能被遮挡，块级元素设置margin:0 auto;会失效，内联元素设置定位转换成块元素

• fixed 固定定位，参考浏览器的窗口，不会跟随滚动条的滚动而滚动，脱离文档流，宽度自适应的时候，宽度不显示，可以通过设置 width:100%

• 粘性定位 sticky，参考浏览器的窗口，没有达到 top 值之前正常显示，达到 top 值之后类似于固定定位，不会跟随滚动条滚动而滚动

8.子元素如何在父元素中居中

• 定位+margin：auto 父元素 position: relative 子元素 position: absolute left:0;top:0;right:0;bottom:0;margin: auto;

• 定位+margin-left+margin-top 父元素 position: relative 子元素 position:absolute left:50%; top:50%; margin-left: -当前盒子宽度的一半; margin-top: -当前盒子高度的一半;

• 定位+transfrom（子元素未知宽高）父元素 position: relative 子元素 position: absolute left:50%; top:50%; transform: translate(-50%,-50%); • 弹性盒子父元素 display: flex; justify-content: center; align-items: center;

• flex+margin: auto 父元素 display: flex; 子元素 margin:auto;

9.border-box 与 content-box 的区别

• border-box o padding 和 border 被包含在定义的 width 和 height 之内。

o 对象的实际宽度就等于设置的 width 值，即使定义有 border 和 padding 也不会改变对象的实际宽度；即 ( Element width = width+ margin)

o 此属性表现为怪异模式下的盒模型

• content-box

o padding 和 border 不被包含在定义的 width 和 height 之内。

o 对象的实际宽度等于设置的 width 值和 border、padding 之和；即( Element width = width + border + padding + margin)

o 此属性表现为标准模式下的盒模型

10.元素垂直居中

• 如果是图片，直接设置 img 的属性 vertical-align: middle;前提是需要设置父级元素为块级元素并且设置高度

• 如果是单行文本，可以通过设置子元素的 line-height 值等于父元素的 height，这种方法适用于子元素为单行文本的情况。16

• 通过定位父元素 position: relative 子元素 position: absolute top:50%; transform: translateY(-50%);

• 通过伪元素:before 实现 CSS 垂直居中父元素:

before{
    content:"";
    display:inline-block;
    vertical-align:middle;
    height:100%;
}

• 通过 display:table 实现,给父元素设置 display:table，子元素 display： table-cell 的方式实现 CSS 垂直居中

• 通过 display:flex 实现，给父元素设置 display:flex; 子元素 align-self:center

11.如何让 chrome 浏览器显示小于 12px 的文字

• webkit-transform:scale(0.833); 0.833 是缩放比例

12.Css 选择器有哪些，哪些属性可以继承，优先级如何计 Css3 新增的伪类有哪些

• css 选择器

o id 选择器（ # myid）

o 类选择器（.myclassname）

o 标签选择器（div, h1, p）

o 相邻选择器（h1 + p）

o 子选择器（ul > li）

o 后代选择器（li a）

o 通配符选择器（ *）

o 属性选择器（a[rel = “external”]）

o 伪类选择器（a: hover, li: nth - child）

• 可以继承

o 字体类：

font-family：字体类型；
font-weight:字体加粗；
font-size:字体大小
font-style: 字体样式
text-indent: 缩进（只对块级元素生效）
text-align:对齐方式
line-height:行高
word-spacing:字之间的距离；
letter-spacing:字符之间的距离；

10.text-decoration:文本修饰

o 文本类:

color:颜色

o 列表：17

list-style-type:列表类型
list-style-image:图标路径
list-style-position:图标的位置
list-style:none;去掉列表符号

• 优先级就近原则，样式定义最近者为准; 载入样式以最后载入的定位为准;

• 优先级为: !important > id > class > tag(标签选择器) important 比内联优先级高

• css3 新增的伪类

o 结构性伪类选择器（child 系列）

E:first-child E 必须是父元素里面的第一个孩子
E:last-child E 必须是父元素里面的最后一个孩子
E:nth-child(n) 不匹配前面的元素类型，如果对应的位置是该元素才匹配
E:only-child 必须只有他自己一个孩子

o 结构性的伪类选择（type 系列）

E:first-of-type 匹配到该元素中的第一个孩子
E:last-of-type 匹配到该元素的最后一个孩子
E:nth-of-type(n) 匹配到该元素的第几个孩子 n 可以是表达式 2n 3n 2n+1 even(偶数) odd(奇数)
E:nth-last-of-type(n) 匹配到该元素的倒数第几个

o 目标伪类：结合锚点使用

o 状态伪类选择器

:enabled 元素可编辑
:disabled 元素不可编辑
:checked 选中
::selection 高亮状态一般修改字体颜色和背景色

o 动态伪类选择器

:link 未访问前
:visited 访问过后
:hover 鼠标滑过
:active 鼠标点击之后

13.网页中有大量图片加载很慢你有什么办法进行优化？

• 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载

• 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载

• 如果图片为 css 图片，可以使用 CSSsprite（精灵图），SVGsprite（精灵图），Iconfont（字体图标）（精灵图，小图标…）

• 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验

• 如果图片展示区域小于图片的真实大小，则应该在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致18

14.行内元素/块级元素有哪些？

• 行内元素在同一行显示，不可以设置宽高，宽高由内容撑开，padding、margin 左右显示准确，上下显示不准确，margin:0 auto,不生效，可以给内联元素添加一个外层的盒子形成一个大的区域，给该盒子设置 text-align:center 的居中属性，添加浮动可以解决内联元素之间的间歇，也能将内联元素的元素类型转换为块元素，例如span b strong i em a u del img

• 块级元素可以设置宽高，盒模型属性都生效，独占一行，一般作为容器，例如：ES6 新增的 header footer section 等以及常用的 div p ul li h1-h6 ol dl dt dd

15.浏览器的标准模式和怪异模式

• 盒模型：

o 在怪异模式下，盒模型为 IE 模型。盒子所占区域宽度=width(宽)+margin(左右)，高度等同

o 在标准模式下，盒模型为 W3C 模型。盒子所占区域宽=width(宽)+padding(左右)+border(左右)+margin(左右)，高度等同

• 行内元素的垂直对齐方式：标准模式下 vertical-align 属性默认取值是 baseline；怪异模式下 vertical-align 属性默认取值是 bottom。

• 字体样式：标准模式下，表格中的字体样式会被继承；怪异模式下，表格中的字体样式不会被继承。

• 元素溢出的处理：标准模式下，overflow 取值默认为 visible；怪异模式下，当内容超出容器高度时，会把容器拉伸。

• ！important:标准模式下，IE7+认识！important 声明；怪异模式下，IE6/7/8 都不认识！important 声明。

• 行内元素的宽高：标准模式下，给行内元素设置 wdith 和 height 都不会生效；怪异模式下会生效。

• 水平居中：使用 margin:0 auto 在标准模式下可以使元素水平居中，但在怪异模式下却会失效。

• 怪异模式下，颜色值必须用十六进制标记法。

16.margin 和 padding 在什么场合下使用

• margin：用来调整盒子到盒子之间的距离，不会撑大显示的区域，但是会影响到别的盒子

o 使用场景：需要在 border 外侧添加空白时；空白处不需要背景（色）时；上下相连的两个盒子之间的空白，需要相互抵消时；

• padding：用来调整子元素（内容）在父元素（盒子）内的位置，会把盒子撑大，如果不想被撑大，要在原来宽高的基础上减去对应方向的 padding 值

o 使用场景：需要在 border 内测添加空白时；空白处需要背景（色）时；上下相连的两个盒子之间的空白，希望等于两者之和时；

17.弹性盒子布局属性有哪些请简述

• 父元素：

o 主轴方向 flex-direction

row 主轴从左向右默认值19
row-revese 主轴从右向左
column 主轴从上到下
column-reverse 主轴从下到上

o 主轴方向排列方式 justify-content

flex-start 主轴起点默认值
flex-end 主轴终点
center 居中
space-between 两端对齐
space-around 中间的留白是两边的 2 倍
space-evenly 平均分配留白

o 交叉轴排列方式 align-items

stretch 拉伸默认值去掉子元素的高度
flex-start 交叉轴的起点
flex-end 交叉轴的终点
center 居中

o 换行 flex-wrap：

1 .nowrap 不换行,默认值，会将子元素压缩

2 .wrap 换行

3.wrap-reverse 反向换行

o 多行之间的排列方式 align-content

stretch 拉伸默认值需要去掉子元素的高
flex-start 主轴起点依次排列
flex-end 主轴终点依次排列
center 居中
space-between 两端对齐
space-around 中间的两端的 2 倍
space-evenly 平均分配

• 子元素：

o 重写子项对应的交叉轴的对齐方式 align-self

stretch 拉伸默认值去掉子元素的高度

2.flex-start 交叉轴的起点

3.flex-end 交叉轴的终点

4.center 居中

5.放大 flex-grow

6.0 不放大

7.数值填充剩余的空间

o 压缩 flex-shrink

1 压缩
0 不压缩
实现导航的滚动效果

a. 子项的宽度超出了父容器的宽度

b. 设置子项不压缩 flex-shrink:0;

c. 父元素设置溢出显示滚动条 overflow-x:auto;

o 子项的宽度 flex-basis:数值+px 类似于宽度20

o 排序 order 数值值越大越向后，可以设置负数

18.怎么实现标签的禁用

style=“pointer-events: none”

19.flex 布局原理

• flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当为父盒子设置为 flex 布局之后，子元素的float、clear、vertical-align 属性将失效。

• 采用 flex 布局的元素，称为 flex 容器（flex container），简称“容器”。他的所有子元素自动成为容器成员，称为 flex 项目（flex item），简称“项目”。

• 总结：flex 布局就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。

20.px 与 rem 的区别

• px：px 实际上就是像素，用 px 设置字体大小时，比较稳定和精确

o px 像素（Pixel），相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。

• em：em 就是根据基准来缩放字体的大小 em 的值并不是固定的；em 会根据父级元素的字体大小变化

o em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

• rem： rem 是根据根元素字体大小变化，这样就意味着，我们只需要在根元素确定一个参考值。一般情况下将根元素的字体大小设置为 html{font-size:100px}

rem 是 CSS3 新增的一个相对单位（root em，根 em），这个单位引起了广泛关注。

21.网页的三层结构有哪些

• 网页的结构层：

o 由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如

何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

• 网页的样式层：

o 该层指示结构化 HTML 文档如何看待网站的访问者，并由 CSS（层叠样式表）定义。这些文件包含有关如何在 Web 浏览器中显示文档的样式说明。样式层通常包括基于屏幕大小和设备更改站点显示的媒体查询。网站的所有视觉样式都应位于外部样式表中

• 网页的行为层：

o 行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改。JavaScript 是行为层最常用的语言，但 CGI 和 PHP 也经常被使用。当开发人

员引用行为层时，大多数都是指在 Web 浏览器中直接激活的层。21

22.请简述媒体查询

• 媒体指的就是各种设备 (移动设备, PC 设备)，查询指的是要检测属于哪种设备，媒体查询就是通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览

• 语法 @media 关键字设备类型 and (媒体特性){}

• 关键字：all(所有的设备类型)/only(限定某种设备)/not(排除设备)

• 设备类型：

o all(所有的设备)

o screen 显示器移动设备笔记本

o print 打印设备

• 媒体类型

o 最小宽度 min-width 大于最小宽度

o 最大宽度 max-width 小于最大宽度

• 书写说明

o and 两侧必须有空格

o 媒体特性属性值后面不要加分号

o 多个媒体特性之间用 and 连接

@media all and (min-width:500px) and (max-width:999px) { 
    div {
        height: 600px;
        background-color: cadetblue; 
    } 
}

• viewport 视口scale=1.0">

o 视口 viewport

布局视口，默认情况下，布局视口的宽是 980px，设置 css 样式的样式是作用在布局视口
可视视口设备的宽度 device-width
完美/理想视口 width=device-width 布局视口和设备宽度一样

o initial-scale 初始缩放比例默认值 1

o minimum-scale 最小缩放比例默认值 1

o maximum-scale 最大缩放比例默认值 1

o user-scalable 用户是否可以手动缩放 no/0 不缩放

23.rem 缺点

• 有局限性，IE8 及以下版本不支持

• 对 pc 页面来讲使用次数不多

• 数据量大：所有的图片、盒子都需要给一个准确的值，才能保证不同机型的适配；

24.常见的兼容性一阶段内容中记几个

• 在 ie 浏览器中，a 标签套图片会自带边框 ie10 及以下

o 解决：去掉边框 img{border:none}

• 图片自带底部 3px 的留白22

o 解决：vertical-align: bottom/middle/top 给图片添加display:block; 给图片添加font-size:0; 给父元素添加

• 表单元素对齐不一致

o 解决：设置怪异盒模型设置浮动

• 透明度 opacity 在 ie 浏览器中不支持 0-1

o 解决：opacity 的值照常设置，适应正常的浏览器单独设置 ie 中透明属性：filter:alpha(opacity=value);取值范围 value:1-100(整数)1 完全透明 100 不透明

25.垂直与水平居中的方式

• 水平居中：

o 行内元素：为该行级元素的父元素设置 text-align:center 样式

o 块级元素：为其自身设置 margin:auto 样式

• 垂直居中：

o 行内元素：line-height: 父元素的高度

o 块级元素：

父元素 position:relative;子元素： position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
父元素： display:flex;justify-content: center; align-items:center;

26.三栏布局方式两边固定中间自适应

• 绝对定位法：将左右两边使用绝对定位，绝对定位使其脱离文档流，后面的 center 会自然流动到他们上面，然后使用 margin 属性，留出左右元素的宽度，就可以使中间元素自适应屏幕宽度。

• 自身浮动法：对左右分别使用 float:left 和 float:right，浮动使左右两个元素脱离文档流，中间元素正常在文档流中，使用 margin 指定左右外边距对其进行一个定位。

• margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。中间栏被宽度为 100%的浮动元素包起来。

27.doctype 作用

• 声明叫做文件类型定义(DTD),作用是为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。

28.常见的浏览器内核有哪些

• ie 浏览器：Trident

• 火狐：Gecko 代码开源

• 苹果 & 谷歌旧版本: Webkit

• 谷歌 & 欧鹏: Blink23

29.link 和 import 的区别

• 老祖宗的差别：link 属于 HTML 提供的引用方式，@import 是 css 提供的引用方式，link 还可以引入其他文件类型，@import 只能引入 css 文件

o @import url(“图标路径”); 不可以引入

• 加载顺序的区别：link 和 HTML 是同时加载的，@import 是当所有 html 文件加载后再去加载 css 文件，所以有时候浏览@import 加载 CSS 的页面时开始会没有样式

• 兼容性 @import 只有 ie5 以上才支持

30.BFC(块级格式化上下文)触发条件

• float:值为 left/right

• position 的值为 absolute 和 fixed

• display 为 inline-block（内联块）, table-cell（单元格）, table-caption（表格标题）, flex（弹性盒）, inline-flex（弹性盒）

• overflow 的值为 hidden/scroll/auto

上一篇：如何在 HTML 中

下一篇：基于Php+Mysq