前端知识点问题总结在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动

一: HTML类

1、如何解决高度塌陷问题

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
解决高度塌陷问题: BFC特性：父元素的垂直外边距不会与子元素重叠，不会被浮动元素覆盖，可以包含浮动的子元素：开启BFC即可解决塌陷问题，
如何开启元素的BFC：设置元素浮动，设置绝对定位，设置inline-block
最好解决办法：设置overflow:hidden ie6可以使用放大元素 zoom:1解决

2、那些标签是行内块元素，行内元素，块级元素

行内元素: a, span, i, b, strong, img, q, sub, sup, button, select, textarea, input, label，em
块级元素: dl, dd, div, p, form, ol, ul, tabel, header, section, footer, hr, h1-h6
行内块元素: img, input, textarea

3.table的使用和特性

单元格合并: 合理使用td标签的rowspan和colspan跨单元格合并
table级元素属性: border(单元格) align(水平对齐方式) valign(垂直对齐方式) cellspacing(合并)
单元格边框合并(border-collapse: collapse;)

4. 如何理解html语义化

语义化通俗理解为用正确的标签做正确的事情，使html的结构更加明确，易懂，如h5的header， footer等
提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：

5. 理解html文档流

（1）将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. （2）每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. （3）内联元素不会独占一行. （4）几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. （5）有三种情况将使得元素脱离文档流而存在,分别是浮动（float）,绝对定位(position:absolute), 固定定位(position:fixed). （6）浮动元素不占任何正常文档流空间，其定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。（7）相对定位,:即相对于元素在文档流中位置进行偏移. 但保留原占位. 绝对定位,:即完全脱离文档流,相对于position属性非static值的最近父级元素进行偏移固定定位,:即完全脱离文档流, 相对于视区进行偏移. （8）元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会再环绕.

6. html特殊字符

&nbsp, &lt(小于号), &gt(大于号), &reg(注册), &copy(@), &trade(商标)等

7. H5与H4对比

最基本的是更富语义的标签，以便更好的被机器识别； Canvas+WEBGL等技术，实现无插件的动画以及图像、图形处理能力；本地存储，可实现offline应用； websocket，一改http的纯pull模型，实现数据推送的梦想； MathML，SVG等，支持更加丰富的render；

8. Web Worker和Service Worker 的使用(待更新)

9.h5中canvas的应用(待更新)

1.canvas简单的来说，就是html5提供的画布，可以通过它绘制各种各样的图，2d的，3d的都可以，可以自由的发挥创造力进行任意图像，动画的绘制。

<canvas id="myCanvas" width="100" heigth="100"></canvas>
上下文获取
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
// 进一步操作

10: svg 矢量图形(待解决)

二: CSS篇

1. css选择器

后代选择器: div>p 代表直系子节点

多元素选择器: .wapper, .footer 多元素选择

所有后代选择器： div p 加空格选择所有选择的子节点

相邻兄弟选择器

p.wrapper + p 选择后面的所有p元素

p.wrapper ~ p 选择后面的第一个同级p元素

属性选择器 div[class='wrapper'] 选择class为wrapper的div

伪类选择器

p:first-child 选择第一个元素

p:nth-child(2) 选择第二个元素

p:nth-child(odd) / even 匹配偶数/奇数 2n/2n+1

a:link / hover/ active/ visited/ focus 未点击/ 覆盖/ 按上未释放/ 已访问/ 获得焦点

:first-line / :first-letter 匹配第一行匹配第一个字母

伪元素选择器

::before ::after 在元素之前/ 之后插入内容

2. css选择器优先级

优先级可从高到下为:

!important / id选择器 / class选择器, 属性选择器，伪类选择器 / 伪元素选择器, 类型选择器

因此每个权重依次为1, 计算每个区间的权重，居前的权重越高则优先级越高

3. 定位与浮动

定位: position: relative/ absolute/ static/ fixed/ sticky 其中absolute, fixed才会脱离文档流

浮动: float:left float:right 都脱离文档流清除浮动: clear:left / clear: right 清除浮动只作用与元素本身例:

<div class="div2"></div>
<div class="div3"></div>
 .div2, .div3{
            float: left;
            background: yellow;
            width: 200px;
            height: 200px;
        }
此时.div3在div2的右边，若要让其居于div2下方,则要让div3的左方不能有浮动元素
.div3{
    clear: left;
}

浮动元素的塌陷问题

1. 利用BFC可包容浮动元素的特性，在元素外层加入 overflow:hidden;zoom:1(兼容ie6)
2. 在里面后加入<br clear="all"/> 清除内层浮动
3. 伪类消除, 相当于清除浮动加入的元素
.parent::after{
            content: "";
            clear: both;
            overflow: hidden;
            visibility: hidden;
            display: block;
            height: 0;
        }

元素层级显示

z-index显示层级，值越大则层级越高，可以为负数，只对定位元素 absolute、relative和fixed有效

### 元素样式

文本与字体 text-indent:2em; font-weight:400; font-size; color: white;等
行高与高度 line-height:1, line-height:1.5; line-height: 150%; line-height: 1.5 等值会影响子元素的行高，根据自身高度计算行高行高与高度一致可实现元素近似居中
按钮样式的重写

button的默认样式为 padding:1px 6px; outline属性使点击时带有蓝色边框;(chrome) box-sizing:border-box;display:inline-block;
根据属性重写button样式为:
button{
     outline: none;
            padding: 10px 20px;
            background: coral;
            border: 0;
            border-radius: 10px;
            font-size: 18px;
            color: white;
}

input text框样式重写

input type="text"框原始属性的特性为: 
padding:1px 0 无外边距; display: inline-block; text-align:start;


input{
            text-align: start;
            line-height: 20px;
            width: 100px;
            border: 1px solid black;
            outline: none; /* 解决蓝色边框问题 */
            border-radius: 5px;
            padding-left: 2px;
        }
/* 解决自动填充的黄色背景问题, 由于chrome的私有属性造成 */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: #333;
}

input上type="radio" 样式重写

radio 原始重要属性为: radio有默认的外边距，可写样式覆盖