CSS

盒模型

有两种 : 标准盒模型和 IE 盒模型

标准盒模型

IE 盒模型

这两种盒子模型最主要的区别就是 width 的包含范围

标准盒模型 : width = content
IE 盒模型 : width = content + padding + border

如何设置这两种模型 ?

标准模型: box-sizing:content-box;
IE模型: box-sizing:border-box;

BFC

BFC : 块级格式化上下文，可以理解为是一种属性，这种属性影响着元素等定位以及其兄弟元素之间等相互作用。

BFC 区域不会与 float box 重叠
BFC 是页面上的一个独立容器，子元素不会影响到外面
计算 BFC 高度时，浮动元素也会参与计算

生成条件?

float 除 none 之外的值
position 为 fixed 和 absolute 的元素
display 为 inline-block 、 table-cell 、 table-caption 、 flex 、 inline-flex的元素
overflow 不为visible的元素 (比如 : hidden 、 scroll 、 auto)

边距重叠?

<div style="marginBottom: 30px"></div>

<div style="marginTop: 50px"></div>

<!-- 上边代码，其实他们的边距并不是 30 + 50 ，而是发生了重叠，取最大50 -->

<!-- 如何解决边距问题，创建BFC，给第二个div添加父元素，在父元素上生成BFC -->

<div style="marginBottom: 30px"></div>

<div style="overflow: hidden">
  <div style="marginTop: 50px"></div>
</div>

Flex 布局

弹性布局，一般就是用于居中、或者模拟 bootstrap 的栅格分列等 ....

六大属性

flex-direction : 属性决定主轴的方向
flex-wrap : 是否换行
flex-flow : flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
justify-content : 属性定义了项目在主轴上的对齐方式
align-items : 属性定义项目在交叉轴上如何对齐。
align-content : 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

⚠ 注意: 在 IE 下使用 flex: 1 一定要添加 -ms-flex ，不然就会出现问题

<div style="display: flex; max-width: 300px">
  <i style="width: 10; height: 10;"></i>
  <span style="flex: 1; white-space: nowrap">牛逼</span>
</div>

// 这会出现问题，直观只会看到 i 标签，看不到span标签的文字，可以考虑这样改

// 添加 -ms-flex
<span style="flex: 1; white-space: nowrap; -ms-flex: 1 1 auto">牛逼</span>

// 如果这时候前边的 i 出现压缩，可以在 i 标签添加 flex-shrink
<i style="width: 10; height: 10; flex-shrink: 0"></i>

CSS3 新特性

面试中，面试官会问你，css3 新加了哪些新特性呢？很显然这道题目是有陷阱的，你不可能将所有的特性一个不漏的说出来，就算你说出来，别人还认为你是背的了，这边我就大概说下我在开发中，用到的 css3 新特性

border-radius 圆角

border-radius: 10px;

text-shadow 阴影

text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);

/* 水平阴影的位置， 垂直阴影的位置， 模糊的距离， 阴影的颜色*/

-webkit-gradient 渐变

background-image: -webkit-gradient(
  linear,
  0% 0%,
  100% 0%,
  from(#2a8bbe),
  to(#fe280e)
);

display: -webkit-box 水平垂直居中

.box {
  display: -webkit-box;
  -webkit-box-orient: horizontal; /* 父容器里子容器的排列方式，是水平还是垂直 */
  -wekit-box-pack: center; /* 父容器里子容器的水平对齐方式 */
  -webkit-box-align: center; /* 父容器里子容器的垂直对齐方式 */
}

transition 过渡

transition-property 对象参与过渡的属性
transition-duration 过渡的持续时间
transition-timing-function 过渡的类型
transition-delay 延迟过渡的时间

transition: color 5s ease-in 1s;

transforms 变形转换

主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）

animation 动画

animation-name 规定需要绑定到选择器的 keyframe
animation-duration 规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function 规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟
animation-iteration-count 规定动画应该播放的次数
animation-direction 规定是否应该轮流反向播放动画。

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: isAnimate 5s infinite;
  -webkit-animation: isAnimate 5s infinite; /*Safari and Chrome*/
}

@keyframes isAnimate {
  from {
    left: 0px;
  }
  to {
    left: 200px;
  }
}

@-webkit-keyframes isAnimate {
  from {
    left: 0px;
  }
  to {
    left: 200px;
  }
}

垂直居中的方式

方法一： table-cell (未脱离文档流)

    /* css */
    .box {
      display : table-cell;
      vertical-algin : middle; /* 把元素放在父元素的中部 */
      text-align : center;
    }

    /* html */
    <div class="box">
      <span>垂直居中</span>
    </div>

方法二： flex弹性布局

.box {
  display: flex;
  justify-content: center; /* 主轴上的对齐方式 */
  item-aligns: center; /* 交叉轴上对齐方式 */
}

方法三： 绝对定位居中技术，已知高度和宽度的元素解决方案

我们经常用 margin:0 auto;来实现水平居中，而一直认为 margin:auto;不能实现垂直居中......其实，可以做得到。。。不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

.box span {
  height: 100px; /* 这里必须定义内部元素的高度 */
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

方法四： 绝对定位和负边距

.box {
  position: relative;
}

.box span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 50px;
  margin-left: -50px; /* 这里如果不加，就不会居中，会往右偏 width / 2 的距离 */
  margin-top: -25px; /* 这里如果不加，就不会居中，会往下偏 height / 2 的距离 */
  text-align: center;
}

方法五：绝对定位和transform, 未知宽高的情况下使用；

.box {
  position: relative;
  height: 300px;
}

.box p.label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法六：display: -webkit-box 水平垂直居中

.box {
  display: -webkit-box;
  -webkit-box-orient: horizontal; /* 父容器里子容器的排列方式，是水平还是垂直 */
  -wekit-box-pack: center; /* 父容器里子容器的水平对齐方式 */
  -webkit-box-align: center; /* 父容器里子容器的垂直对齐方式 */
}

清除浮动的几种方式

父级元素追加空子元素，并设定 clear : both
父级元素定义 overflow : hidden
父级元素定义伪类 :after 和 zoom

嵌套规则

块级元素可以嵌套行内元素或部分的块级元素，行内元素只能嵌套行内元素。

如何画一条 0.5px 的线?

Chrome把 0.5px 四舍五入变成了 1px，而firefox/safari能够画出半个像素的边，并且Chrome会把小于 0.5px 的当成 0，而Firefox会把不小于 0.55px 当成 1px，Safari是把不小于 0.75px 当成 1px，进一步在手机上观察 IOS 的 Chrome 会画出 0.5px 的边，而安卓(5.0)原生浏览器是不行的。所以直接设置 0.5px 不同浏览器的差异比较大

解决方法: 使用缩放 transform : scaleY(0.5)

    .hr.scale-half {
        height: 1px;
        transform: scaleY(0.5);
    }

    <p>1px + scaleY(0.5)</p>
    <div class="hr scale-half"></div>

transition 和 animation 的区别?

animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值。

他们的主要区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from .... to，而 animation 可以一帧一帧的。

并且 transition 关注的是 CSS property 的变化，而 animation 作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。animation 制作动画必须用关键帧声明一个动画，而且在 animation 调用关键帧声明的动画。

什么是关键帧 ?

@keyframes就是关键帧，而且需要加webkit前缀，比如：

/* 当鼠标悬浮在button class为login的按钮时，触发changeColor动画 */

button.login:hover {
  -webkit-animation: 1s changeColor;
  animation: 1s changeColor;
}

@-webkit-keyframes changeColor {
  0% {
    background: #c00;
  }
  50% {
    background: orange;
  }
  100% {
    background: yellowgreen;
  }
}
@keyframes changeColor {
  0% {
    background: #c00;
  }
  50% {
    background: orange;
  }
  100% {
    background: yellowgreen;
  }
}

/* 上面代码中的0% 100%的百分号都不能省略，0%可以由from代替，100%可以由to代替。 */

知乎上有个答案这么说的 :

Transition 强调过渡，Transition ＋ Transform ＝ 两个关键帧的Animation
Animation 强调流程与控制，Duration ＋ TransformLib ＋ Control ＝ 多个关键帧的Animation

甚至于，我们可以说 : transition 是 Animation 的一个子集，即一个 Animation 是由多个 transition 组合而成的。

visibility:hidden 和 display:none 以及 opacity:0

opacity : 0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件
visibility : hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display : none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

这会跟浏览器渲染原理中的回流与重绘知识相关，更多请看浏览器相关知识点

border:none 和 border:0 的区别

【性能差异】

border:none ，浏览器在解析的时候，不做出渲染动作，不消耗内存值
border:0，虽然看不见，但是在解析的时候还是进行了渲染，消耗了内存值

【兼容性差异】

border:none，对 IE6/7 无效。边框依然存在
border:0，所有浏览器一致把边框隐藏

CSS 优先级算法如何计算

优先级比较

优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为: !important > id > class > tag， important 比内联优先级高

权重的比较

！important 规则最重要，大于其它规则；行内样式规则，加 1000
对于选择器中给定的各个 ID 属性值，加 100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10
对于选择其中给定的各个元素标签选择器，加 1
如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则

position 属性的了解

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
relative：生成相对定位的元素，相对于其正常位置进行定位
static 默认值。没有定位，元素出现在正常的流中
inherit 规定从父元素继承 position 属性的值

如果需要手动写动画，你认为最小时间间隔是多久，为什么

这里了解 canvas 写动画特效的应该不会忘记 requestAnimationFrame这个 API 吧，当你需要更新屏幕画面时就可以调用此方法。

在浏览器下次重绘前执行回调函数。回调的次数通常是每秒 60 次，而多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60＊1000ms ＝ 16.7ms

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

BASE.md

BASE.md

CSS

盒模型

BFC

Flex 布局

CSS3 新特性

垂直居中的方式

清除浮动的几种方式

嵌套规则

如何画一条 0.5px 的线?

transition 和 animation 的区别?

visibility:hidden 和 display:none 以及 opacity:0

border:none 和 border:0 的区别

CSS 优先级算法如何计算

position 属性的了解

如果需要手动写动画，你认为最小时间间隔是多久，为什么

Files

BASE.md

Latest commit

History

BASE.md

File metadata and controls

CSS

盒模型

BFC

Flex 布局

CSS3 新特性

垂直居中的方式

清除浮动的几种方式

嵌套规则

如何画一条 0.5px 的线?

transition 和 animation 的区别?

visibility:hidden 和 display:none 以及 opacity:0

border:none 和 border:0 的区别

CSS 优先级算法如何计算

position 属性的了解

如果需要手动写动画，你认为最小时间间隔是多久，为什么