DAY1.前端知识点总结

学习路漫漫，我的面试之路又要开启了，周围的朋友们都找到好工作了，我也不能拖后腿啊！小笔记码起字来啦~凭我薄弱的面试经验以及小211的资质不知怎么与各路英雄一争高下，所以我开始了自己就业之路的记录过程。希望自己和大家共同进步，发现自己的缺点以及薄弱点，正所谓天道酬勤，小琳子也要做新时代的年少有为好青年啊！

1. HTML常见面试题
   1.1行级元素、块级元素有哪些？有什么区别？特别的input、img是行级还是块级？

行级元素：span 、 a 、 i 、 strong 、 em等等
块级元素：div 、 p 、 ul 、li 、h1-h6 、 table 等等
区别：块级元素自己占一行，可以设置宽高，垂直分布；行级元素多个占一行，不可以设置宽高，水平分布。
input 和 img 和 button 都属于行快级元素，多个占一行且还能设置宽高。

1.2如何实现行快级元素的转换？

display:none;不显示该元素，也不会保留该元素原先占有的文档流位置，即DOM中没有了。
display:block;转换为块级元素。
display:inline;转换为行内元素。
display:inline-block;转换为行内块级元素。

1.3 HTML语义化

1.方便阅读，便于其他程序员阅读开发
2.浏览器读取方便
3.SEO搜索引擎优化
4.有一些默认标签会有一些样式，如果浏览器禁止了css样式还可以达到突出样式的效果

1.4一些特别地注意事项

1.p有默认的16px的margin，p里面不能含div，也不能有h1，也不能有p，可以有span；
2.body有8px的margin；
3.两个button之间的间隙是回车产生的***；怎么解决？(在外部包一个父级，并且给父级加一个font-size:0; 或者其中一个float:left;)*

1.5还有一些html5的问题将在后面标记

2.CSS常见面试题
2.1选择器有哪些？以及优先级

id选择器
class选择器
标签选择器
后代选择器 eg： div p
子代选择器 eg: div>p
后边紧邻的兄弟元素 eg： div+p
后边所有兄弟元素 eg： div~p
伪类元素 eg： ：hover
伪元素选择器 eg： ::after ::before [注意]使用它需要content:“somecode”;//加了一个行级元素
群组选择器 eg： div,p{ } //div和p都具有相同的性质
属性选择器 eg： div[arr]
优先级：!important>style>id>class>tag>通配符*
[注意]11个class还是比一个id的优先级小

2.2定位position有哪些属性？

relative：相对定位，相对于自己初始位置；空间不释放，即元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
absolute：绝对定位，相对于已定位的祖先元素；空间释放
fixed：固定定位，相对于浏览器的可视窗口；空间释放
static：默认定位
sticky：粘性定位 ，吸顶的效果。 空间不释放
（略/配合理解sticky）在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
sticky 特点：1.该元素并不脱离文档流，仍然保留元素原本在文档流中的位置；2.元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。

2.3浮动：产生的影响？如何清除浮动
float：left; float:right;

css浮动后影响：浮动元素脱离文档流，空间释放；产生子元素浮动，父元素高度塌陷的问题。
如何清除css浮动？
1.父元素加overflow:hidden;
2.父元素加一个高
3.与浮动元素平级的地方加一个空的兄弟元素div，且让它设置css {clear：both；}
4.给父级元素加伪元素， .clearfix::after { content:’ '; display: block; clear: both; }

2.4 盒模型
两种：标准盒模型； 怪异盒模型（ie6即以下浏览器没有声明doctype时会是混杂模式）
区别：标准盒模型的宽度=内容宽度；怪异盒模型的宽度=内容+padding+border （设置padding和border时会把内容往里挤）
转化：box-sizing：border-box；（怪异的）
box-sizing：content-box；（默认的标准的）
解决的问题：外边距合并（父子和兄弟两种情况）
父子：1.父元素加overflow：hidden； 2.父元素加border：1px solid transparent； 3.父元素或子元素加 float或者定位
兄弟：只给其中一个子元素设置外边距

2.5 BFC 块级格式化上下文
bfc容器（独立的）里的子元素不会影响外面，外面也不会影响里面。
布局规则（了解）
触发bfc的条件：

html根元素或其它包含它的元素; //
float不为none； //浮动
position：absolute/fixed；//绝对定位和固定定位
display：inline-block； //inline-block，flex，inline-flex，table-cell
表格单元格 display：table-cell；
overflow不为visible; //hidden触发bfc
display：flex/inline-flex；

参考：BFC–一个容易忽略掉的布局神器