「18 ～ 24 か月ごとに、フロントエンドの難易度は 2 倍になります。」
——Hemen 「2015 深セン」 JSカンファレンス「フロントエンドサービスへの道」基調講演
レイアウト、ボックスモデル、セレクター優先度、CSS3、Flexbox、フローティング要素、Sass、Less。 .. ...
(1)有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading；(2)盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)。
(1)id选择器（#classId）(2)类选择器（.className）(3)标签选择器（div，h1，p，span，table）(4)相邻选择器（h1 + p）(5)子选择器（ul > li）(6)后代选择器（li a）(7)通配符选择器（*）(8)属性选择器（a[rel = "external"]）(9)伪类选择器（a:hover，li:nth-child）//可继承的样式：font-size，font-family，color，UL，LI，DL，DD，DT//不可继承的样式：border，padding，margin，width，height
就近原则，同权重情况下以样式定义最近者为准；载入样式以最后载入的定位为准；优先级： !important > id > class > tag important 比 内联优先级高
CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 :enabled :disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。
div{ width: 200px; margin: 0 auto;}确定容器的宽高（500*300）设置层的外边距.element{ width: 500px; height: 300px; //高度可以不设 margin: -150px 0 0 -250px; position: relative; //相对定位 background-color: red; //显示效果 left: 50%; top: 50%;}.element{ position: absolute; width: 1200px; background: none; margin: 0 auto; top: 0; left: 0; bottom: 0; right: 0;}block 象块类型元素一样显示。none 缺省值。象行内元素类型一样显示。inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。list-item 象块类型元素一样显示，并添加样式列表标记。
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。//fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。//relative 生成相对定位的元素，相对于其正常位置进行定位。//static 默认值。没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right z-index 声明）。//inherit 规定从父元素继承 position 属性的值。
圆角-半径（border-radius:8px），阴影（box-shadow:10px），文字特效（text-shadow、），线性渐变（gradient），旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的CSS选择器多背景 rgba
把上、左、右三条边隐藏掉（颜色设为 transparent）#demo { width:0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent;}简单的方式： 上面的div宽100%， 下面的两个div分别宽50%， 用float或inline使其不换行。
(1)png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8。(2)浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。(3)IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。(4)IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性；解决方法:统一通过getAttribute()获取自定义属性。(5)IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性；解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。(6)Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。//最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）//淘宝的样式初始化代码：body, 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; }无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：(1)若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；(2)否则,则由这个祖先元素的 padding box 构成。如果都找不到，则为 initial containing block。//补充：(1)static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）(2)absolute: 向上找最近的定位为absolute/relative的元素(3)fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block
（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
以下是权重的规则：标签的权重为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{}//如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小时间间隔为 1/6*1000ms = 16.7ms
如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。区别：(1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。(3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。(4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。系列：前端开发面试题之HTML
资料搜集整理自 网络同时发布在 GitHub-前端开发面试题之CSS、GitBook-《WEB-DE》前端开发面试题之CSS
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
