01 行盒的理解
作用: 將當前行裡的所有內容包裹起來
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box .small {
display: inline-block;
width: 200px;
height: 200px;
background-color: orange;
}
.box img {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
xxxxgggx123
<img src="./imgs/diqiu.jpg" alt="">
<span class="small"></span>
每逢春節、中秋節等中華民族傳統節日,各族居民便聚在一起,聯歡聯誼,共慶佳節;每逢開齋節、古爾邦節等少數民族節日,回族居民會帶著油香、饊子等特色小吃,請街坊鄰里品嚐,各族居民其樂融融,像石榴籽一樣緊緊抱在一起。
</div>
</body>
</html>
![image](https://i.iter01.com/images/8bdc03ec19285652a6f893786600145a5e7c1737058953cdaa3384ea62442227.png)
02 行盒裡面對齊的方式
瀏覽器為了美觀,預設行盒的對其方式是基線對齊
這也就能解釋為什麼單獨放一張圖片的時候,圖片下方會有幾個畫素
這是因為只有圖片的時候也是按照基線對齊,為了以後可能有文字,預留了空間
還有一種現象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: orange;
}
.box .small {
display: inline-block;
width: 200px;
height: 200px;
background-color: red;
}
.box img {
width: 100px;
}
</style>
</head>
<body>
<div class="box">
123xxggg
<img src="./imgs/diqiu.jpg" alt="">
<span class="small">aaaaa</span>
</div>
</body>
</html>
![image](https://i.iter01.com/images/fbbee59ab0751e8888cf73d680ff5aef8505146db3de84d1f90b7cd0c17add88.png)
03 案例
3.1 vertical-algin解決問題一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 瀏覽器遇到行內和行內塊標籤當做文書處理, 預設文字是按基線物件 */
input {
height: 50px;
box-sizing: border-box;
vertical-align: middle;
}
</style>
</head>
<body>
<input type="text"><input type="button" value="搜尋">
</body>
</html>
![image](https://i.iter01.com/images/4860e4b03af193410d831a581d1045b99861548d6b54b74a431eca6b1099ddc5.png)
3.2 vertical-algin解決問題二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
vertical-align: middle;
}
</style>
</head>
<body>
<img src="../imgs/1.jpg" alt=""><input type="text">
</body>
</html>
![image](https://i.iter01.com/images/7dd0249873e4cf76e19ee0d7f9c2bb071f700722bf425d5dd445a140a580d04f.png)
3.3 vertical-algin解決問題三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
}
input {
/* vertical-align: middle; */
vertical-align: top;
}
</style>
</head>
<body>
<div class="father">
<input type="text">
</div>
</body>
</html>
![image](https://i.iter01.com/images/bdb823a3ea6b52bab44881000b3dc1a215dc8384ad71b4db0e0a5eac5689e6f3.png)
3.4 vertical-algin解決問題四
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
background-color: pink;
}
img {
/* 瀏覽器把行內和行內塊標籤當做文書處理,預設基線對齊 */
/* vertical-align: middle; */
display: block;
}
</style>
</head>
<body>
<div class="father">
<img src="../imgs/1.jpg" alt="">
</div>
</body>
</html>
![image](https://i.iter01.com/images/a61d477b882ea807b43c91d255cf5b4214fefe864b977980dc87b199f3854d0d.png)