-
CSS相关
在这里分享本人面试遇到的一些问题与解决方案，将会持续更新
-
水平垂直居中 日期： 9/17
如何在一个div中垂直居中
复制代码
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布局
两边固宽、中间自适应
复制代码两边固定，中间自适应
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 main * { 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;}复制代码圣杯布局
圣杯布局 main * { 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布局
内容不足时固定在页面底部、页面超出时在页面底部
复制代码header main content
html,body{ height:100%; margin:0; padding:0; } .container{ min-height:100%; margin-bottom:-100px; } .empty,footer{ height:100px; }复制代码 利用empty-div将footer推到页面的最底部
本人把所有代码都写成了demo放在了git上，有兴趣的可以