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
204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
