前端基础技能之CSS #37

wolfdu · 2018-03-07T01:52:42Z

最近正在准备找工作，作为野路子前端个人认为很有必要梳理一下前端相关基础知识，所以分三大块HTML、CSS和JavaScript来进行整理记录。
其中很多知识点并不是一两句话就能聊清楚的，所以很多内容都是粗鄙浅显的，更加深入的讨论需要单独开坑，所以引入了其他大牛整理好的相关内容以供翻阅参考。
切记不可急于求成，不能妄自菲薄。

CSS的盒子模型

有两种， IE 盒子模型、W3C 盒子模型；
盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
区别： IE的content部分把 border 和 padding计算了进去；

CSS盒模型

box-sizing的应用场景

box-sizing属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

content-box
默认值，标准盒子模型。

border-box
width 和 height 属性包括内容，内边距和边框，但不包括外边距。

应用场景：

统一form元素风格
拯救我们的布局（当布局因为border和padding撑开的时候）

CSS3 Box-sizing

css伪类和伪元素

伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰。
常见的几种伪类是: :link , :visited , :hover , :active , :first-child 以及 :nth-child。

伪元素，它们更像是虚拟的元素可以和HTML元素一样对待。区别在于它们并不存在于文档树或者DOM之中。这意味着我们并没有真正的指定伪元素，但是可以使用CSS进行创建。
常见的几种伪元素是: :after , :before 以及 :first-letter。

CSS3中伪元素的书写是使用双冒号，如 a::after{···}，以便于将他们与伪类进行区分。这种情况你可能在CSS中见过。但是CSS3中为了得到更好的向后兼容性，也允许单冒号的使用并且现在我们也建议单冒号的使用。

伪元素跟伪类都是选择器的补充，但是，伪类表示的是一种“状态”比如hover，active等等，而伪元素表示文档的某个确定部分的表现，比如::first-line 伪元素只作用于你前面元素选择器确定的一个元素的第一行。

注意，伪元素选择器选择出来的“部分” 不在dom里，也不能对其绑定事件。如果你对伪元素前面的选择器定义的元素绑定了事件，伪元素同样会生效。永远记得伪元素生成的是“表现”。

详细内容-->CSS伪类和伪元素总结

CSS选择器有哪些？

基本选择器

子元素选择器(E>F)

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了Ｅ元素下的所有子元素Ｆ。这和后代选择器（ＥＦ）不一样，在后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以。

相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。

通用兄弟选择器（Ｅ〜Ｆ）

通用兄弟元素选择器是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素。

详细内容戳W3CPLUS：CSS3 选择器——基本选择器

属性选择器

属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。

E[attr]：只使用属性名，但没有确定任何属性值；
E[attr="value"]：指定属性名，并指定了该属性的属性值；
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

七种属性选择器中E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"]，input[type="checkbox"]等，而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。

详细内容戳W3CPLUS：CSS3 选择器——属性选择器

伪类选择器

动态伪类

锚点伪类：:link,:visited
用户行为伪类：:hover,active,focus

    .demo a:link {/*定义正常链接的样式*/
      color: gray;
    }
    .demo a:visited {/*定义已访问过链接的样式*/
      color: yellow;
    }
    .demo a:hover {/*定义鼠标悬浮在链接上时的样式*/
      color: green;
    }
    .demo a:active {/*定义鼠标点击链接时的样式*/
      color: blue;
    }

爱恨原则LoVe/HAte,也就是Link--visited--hover--active
在W3C规范中，也规定了链接的声明顺序：

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

UI元素状态伪类

我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态。

CSS3的:nth选择器

:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。

否定选择器（:not）

拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想submit也起变化，此时就可以使用:not实现

input:not([type="submit"]) {border: 1px solid red;}

伪元素

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动：

.clearfix::before,
.clearfix::after {
	 content: ".";
	 display: block;
	 height: 0;
	 visibility: hidden;
  }
 .clearfix::after {clear: both;}
 .clearfix {zoom: 1;}

详情请戳CSS3 选择器——伪类选择器

参考文章：
阮大大-CSS选择器笔记

哪些属性可以继承？

可继承的样式：字体系列属性,文本系列属性,font-size font-family color,text-align;
不可继承的样式：display border padding margin width height, 盒子模型的属性 ;

css property table
CSS中可以和不可以继承的属性

CSS权重

CSS权重概述

权重决定了哪一条规则会被浏览器应用在元素上。
权重的级别划分时包含了所有的css选择器。
如果两个选择器作用在同一元素上，则权重高者生效。
权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素。
你可以通过CSS权重之争进一步了解CSS权重。
如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则)。
如果两个选择器权重值不同，则权重大的规则被计算到权重中。
如果一条规则包含了更高权重的选择器，那么这个规则权重更高。
最后定义的规则会覆盖所有跟前面冲突的规则。
内联样式表含有比别的规则更高的权重。
Id选择器的权重比属性选择器更高。
你可以使用id来增大权重。
类选择器比任意数量的元素选择器都高。
通配符选择器跟继承来的样式，他们的权重以 0，0，0，0来计算。

什么是CSS权重？

权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。
当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。
每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。
如果两个选择器同时作用到一个元素上，权重高者生效。

权重等级

根据选择器种类的不同可以分为四类，也决定了四种不同等级的权重值。

行内样式，指的是html文档中定义的style
ID选择器
类，属性选择器和伪类选择器
元素和伪元素

如何确定权重等级呢？

权重记忆口诀。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1

以下是权重的规则：标签的权重为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{
  }

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

例如body #content .data img:hover这样一个样式选择器的权重是多少呢？

#content是一个id选择器加了100，.data是一个class类选择器加了10，：hover伪类选择器加了10， body和img是元素加了1，最终为122。

权重的基本规则

相同的权重：以后面出现的选择器为最后规则
不同的权重，权重值高则生效

CSS权重规则

包含更高权重选择器的一条规则拥有更高的权重
Id选择器的权重比属性选择器高,比如样式表中#p123的权重明显比[id=p123]的权重要高
带有上下文关系的选择器比单纯的元素选择器权重要高。这条规则同样也适用于含有多个元素的选择器
与元素“挨得近”的规则生效，比如css中我们定义了某个规则，但是HTML中也定义了该规则，HTML中定义的规则因为跟元素挨得比较近，所以生效。
最后定义的这条规则会覆盖上面与之冲突的规则
无论多少个元素组成的选择器，都没有一个class选择器权重高。比如说“.introduction”高于“html body div div h2 p”
通配符选择器也有权重，权重被认为是 0，0，0，0。比如 *， body * 被继承的css属性也带有权重，权重是0，0，0，0

参考文章：
你应该知道的一些事情——CSS权重

浮动

float是什么？

在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。

文档流：可显示对象在排列时所占用的位置。HTML正常文档流，将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右地依次排列元素

float造成的各种影响

对父元素的影响：元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。
对其兄弟元素（非浮动）的影响：
1.兄弟元素为块级元素：在现代浏览器和IE8+下，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
2.兄弟元素为内联元素会环绕浮动元素排列。
float对象对自身的影响：该对象将被视为块级元素，即元素的dispaly属性为block。
对子元素的影响：我们知道当一个元素浮动时，在没有清楚浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

了解浮动造成的各种影响-->float深入剖析

浮动清除常见解决方法

不清除浮动的一个常见危害是高度塌陷。关于高度，下面说这么几种情况：

如果父元素已经规定了高度，不会高度塌陷，但可能会溢出（如果子元素总高度超过父元素的话）
如果父元素没有规定高度：
2.1 如果所有子元素都浮动，父元素没有高度，这时候给父元素设置边框的话，就会发现边框包不住子元素
2.2 如果存在没有浮动的子元素，父元素高度取决于没有浮动的子元素，所以如果浮动子元素更高的话，还是会塌陷

clear: both清除浮动

添加一个额外的元素来清除浮动。

.clear {
    clear:both;/*主要使用这个属性来清除浮动*/
    /*为了不让ie具有一定的空间，个人建议加上下面三个属性*/
    height: 0;
    line-height: 0;
    font-size: 0;
}

clear:both不允许元素两侧有浮动（你可以理解为，遇到浮动元素会往下挪，从而撑起高度）

缺点在于创建了不必要的节点

overflow: auto 清除浮动

在有浮动的父元素上使用：

.clear {
    overflow: auto;
    zoom: 1;/*在ＩＥ下触发其layout，也要以使用_height:1%来代替zoom*/
}

使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hidden和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以。

使用::after伪元素清除浮动

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

zoom:1的清除浮动原理?

清除浮动，触发hasLayout；
zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。
譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。

来龙去脉大概如下：
当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。

目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？
可以通过css3里面的动画属性scale进行缩放。

Clear Float
CSS清浮动处理（Clear与BFC）

外边距折叠(collapsing margins)

毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下：

两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
浮动元素/inline-block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
元素自身的margin-bottom和margin-top相邻时也会折叠

display有哪些值？说明他们的作用。

MDN-displayCSS属性指定用于元素的呈现框的类型。在 HTML 中，默认的 display 属性取决于 HTML 规范所描述的行为或浏览器/用户的默认样式表。

none：关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。文档渲染时，该元素如同不存在。
block：该元素生成一个块元素盒。
inline：该元素生成一个或多个行内元素盒。
inline-block：该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）
flex：The element behaves like a block element and lays out its content according to the flexbox model.
grid：The element behaves like a block element and lays out its content according to the grid model.

display: block;和display: inline;的区别

block元素特点：

处于常规流中时，如果width没有设置，会自动填充满父容器
可以应用margin/padding
在没有设置高度的情况下会扩展高度以包含常规流中的子元素
处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
忽略vertical-align

inline元素特点

水平方向上根据direction依次布局
不会在元素前后进行换行
受white-space控制
margin/padding在竖直方向上无效，水平方向上有效
width/height属性对非替换行内元素无效，宽度由元素内容决定
非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定
浮动或绝对定位时会转换为block
vertical-align属性生效

display: none;与visibility: hidden;的区别

它们都能让元素不可见

display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；
visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见；
display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；
visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
修改常规流中元素的display通常会造成文档重排。
修改visibility属性只会造成本元素的重绘。
读屏器不会读取display: none;元素内容；
会读取visibility: hidden;元素内容

什么是重排和重绘

浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树和渲染树。

DOM树表示页面结构，渲染树表示DOM节点如何显示。DOM树中的每一个需要显示的节点在渲染树种至少存在一个对应的节点（隐藏的DOM元素disply值为none 在渲染树中没有对应的节点）。渲染树中的节点被称为“帧”或“盒",符合CSS模型的定义，理解页面元素为一个具有填充，边距，边框和位置的盒子。一旦DOM和渲染树构建完成，浏览器就开始显示（绘制）页面元素。

当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。

高性能JavaScript 重排与重绘

CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下的区别？

visibility属性有两种用法：

取值为 hidden 时隐藏元素，并将其所占空间用空白占位。
取值为 collapse 时隐藏表格的一行或一列。

collapse: 用于表格行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相当）。但是其他行与列的宽和高不会重新计算，行与列的宽高计算依然会将被设为 collapse 的行和列考虑进去。
这是用于快速从表格中删除一行或一列，而无需重新计算表格其他元素的宽和高。（用于其他元素时，collapse 效果与 hidden 相同。)

仅在Firefox下起作用,IE会显示元素,Chrome会将元素隐藏,但是占据空间.

FLEX布局

旨在提供一个更佳有效的布局方式，更好的控制项目的对齐和自由分配容器空间，即使它们的大小是未知的或动态的。

容器上的基本属性：

flex-direction：属性决定主轴的方向（即项目的排列方向）
flex-wrap：属性定义，如果一条轴线排不下，如何换行
justify-content：属性定义了项目在主轴上的对齐方式。
align-items：属性定义项目在交叉轴上如何对齐。
align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

tips：

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
Flexbox布局比较适合Web应用程序的一些小组件和小规模的布局，而Grid布局更适合用于一些大规模的布局。

一个完整的Flexbox指南
 Flex 布局教程：语法篇

position的值relative和absolute定位原点是？

relative

生成相对定位的元素，相对于其正常位置进行定位。
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

absolute

不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。
绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

fixed （老IE不支持）

生成绝对定位的元素，相对于浏览器窗口进行定位。
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。
元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

static

该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。
此时 top, right, bottom, left 和 z-index 属性无效。

sticky

盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。

MDN-position

未知宽高元素怎么上下左右垂直居中

利用transform的translate属性将元素中心与父元素中心重合，达到水平垂直居中：

.parent {
    position: relative;
}
.child {
    background-color: red;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

使用flex实现水平垂直居中就so easy 了：

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

CSS居中解决方案

用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）当然也可以设置为不同颜色以便观察。

#demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是reset样式来统一。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离
#box{ float:left; width:10px; margin:0 0 0 10px;}
这种情况之下IE会产生20px的距离.
解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.bb {
	background-color:red;/*所有识别*/
	 background-color:#00deff\9; /*IE6、7、8识别*/
	+background-color:#a200ff;/*IE6、7识别*/
	_background-color:#1e0bd1;/*IE6识别*/
}

× IE条件注释：适用于[IE5, IE9]常见格式如下：

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

为什么会影响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; }

CSS样式初始化

对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC。

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

创建规则：

根元素
浮动元素（float不是none）
绝对定位元素（position取值为absolute或fixed）
display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素

主要作用：

可以包含浮动元素
不被浮动元素覆盖
阻止父子元素的margin折叠

还有很多不了解，继续加油吧～～

我的小树林-对BFC的理解

使用 CSS 预处理器吗？

css预处理器解决的css问题：

语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

我现在只用过stylus所以贴出再谈 CSS 预处理器中对stylus的总结：

Stylus 的语法非常灵活，很多语义都是根据上下文隐含的。基于 Stylus 可以写出非常简洁的代码，但对使用团队的开发素养要求也更高，更需要有良好的开发规范或约定。Stylus 是前 Node.js 圈第一大神 TJ Holowaychuk 的作品，虽然他已经弃坑了，但是仍然有不小的号召力。和 Sass 有 Compass 类似，Stylus 有一个官方开发的样式库 nib，同样提供了不少好用的 mixin。对于比较有经验的开发者，用 Stylus 可能更会有一种畅快的感觉。总的来说用一个词形容 Stylus 的话，我会用「sexy」。

什么是CSS 预处理器 / 后处理器？

预处理器例如：LESS、Sass、Stylus，用来预编译增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

CSS优化、提高性能的方法有哪些？

关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。
过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；
提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；

在网页中的应该使用奇数还是偶数的字体？为什么呢？

偶数字号相对更容易和 web 设计的其他部分构成比例关系。比如：当我用了 14 px 的正文字号，我可能会在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的标题字号。

现在网页设计中的为什么少有人用 11px、13px、15px 等奇数的字体？

margin和padding分别适合什么场景使用？

margin是用来隔开元素与元素的间距；
padding是用来隔开元素与内容的间隔。

margin用于布局分开元素使元素与元素互不相干；
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。

元素竖向的百分比设定是相对于容器的高度吗？

对于height属性取值百分比，是相对于容器高度。
对于margin-top、margin-bottom、padding-top、padding-bottom这些竖直方向的内外边距属性的百分比取值，参考的其实是容器的宽度而不是高度。

png、jpg、gif 这些图片格式解释一下，分别什么时候用

png

png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式，优点是：压缩比高，色彩好。大多数地方都可以用。可以设置透明背景。

有PNG8和truecolor PNG
PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
适合图标、背景、按钮

jpg

jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。不能设置透明背景。但同等效果下图片大小最小。

颜色限于256
有损压缩
可控制压缩质量
不支持透明
适合照片

gif

gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果时候

有PNG8和truecolor PNG
PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
适合图标、背景、按钮

什么是FOUC?如何避免

Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。

解决方法：把样式表放到文档的head

display,float,position的关系

如果display为none，那么position和float都不起作用，这种情况下元素不产生框
否则，如果position值为absolute或者fixed，框就是绝对定位的，那么元素将为绝对定位,float不起作用。
否则，如果float不是none，框是浮动的，元素会脱离文档流，根据float属性值来显示。
否则，如果元素是根元素，display根据下表进行调整

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

前端基础技能之CSS #37

前端基础技能之CSS #37

wolfdu commented Mar 7, 2018

前端基础技能之CSS #37

前端基础技能之CSS #37

Comments

wolfdu commented Mar 7, 2018

CSS的盒子模型

box-sizing的应用场景

css伪类和伪元素

CSS选择器有哪些？

基本选择器

子元素选择器(E>F)

相邻兄弟元素选择器(E + F)

通用兄弟选择器（Ｅ 〜 Ｆ）

属性选择器

伪类选择器

动态伪类

UI元素状态伪类

CSS3的:nth选择器

否定选择器（:not）

伪元素

哪些属性可以继承？

CSS权重

CSS权重概述

什么是CSS权重？

权重等级

如何确定权重等级呢？

权重的基本规则

CSS权重规则

浮动

float是什么？

float造成的各种影响

浮动清除常见解决方法

clear: both清除浮动

overflow: auto 清除浮动

使用::after伪元素清除浮动

zoom:1的清除浮动原理?

外边距折叠(collapsing margins)

display有哪些值？说明他们的作用。

display: block;和display: inline;的区别

display: none;与visibility: hidden;的区别

什么是重排和重绘

CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下的区别？

FLEX布局

position的值relative和absolute定位原点是？

relative

absolute

fixed （老IE不支持）

static

sticky

未知宽高元素怎么上下左右垂直居中

用纯CSS创建一个三角形的原理是什么？

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

为什么要初始化CSS样式。

对BFC规范(块级格式化上下文：block formatting context)的理解？

使用 CSS 预处理器吗？

什么是CSS 预处理器 / 后处理器？

CSS优化、提高性能的方法有哪些？

在网页中的应该使用奇数还是偶数的字体？为什么呢？

margin和padding分别适合什么场景使用？

元素竖向的百分比设定是相对于容器的高度吗？

png、jpg、gif 这些图片格式解释一下，分别什么时候用

png

jpg

gif

什么是FOUC?如何避免

display,float,position的关系

通用兄弟选择器（Ｅ〜Ｆ）

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？