CSS面试题
# 圣杯布局和双飞翼布局
# 用 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>
<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>
extentds:
# 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;
}
}
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);
}
2
3
4
5
# 绝对定位
.son {
position: absolute;
width: 固定;
left: 50%;
margin-left: -0.5宽度;
}
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%;
}
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;
2
3
4
5
# flex 布局
flex-direction
属性决定主轴的方向
.box {
flex-direction: row 竖| row-reverse | column 横| column-reverse;
}
2
3
flex-wrap
属性定义,如果一条轴线排不下,如何换行
.box {
flex-wrap: nowrap 默认不换行 | wrap | wrap-reverse;
}
2
3
flex-flow
属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。justify-content
属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
2
3
align-items
属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
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浮动问题
}
2
3
4
5
6
7
8
# 父级触发 BFC
计算 BFC 的高度时,浮动元素也参与计算
.father {
overflow: auto;
zoom: 1; //IE专有属性,解决ie6、7浮动问题
}
2
3
4
# 实现自适应两列布局
# 右元素触发 bfc
详见上文 BFC 中的作用
# margin-left 实现
右侧元素 margin-left = 左侧元素 width
# 三列布局
# 使用 flex
- 左右元素设置:
flex:0 1 100px
- 中间设置:
flex 1