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>
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>
也是因为基线对齐的原因，因为span里有了文字,所以基线变成了文字的底部，就会发生如上图的现象了
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>
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>
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>
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>
