前端工程师面试指南——CSS篇

常见的文字溢出隐藏功能实现

@mixin overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
div {
    @include  overflow-ellipsis;
}

底部粘连（stiky footer）布局

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。下面将详细介绍sticky footer的4种实现方式。

绝对定位： 常见的实现方法是对(.sticky)footer进行绝对定位，假设高度为50px。对父级(.box)进行相对定位，将html、body的高度设置为100%，父级(.box)的最小高度设置为100%，将(.content)内容部分设置padding-bottom为footer的高度，即50px，这里不用margin-bottom是因为会出现margin-bottom传递的情况

<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
  html,body {
    height: 100%
  }
  body {
    margin: 0
  }
  .box {
    position: relative;
    background-color: lightblue;
    min-height: 100%;
  }
  .content {
    padding-bottom: 50px;
  }
  .sticky {
    position: absolute;
    background-color: lightgreen;
    width: 100%;
    height: 50px;
    bottom: 0;
  }
</style>
</head>
<body>
<div class="box">
  <main class="content">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam eos architecto ratione culpa adipisci inventore
    ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit
    reiciendis!
    ...
  </main>
  <footer class="sticky"></footer>
</div>
</body>
</html>

calc： 上面的代码中，因为要实现最小高度100%的效果，给html、body都设置为高度100%，不利于代码扩展。下面使用100vh来代替100%，代码会简洁很多。内容部分(.content)设置最小高度为calc(100vh - 50px)即可。

<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
  html,body {
    margin: 0;
  }
  .content{
    background-color:lightblue;
    min-height: calc(100vh - 50px)
  }
  .sticky{
    background-color:lightgreen;
    height:50px;
  }
</style>
</head>
<body>
<div class="box">
  <main class="content">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam eos architecto ratione culpa adipisci inventore
    ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit
    reiciendis!
    ...
  </main>
  <footer class="sticky"></footer>
</div>
</body>
</html>

flex： 上面的代码中，如果sticky的底部高度发生了变化，则内容部分的代码也需要进行相应地调整。如果使用flex，则可以更加灵活。为父级(.box)设置flex、上下排列及最小高度为100vh，为内容部分(.content)设置flex:1即可

<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
  html,body {
    margin: 0;
  }
  .box {
    display:flex;
    flex-flow:column;
    min-height:100vh;
    background-color:lightblue;
  }
  .content {
    flex:1;
  }
  .sticky {
    background-color:lightgreen;
    height:50px;
  }
</style>
</head>
<body>
<div class="box">
  <main class="content">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam eos architecto ratione culpa adipisci inventore
    ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit
    reiciendis!
    ...
  </main>
  <footer class="sticky"></footer>
</div>
</body>
</html>

grid： 作为最新布局方式的grid当然也可以实现，而且代码更加简洁

<html>
<head>
<meta charset="utf-8" />
<title>grid</title>
<style>
  html,body {
    margin: 0;
  }
  .box {
    display:grid;
    grid-template-rows:1fr 50px;
    min-height:100vh;
  }
  .content {
    background-color:lightblue;
  }
  .sticky {
    background-color:lightgreen;
  }
</style>
</head>
<body>
<div class="box">
  <main class="content">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam eos architecto ratione culpa adipisci inventore
    ipsum eum esse, nam aperiam, non tempora perferendis doloribus cumque ducimus quidem consequuntur reprehenderit
    reiciendis!
    ...
  </main>
  <footer class="sticky"></footer>
</div>
</body>
</html>

CSS实现等高布局

利用fill-available

<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
  html,body {
    margin: 0;
  }
  .inner{
    width:100px;
    height:-webkit-fill-available;
    margin:0 10px;
    display: inline-block;
    vertical-align: middle;
    background-color: pink;
  }
</style>
</head>
<body>
<div style="height: 100px;">
  <div class="inner">HTML</div>
  <div class="inner">CSS</div>
  <div class="inner">JS<br>jQyery<br>Vue</div>
</div>
</body>
</html>

CSS一些很重要的基础知识

有大牛已经整理好了，详情请点击这里

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？如何设置这两种模型

有两种， IE 盒子模型、W3C 盒子模型；

盒模型： 内容(content)、填充(padding)、边界(margin)、边框(border)；
区别： 这两种盒子模型最主要的区别就是width的包含范围，在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异。
标准盒模型box-sizing： content-box；IE盒模型box-sizing：border-box

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优先级算法如何计算

优先级就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;

同权重： 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
不同权重： !important > id > class > tag，其中important 比内联优先级高

CSS3新增伪类有那些

p:first-of-type： 选择属于其父元素的首个  元素的每个元素。
p:last-of-type： 选择属于其父元素的最后 元素的每个元素。
p:only-of-type： 选择属于其父元素唯一的 元素的每个  元素。
p:only-child： 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2)： 选择属于其父元素的第二个子元素的每个 元素。
:checked： 单选框或复选框被选中。
:disabled： 控制表单控件的禁用状态。

如何居中div

水平居中：给div设置一个宽度，然后添加margin:0 auto属性
```
div {
width: 200px;
margin: 0 auto;
}
```

让绝对定位的div居中

div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* 方便看效果 */
background-color: pink; 
}

水平垂直居中一

div {
/* 相对定位或绝对定位均可 */
position: relative;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
/* 外边距为自身宽高的一半 */
margin: -150px 0 0 -250px;
/* 方便看效果 */
background-color: pink;
}

水平垂直居中二

div {
  /* 相对定位或绝对定位均可 */
  position: absolute;
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 方便看效果 */
  background-color: pink;
}

水平垂直居中三

.container {
  display: flex;
  height: 500px;
  width: 500px;
  border: 1px solid #ccc;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
}
.container div {
  width: 100px;
  height: 100px;
  /* 方便看效果 */
  background-color: pink;
}

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

block： 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none： 缺省值。象行内元素类型一样显示。
inline： 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block： 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item： 象块类型元素一样显示，并添加样式列表标记。
table： 此元素会作为块级表格来显示。
inherit： 规定应该从父元素继承 display 属性的值。

position的值relative和absolute定位原点

absolute： 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed： 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative： 生成相对定位的元素，相对于其正常位置进行定位。
static： 默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit： 规定从父元素继承 position 属性的值。

CSS3有哪些新特性

新增各种CSS选择器： （: not(.input)：所有 class 不是“input”的节点）
圆角： （border-radius:8px）
多列布局： （multi-column layout）
阴影和反射： （Shadow\Reflect）
文字特效： （text-shadow、）
文字渲染： （Text-decoration）
线性渐变： （gradient）
旋转： （transform）
缩放,定位,倾斜,动画,多背景。例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
在布局上有了比以前更加灵活的空间，使用指南

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

把上、左、右三条边框隐藏掉（颜色设为 transparent）

div {
  height: 0;
  width: 0;
  display: block;
  border: transparent solid 20px;
  border-left: #005AA0 solid 20px;
}

一个满屏品字布局如何设计

简单的方式： 上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline使其不换行即可

css多列等高如何实现

利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        font-size: 12px;
      }
      #wrap {
        overflow: hidden;
        width: 670px;
        margin: 10px auto;
        padding-bottom: 10px;
        position: relative;
      }
      .box {
        float: left;
        display: inline;
        margin-top: 10px;
        width: 190px;
        background: #c8c8c8;
        margin-left: 10px;
        padding: 10px;
        padding-bottom: 820px;
        margin-bottom: -800px;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div class="box">
        <h1>CSS实现三列DIV等高布局</h1>
        <p>
          这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道。 下面介绍的技术是一个简捷的小技巧，它一定可以帮助你解决这个头痛的问题。
        </p>
      </div>
      <div class="box">
        <h1>三列DIV等高</h1>
        <p></p>
      </div>
      <div class="box">
        <h1>CSS实现</h1>
        <p></p>
      </div>
    </div>
  </body>
</html>

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      ul {
        list-style: none;
        /*解决空格问题*/
        font-size: 0;
      }
      li {
        display: inline-block;
        height: 70px;
        width: 150px;
        line-height: 70px;
        text-align: center;
        border: #005AA0 solid 2px;
        /*解决空格问题*/
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>li标签</li>
      <li>li标签</li>
      <li>li标签</li>
    </ul>
  </body>
</html>

为什么要初始化CSS样式

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

子class选择器设置蓝色，父id选择器设置红色，最终会显示哪个

一定是子元素设置的选择器最优先，要不然页面就乱套了。所以答案是蓝色。

请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box {
        width: 510px;
        border: #0000FF solid 1px;
      }
      .box:after {
        content: "";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
      }
      .left {
        float: left;
        width: 250px;
        height: 100px;
        background-color: green;
      }
      .right {
        float: left;
        width: 250px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

解析原理： （1） display:block使生成的元素以块级元素显示,占满剩余空间（2）height:0避免生成内容破坏原有布局的高度（3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互（4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的content:"."有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的（5）zoom：1触发IE hasLayout。

什么是外边距合并？

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

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

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

浏览器是怎样解析CSS选择器的

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。

设置元素浮动后，该元素的display值是多少

自动变成了 display:block

让页面里的字体变清晰，变细用CSS怎么做

-webkit-font-smoothing: antialiased;

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

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

em和rem的区别在哪里

em是相对长度单位，相对于当前对象内文本的字体尺寸；
em是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

假设高度已知，请写出三栏布局，其中左栏和右栏宽度各为300px，中间自适应

（1）利用浮动

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.float .left {
        float: left;
        width: 300px;
        background: red;
      }
      .layout.float .right {
        float: right;
        width: 300px;
        background: blue;
      }
      .layout.float .center {
        background: yellow;
      }
    </style>
  </head>
  <body>
    <section class="layout float">
      <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h1>浮动解决方案</h1>
          <p>
            这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
          </p>
        </div>
      </article>
    </section>
  </body>
</html>

（2）利用绝对定位

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.absolute .left-center-right>div {
        position: absolute;
      }
      .layout.absolute .left {
        left: 0;
        width: 300px;
        background: red;
      }
      .layout.absolute .center {
        left: 310px;
        right: 310px;
        background: yellow;
      }
      .layout.absolute .right {
        right: 0;
        width: 300px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <section class="layout absolute">
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>绝对定位解决方案</h1>
          <p>
            这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
          </p>
        </div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>

（3）利用flexbox布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.flexbox .left-center-right {
        display: flex;
      }
      .layout.flexbox .left {
        width: 300px;
        background: red;
      }
      .layout.flexbox .center {
        flex: 1;
        background: green;
      }
      .layout.flexbox .right {
        width: 300px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <section class="layout flexbox">
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>flexbox解决方案</h1>
          <p>
            这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
          </p>
        </div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>

（4）表格布局法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layout</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .layout article div {
        min-height: 100px;
      }
      .layout.table .left-center-right {
        width: 100%;
        display: table;
        height: 100px;
      }
      .layout.table .left-center-right>div {
        display: table-cell;
      }
      .layout.table .left {
        width: 300px;
        background: black;
      }
      .layout.table .center {
        background: green;
      }
      .layout.table .right {
        width: 300px;
        background: burlywood;
      }
    </style>
  </head>
  <body>
    <section class="layout table">
      <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>表格布局解决方案</h1>
          <p>
            这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分 这是三栏布局中间部分
          </p>
        </div>
        <div class="right"></div>
      </article>
    </section>
  </body>
</html>

什么是BFC？它的渲染规则是什么？如何创建BFC？它的使用场景有哪些

（1）概念： BFC是Block Formatting Context （块级格式化上下文）的缩写，它是W3C CSS 2.1 规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 （2）渲染规则：

内部的box会在垂直方向，一个接一个的放置；
box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠；
每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此；
BFC的区域不会与float box重叠；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
计算BFC的高度时，浮动元素也参与计算。

（3）创建BFC：

float属性不为none；
position属性值为absolute或fixed；
display属性值为inline-block，table-cell,table-caption,flex,inline-flex；
overflow属性值不为visible。

（4）使用场景：

解决垂直方向边距重叠；
解决和浮动元素的重叠；
清除浮动

CSS中的文档流

普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。其中涉及到了块状元素和内联元素。脱离文档流的几个属性：绝对定位(absolute)、固定定位(fixed)、浮动(float)。

CSS中的伪类

概念： 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
拓展： 伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

CSS中的伪元素

概念： 伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：document接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
拓展： 伪元素的由两个冒号::开头，然后是伪元素的名称。使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。
分类： ::first-letter；::first-line；::before；::after；::selection；（对用户所选取的部分样式改变）

伪元素和伪类的区别

（1）CSS伪类： 用于向某些选择器添加特殊的效果。 （2）CSS伪元素： 用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 （3）总结：

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
伪元素本质上是创建了一个有内容的虚拟容器；
CSS3中伪类和伪元素的语法不同；
可以同时使用多个伪类，而只能同时使用一个伪元素。

CSS隐藏元素的几种方法

（1）Opacity: 元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互; （2）Visibility: 与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏; （3）Display: display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在; （4）Position: 不会影响布局，能让元素保持可以操作;

float和display:inline-block;的区别

（1）文档流（Document flow）: 浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。 （2）水平位置（Horizontal position）： 很明显你不能通过给父元素设置text- align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了 display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。 （3）垂直对齐（Vertical alignment）： inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。 （4）空白（Whitespace）： inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。

关于空白节点的解决方案

（1）删除html中的空白： 不要让元素之间换行，这可能比较蛋疼，但也是一种方法，特别是你元素不多的时候。 （2）使用负边距： 你可以用负边距来补齐空白。但你需要调整font-size，因为空白的宽度与这个属性有关系。 （3）给父元素设置font-size:0： 不管空白多大，由于空白跟font-size的关系，设置这个属性即可把空白的宽度设置为0.在实际使用的时候，你还需要给子元素重新设置font-size。

如何解决图片与文字的不对齐

（1）vertical-align： 最有效的一种方式； （2）margin： 需要不断调试图片的高度，精确度难以保证； （3）position： 同样是需要不断调试图片的高度，精确度难以保证。

如何实现点击radio的文字描述控制radio的状态

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <label for="man">男</label>
    <input type="radio" id="man" name="sex" checked="checked" />

    <label for="women">
    女
       <input type="radio" id="women" name="sex" />
    </label>
  </body>
</html>

position有哪些常用定位属性？定位原点是基于哪个位置

（1）relative ： 相对定位，没有脱离文档流，依然占有文档空间，它是根据自身原本在文档流中的位置进行偏移； （2）absolute： 绝对定位，脱离文档流，根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以position非static方式定位的，如果无父级是position非static定位时是以html作为原点定位。 （3）fixed： 固定定位，脱离文档流，根据浏览器窗口进行定位。

介绍一下box-sizing属性

（1）box-sizing属性： 主要用来控制元素的盒模型的解析模式。默认值是content-box。 （2）content-box属性值： 让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高 （3）border-box属性值： 让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

解释下浮动和它的工作原理？清除浮动的技巧

（1）原理： 浮动元素脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框停留。 （2）使用空标签清除浮动： 这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。 （3）使用overflow： 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 （4）使用after伪对象清除浮动： 该方法只适用于非IE浏览器。

#parent:after {
  content: ".";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}

浮动元素引起的问题

（1）父元素的高度无法被撑开，影响与父元素同级的元素（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

img的白边是因为什么

原因在于，img标签默认情况下display:inline-block;img在div中的白边就是因为inline-block；造成的，所以此时将img的display设置为block；白边就消失了

px、pt和em、rem的区别是什么

（1）px(pixel)指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的px元素显示会不一样，比如同样是14px大小的字，在1366*768显示屏下会显示的小，在1024*768尺寸的显示器下会相对大点。（2）pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度。（3）em是相对长度单位，相对于当前对象内文本的字体尺寸，即em的计算是基于父级元素font-size的。

<body style="font-size:14px">
  <p style="font-size:2em">我这里的字体显示大小是28px(14px*2)</p>
  <div style="font-size:18px">
    <p style="font-size:2em">我这里显示字体大小是36px(18px*2),而不是上面计算的28px</p>
  </div>
</body>

（4）rem是css3新增的一个相对单位，与em的区别在于，它是相对于html根元素的。

<body style="font-size:14px">
  <p style="font-size:2rem">我这里的字体显示大小是28px(14px*2)</p>
  <div style="font-size:18px">
    <p style="font-size:2rem">我这里显示字体大小是28px(14px*2),因为我是根据html根元素的font-size大小进行计算的</p>
  </div>
</body>

谈谈nth-of-type() 选择器

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，n 可以是数字、关键词或公式。其中，Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

p:nth-of-type(2) {
  background: #ff0000;
}

p:nth-of-type(odd) {
  background: #ff0000;
}
p:nth-of-type(even) {
  background: #0000ff;
}

p:nth-of-type(3n+0) {
  background: #ff0000;
}

页面重排（Reflow）的概念和触发reflow的条件

（1）概念： DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。 （2）触发的条件：

当你增加、删除、修改DOM节点时，会导致reflow或repaint；
当你移动DOM的位置，或是搞个动画的时候；
当你修改CSS样式的时候；
当你resize窗口的时候（移动端没有这个问题），或是滚动的时候；
当你修改网页默认字体的时候。

CSS哪些属性可以继承

字体相关： line-height, font-family, font-size, font-style, font-variant, font-weight, font
文本相关： letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相关： list-style-image, list-style-position, list-style-type, list-style
颜色： color

CruxF / Blog