CSS面试题 | ALEX CODE PARK

# 圣杯布局和双飞翼布局

# 用 css 画一个三角形

创建一个 div，宽高都为 0，实现效果如下，发现 border 的四个边都是一个三角形，要实现三角形只需将其中几个边 background 设置为 transparent，即可得到三角形

<div class='rect'></div>
<style>
    .rect {
      width: 0;
      height: 0;
      background-color: #fff;
      border-right: 100px solid rgb(34, 230, 220);
      border-left: 100px solid rgb(202, 146, 25);
      border-top: 100px solid rgb(29, 156, 194);
      border-bottom: 100px solid rgb(16, 204, 101);
    }
  </style>

css/Untitled.png

<style>
    .rect {
      width: 0;
      height: 0;
      background-color: #fff;
      border-right: 100px solid transparent;
      border-left: 100px solid transparent;
      border-top: 100px solid rgb(29, 156, 194);
      border-bottom: 100px solid transparent;
    }
  </style>

css/Untitled%201.png

extentds:

CSS 三角形的实现原理及运用-前端开发博客

# label 都有哪些作用？并举相应的例子说明

[html] 第 6 天 label 都有哪些作用？并举相应的例子说明 · Issue #16 · haizlin/fe-interview

# BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

一般使用overflow:hidden创建 bfc

# 布局规则

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

# 如何生成 BFC

根元素
float 不为 none
position: absolute 或 fixed
display: inline-block , table-cell , table-caption , flex , inline-flex
overflow 不为 hidden

# 作用

# 自适应两栏布局

BFC 的区域不会与 float box 重叠。

该布局会让 main 的宽度根据 aside 宽度自适应

.body {
  width: 500px;
  position: relative;
  .aside {
    width: 400px;
    height: 150px;
    float: left;
    background-color: #ff6666;
  }

  .main {
    // width: 200px;
    height: 200px;
    background-color: #fcc;
    overflow: hidden;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 清除内部浮动

计算 BFC 的高度时，浮动元素也参与计算

设置父元素overflow:hidden即可

# 防止垂直 margin 重叠

Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠

在其中一个元素外包裹一层容器并触发 bfc。那么两个元素不属于同一个 bfc 就不会发生 margin 重叠了。

# 简述下你理解的优雅降级和渐进增强

# 优雅降级

先不考虑兼容，优先最新版本浏览器效果，之后再逐渐兼容低版本浏览器。

# 渐进增强

考虑兼容，以较低（多）浏览器效果为主，之后再逐渐增加对新版本浏览器的支持，以内容为主。也是多数公司所采用的方法。

前端面试题-渐进增强和优雅降级

# 盒子模型

# 标准盒 border-box: 宽度 = width + padding + border + margin

# 怪异盒 content-box: 宽度 = width

# 选择器权重

!important > 行内 > #id > .class > 元素伪元素 > * > 继承 > 默认

通配符：*
ID选择器：#ID
类选择器：.class
元素选择器：p、a    等
后代选择器：p span、div a   等
伪类选择器：a:hover 等
属性选择器：input[type="text"]  等

# CSS 新特性

transition：过渡 transform：旋转、缩放、移动或者倾斜 animation：动画 gradient：渐变 shadow：阴影 border-radius：圆角

# position

**static**该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

**relative相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。**position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

**absolute**不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

(父级 relative 子级 absolute)

**fixed**不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

sticky 盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

# 水平垂直居中

# 水平居中

# 行内元素

给父元素设置text-align:center

# 块级元素

给该元素设置margin:0 auto

# 子元素包含 float:left

fit-content 是 CSS3 中给 width 属性新加的一个属性值,它配合 margin 可以轻松实现水平居中, 目前只支持 Chrome 和 Firefox 浏览器.
父元素设置width:fit-content;margin:0 auto

# flex

justify-content:center

# css3 transform

.son {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

1
2
3
4
5

# 绝对定位

.son {
  position: absolute;
  width: 固定;
  left: 50%;
  margin-left: -0.5宽度;
}

1
2
3
4
5
6

# 垂直居中

# 单行文本

设置line-height等于父元素高度

# 行内块级

🔥基本思想让伪元素带齐其他块元素所以伪元素需 height:100%

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

.parent::after,
.son {
  display: inline-block;
  vertical-align: middle;
}
.parent::after {
  content: "";
  height: 100%;
}

1
2
3
4
5
6
7
8
9

# 元素高度不定

为了使用 vertical-align 需将父元素 display 设置 table 子元素 table-cell
使用 flex align-items:center
使用 transform

# 元素高度固定

# link 与@import 区别与选择

HTML 外部资源链接元素 () 规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

link 功能较多，可以定义 RSS，定义 Rel 等作用，而@import 只能用于加载 css；当解析到 link 时，页面会同步加载所引的 css，而@import 所引用的 css 会等到页面加载完才被加载；@import 需要 IE5 以上才能使用；

link 可以使用 js 动态引入，@import 不行

<style type="text/css">
	@import url(CSS文件路径地址);
</style>
<link href="CSSurl路径" rel="stylesheet" type="text/css" />

# 多行元素的文本省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

1
2
3
4
5

css/Untitled%203.png

# flex 布局

flex-direction属性决定主轴的方向

.box {
  flex-direction: row 竖| row-reverse | column 横| column-reverse;
}

1
2
3

flex-wrap属性定义，如果一条轴线排不下，如何换行

.box {
  flex-wrap: nowrap 默认不换行 | wrap | wrap-reverse;
}

1
2
3

flex-flow属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

1
2
3

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

1
2
3

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-grow属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
🔥flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

flex1 自动填充

# 清除浮动

# 使用伪类 clear:both

.father :after {
  clear: both;
  content: "";
  display: block;
}
.father {
  zoom: 1; //IE专有属性，解决ie6、7浮动问题
}

1
2
3
4
5
6
7
8

# 父级触发 BFC

计算 BFC 的高度时，浮动元素也参与计算

.father {
  overflow: auto;
  zoom: 1; //IE专有属性，解决ie6、7浮动问题
}

1
2
3
4

# 实现自适应两列布局

# 右元素触发 bfc

详见上文 BFC 中的作用

# margin-left 实现

右侧元素 margin-left = 左侧元素 width

# 三列布局

# 使用 flex

左右元素设置: flex:0 1 100px
中间设置: flex 1