HTML+CSS面试题整理(持续更新)

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 属性

阴影

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

(outset/inset);12

  1. 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 反向

  1. 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 字体类:

  1. font-family:字体类型;
  2. font-weight:字体加粗;
  3. font-size:字体大小
  4. font-style: 字体样式
  5. text-indent: 缩进(只对块级元素生效)
  6. text-align:对齐方式
  7. line-height:行高
  8. word-spacing:字之间的距离;
  9. letter-spacing:字符之间的距离;

10.text-decoration:文本修饰

o 文本类:

  1. color:颜色

o 列表:17

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

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

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

• css3 新增的伪类

o 结构性伪类选择器(child 系列)

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

o 结构性的伪类选择(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) 匹配到该元素的倒数第几个

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

o 状态伪类选择器

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

o 动态伪类选择器

  1. :link 未访问前
  2. :visited 访问过后
  3. :hover 鼠标滑过
  4. :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

  1. row 主轴从左向右默认值19
  2. row-revese 主轴从右向左
  3. column 主轴从上到下
  4. column-reverse 主轴从下到上

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

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

o 交叉轴排列方式 align-items

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

o 换行 flex-wrap:

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

2 .wrap 换行

3.wrap-reverse 反向换行

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

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

• 子元素:

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

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

    2.flex-start 交叉轴的起点

    3.flex-end 交叉轴的终点

    4.center 居中

    5.放大 flex-grow

    6.0 不放大

7.数值填充剩余的空间

o 压缩 flex-shrink

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

​ 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

  1. 布局视口,默认情况下,布局视口的宽是 980px,设置 css 样式的样式是作用在布局视口

  2. 可视视口设备的宽度 device-width

  3. 完美/理想视口 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 块级元素:

  1. 父元素 position:relative;子元素: position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);

  2. 父元素: 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