文章目录
1 一些基本的CSS
- 画一个三角形
.rect{
width: 0;
height: 0;
border-color: transparent transparent red transparent;
border-width: 90px;
border-style: solid;
}
<div class="rect"></div>
- 画一条线
.line {
width: 900px;
border-bottom: 1px solid #000000;
}
<div class="line"></div>
- 双飞翼/圣杯
.wrap {
display: flex;
}
.left {
height: 800px;
width: 300px;
background-color: aqua;
}
.main {
height: 800px;
flex: 1;
background-color: green;
}
.right {
height: 800px;
width: 300px;
background-color: red;
}
<div class="wrap">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
- 水平垂直居中
.son {
width: 200px;
height: 200px;
background-color: pink;
}
<div class="parent">
<div class="son"></div>
</div>
//以下有六种方法让son水平垂直居中
//transform 父子元素宽高均不确定也适用
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//margin 需son宽高确定
.son {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
//0 0 0 0 margin:auto 父子元素宽高均不确定也适用
.son{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto;
}
//parent flex 需parent高度确定
.parent {
height: 100vh;
display:flex;
justify-content:center;
align-items:center;
}
//table-cell 需parent宽高确定
.parent {
height: 500px;
width: 500px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.son{
display: inline-block;
}
//grid 需parent高度确定
.parent {
display: grid;
height: 500px;
}
.son{
align-self: center;
justify-self: center;
}
- 文本水平垂直居中
//行高 = parent的height
.parent {
text-align: center;
line-height: 100vh;
}
<div class="parent">测试</div>
//flex 同上 这里省略
//注意writing-mode: vertical-rl;可以写竖向文字
- before/after/content
/* 画三角箭头(两个三角形) */
.top {
position: absolute;
right: 60px;
top: calc(50% - 25px);
}
.top:before,
.top:after {
position: absolute;
content: ""; //不设置这个空content就没有后面的border
border-bottom: 20px transparent solid;
border-right: 20px transparent solid;
border-top: 20px transparent solid; //不设置solid等style的话则默认为none,就没有border
}
.top:after {
border-left: 40px red solid; //底和高不同的三角形的画法
}
.top:before {
left: 15px; //与红三角间距15px
border-left: 40px green solid;
}
<body>
<div class="top"></div>
</body>
2 总结
上面是一些css的基本内容,复习用