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>
标签：box,14,vertical,aligin,width,background,Document,200px
From： https://www.cnblogs.com/yufc/p/18261583