1.css實現三角形
.one {
width: 0;
height: 0;
border-top: 200px solid red;
border-bottom: 200px solid blue;
border-left: 200px solid #FFFFFF;
border-right: 200px solid #FFFFFF;
}
2.css佈局的應用場景，三欄佈局（固定左右，中間自動）
<!DOCTYPE HTML>
<html>
<head>
<style>
.outer{
position:relative;
background:#DCDCDC; /*灰*/
}
.left{
width:200px;
height:400px;
position:absolute;
left:0;
background:#ff9900;; /*橘色*/
}
.middle{
height:100%;
margin-left:200px; /*左子元素寬度*/
margin-right:300px; /*右子元素寬度*/
background:#fff700; /*黃色*/
}
.right{
width:300px;
height:300px;
position:absolute;
right:0;
background:#93ec7c; /*綠色*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner left">left</div>
<div class="inner right">right</div>
<div class="inner middle">middle</div>
</div>
</body>
</html>
更多情況
參考：https://blog.csdn.net/u012194956/article/details/79090629
3.實現垂直居中
（1）單行文本垂直居中
#child {
line-height: 200px;
}
（2）多行文本垂直居中
父元素使用display:table和子元素使用display:table-cell屬性來模擬表格，子元素設置vertical-align:middle即可垂直居中
html：
<div class="span_box bg_box">
<span class="words_span">
多行文本 多行文本 多行文本 多行文本 多行文本 多行文本 多行文本 多行文本 多行文本 多行文本 多行文本 多行文本 多行文本 多行文本 多行文本 多行文本 多行文本
</span>
</div>
css：
.bg_box {
width: 300px;
height: 300px;
margin-top: 20px;
background-color: #BBBBBB;
}
.span_box {
display: table;
}
.words_span {
display: table-cell;
vertical-align: middle;
}
（3）圖片垂直居中
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
（4）基於絕對定位的pc端實現
.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
（5）其他
代碼：
html
1 2 3 |
<div id="parent"> <div id="child">Content here</div> </div> |
css
1 2 3 4 5 |
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
|
低版本 IE fix bug：
1 2 3 |
#child {
display: inline-block;
}
|
塊級元素
css
1 2 3 4 5 6 7 8 9 |
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
|
總結：關於垂直居中，有很多大佬都總結了好多，我看了也沒記住，所以我選了自己用到的幾個～～