CSS篇

两种盒模型

• 标准盒模型：元素的宽度和高度只包括内容（content），不包括内边距（padding）、边框（border）和外边距（margin）。

实际宽度\高度 = width\height

• IE盒模型：元素的宽度和高度包括内容（content）、内边距（padding）和边框（border），但不包括外边距（margin）。

实际宽度\高度 = width\height + padding + border

css选择器优先级？哪些属性可以继承？

样式的优先级一般为 !important > style(内联样式) > id(选择器） > class（选择器）>标签选择器

可继承：

• visibility 元素可见性
• 字体系列：font-weight 粗细、font-size 大小、font-style 风格
• 文本系列：text-indent 缩进、text-align 水平对齐、color 颜色、line-height 行高

不可继承： display、盒子模型、定位浮动、背景属性

说一说CSS尺寸设置的单位

1. px：绝对像素
2. rem：相对于根元素像素
3. em：相对于父元素像素 1em 等于当前元素的字号，其准确值取决于作用的元素.（若字号为16px, 则 1em = 16px）
4. vw：视口宽度
5. vh：视口高度

BFC 是什么

是什么：

避免回答，直接把 BFC 翻译成中文「块级格式化上下文，独立的渲染区域」即可，千万别解释。

怎么做：

背诵 BFC 触发条件，虽然 MDN 的这篇文章 列举了所有触发条件，但本押题告诉你只用背这几个就行了

• 浮动元素（元素的 float 不是 none）

• 绝对定位元素（元素的 position 为 absolute 或 fixed）

• 行内块 inline block 元素

• overflow 值不为 visible 的块元素

• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

解决了什么问题：

1. 清除浮动（为什么不用 .clearfix 呢？）

1. 防止 margin 合并

1. 某些古老的布局方式会用到（已过时）

优点： 无。

缺点： 有副作用。

怎么解决缺点： 使用最新的 display: flow-root 来触发 BFC 就没有副作用了，但是很多人不知道。

重绘与重排的区别？

重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素

重绘: 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分

重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

如何用 CSS 实现一个三角形

利用 border 属性

利用盒模型的 border 属性上下左右边框交界处会呈现出平滑的斜线这个特点，通过设置不同的上下左右边框宽度或者颜色即可得到三角形或者梯形。

如果想实现其中的任一个三角形，把其他方向上的 border-color 都设置成透明即可。

示例代码如下：

<div></div>

div{
width: 0;
height: 0;
border: 10px solid red;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}

垂直居中

实现元素水平垂直居中的方式：

• 利用定位+margin:auto
• 利用定位+margin:负值
• 利用定位+transform
• table布局
• flex布局
• grid布局

两栏布局

• 使用 float 左浮左边栏
• 右边模块使用 margin-left 撑出内容块做内容展示
• 为父级元素添加BFC，防止下方元素飞到上方内容

三栏布局

• 两边使用 float，中间使用 margin
• 两边使用 absolute，中间使用 margin
• 两边使用 float 和负 margin
• display: table 实现
• flex实现
• grid网格布局

flex布局

Flex布局

grid布局

通俗重制系列--Grid布局

考点

• Grid布局的概念、用途

核心点

• 概念：Grid布局即网格布局，是一种二维的布局方式

  • Grid Container：Grid的容器
  • Grid Item：Grid容器的直接子元素

• 用途：

  1. 居中布局
  2. 两列、三列布局等

• 缺点

  • 总体兼容性不错，当IE10以下不支持
  • 手机端支持不太友好

css 动画

属性	含义
transition（过度）	用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形）	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）	只是transform的一个属性值，即移动
animation（动画）	用于设置动画属性，他是一个简写的属性，包含6个属性
transition 过渡动画：

• transition-property：指定过渡的 CSS 属性
• transition-duration：指定过渡所需的完成时间
• transition-timing-function：指定过渡函数
• transition-delay：指定过渡的延迟时间

animation 关键帧动画：

• animation-name：指定要绑定到选择器的关键帧的名称
• animation-duration：动画指定需要多少秒或毫秒完成
• animation-timing-function：设置动画将如何完成一个周期
• animation-delay：设置动画在启动前的延迟间隔
• animation-iteration-count：定义动画的播放次数
• animation-direction：指定是否应该轮流反向播放动画
• animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
• animation-play-state：指定动画是否正在运行或已暂停

单行／多行文本溢出

实现方式也很简单，涉及的css属性有：

• text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
• white-space：设置文字在一行显示，不能换行
• overflow：文字长度超出限定宽度，则隐藏超出的内容

overflow设为hidden，普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略

white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础

text-overflow属性值有如下：

• clip：当对象内文本溢出部分裁切掉
• ellipsis：当对象内文本溢出时显示省略标记（...）

text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的

举个例子

<style>
    p{
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文

多行思路

• 基于高度截断
• 基于行数截断