对前端开发知识的一些梳理,主要参考前端开发面试题及对它的补充，持续完善…
盒子模型
盒模型指定元素如何显示，页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。
内边距出现在元素的周围，如果在元素上添加背景，那么背景就会被应用于内容和内边距组成区域。常常使用内边距在元素周围创建一个隔离带。外边距是透明的，一般使用它控制元素之间的间隔。
CSS3中新增了一种盒模型计算方式：box-sizing熟悉。盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：
box-sizing属性:控制元素的盒模型的解析模式
- content-box(默认)
让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高 - border-box
让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
属性继承：
- 可继承的样式：font-size font-family color, text-indent;
- 不可继承的样式：border padding margin width height;
containing block
BFC和haslayout
Windows上的IE使用布局概念来控制元素的尺寸和定位，“拥有布局”(has layout)的元素负责本身及其子元素的尺寸设置和定位，如果一个元素没有“拥有布局”，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。more
Flexbox
display
常用的：
- none 关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。文档渲染时，该元素如同不存在。
- inline 元素宽度由内容决定，与其他元素并列在一行
- block 可以设置宽度，独占一行
- inline-block 宽度可以自行设置，类似block，但是与其他元素共占一行，类似inline。长用于设置垂直居中
- table-cell 标签元素以表格单元格的形式呈现
更多
position
浮动
visibility
- visible:默认值。元素是可见的。
- hidden:元素是不可见的。会占据页面上的空间
- collapse:当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
- inherit: 规定应该从父元素继承 visibility 属性的值。
任何的版本的 Internet Explorer （包括 IE8）都不支持 “inherit” 和 “collapse” 属性值。
position跟display、margin collapse、overflow、float这些特性相互叠加
margin和padding使用场景
- margin：
需要在border外侧添加空白时
空白处不需要背景（色）时
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白 - padding
需要在border内测添加空白时
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白
margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”
外边距叠加
简单地说，就是两个或多个毗邻（父子元素或兄弟元素）的普通流中的块元素垂直方向上的 margin 会发生叠加。这种方式形成的外边距即可称为外边距叠加
毗邻是指没有被非空内容、padding、border 或 clear 分隔开
margin叠加会发生在2种关系下，一种是父子元素，一种是兄弟元素
父子元素（分2种情况）之间发生margin叠加的条件
- 父元素和第一个子元素发生margin-top叠加
- 父元素没有创建BFC
- 父元素和第一个子元素之间没有非空内容
- 父元素没有border-top
- 父元素没有padding-top
- 父元素和最后一个子元素发生margin-bottom叠加
- 父元素没有创建BFC
- 父元素height为auto、min-height为0
- 父元素和最后一个子元素之间没有非空内容
- 父元素没有border-bottom
- 父元素没有padding-bottom
解决：为父元素创建BFC、为父元素设置相应的padding或者border
- 父元素和第一个子元素发生margin-top叠加
兄弟元素之间发生外边距叠加的条件
- 兄弟元素都不是float元素
- 兄弟元素都不是absolute元素
- 兄弟元素都不是inline-block元素
那么避免：让兄弟元素float、让兄弟元素absolute、让兄弟元素inline-block more
CSS选择符
- id选择器（ # myid）
- 类选择器（.myclassname）
- 标签选择器（div, h1, p）
- 相邻选择器（h1 + p）
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（ * ）
- 属性选择器（a[rel = “external”]）
- 伪类选择器（a:hover, li:nth-child）
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式：border padding margin width height ;
`
CSS优先级
优先级就近原则，同权重情况下样式定义最近者为准;
优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
属性后插有 !important 的属性拥有最高优先级
以下是权重的规则：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
标签及伪元素的权重为1，class（伪类、属性）的权重为10，id的权重为100，以下例子是演示各种定义的权重值
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
CSS3新增伪类
1 | p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
CSS3新特性
- 各种CSS选择器
- 圆角
- 多列布局
- 阴影和反射
- 文字特效
- 文字渲染
- 线性渐变
- 旋转,缩放,定位,倾斜,动画，多背景
媒体查询
响应式设计
布局
- 自适应布局
圣杯布局
负margin
双飞翼布局
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4）(https://www.zhihu.com/question/21504052/answer/50053054)- 居中
水平垂直居中
浏览器的兼容性
图片
在网页中的应该使用奇数还是偶数的字体
抽离样式模块
我理解的应该是提取页面公共样式。
一个项目的CSS可以拆分成2部分：公共CSS和业务CSS。我们在项目中抽出的这部分可以模块化的CSS就可以归类为公共CSS。这部分的代码命名不应涉及到具体的业务，只应对其在模块中负责的具体逻辑负责。
可以把网站的字体大小，公共控制，共用模块的样式都抽离出来，作为单独的模块来处理。这样，团队中的每个人如果需要这样的样式，都可以用这种公共样式，以此提高代码的重用率。
好的复用模块，应该是完整的、独立的。完整就是包含 PSD 中遇到的各种情况，对于不同的情况，只需要添加不同的类或者改用不同结构即可。独立性就是与其他模块和结构完全独立，直接粘贴复制不会产生任何影响。
全屏滚动
视觉差
手动写动画最小时间间隔
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
CSS 预处理器 / 后处理器
预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，
还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的
是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）
淘宝的样式初始化代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
css优化
Cookie 隔离
如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，
所以不如隔离开。
cookie隔离技术则是通过使用多个非主要域名来请求静态文件
因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。同时这种方式不会将cookie传入webserver，也减少了webserver对cookie的处理分析环节，提高了webserver的http请求的解析速度。
FOUC（无样式内容闪烁）
<style type="text/css">@import"../fouc.css";</style>而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。解决方法简单的出奇，只要在