}
.inner::after {
content: “”;
margin-top: 100%;
display: block;
}
复制代码
参考链接
(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;
}
复制代码
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;
}
复制代码
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;
}
复制代码
参考链接
问:CSS 动画有哪些?
- animation
animation、transition、transform、translate 这几个属性要搞清楚:
- animation:用于设置动画属性,他是一个简写的属性,包含6个属性
- transition:用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同
- transform:用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系
- translate:translate只是transform的一个属性值,即移动,除此之外还有 scale 等
参考资料
(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%);
}