-
CSS相關
在這裡分享本人面試遇到的一些問題與解決方案,將會持續更新
-
水平垂直居中 日期: 9/17
如何在一個div中垂直居中
<body>
<div class="father"><!--
--><div class="son"></div><!--
--></div>
</body>
複製程式碼
1.flex
*{
margin: 0;
padding: 0;
}
.father {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
background-color: cadetblue;
}
.son {
width: 50px;
height: 50px;
background-color: aqua;
}
2.absolute
*{
margin: 0;
padding: 0;
}
.father {
position: relative;
height: 500px;
background-color: cadetblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: aqua;
}
3.fixed-height
*{
margin: 0;
padding: 0;
}
.father {
position: relative;
height: 500px;
background-color: cadetblue;
}
.son {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
background-color: aqua;
}
4.table-cell
/*
需要三個div,
外層為display: table;
father為display: table-cell;
son為display: inline-block;
*/
html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: table;
width: 100%;
height: 100%;
}
.father {
display: table-cell;
background-color: cadetblue;
text-align: center;
vertical-align: middle;
}
.son {
width: 50px;
height: 50px;
display: inline-block;
background-color: aqua;
}
複製程式碼
-
擴充
- 水平居中
1.flex * { margin: 0; padding: 0; } .father { display: flex; justify-content: center; height: 500px; background-color: cadetblue; } .son { height: 50px; width: 50px; background-color: aqua; } 2.absolute * { margin: 0; padding: 0; } .father { height: 500px; position: relative; background-color: cadetblue; } .son { position: absolute; height: 50px; width: 50px; left: 50%; /* margin-left: -25px; */ transform: translateX(-50%); background-color: aqua; } 3.margin * { margin: 0; padding: 0; } .father { height: 500px; background-color: cadetblue; } .son { height: 50px; width: 50px; margin: 0 auto; background-color: aqua; } ``` - 垂直居中 ```css 1.flex * { margin: 0; padding: 0; } .father { display: flex; align-items: center; height: 500px; background-color: cadetblue; } .son { height: 50px; width: 50px; background-color: aqua; } 2.absolute * { margin: 0; padding: 0; } .father { height: 500px; position: relative; background-color: cadetblue; } .son { position: absolute; height: 50px; width: 50px; left: 50%; /* margin-left: -25px; */ transform: translateX(-50%); background-color: aqua; } 3.line-height * { margin: 0; padding: 0; } .father { height: 500px; line-height: 500px; background-color: cadetblue; } .son { display: inline-block; height: 50px; width: 50px; background-color: aqua; } 複製程式碼
- left、middle、right佈局
兩邊固寬、中間自適應
<div class="wrapper"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> 複製程式碼
兩邊固定,中間自適應
1.flex *{ margin: 0; padding: 0; } .wrapper { display: flex; height: 500px; } .left { width: 100px; background-color: lightgrey; } .middle { flex: 1; background-color: lightcyan; } .right { width: 100px; background-color: lightgrey; } 2.float *{ margin: 0; padding: 0; } .wrapper { height: 500px; } .left { width: 100px; height: 100%; float: left; background-color: lightgrey; } .middle { float: left; width: calc(100% - 200px); height: 100%; background-color: lightcyan; } .right { float: left; height: 100%; width: 100px; float: right; background-color: lightgrey; } 複製程式碼
- 擴充
在做這個的時候搜到了聖盃+雙飛翼佈局
雙飛翼杯佈局
<header>header</header> <section class="wrapper"> <section class="col main">main</section> <aside class="col left">left</aside> <aside class="col right">right</aside> </section> <footer>footer</footer> 複製程式碼
* { margin: 0; padding: 0; } header,footer { height: 50px; background-color: beige; } .wrapper { position: relative; } .main { height: 200px; margin:0 100px; background-color: aqua; } .left, .right{ width: 100px; height: 200px; position: absolute; top: 0; background-color: lightgray; } .left{ left: 0;} .right{ right: 0;} 複製程式碼
聖盃佈局
<header>聖盃佈局</header> <section class="wrapper"> <section class="main"> main </section> <aside class="left"> left </aside> <aside class="right"> right </aside> </section> <footer>footer</footer> 複製程式碼
* { padding: 0; margin: 0; } body { min-width: 600px; } header, footer { text-align: center; width: 100%; background-color: #bbbbbb; } .wrapper { overflow: hidden; padding: 0 200px 0 200px; } .main { float: left; width: 100%; height: 200px; background-color: #ddd; } .left { /* opacity: 0.5; */ float: left; width: 200px; height: 200px; background-color: #da4242; /* 產生布局效果的屬性 */ margin-left: -100%; position: relative; left: -200px; } .right { /* opacity: 0.5; */ float: left; width: 200px; height: 200px; background-color: #4ddef1; /* 產生布局效果的屬性 */ margin-left: -200px; position: relative; left: 200px; } 複製程式碼
聖盃的弊端
- 如果將瀏覽器無限變窄,「聖盃」將會「破碎」掉
當 main 部分的寬小於 left 部分時就會發生布局混亂
- 加min-width可以解決
-
固定 footer佈局
內容不足時固定在頁面底部、頁面超出時在頁面底部
<div class="container">
<header>header</header>
<main>main content</main>
<div class="empty"></div>
</div>
<footer>footer</footer>
複製程式碼
html,body{
height:100%;
margin:0;
padding:0;
}
.container{
min-height:100%;
margin-bottom:-100px;
}
.empty,footer{
height:100px;
}
複製程式碼
利用empty-div將footer推到頁面的最底部
本人把所有程式碼都寫成了demo放在了git上,有興趣的可以clone下來