字节跳动最爱考的前端面试题：CSS-基础

}

.inner::after {
content: “”;
margin-top: 100%;
display: block;
}

复制代码

参考链接

• www.fly63.com/article/det…

（2）问：实现两栏布局的方式：

左 float，然后右 margin-left（右边自适应）

.aside {
width: 300px;
float: left;
background: yellow;
}

.main {
background: aqua;
margin-left: 300px;
}

复制代码

右 float，margin-right

.aside {
width: 300px;
float: right;
background: yellow;
}

.main {
background: aqua;
margin-right: 300px;
}

复制代码

BFC + float

.aside {
width: 300px;
float: left;
background: yellow;
}

.main {
overflow: hidden;
background: aqua;
}

复制代码

float + 负 margin

.right {
float: left;
width: 200px;
background: #0f0;
}

hello

world

复制代码

圣杯布局实现两栏布局

/* .box {
overflow: hidden;
} */

/* .container {
padding: 0 300px 0 200px;
border: 1px solid black;
} */

html,
body {
height: 100%;
}

div {
height: 100%;
}

.container {
display: flex;
}

.content {
flex: 1 1;
order: 2;
background: #f00;
}

.left {
float: left;
width: 100%;
background: #0f0;
}

.right {
float: left;
width: 300px;
margin-left: -300px;
background: #00f;
}

你好

我好

复制代码

flex 实现两栏布局

/* .box {
overflow: hidden;
} */

/* .container {
padding: 0 300px 0 200px;
border: 1px solid black;
} */

html,
body {
height: 100%;
}

div {
height: 100%;
}

.container {
display: flex;
}

.content {
flex: 1 1;
order: 2;
background: #f00;
}

.left {
flex: 0 0 200px;
background: #0f0;
}

.right {
flex: 1 1;
background: #00f;
}

你好

我好

复制代码

参考链接：juejin.im/post/5e8d52…

position + margin

/* .box {
overflow: hidden;
} */

/* .container {
padding: 0 300px 0 200px;
border: 1px solid black;
} */

html,
body {
height: 100%;
}

div {
height: 100%;
}

.container {
display: flex;
position: relative;
}

.content {
flex: 1 1;
order: 2;
background: #f00;
}

.left {
position: absolute;
width: 300px;
background: #0f0;
}

.right {
width: 100%;
margin-left: 300px;
background: #00f;
}

你好

我好

复制代码

实现三列布局的方式

position + margin-left + margin-right

.box {
position: relative;
}

.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
background: green;
}

.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
background: red;
}

.middle {
margin-left: 200px;
margin-right: 200px;
background: black;
}

复制代码

通过 float + margin

.left {
float: left;
width: 200px;
height: 200px;
background: green;
}

.right {
float: right;
width: 200px;
height: 200px;
background: red;
}

.middle {
margin-left: 210px;
margin-right: 210px;
background: black;
height: 200px;
}

复制代码

圣杯布局

.content {
float: left;
width: 100%;
background: #f00;
}

.left {
width: 200px;
background: #0f0;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}

.right {
width: 300px;
background: #00f;
float: left;
margin-left: -300px;
position: relative;
right: -300px;
}

中间内容

左侧区域

右侧区域

复制代码

双飞翼布局

div {
height: 100%;
}

.main {
float: left;
width: 100%;
background: #f00;
}

.main .content {
margin-left: 200px;
margin-right: 300px;
}

.left {
width: 200px;
background: #0f0;
float: left;
margin-left: -100%;
}

.right {
width: 300px;
background: #00f;
float: left;
margin-left: -300px;
}

hello world

你好

王鹏浩

复制代码

flex 布局

div {
height: 100%;
}

.container {
display: flex;
}

.content {
flex: 1 1;
order: 2;
background: #f00;
}

.left {
flex: 0 0 200px;
order: 1;
background: #0f0;
}

.right {
flex: 0 0 300px;
order: 3;
background: #00f;
}

hello world

你好

王鹏浩

复制代码

参考链接

• segmentfault.com/a/119000000…
• blog.csdn.net/crystal6918…
• blog.csdn.net/zhoulei1995…

问：CSS 动画有哪些？

• animation

animation、transition、transform、translate 这几个属性要搞清楚：

• animation：用于设置动画属性，他是一个简写的属性，包含6个属性
• transition：用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
• transform：用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系
• translate：translate只是transform的一个属性值，即移动，除此之外还有 scale 等

参考资料

• juejin.im/post/5b137e…

（3）问：用css2和css3分别写一下垂直居中和水平居中

CSS2

水平居中：

• div + margin: auto;
• span + text-align

垂直居中

• 使用 position 然后 left/top 和 margin 的方式垂直居中（已知宽高和未知宽高）
• 使用 position + margin
• 使用 display: table-cell;

已知宽高，进行水平垂直居中

.inner {
position: absolute;
width: 200px;
height: 300px;
background: red;
left: 50%;
top: 50%;
margin: -150px 0 0 -100px;
}

复制代码

宽高未知，比如 内联元素，进行水平垂直居中

.inner {
position: absolute;
background: red;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

我想居中显示

复制代码

绝对定位的 div 水平垂直居中