前端知识整理 - CSS 篇

1.clientWidth && offsetWidth && scrollWidth

• clientWidth(height)

  表示 元素内部的宽度（高度），该属性 包括内边距，不包括滚动条、边框、外边距。

• offsetWidth(height)

  表示 元素的布局宽度（高度），包含元素的边框、内边距、滚动条、内容区宽度，不包括外边距。

• scrollWidth(height)

  返回元素的 内容区宽度（高度） 或者 本身宽度（高度） 中更大的那个值。

• scrollTop(scrollLeft)

  元素内容的顶部 到 元素可见区的顶部 的 度量。

• offsetParent

  返回指向 最近 的 包含该元素 的 定位元素。

• offsetTop

  返回 当前元素 相对于其 offsetParent 的元素 的 顶部距离。

懒加载：图片的 offsetTop < 父元素的 clientHeight + 父元素的 scrollTop。

2. 盒模型

html 文件中，每一个 文档元素 都会生成一个 矩形框，这个矩形框的包括：内容区域(content)、内边距（padding）、边框（border）、外边距（margin）。

块元素(p、div、table、form、article、video、ol、ul等)，有 width、height 属性；行元素(a、span、input、img、button、select等)，没有 width、height 属性。

IE盒模型：content 区域包括 padding + border， width = content + padding + border。

W3C盒模型(标准)：content 区域不包括 padding + border，width = content。

box-sizing：content-box，元素的 width(height) 即为 内容区的宽度(高度)。

box-sizing：border-box，元素的 width(height) 即为 内容区的宽度(高度) + padding + border。

3. BFC

BFC（Block Formatting Context） 全称是 块级格式化上下文，是页面上的一个 隔离的独立容器，容器里面的子元素不会影响到外面元素。比如：内部滚动 就是一个 BFC，当一个 父容器 的 overflow-y 设置为 auto 时，并且子容器的长度大于父容器时，就会出现内部滚动，无论内部的元素怎么滚动，都不会影响父容器以外的布局，这个父容器的渲染区域就叫 BFC。

满足下列条件之一就可触发 BFC：

• 根元素，即 HTML元素
• float 的值不为 none
• overflow 的值不为 visible
• display 的值为 inline-block、table-cell、table-caption
• position 的值为 absolute 或 fixed

独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。

4. 浮动元素的影响及清除

当一个元素被设置为 浮动元素 时，它会 脱离文档流，即 从页面普通的布局排版中脱离。其他 块元素 会当这个浮动元素不存在而进行定位。但是 行元素、文档元素(文本dom节点) 会重视 它，从而形成了文本环绕结果。

浮动元素 会造成一些负面影响：

• 如果浮动元素之后的元素是块元素的话，块元素会被浮动元 素遮挡；

• 如果包含块的高度为 auto 的话，那么会造成包含块的塌陷。

可以使用 clear 属性来** 消除元素遮挡** 的问题，设置元素的 clear 属性为 left、right、both， 可以 清除元素左侧、右侧、两侧的浮动元素。

关于 浮动元素 造成 包含块的塌陷问题，常见解决方法如下：

• 设置包含块为float、absolute，该处理方式比较局限(BFC)；

• 设置包含块的 overflow 为 hidden（BFC）；

• 添加一个 空的 div，设置 clear：both。

  设置 clear 为 both 之后，空 div 的左右都不能 有 浮动元素，所以 div 会一直下沉到浮动元素下边。这样父元素的高度至少为 浮动元素 的 高度，这样就可以清除浮动元素造成父元素塌陷的问题。

5. css 层叠

CSS 使用 层叠（Cascade） 的原则来考虑 继承、层叠次序 和 优先级 等重要特征，从而判断 相互冲突的规则中哪个规则应该起作用。

继承性 是指，许多 CSS 的样式规则不但影响选择器所定义的元素，而且会被这些元素的后代继承，如 font-size、color、font-family、text-align 等。

层叠性 是指，当一个 Web 页面使用 多个样式表，多个样式表中的样式可层叠为一个。在多个样式表之间所定义的样式没有冲突的时候，浏览器会显示所有的样式。

优先级 是指，当发生样式定义冲突时，浏览器首先会按照不同样式规则的优先级来应用样式。

CSS 样式 的 优先级 如下所示：

• 内联样式。权重加1， 0， 0， 0
• ID选择器。权重加0, 1， 0， 0
• 类选择器、属性选择器、伪类选择器。 权重加0， 0， 1， 0
• 类别选择器、伪元素。 权重加0， 0， 0, 1.

6. css 选择器

css 选择器 的种类如下：

• 元素选择器

  通配选择器、id选择器、类别选择器、类选择器

• 关系选择器

  包含： A B、父子 A > B、 相邻 A + B 、 兄弟 A ~ B

• 属性选择器

  E[att]、 E[att='val']、 E[att~='val']、 E[att^='val'](以val开头，css3)、 E[att$="val"](以val结尾，css3)， E[att*="val"](包含val，css3)

• 伪类选择器

  :link, :visited, :active, :hover, :focus, e:first-child, e:not(s), e:last-chid, e:only-child, e:nth-child(n), e:last-nth-child(n) e:first-of-type, e:last-of-type, e:only-of-type, e:nth-of-type(n), e:nth-last-type(n)

• 伪元素

  ::before, ::after, ::first-line, ::first-letter

  伪元素是定义在元素主体内容之前的一个元素，并不存在于 dom 之中，只存在在页面之中。

优先级：

• 同权重： 内联样式 > 嵌入样式表 > 外部样式表;
• ！important > 内联 > id选择器 > 伪类选择器 > 类选择器 > 属性选择器 > 类别选择 器

7. css 长度单位

css 的 长度单位，包含 绝对单位 和 相对单位。

绝对单位：

• px， 像素
• cm， 厘米
• mm， 毫米

相对单位：

• em：相对于当前元素内文本的字体尺寸（继承或者浏览器默认）
• ex：相对于当前元素内字符‘x’的高度，一般为字体高度的一半
• rem：相对于根元素html元素font-size的大小
• vw：相对于screen的宽度/100
• vh: 相对于screen的高度 / 100
• vmax: 相对于screen高度、宽度中较大的那个
• vmin: 相对于screen高度、宽度中较小的那个

8. css 布局

常见 布局方式:

• 浮动布局 - float

  浮动元素，通过 float 属性实现，基于其 最近的块级祖先元素 进行浮动。

  浮动元素，自动变为块级元素。

• 定位布局 - position

  定位，即相对于其正常位置、父元素、其他元素、浏览器窗口，应该出现在哪里。

  定位 方式如下：

  • position：static， 元素正常放置；

  • position：relative，元素相对于它的 正常位置 进行偏移。元素仍保持其定位前的形状，偏移前的正常位置仍被保留；

  • position：absolute，元素脱离文档流，相对于某个元素进行偏离，偏移前的位置不会被保留。偏移的参照元素，为离它最近的 position 不为 static 的祖先元素。

  • position: fixed, 元素脱离文档流，相对于 浏览器窗口 进行偏移，偏移前的位置不会保留。

• column 布局

  ??

• flex 布局

  对于某个元素只要声明了 display: flex，那么这个元素就成为了 弹性容器，具有 flex 弹性布局的特性。

  任何一个容器，都可以指定为 Flex 布局。

  采用 Flex 布局 的元素，称之为 Flex 容器，子元素 自动称为 Flex 项目。设定 Flex 布局 以后，子元素 的 float、clear、vertical-align 属性都将失效。

  容器默认存在两根轴：水平主轴 和 垂直交叉轴

  容器属性：

  • flex-direction

    主轴 的方向，容器中 子元素 的 排列方向；

    • row(默认值)： 水平主轴，垂直交叉轴，子元素 的排列方向为 从左到右，从上到下；
    • row-reverse： 水平主轴，垂直交叉轴， 子元素 的排列方向为 从右到左， 从上到下；
    • column：垂直主轴，水平交叉轴，子元素 的排列方向是 从上到下，从左到右；
    • column-reverse：垂直主轴，水平交叉轴，子元素 的排列方向是 从下到上，从左到右；

  • flex-wrap

    子元素超出是否换行。

    • nowrap(默认值)： 不换行；
    • wrap：换行，第一行在最上方；
    • wrap-reverse：换行，第一行在最下方；

  • justifiy-content

    每行子元素 在 主轴方向 上的 对齐方式。

    假设 flex-direction 的值为 row, 则：

    • flex-start(默认值)：每行子元素 主轴方向左对齐；
    • flex-end：每行子元素 主轴方向右对齐；
    • center：每行子元素 主轴水平对齐；
    • space-between: 两端对齐，子元素之间的间隔都相等；
    • space-round：每个子元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

  • align-items

    每个子元素 在 所在行对应的交叉轴空间 上的 对齐方式。

    每行子元素，对应的 交叉轴空间 会根据 align-content 的变化而变化。如果 align-content 的值为 streth，则容器的交叉轴空间会按照行数自动分配；如果为其他值，则每行对应的 交叉轴空间 对应 行内最高的元素的高度。

    假设 flex-direction 的值为 row, 则：

    • streth(默认值)：子元素未设置高度，自动充满交叉轴空间；
    • flex-start：每行子元素交叉轴上对齐；
    • flex-end： 每行子元素交叉轴下对齐；
    • center： 每行子元素交叉轴居中对齐；
    • baseline：每行子元素的第一行文字的基线对齐；

  • align-content：

    定义了 所有行 基于 容器交叉轴 的 对齐方式。

    align-content 会影响每行子元素的交叉轴空间，

    假设 flex-direction 的值为 row, 则：

    • stretch(默认值)

      容器的交叉轴空间会按照行数自动为每行分配交叉轴空间(均分？？)。

    • flex-start： 容器交叉轴上对齐；

      每行的交叉轴空间 对应行内最高的元素的高度。

    • flex-end： 容器交叉轴下对齐；

      每行的交叉轴空间 对应行内最高的元素的高度。

    • center： 容器交叉轴居中对齐；

      每行的交叉轴空间 对应行内最高的元素的高度。

    • space-between：交叉轴两端对齐，轴线之间的间隔平均分布。

      每行的交叉轴空间 对应行内最高的元素的高度。

    • space-around：行交叉轴线两侧的间隔都相等

      每行的交叉轴空间 对应行内最高的元素的高度。

    对比 align-items:

    • align-content 相对于 容器交叉轴 对齐， align-items 相对于 行对应的交叉轴 对齐；

    • align-content 作用于 整行子元素；align-items 作用于 各行中的各个子元素；

    • align-content: stretch, 决定 各行 的 交叉轴空间； align-items: strtch, 根据 交叉轴空间 决定 子元素的高度(高度未指定)；

  项目属性：

  • flex-grow

    定义 项目 的 放大比例，默认为 0，即如果存在剩余空间，也不放大。

    如果所有项目的 flex-grow 属性都为 1，则它们将 等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

  • flex-shrink

    定义 项目的 缩小比例，默认为 1，即如果 空间不足，该项目将 缩小。

    flex-shrink 为 0， 不缩小。

  • flex-basis

    flex-basis 属性定义了在分配多余空间之前，项目占据的 主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。

  • align-self

    该属性允许 单个子元素 有与 行内其他子元素 不一样的对齐方式，可覆盖 align-items 属性。

    默认值为 auto，表示继承元素的 align-items 属性。

• grid 布局

  对于某个元素只要声明了 display: grid，那么这个元素就成为了 网格容器，具有 grid 网格布局 的特性。

  网格容器 内部采用网格定位的 子元素，称为 "项目"（item）。

  注意：项目只能是容器的顶层子元素，不包含项目的子元素。

  容器属性：

  • display：grid

    指定容器采用 网格布局。

  • grid-template-columns

    定义 列宽。

  • grid-template-rows

    定义 行高。

  • grid-row-gap / grid-column-gap / grid-gap

    定义 行间距、列间距。

  • grid-template-areas

    网格布局 允许指定 "区域"（area），一个区域由单个或多个单元格组成。grid-template-areas 属性用于定义区域。

  • justify-items

    设置 单元格内容 的 水平位置（左中右）。

    属性值：

    • stretch(默认值)： 若单元格的内容 未指定宽度，默认 充满单元格。
    • start： 水平居左；
    • end：水平居右；
    • center：水平居中；

  • align-items

    设置 单元格内容 的 垂直位置（左中右）。

    属性值：

    • stretch(默认值)： 若单元格的内容 未指定高度，默认 充满单元格。
    • start： 垂直居上；
    • end：垂直居下；
    • center：垂直居中；

  • place-items

    place-items 属性是 align-items 属性和 justify-items 属性的 合并 简写形式。

    place-items: ;

  • justify-content / align-content / place-content

    整个 内容区域 在 容器 里面的 水平位置(垂直位置)。

    属性值：

    • start: 内容区域对齐容器的起始边框；
    • end： 内容区域对齐容器的终止边框；
    • center：内容区域居中；
    • stretch： 项目大小没有指定时，拉伸占据整个网格容器；
    • space-between：项目与项目的间隔相等，项目与容器边框之间没有间隔
    • space-around: 每个项目两侧的间隔相等;
    • space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔；

  项目属性：

  • grid-column-start / grid-column-end

    指定项目的位置。

  • grid-row-start / grid-row-end

    同上。

  • grid-column / grid-row

    同上。

  • grid-area

    同上。

  • justify-self / align-self / place-self

    覆盖容器的 justify-items / align-self / place-self

9. rem 布局

先了解几个 关键概念：

• 物理像素

  一个 物理像素 是 显示器(手机屏幕) 上最小的 物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

• 设备独立像素

  设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的 虚拟像素(比如: css像素)，然后由相关系统转换为 物理像素。

  所以说，物理像素 和 设备独立像素 之间存在着一定的对应关系，这就是接下来要说的 设备像素比。

• 设备像素比(dpr)

  设备像素比 = 物理像素 / 设备独立像素。

  在javascript中，可以通过 window.devicePixelRatio 获取到当前设备的 dpr。

  在css中，可以通过 -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio 进行媒体查询，对不同 dpr 的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

  dpr = 2, 一个 css 像素 对应 4 个 物理像素。

  dpr = 3， 一个 css 像素 对应 9 个 物理像素。

• 视口

  在 HTML 页面 中，block 块元素 的 默认宽度 是它的容器即包含块的100%。

  dom 树 的 根节点 为 html 元素，它的 包含块，称为 视口，在 CSS 标准文档中，也被称之为 初始包含快。

  视口 是所有 css百分比宽度 推算的根源。

  在桌面上， 视口的宽度和浏览器窗口的宽度是一致的（忽略margin、padding、border），因此 html、body 元素的 宽度 默认和 浏览器 的宽度一致。

  和桌面浏览器不同，移动浏览器存在三个视口：布局视口（layout viewport）、视觉视口（visual viewport）、理想视口（ideal viewport）。

  • 布局视口(layout viewport)

    对于 移动端设备 来说，屏幕的大小，决定了浏览器的大小。

    如果使视口的宽度和浏览器的宽 度一样，那么呈现给用户的将会是一个很丑陋的界面。为了保证在移动端的窄屏幕下，网站也能 像在桌面浏览器那样显示正常，视口与移动端浏览器屏幕宽度不再相关联，称为一个独立的存 在，我们称之为 布局视口。

    布局视口 的宽度，一般处于 768px 到 1024px 之间，常见的宽度为 980px。这样的宽度，使得 为桌面设计的网站，在移动端浏览器中也可以显示良好。

    通过 document.body.clientWidth, 可以获取 布局视口 的尺寸。

  • 视觉视口(visual viewport)

    视觉视口， 可以理解为用户正在看到的网站的区域。用户可以通过缩放操作视觉视口， 同 时不会影响布局视口，布局视口任然保持在原来的宽度。

    一般通过 window.innerWidth， 来获取 视觉视口 的尺寸。

  • 理想视口(ideal viewport)

    在手机上， 布局视口 会限制 css布局， 视觉视口会决定用户能看到什么。布局视口的宽度并 不是一个理想的宽度，因此手机端浏览器厂商引进理想视口，它是对设备来说，最理想的布局视 口尺寸。

    通过声明 meta 标签，理想视口 才会生效。如果没有声明， 布局视口将会维持它的默认宽 度，即

    理想视口，实际上就是布局视口的宽度为屏幕尺寸。此时， document.body.clientWidth 、window.screen.width、window.innerWidth 是一样的。

    一般通过 window.screen.width, 来获取 理想视口 的尺寸。

• initial-scale

  initial-scale， 缩放。

  缩放，是一个 放大缩小 css 的过程。

  放大， 即一个 css 像素 会对应更多的 物理像素；缩小，即一个 css 像素 对应更少的 物理像素。

  dpr = 2 时， 一个 css 像素对应 四个物理像素，此时设置 initial-scale = 0.5，一个 css 像素 对应一个 物理像素，如 iphone6 的 document.body.clientWidth 为 750。

  dpr = 3，一个 css 像素 对应 九个物理像素，此时设置 initial-scale = 1 / 3, 一个 css 像素 对应一个 物理像素，如 iphoneX 的 document.body.clientWidth 为 1125.

  initial-scale 也会影响布局视口的宽度。initial-scale = 1 时，布局视口的宽度会等于理想视口的宽度。如果 width 和 initial-scale 同时存在，取两者较大者作为布局视口的宽度。

rem 布局：

• 背景及原理

  在开发 移动端 h5 页面 的时候，我们不可避免的会遇到页面需要适配 不同分辨率、不同屏幕尺寸 的设备的问题。

  目前来说， 比较流行的做法是 rem 布局，基本原理是根据 设备屏幕尺寸、分辨率，在页面加载的时候，给页面的 html 元素 设定一个合适的 font-size，然后页面中的元素布局的时候使用 rem 为单位，而不是原来的 px。

• 一般流程：

  使用rem 布局 的步骤如下：

  • 给 html 页面 添加 meta 视口标签，使得页面的 布局视口 的宽度和 理想视口 的宽度一致。

    标签如下：

  • 动态设置计算页面 html 元素的 font-size

    计算公式为: window.document.clientWidth / 16 ( window.innerWidth 也可以)

    有些 rem 布局，还会根据 dpr 设置 initial-scale，即 如果 dpr = 2，initial-scale = 0.5，这样 1 css 像素对应 1 物理像素，布局视口的宽度要比不设置 initial-scale 的宽度要大一倍，导致计算以后的 font-size 要比不设置 initial-scale 大一倍。

  • 参照设计稿，计算元素的布局

    设计稿的单位 px 对应设备的 物理像素。

    rem 布局 实际上做了 物理像素 和 css像素 之间的 转换。

    以 750 * 1334 的设计稿为例，如果页面中元素的宽度为 600px， 则实际宽度为 600 / 750 * 16 rem， 这样元素的实际宽度为 window.innerWidth * 600 / 750

• 常见问题

  • font-size 不使用 rem 单位

    设计师原本的要求是这样的：任何手机屏幕上字体大小都要统一。

    用 rem 设置的字体在不同的设备上也会随着屏幕的大小而缩放，导致不同分辨率的手机下的字体不一样，所以应该直接使用 px。

  • 1px 的 border

    设计稿中的边框的高度为 1 px，指的是物理像素。如果我们使用 css 中的 1 px， 实际边框为 2 px，与设计稿不符合。

    解决方案：

    • 将边框的高度设置为 0.5 px 或者 0.333 px；

      缺点： 有些浏览器不支持。

    • 设置 initial-scale = 0.5

  • 高清图

    通过 媒体查询，dpr = 2 的设备使用 2 倍图， dpr = 3 的设备使用 3 倍图。

    @mixin img2x($url) {
        background-image: url($url+'@2x.png');
        @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
            background-image:url($url+'@3x.png');
        }
    }
    

10. css 居中

水平居中：

• 行元素： 父元素 text-align:center;
• 单个块元素: 块元素 margin:0 auto;
• 多个块元素（同一行）：块元素 display:inline-block, 父元素 text-align：center；
• 弹性布局(flex): justify-content：center；
• 网格布局(grid): justify-items: center;

垂直居中：

• 单行文本垂直居中

  包含块的高度没有确定， padding-top 和 padding-bottom 相等；

  包含块的高度确定，line-height 和 包含块的height相等；

• 多行文本垂直居中

  使用 table 布局，td中的内容会自动垂直居中；

  也可以使用 flex 布局，align-items：center；

  也可以使用 grid 布局，align-items：center；

• 块元素垂直居中

  • 定位布局

    • 块级元素高度已知

      包含块 position:relative;块级元素 position：absolute；top：50%； margin-top: -(块元素高度/2)px

    • 块元素高度未知

      包含块 position:relative;块级元 素 position：absolute；top：50%；transform:translateY(-50%);

  • flex 布局

    容器属性 align-items：center；

  • grid 布局

    容器属性 align-items：center；

  • table 布局

  • 块元素display:inline-block, 包含块 line-height = height

11. css reset - 样式重置

html 中的有些元素会有自己的默认样式，比如 p，ul等。不同的浏览器，对默认样式的定义不同，使用默认样式，会出现浏览器兼容问题。所以需要重置元素的样式。

12. css sprite

将多个图片合成一张图片，然后通过 background-position 来定位图片。

13. margin 合并 && margin 塌陷

margin 合并：

• 相邻块元素都设置了 margin-top， margin-bottom，上面块元素的 margin-bottom 会和下面块元素的 margin-top 合并，取两者最大值；

  解决方法：

  • padding 取代 margin；
  • margin-top， margin-bottom 仅设置一个；

• 没有内容的块元素设置了 margin-top， margin-bottom， margin-top 和 margin-bottom 会合并，取两者最大值；

  • padding 取代 padding；

margin 塌陷 - 第一个子块级元素的 margin-top，最后一个子块级元素的 margin-bottom 体现在 父块级元素 上；

解决方式：

• 父元素设置 padding-top 和 padding-bottom；
• 父元素变为 BFC；

14. rgba() 和 opacity 的透明效果有什么区别

rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba() 只作用于元素的颜色或起背景色。设置 rgba 透明的元素的子元素不会继承透明效果。

即 opacity 会影响子元素， rgba 方式不会影响子元素。

15. css 实现几何图形

• 圆 / 半圆 / 四分之一圆

  // 圆
  div {
      width: 100px;
      height: 100px;
      background-color: red;
      border-radius: 50px;
  }
  
  // 半圆
  
  div {
      width: 200px;
      height: 100px;
      backgroud-color: red;
      border-top-left-radius: 100px;
      border-top-right-radius: 100px;
  }
  // 四分之一圆
  div {
      width: 100px;
      height: 100px;
      border-top-left-radius: 100px;
      backgroud-color: red;
  }
  

• 等边直角三角形

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

• 等边三角形

  div {
      width: 0;
      height: 0;
      border-top: 100px solid transparent;
      border-left: 173px solid red;
      border-bottom: 100px solid transparent;
  }
  

• 梯形

  div {
      width: 0;
      height: 100px;
      border-top: 100px solid transparent;
      border-left: 173px solid red;
      border-bottom: 100px solid transparent;
  }
  

• 平行四边形

  // 使用 skew 扭曲
  div {
      width: 200px;
      height: 100px;
      transform: skew(-20deg);
      background-color: red;
  }
  
  

• 椭圆 / 半椭圆 / 四分之一椭圆

  // 椭圆
  div {
      width: 200px;
      height: 100px;
      background-color: red;
      border-radius: 50%;
  }
  
  // 长半椭圆
  
  div {
      width: 200px;
      height: 100px;
      background-color: red;
      border-top-left-radius: 100px 100px;
      border-top-right-radius: 100px 100px;
  }
  
  // 短半椭圆
  
  div {
      width: 200px;
      height: 100px;
      background-color: red;
      border-top-left-radius: 100px 50;
      border-bottom-left-radius: 100px 50;
  }
  
  // 四分之一椭圆
  div {
      width: 200px;
      height: 100px;
      background-color: red;
      border-top-left-radius: 200px 50px;
  }
  

16. CSS3 - transform

transform 属性向元素应用 2D 或 3D 转换，该属性允许我们对元素进行 旋转、缩放、移动 或 倾斜。

2D 变换：

• 位移： translate、translateX、translateY
• 缩放：scale、 scaleX 、scaleY
• 旋转: rotate、rotateX、rotateY
• 倾斜： skew、skewX、skewY

3D 变换：

• 位移：translateZ
• 缩放：scaleZ
• 旋转: rotateZ

17. CSS3 - transition

transition 用于定义 属性变化 的 过渡动画。

transition 属性是一个 简写属性，用于设置 四个过渡属性：

• transition-property

  设置过渡效果的 css 属性

• transition-duration

  规定 过渡效果 完成的 时间

• transition-timing-function

  规定 速度效果 的 速度曲线

  常见的速度曲线：

  • 线性过渡 - linear
  • 平滑过渡 - ease
  • 由快到慢 - ease-out
  • 由慢到快 - ease-in

  默认平滑过渡

• transition-delay

  定义 过渡效果延迟执行 的 时间

18. CSS3 - animation

animation 用于定义一个 动画。

animation 是一个 简写属性， 用于设置六个动画属性：

• animation-name: 动画的名称，使用动画的时候需要先使用 @keyframes 来定义动画
• animation-duration： 动画的持续时间
• animation-timing-function： 设置动画的过渡类型
• animation-delay：设置动画的延迟时间
• animation-iteration-conut： 设置动画的循环次数
• animation-direction：设置动画是否在循环中反向
• animation-play-state： 检索或者设置动画的状态，running，paused
• animation-fill-mode：设置动画时间外的状态（不设置、开始状态、结束状态）

@keyframes 用于定义动画，常见形式：

@keyframes name {
    from: {
        width: 100px;
    }
    to: {
        width: 200px;
    }
}

19. 媒体查询

使用 @media 查询，你可以针对 不同的媒体类型 定义不同的样式。

@media 可以针对 不同的屏幕尺寸 设置不同的样式，特别是需要设置 设计响应式的页面，@media 是非常有用的。

媒体查询的常见语法：

@media mediatype and|not|only|, (media feature) {
    CSS-Code;
}

mediatype 代表 媒体类型，常见的 mediatype:

• all - 所有设备；
• print - 打印设备；
• screen - 电脑屏幕、平板电脑、智能手机等；
• speech - 屏幕阅读器等发声设备；

media feature 代表 媒体特性，常见的 media feature：

• device-width： 设备屏幕可见宽度；
• device-height： 设备屏幕可见高度；
• min-device-pixel-ratio： dpr；
• max-width： 定义义输出设备中的页面最大可见区域宽度

逻辑操作符：

• and

  用于 合并多个媒体属性 或 合并媒体属性与媒体类型。

  多个媒体属性同时返回 true，样式才能生效。

• not

  not 关键字 应用于 整个媒体查询，在媒体查询为假时返回真，样式生效。

• only

  only 关键字 防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式。

• ，

  逗号分隔效果 等同于 or逻辑操作符。当使用 逗号分隔 的 媒体查询 时，如果任何一个媒体查询返回真，样式就是有效的。

20. vertical-align

用来指定 行内元素（inline 或 表格单元格（table-cell）元素 的 垂直对齐方式。

行内元素：

• baseline(默认值)：使 元素的基线 与 父元素的基线 对齐。

• text-top：使 元素的顶部 与 父元素的字体顶部 对齐。

• text-bottom：使 元素的底部 与 父元素的字体底部 对齐。

• middle：使 元素的中部 与 父元素的基线加上父元素x-height（译注：x高度）的一半 对齐。

• sub：使 元素的基线 与 父元素的下标基线 对齐。

• super：使 元素的基线 与 父元素的上标基线 对齐。

• top : 使 元素及其后代元素的顶部 与 整行的顶部 对齐。

• bottom: 使 元素及其后代元素的底部 与 整行的底部 对齐。

表格单元格：

• baseline (以及 sub, super, text-top, text-bottom, , )

  使 单元格的基线，与 该行中所有以基线对齐 的 其它单元格的基线 对齐。

• middle

  使 单元格内边距盒模型 在 该行内居中对齐。

• top

  使 单元格内边距的上边缘 与 该行顶部 对齐.

• bottom

  使 单元格内边距的下边缘 与 该行底部对齐

vertical-align 不适用与块元素垂直居中。

21. 固定表格布局 & 自动表格布局

表的列宽度 的计算，有两种方法：固定宽度布局 和 自动宽度布局， 我们可以通过 table-layout 属性来选择采用哪种方法来计算。

固定宽度布局，table-layout:fixed，列的宽度 根据表以及表中列和单元格的 width 决定，表格中的内容不会影响单元格的宽度。这种方法绘制表格很快，所有列的宽度由第一行决定。设置 table 的 width 为具体值时触发。

自动表格布局， table-layout:auto, 列的宽度 由 列单元格中未折行的最宽的内容 决定，表格中的内容会影响单元格的宽度，这种方法绘制表格很慢，因为要充分分析单元格的内容。

22. link 和 @import方式为页面引入 css 文件

两者对比：

• link 属于 XHTML 标签，除了加载 css，还可以用来加载 RSS； @import 只能用来 加载 css
• @import 是 css2.1 提出的，IE5以上才能识别；link 是 XHTML 标签，无兼容性问题；

23. css hack

由于不同厂商的浏览器或者浏览器的不同版本（主要是IE和chrome、fireforx），对CSS的支持、解析不一样， 导致在不同的浏览器环境中呈现出的效果不一样。为了获得统一的页面效果，我们需要针对不同的浏览器或者不同版本写特定的CSS样式。

我们把针对不同的浏览器/不同版本写相应的 CSS code的过程， 叫做 CSS hack。

常见的 css hack：

• 条件 hack：

  用于选择浏览器及浏览器的不同版本 有6中写法：是否、大于、大于等于、小于、小于等于、不等于、

• 属性级 hack：

  _color:red; 支持IE6；

  *color:red; 支持IE7 属性值后缀发 - color：red\0, 支持IE8

• 选择器级hack：

  • .test{...} 支持IE6

  *+ .test{...} 支持IE7

24. 超链接访问过后hover样式就不出现的问题时什么？如何解决？

被点击访问过的超链接样式不再具有 hover 和 active 了

解决方式 - 是改变CSS属性的排列顺序：L-V-H-A（linked, visited, hover, active）

25. sass & less

传统的 css 语言 不具有 可编程性，没有变量，也没有条件语句，只是一行行单纯的描述,使 用起来非常麻烦。使用 sass(css扩展语言，像less、stylus)，给 css 加入编程元素，使得我们可以 像使用 js、java 那样， 对 css 简单编程，然后编译为浏览器可识别的 css 文件。

sass 支持 变量、嵌套、导入、混合(@mixin - 可定义函数， @include)、继承（@extend）、条件判断（@if）、循环（@for、@each）

sass 和 less 的区别:

• 使用位置不同

  sass 只能在 服务端 使用，less 可以在 服务端和浏览器端 使用；

• 定义变量的方式不同

  sass 定义变量的格式为 $var, less 定义变量的方式为 @var;

• sass支持属性嵌套使用， less不支持

• sass支持if、for、each使用， less不支持

26. 局部 sass 和源 sass 文件同名变量覆盖问题

局部 sass：局部文件名 以下划线 ‘_’ 开头

局部 sass 文件 和 源 sass 文件 中存在 同名变量，如果 局部 sass 文件 被引入的位置在 源 sass 文件 的同名变量之后，那么 局部 sass 文件 中的 同名变量 会 覆盖 源 sass 文件中的 同名变量。

为了解决这个问题，可以在 局部 sass 文件 的 全局变量 中使用 !default 属性。

27. 渐进增强和优雅降级

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。 

• “优雅降级”观点

  “优雅降级”观点 认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

  在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。   

• “渐进增强”观点

  “渐进增强”观点 则认为应关注于内容本身。

  内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

28. postCss

利用从 Can I Use 网站获取的数据为 CSS 规则 添加 特定厂商的前缀。Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则 添加前缀。

29. 让浏览器支持小于 12px 的字体

采用缩放： transform：scale(0.8)

30. style 标签写在 body 后与 body 前的区别

样式文件放在 html 的底部 导致白屏。

白屏现象 源自 浏览器的行为。

如果样式表仍然在加载，构建渲染树是一种浪费，因此在所有样式表加载并解析完毕之前无需绘制任何东西。否则，在其准备好之前显示内容会遇到FOUC问题（无样式内容的闪烁）。

31. 响应式设计

响应式网站设计(Responsive Web design) 是一个网站能够 兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理：通过 媒体查询 检测不同的 设备屏幕尺寸 做处理。

31. CSS 优化措施

常见的 CSS 优化措施:

• 内联首屏关键 css，减少首屏渲染时间；
• 去除无用 css；
• 压缩 css，减少文件大小；
• css sprite;
• 使用css高级属性，添加浏览器前缀；
• 样式不要嵌套太深
• 充分利用css的继承性，减少代码量（font-size, font-weight, font-family, text-align, line-height, color）