一谬以、元素分類
HTML可以將元素分類方式分為行內(nèi)元素土居、塊狀元素和行內(nèi)塊狀元素三種歹垫。
這三者是可以互相轉(zhuǎn)換的桑滩，使用display屬性能夠?qū)⑷呷我廪D(zhuǎn)換：
display:inline;轉(zhuǎn)換為行內(nèi)元素
display:block;轉(zhuǎn)換為塊狀元素
display:inline-block;轉(zhuǎn)換為行內(nèi)塊狀元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試案例</title>
<style type="text/css">
span {
display: block;
width: 120px;
height: 30px;
background: red;
}
div {
display: inline;
width: 120px;
height: 200px;
background: green;
}
i {
display: inline-block;
width: 120px;
height: 30px;
background: lightblue;
}
</style>
</head>
<body>
<span>行內(nèi)轉(zhuǎn)塊狀</span>
<div>塊狀轉(zhuǎn)行內(nèi) </div>
<i>行內(nèi)轉(zhuǎn)行內(nèi)塊狀</i>
</body>
</html>
二梧疲、分析
1.行內(nèi)元素
行內(nèi)元素最常使用的就是span，其他的只在特定功能下使用运准，修飾字體<b>和<i>標(biāo)簽幌氮，還有< sub>和< sup>這兩個標(biāo)簽可以直接做出平方的效果，而不需要類似移動屬性的幫助
行內(nèi)元素特征：
- 設(shè)置寬高無效
- 對margin僅設(shè)置左右方向有效胁澳，上下無效该互；padding設(shè)置上下左右都有效，即會撐大空間
- 不會自動進(jìn)行換行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試案例</title>
<style type="text/css">
span {
width: 120px;
height: 120px;
margin: 1000px 20px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<i>不會自動換行</i>
<span>行內(nèi)元素</span>
</body>
</html>
2韭畸、塊級元素
塊級元素代表性的就是div宇智，其他如p、nav胰丁、aside随橘、header、footer锦庸、section机蔗、article、ul-li酸员、address等等，都可以用div來實(shí)現(xiàn)讳嘱。不過為了可以方便程序員解讀代碼幔嗦，一般都會使用特定的語義化標(biāo)簽，使得代碼可讀性強(qiáng)沥潭，且便于查錯邀泉。
塊狀元素特征：
- 能夠識別寬高
- margin和padding的上下左右均對其有效
- 可以自動換行
- 多個塊狀元素標(biāo)簽寫在一起，默認(rèn)排列方式為從上至下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試案例</title>
<style type="text/css">
div {
width: 120px;
height: 120px;
margin: 50px 50px;
padding: 50px 40px;
background: lightblue;
}
</style>
</head>
<body>
<i>自動換行</i>
<div>塊狀元素</div>
<div>塊狀元素</div>
</body>
</html>
3、行內(nèi)塊元素
行內(nèi)塊狀元素綜合了行內(nèi)元素和塊狀元素的特性汇恤，但是各有取舍庞钢。因此行內(nèi)塊狀元素在日常的使用中，由于其特性因谎，使用的次數(shù)也比較多基括。
行內(nèi)塊狀元素特征：
- 不自動換行
- 能夠識別寬高
- 默認(rèn)排列方式為從左到右
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試案例</title>
<style type="text/css">
div {
display: inline-block;
width: 100px;
height: 50px;
background: lightblue;
}
</style>
</head>
<body>
<div>行內(nèi)塊狀元素</div>
<div>行內(nèi)塊狀元素</div>
</body>
</html>
三、行內(nèi)元素垂直居中
1财岔、 讓 line-height 與 height 相等
.container {
width: 1rem;
height: 1rem;
line-height: 1rem;
font-size: 0.12rem;
color: green;
background: lightblue;
}
2风皿、用 Flex 布局實(shí)現(xiàn)垂直+水平居中
.container {
width: 1rem;
height: 1rem;
font-size: 0.12rem;
color: green;
background: lightblue;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
四光稼、內(nèi)聯(lián)盒模型
image
