前言：本文主要寫塊級元素與內聯元素的寬度與高度的相關知識，以及相關的衍生技巧，包括一些常用的居中方法等（與我的上一篇博客css如何居中不同，上一篇是把所有能用來居中的方法都介紹了一遍，本篇只寫常用的方法，可以應對80%的情況）
1、塊級元素寬高
- 塊級元素的高度由其內部文檔流的高度的總和決定的
- 塊級元素的寬度：默認佔一整行即
width:100%;另外，不論width設置的有多窄，一個塊級元素永遠都會佔據一整行的空間 - 注：在非必要情況下，儘量不要設置height屬性，要撐起所需的高度，可以設置padding或line-height等，不僅不容易出現bug，而且容易設置垂直居中。
2、內聯元素
- 內聯元素的高度由其內部文字字體的建議行高決定
- 內斂元素的寬度由其內容的寬度決定
- margin屬性padding屬性會影響內聯元素的寬度但不影響其高度，border屬性影響其高度寬度
- 不論
display:inline還是display:inline-block，編輯html時兩個內聯元素之間有一個或多個空格、回車，在顯示的時候都會自動轉換爲一個空格。
3、文檔流或譯爲常規流（normal flow）
- 文檔流：對文檔的讀取和輸出的順序. 其遵循內聯元素從左到右,塊級元素從上到下的讀取, 輸出和顯示順序；
以下設置會脫離文檔流：
- 絕對定位 position:absolute；
- 固定定位positon:fixed
- 浮動 float
4、margin合併
- 行內元素左右margin不合並
- 塊級元素上下margin合併，合併後的margin爲二者的最大值
- 浮動元素margin不合並
- 同級元素清除margin合併：
（1）二者之間提添加一個邊框寬度爲0.1的div
（2）二者設置display:flex;
（3）二者設置display:table - 父子元素的margin合併
如圖所示，子元素設置margin，父元素高度沒有發生變化，導致看似是父元素有了margin，其實是margin合併了：
![]()
若要清除父子元素的margin合併，爲父元素設置border、padding或overflow:hidden（overflow不推薦使用）
若要清除父子元素的margin合併，爲父元素設置5、常用的水平居中方法
（1）塊級元素水平居中：
- 子元素不定寬：爲子元素設置
margin: auto 20px;（左右外邊距相等即可） - 子元素定寬：爲子元素設置
margin: 0 auto;
（2）內聯元素水平居中
- 爲父元素設置
text-align:center;
6、常用的垂直居中方法
（1）父元素高度不確定
- 不論子元素高度是否確定，都可以給父元素上下相同的
padding即可
（2）父元素高度確定
- 單行文字垂直居中可以讓父元素
line-height=height - IE或比較古老的移動端設備：table佈局
.parent{
display:table;
height:100px;
border:1px solid red;
}
.child{
display:table-cell;
vertical-align:middle;
text-align:center;
}- chrome及移動端：父元素flex佈局
.parent{
display:flex;
justify-content:center;
align-items:center;
}- 父元素定高，子元素也固定寬高，也可以用絕對定位來居中
.parent{
height:300px;
position:relative;
border:1px solid red;
}
.child{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
width:100px;
height:200px;
border:1px solid green;
}7、溢出省略效果
- 單行溢出省略效果
div{
border:1px solid red;
width:100px;
text-overflow:ellipsis; /*文字超出部分用省略號代替*/
white-space:nowrap; /*不能換行*/
overflow:hidden; /*超出部分隱藏*/
}效果圖，原文字是this is demo and so on。超過div寬度即100px的部分用…代替：
- 多行溢出省略效果
注：下面展示的樣式設置對IE以及火狐瀏覽器不兼容，謹慎使用
div{
border:1px solid red;
width:200px;
display:-webkit-box;
-webkit-line-clamp:3; /*只顯示三行。溢出部分用省略號代替*/
-webkit-box-orient:vertical;
overflow:hidden;
}效果圖：
8、中文單行兩端對齊
單行兩端對齊的實現原理：text-align:justify;可以設置對齊方式爲兩端對齊但是隻對多行文本有效果，想要實現單行文本需以下操作：
1. 首先要把內聯元素變爲inline-block（爲了設置寬度）
2. 然後使用after僞元素爲本來只有一行span的增加一行使得justify起作用（after僞元素的寬度需設置爲100%用來撐起兩端對齊的寬度）
3. 爲span元素設置overflow:hidden; 把after僞元素增加的那一行隱藏起來使佈局美觀
span{
text-align:justify;
display:inline-block;
overflow:hidden;
line-height:20px;
height:20px;
width:4em;
}
span::after{
content:'';
display:inline-block;
width:100%;
}效果圖：姓名和聯繫方式都是兩端對齊
9、在不設置高度的情況下，做一個高度爲40px的div且內容垂直居中
這種設置方式，可以直接讓文字垂直居中，並且帶有響應式，貫徹一個理念：不要輕易設置height。
div{
border:1px solid red;
text-align:center;
line-height:24px;
padding:8px;
}10、做一個空的寬高自適應的正方形
直接設置一個空的div樣式爲{ padding-top:100% } 即可。
可以自適應父元素的寬高並形成一個空的不超出父元素且範圍的最大的正方形。
效果圖（父元素設置了padding）：
