Web学习总结之HTML5+CSS3声明文档类型，帮助浏览器正确显示网页。 ul>li ol>li dl>dt/dd

简述<!doctype>的作用

声明文档类型，帮助浏览器正确显示网页。

常见浏览器及其内核

webkit：苹果

blink：谷歌、欧朋

trident：IE

gecko：火狐

常见块级标签和行内标签分别有哪些

块级：div、p、hr、ul、ol、li、dl、dt、dd、h1-h6

行内：span、b、strong、i、em、a

b和strong（i和em）标签的区别

b/i：粗体（斜体），实体标签

strong/em：粗体、强调语义（斜体、强调语义），语义化标签

谈谈对语义化的理解

结构清晰，便于开发者阅读并相互配合
增强用户体验
在不使用CSS时，具备基本样式
利于SEO，便于爬虫爬取，浏览器收录

如何合并表格单元格

合并行：rowspan

合并列：colspan

thead、tbody、tfoot有什么作用

thead：表头

tbody：主体

tfoot：脚注

作用：结构清晰，更加语义化

常见表单元素

input：text、password、button、submit、radio、checkbox、file、image、hidden、reset

select：option

textarea

引入CSS的方式有几种

行内式：style=""

内联式：<style></style>

外联式：<link href="link">

单行文本水平垂直居中如何实现

text-align: center;
line-height: height;

选择器的优先级如何计算

根据权值计算：

!importent: 最高优先级

行内样式：1000

id选择器：100

类选择器/伪类选择器：10

标签：1

*通配符：0

复合选择器权值相加即可，群组选择器单个计算

CSS哪些属性是可以继承的

color

line-height

text-align

text-indent

font-style

font-size

font-weight

font-family

简述CSS盒模型

content

padding

border

margin

如何使用border实现小三角

width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent;
border-whith: 50px 50px 0;

margin外边距常见问题及处理方法

父子标签：

问题：父级无overflow:hidden或border属性时，父级margin-top为父子标签中margin-top最大值

解决：

1、父级设置overflow: hidden

2、设置父级border属性

兄弟标签：

问题：在不设置float和position时，margin-bottom和margin-top会合并为两者中最大值

解决：

使其不在同一BFC区域

块级标签和行内标签的区别

块级：

从上到下、独占一行
宽度默认为父级100%
适用于所有盒模型属性

行内：

从左到右，在一行
宽度由内容撑开
不能设置宽高以及垂直方向盒模型属性

浮动产生的问题以及清除浮动的方法

问题：子级浮动后脱离文档流，无法撑开父级高度

解决：

父级设置固高
设置overflow: hidden;
父级最后子标签设置空div，并设置clear: both;清除浮动

使用.clearfix::after伪元素，使用时添加类名即可

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

父级添加浮动

如何让盒子水平垂直居中

margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

position: absolute;
top: 50%;
left: 50%;
margin-top: - height/2;
margin-left: - width/2;

简述BFC规则，及解决问题

BFC：

具有独立规则区域，内外互不影响
垂直方向margin会产生重叠
计算BFC高度时，浮动子元素也会参与计算
BFC区域不会与浮动元素区域重叠

解决问题：

防止文字环绕
自适应两栏或三栏布局
清除浮动
外边距折叠

图片间隙问题如何解决

display: block
vertical-align: middle
font-size: 0; line-height: 0;

说说常见浏览器兼容问题

IE低版本中图片出现边框

解决：隐藏图片边框

border: none;
背景属性简写不加空格，出现解析错误

解决：属性值使用空格间隔开

background: url() no-repeat;

等高布局、圣杯布局、双飞翼布局的实现原理

等高布局：

利用内外边距相互抵消，父级设置overflow:hidden
利用高度由内容撑开的特性，每列添加相应容器，并相互嵌套
利用边框模拟背景，实现等高列显示效果

圣杯与双飞翼布局皆为，左右固定中间自适应的三栏布局

圣杯布局：

左中右全部浮动
左右固宽，中间100%
左右模块使用margin-left: - 100%; margin-left: - width;拉直两极
父级盒子使用padding留出左右位置
左右模块添加相对定位，分别拉至两边

双飞翼布局：

左中右全部浮动
左右固宽，中间100%
左右模块使用margin-left: - 100%; margin-left: - width;拉直两极
中间模块添加元素，使用margin空出左右模块位置，防止左右模块覆盖

用纯CSS实现小箭头的思路

绘制两个三角形，将后一个三角形通过定位重叠至前一个三角形，两者之间间隔即为箭头宽度

简述精灵图的原理及优缺点

原理：将多个图片结合到一起，通过背景定位以及固定宽高显示

优点：

减少http请求，提高性能
方便更换风格
减少命名困扰

缺点：需要精确计算，并设置固宽高

简述网页中常见图片格式及特点

JPG：色彩丰富，文件小

PNG：无损压缩，支持透明

GIF：支持动画、透明，一般用于动图

WEBP：支持动画、透明，文件小，兼容性差

为什么要初始化CSS样式，哪些样式需要初始化

浏览器之间默认样式存在差异
考虑样式表规划，提高样式表重复使用率，减少代码量

* {
	margin: 0;
    padding: 0;
}

body {
    font: 所有属性;
    background: #FFF;
}

a {
    color: #333;
    text-decoration: none;
}

ul {
    list-style: none;
}

img {
    border: none;
    vertical-align: middle;
}

input {
    outline: none;
}

`display: none;`和 `visibility: hidden`和`opacity: 0`的区别

display：

不可见，不可点击，不占位

visibility：

不可见，不可点击，占位

opacity：

不可见，可点击，占位

你能想出几种方式让元素在页面中消失

display: none;
visibility: hidden;
opacity: 0
通过margin或position定位至盒子外，父级overflow: hidden

标签应该如何合理嵌套

块级：可嵌套行内、块级、行内块级

ul>li ol>li dl>dt/dd ... ，具有特殊语义的标签不能在嵌套块级标签

行内：不可嵌套块级，可嵌套行内、行内块级

a标签不可重复嵌套，及其他交互性元素

在项目中你是如何做图片优化的

与页面内容无关，起装饰作用的图片使用背景图
根据项目需求，调整图片质量
使用精灵图，减少http请求

HTML5有哪些新特性、移除了哪些元素，如何处理HTML5新标签的浏览器兼容问题

新特性：

语义化元素、input、多媒体、地理定位、svg、canvas、MathML、存储、拖放

移除元素：

center、big、font、dir、frame

兼容性：

使用javascript新增元素的方法，并转化为块级元素

<script>
	document.createElement("header");
    ...
</script>
<style>
    header,... {
        display: block;
    }
</style>

使用封装好的html5shiv.js

<!--[if lt IE 9]>
<script src="./html5shiv.js"></script>
<![endif]-->

CSS3有哪些新特性

属性、结构伪类选择器，背景，渐变，阴影，圆角，用户界面，弹性盒子、动画、多列、2d/3d变形、viewport

CSS3新增选择器有哪些

属性选择器：

[attr^=value] [attr$=value] [attr*=value]

结构伪类选择器：

:nth-child、:only-child、:last-child、:first-of-type、:last-of-type、:only-of-type

请解释一下CSS3的flexbox（弹性盒布局模型），以及适用场景

CSS3提供的新布局方式：可以规定子元素的排列方式、对齐方式、多余空间分配

适用场景：

绝对居中
图片展示
大多数布局

什么是less？less有什么好处

Less包含一套自定义语法及一个解析器，用户根据语法定义自己的样式规则，规则通过解析器，编译成对应css文件，编译后才可被浏览器识别使用。

好处：

结构清晰，便于拓展
可以方便地屏蔽浏览器私有语法差异
可以轻松实现多重继承
完全兼容CSS代码，可以方便地应用到老项目

常见的移动端布局解决方案有哪些？原理如何？

固定布局：

设置viewport，固宽居中即可
百分比布局

使用百分比设置元素宽度
响应式布局

根据用户设备，使用媒体查询设置相对应属性
rem布局

rem为相对于根元素的字体大小的单位，根据html元素的font-size计算大小

简述rem布局原理

rem为相对于根元素的字体大小的单位，根据html元素的font-size计算大小

利用js动态获取设备宽度，计算html的font-size大小，则可以起到一改俱改的效果，实现等比例放大缩小

rem = 设备宽*100/设计稿宽

如何显示小于12px的字体

使用transform:scale()进行缩放

单行文本溢出显示省略号，如何实现？

width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

CSS3中过度和动画的区别和各自适用场景？

区别：

过渡：

需要事件触发，只有一组

动画：

不需要事件触发，可以多个