CSS 是前端必须要掌握的技能之一，一般面试也都会从 CSS 开始

CSS篇

<p><a href="https://segmentfault.com/a/1190000020966360" target="_blank" rel="noopener">引用segmentfault一位大佬的原文，如有侵犯，请联系我给予删除</a></p>
<ul>
<li>盒模型</li>
<li>垂直居中的方法</li>
<li>三栏布局</li>
<li>css权重计算方式</li>
<li>BFC</li>
<li>清除浮动的方法</li>
<li>flex布局</li>
<li>position属性</li>
<li>如何实现一个自适应的正方形</li>
<li>如何用css实现一个三角形</li>
</ul>
<p><strong>1.盒模型：</strong></p>
<p>盒模型是由<span style="color: #ff6600;">margin + border + padding + content</span>四个属性组成，分为两种：W3C的标准盒模型和IE盒模型</p>
<p><strong>W3C的标准盒模型</strong></p>
<p>width = content ，不包括 border + padding</p>
<p><strong>IE盒模型</strong></p>
<p>width = border + padding + content</p>
<p>相互转换</p>
<p>二者之间可以通过css3的box-sizing属性来转换</p>
<p>box-sizing：content-box是W3C盒模型</p>
<p>box-sizing：borde-box是IE盒模型</p>
<p><strong>2.垂直居中的方法</strong></p>
<p>常用四种：</p>
<pre class="language-markup"><code>&lt;div class="outer"&gt;
    &lt;div class="inner"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
<p><strong>第一种：flex</strong></p>
<pre class="language-css"><code>.outer {
   display: flex;
   justify-content: center;
   align-item: center;   
}</code></pre>
<p><strong>第二种：position + transform，inner宽高未知</strong></p>
<pre class="language-css"><code>.outer {
    position: relative;
}
.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}</code></pre>
<p><strong>第三种：position + 负margin，inner宽高已知</strong></p>
<pre class="language-css"><code>.outer {
    position: relative;
}
.inner {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    right: 50%;
    margin-left: -50px;
    margin-top: -50px;
}</code></pre>
<p><strong>第四种：设置各个方向的距离都是0，再将margin设为auto，也可以实现，前提是inner宽高已知</strong></p>
<pre class="language-css"><code>.outer {
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}</code></pre>
<p><strong>3.三栏布局</strong></p>
<p>左右固定，中间自适应</p>
<pre class="language-markup"><code>&lt;div class="container"&gt;
    &lt;div class="left"&gt;left&lt;/div&gt;
    &lt;div class="main"&gt;main&lt;/div&gt;
    &lt;div class="right"&gt;right&lt;/div&gt;
&lt;/div&gt;</code></pre>
<p><strong>第一种：flex</strong></p>
<pre class="language-css"><code>.container {
    display: flex;
}
.left {
    flex-basis: 200px;
    background: green;
}
.main {
    flex: 1;
    background: red;
}
.right {
    flex-basis: 200px;
    background: green;
}</code></pre>
<p><strong>第二种：position + margin</strong></p>
<pre class="language-css"><code>.left, .right {
    position: absolute;
    top: 0;
    background: red;
}
.left {
    left: 0;
    width: 200px;
}
.right {
    right: 0;
    width: 200px;
}
.main {
    margin: 0 200px;
    background: green;
}</code></pre>
<p><strong>第三种：float + margin</strong></p>
<pre class="language-css"><code>.left {
    float: left;
    width: 200px;
    background: red;
}
.main {
    margin: 0 200px;
    background: green;
}
.right {
    float: right;
    width: 200px;
    background: red;
}</code></pre>
<p><strong>4.CSS权重计算方式</strong></p>
<p>CSS基本选择器包含ID选择器、类选择器、标签选择器、通配符选择器。<br />正常情况下，一般都能答出<span style="color: #ff6600;"><code>!important &gt; 行内样式 &gt; ID选择器 &gt; 类选择器 &gt; 标签选择器 &gt; 通配符选择器</code>。</span></p>
<p>但如果这几种选择器同时作用于一个元素时，该元素最后应用哪个样式呢？这就涉及到权重计算的问题。<br />关于权重计算，有两种不同的计算方式：一种是以二进制的规则计算，一种是以1,10,100,1000这种的计算方式。我更倾向于二进制的这种方式。</p>
<p><strong>各选择器权值：</strong></p>
<ul>
<li>内联样式，权值为1000</li>
<li>ID选择器，权值为0100</li>
<li>类，伪类和属性选择器，权值为0010</li>
<li>标签选择器和伪元素选择器，权值为0001</li>
<li>通配符、子选择器、相邻选择器等，权值为0000</li>
<li>继承的样式没有权值</li>
</ul>
<p><strong>比较方式：</strong></p>
<p>如果层级相同，继续往后比较，如果层级不同，层级高的权重大，不论低层级有多少个选择器。</p>
<p><strong>5.BFC</strong></p>
<p>BFC的全称为&nbsp;<code>Block Formatting Context</code>，也就是块级格式化上下文的意思。</p>
<p><strong>以下方式都会创建BFC：</strong></p>
<ul>
<li>根元素(html)</li>
<li>浮动元素（元素的 float 不是 none）</li>
<li>绝对定位元素（元素的 position 为 absolute 或 fixed）</li>
<li>行内块元素（元素的 display 为 inline-block）</li>
<li>表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）</li>
<li>表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）</li>
<li>匿名表格单元格元素（元素的 display为 table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）</li>
<li>overflow 值不为 visible 的块元素</li>
<li>display 值为 flow-root 的元素</li>
<li>contain 值为 layout、content或 paint 的元素</li>
<li>弹性元素（display为 flex 或 inline-flex元素的直接子元素）</li>
<li>网格元素（display为 grid 或 inline-grid 元素的直接子元素）</li>
<li>多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）</li>
</ul>
<p>column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。</p>
<p><strong>BFC布局规则：</strong></p>
<ol>
<li>内部的box会在垂直方向，一个接一个的放置。</li>
<li>box垂直方向的距离有margin决定。属于同一个BFC的两个相邻box的margin会发生重叠。3. 每个元素的左外边距与包含块的左边界相接触，即使浮动元素也是如此。</li>
<li>BFC的区域不会与float的元素区域重叠。</li>
<li>计算BFC的高度时，浮动子元素也参与计算。</li>
<li>BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。</li>
</ol>
<p><strong>BFC能解决的问题：</strong></p>
<ol>
<li>父元素塌陷</li>
<li>外边距重叠</li>
<li>清除浮动</li>
</ol>
<h3 id="articleHeader7">6.清除浮动的方法</h3>
<p>清除浮动主要是为了防止父元素塌陷。清除浮动的方法有很多，常用的是&nbsp;<code>clearfix</code>&nbsp;伪类。</p>
<pre class="language-markup"><code>&lt;div class="outer clearfix"&gt;
    &lt;div class="inner"&gt;inner&lt;/div&gt;
&lt;/div&gt;</code></pre>
<p><strong>第一种：clearfix</strong></p>
<pre class="language-css"><code>.outer {
    background: blue;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clearfix:after {
    content:"",
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}</code></pre>
<p><strong>第二种：额外加一个div，clear：both</strong></p>
<pre class="language-markup"><code>&lt;div class="container"&gt;
    &lt;div class="inner"&gt;&lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
&lt;/div&gt;
.container {
    background: blue;
}
.inner {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.clear {
    clear: both;
}</code></pre>
<p><strong>第三种：触发父盒子BFC，overflow：hidden</strong></p>
<pre class="language-markup"><code>&lt;div class="outer"&gt;
    &lt;div class="inner"&gt;inner&lt;/div&gt;
&lt;/div&gt;
.outer{
  background: blue;
  overfloe: hidden;
}
.inner{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}</code></pre>
<p><strong>7.flex布局</strong></p>
<div>
<div>Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。<br />采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。</div>
<div>&nbsp;</div>
<div><em><strong>父元素属性：</strong></em></div>
<div>&nbsp;</div>
<strong>一：flex-direction</strong><br />决定主轴的方向（即项目的排列方向）</div>
<div>
<pre class="language-css"><code>.box {
  flex-direction: row | row-reverse | column | column-reverse;
}</code></pre>
<ul>
<li><strong>row:</strong> 默认值，水平从左到右</li>
<li><strong>colunm: </strong>垂直从上到下</li>
<li><strong>row-reverse: </strong>水平从右到左</li>
<li><strong>column-reverse： </strong>垂直从下到上</li>
</ul>
<p><strong>二：flex-wrap</strong><br />默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。</p>
<pre class="language-css"><code>.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}</code></pre>
<ul>
<li><strong>nowrap：</strong>默认值，不换行</li>
<li><strong>wrap：</strong>换行</li>
<li><strong>wrap-reverse：</strong>换行，且颠倒行顺序，第一行在下方</li>
</ul>
<p><strong>三：flex-flow</strong><br /><code>flex-flow</code>&nbsp;属性是&nbsp;<code>flex-direction</code>&nbsp;属性和&nbsp;<code>flex-wrap</code>&nbsp;属性的简写形式，默认值为<code>row nowrap</code></p>
<pre class="language-css"><code>.box {
  flex-flow: &lt;flex-direction&gt; || &lt;flex-wrap&gt;;
}</code></pre>
<p><strong>四：justify-content</strong></p>
<div>
<div>设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制</div>
<pre class="language-css"><code>.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}​</code></pre>
<div>
<ul>
<li><strong>flex-start：</strong> 默认值、弹性盒子元素将向行起始位置对齐</li>
<li><strong>flex-end：</strong> 弹性盒子元素将向行结束位置对齐</li>
<li><strong>center：</strong>弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐</li>
<li><strong>space-between：</strong> 弹性盒子元素会平均地分布在行里</li>
<li><strong>space-around ：</strong>弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半</li>
</ul>
<p><strong>五：align-items</strong><br />设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式</p>
<pre class="language-css"><code>.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}</code></pre>
<div>
<div>
<ul>
<li>
<p><strong>flex-start：</strong> 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。</p>
</li>
<li>
<p><strong>flex-end：</strong> 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。</p>
</li>
<li>
<p><strong>center：</strong> 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。</p>
</li>
<li>
<p><strong>baseline：</strong> 如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。</p>
</li>
<li>
<p><strong>stretch：</strong> 如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。</p>
</li>
</ul>
<p><strong>六：align-content</strong><br />设置或检索弹性盒堆叠伸缩行的对齐方式</p>
</div>
</div>
</div>
<pre class="language-css"><code>.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}​</code></pre>
<br />
<div>
<div>
<ul>
<li>
<p><strong>flex-start：</strong> 各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。</p>
</li>
<li>
<p><strong>flex-end：</strong> 各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。</p>
</li>
<li>
<p><strong>center：</strong> 各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。</p>
</li>
<li>
<p><strong>space-between：</strong> 各行在弹性盒容器中平均分布。第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。</p>
</li>
<li>
<p><strong>space-around：</strong> 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。</p>
</li>
<li>
<p><strong>stretch：</strong> 各行将会伸展以占用剩余的空间。剩余空间被所有行平分，以扩大它们的侧轴尺寸。</p>
</li>
</ul>
<p>&nbsp;</p>
<p><em><strong>子元素上属性：</strong></em></p>
</div>
<p><strong>一：order</strong></p>
<p>默认情况下flex order会按照书写顺训呈现，可以通过order属性改变，数值小的在前面，还可以是负数。</p>
<pre class="language-css"><code>.item {
  order: &lt;integer&gt;;
}</code></pre>
<p><strong>二：flex-grow</strong></p>
<p>设置或检索弹性盒的扩展比率,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间</p>
<pre class="language-css"><code>.item {
  flex-grow: &lt;number&gt;; /* default 0 */
}</code></pre>
<p><strong>三：flex-shrink</strong><br />设置或检索弹性盒的收缩比率,根据弹性盒子元素所设置的收缩因子作为比率来收缩空间</p>
<pre class="language-css"><code>.item {
  flex-shrink: &lt;number&gt;; /* default 1 */
}</code></pre>
<p><strong>四：flex-basis</strong></p>
<p>设置或检索弹性盒伸缩基准值，如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间</p>
<pre class="language-css"><code>.item {
  flex-basis: &lt;length&gt; | auto; /* default auto */
}</code></pre>
<p><strong>五：felx</strong></p>
<p>flex属性是<code>flex-grow</code>,&nbsp;<code>flex-shrink</code>&nbsp;和&nbsp;<code>flex-basis</code>的简写，默认值为<code>0 1 auto</code>。后两个属性可选。</p>
<pre class="language-css"><code>.item {
  flex: none | [ &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;? || &lt;'flex-basis'&gt; ]
}</code></pre>
<p><strong>六：align-self</strong></p>
<p>设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式，可以覆盖父容器align-items的设置</p>
<pre class="language-css"><code>.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}</code></pre>
<p><strong>8.position属性</strong></p>
<p>position属性的重要性应该没啥可说的了。想必谁都回答的上来。</p>
<ul>
<li><span style="color: #ff6600;"><code>absolute</code>&nbsp;</span>绝对定位，相对于&nbsp;<span style="color: #ff6600;"><code>static</code>&nbsp;</span>定位以外的第一个父元素进行定位。</li>
<li><span style="color: #ff6600;"><code>relative</code>&nbsp;</span>相对定位，相对于其自身正常位置进行定位。</li>
<li><span style="color: #ff6600;"><code>fixed</code>&nbsp;</span>固定定位，相对于浏览器窗口进行定位。</li>
<li><span style="color: #ff6600;"><code>static</code>&nbsp;</span>默认值。没有定位，元素出现在正常的流中。</li>
<li><span style="color: #ff6600;"><code>inherit</code>&nbsp;</span>规定应该从父元素继承 position 属性的值。</li>
</ul>
<p><strong>9.如何实现一个自适应的正方形</strong></p>
<p><strong>一：利用CSS3的vw单位</strong></p>
<p><code>vw</code>&nbsp;会把视口的宽度平均分为100份</p>
<pre class="language-css"><code>.square {
  width: 10vw;
  height: 10vw;
  background: red;
}</code></pre>
<p><strong>二：利用margin或者padding的百分比计算是参照父元素的width属性</strong></p>
<pre class="language-css"><code>.square {
  width：10%；
  padding-bottom：10%;
  height: 0;
  background: red;
}</code></pre>
<p><strong>10.如何用css实现一个三角形</strong></p>
<p><strong>第一种：利用border属性</strong></p>
<p>利用盒模型的&nbsp;<code>border</code>&nbsp;属性上下左右边框交界处会呈现出平滑的斜线这个特点，通过设置不同的上下左右边框宽度或者颜色即可得到三角形或者梯形。</p>
<pre class="language-css"><code>.triangle {
    height:0;
    width:0;
    border-color:red blue green pink;
    border-style:solid;
    border-width:30px;
}</code></pre>
<p>如果想实现其中的任一个三角形，把其他方向上的&nbsp;<code>border-color</code>&nbsp;都设置成透明即可。</p>
<pre class="language-css"><code>.triangle {
    height:0;
    width:0;
    border-color:red transparent transparent transparent;
    border-style:solid;
    border-width:30px;
}</code></pre>
<p><strong>第二种：利用CSS3的clip-path属性</strong></p>
<pre class="language-css"><code>.triangle {
    width: 30px;
    height: 30px;
    background: red;
    clip-path: polygon(0px 0px, 0px 30px, 30px 0px); // 将坐标(0,0),(0,30),(30,0)连成一个三角形
    transform: rotate(225deg); // 旋转225，变成下三角
}</code></pre>
</div>
</div>
</div>