CSS 基礎深入理解
阿新 • • 發佈：2020-08-13
box-sizing屬性
正常來說，我們在頁面元素設定的高寬其實並不是真正想要的高寬，預設情況下，元素的寬度和高度計算如下：
padding + border +width = 元素的實際寬度；padding + border + height = 元素的實際高度；這就意味著設定的元素通常看起來比您設定的大。看下圖更好理解
box-sizing屬性允許我們在元素的總寬度和高度中包含填充和邊框。如果box-sizing: border-box;在元素填充上設定並且邊框包含在寬度和高度中：
<!DOCTYPE html> <html> <head> <style> div.box1 { width:50%; height: 100px; border:1em solid red; padding: 20px; } div.box2 { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; height: 100px; border:1em solid blue; padding: 20px; } </style> </head> <body> <div class="container"> <div class="box1"> 這個 div 寬度是50%，高度為200px </div> <div class="box2"> 這個 div 也是寬度是50%，高度為200px </div> </div> </body> </html>
一個元素居中的辦法（不確定寬高的情況下如何用定位的辦法實現）
方法一：水平居中
父層：text-align:center; 子層:display:inline-block;
方法二：水平垂直居中
父層：display:table-cell;
text-align:center;
vertical-align:middle;
子層：display:inline-block;
父層：position: relative;
子層：position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
已知高寬元素水平垂直居中：
方法一：display:table和diaplay:table-cell
<style> .container { display: table; } .inner { display: table-cell; vertical-align:middle; text-align:center; } </style> <div class="container"> <div class="inner"> you own content </div> </div>
方法二：position:absolute、50%和translate
<style> .container { position: relative; } .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <div class="container"> <div class="inner"> your own content </div> </div>
方法三：vw vh和translate
<style> .inner { position:fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%); } </style> <div class="inner"> this is a box fixed in center of screen </div>
方法四：:before和display:inline-block
<style> .container{ text-align: center; } .container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .inner { display: inline-block; } </style> <div class="container"> <div class="inner"> this is a box fixed in center of screen<br>The second line </div> </div>
方法五：css3 flex
<style> .container { display: flex; align-items: center; justify-content: center; } </style> <div class="container"> <div class="inner"> this is a box fixed in center of screen<br>The second line </div> </div>
方法六：absolute + 四個方向的值相等
.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; position: relative; } .wrapper > p { width: 170px; height: 20px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
方法七：grid
.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; display: grid; } .wrapper > p { align-self: center; justify-self: center; }
兩列布局——左側寬度固定，右側寬度自適應的三種方法
方法一：元素浮動
.left { position: absolute; height: 100px; width: 300px; background-color: blue; } .right { height: 200px; margin-left: 300px; background-color: red; }
方法二：BFC
.left { float: left; height: 100px; width: 300px; background-color: blue; } .right { overflow: auto; height: 200px; background-color: red; }
方法三： flex
.left{ width:200px; height: 300px; background: red } .right{ flex: 1; height: 300px; background-color: blue; }
持續更新中……