装饰
<style>
img {
vertical-align: bottom;
}
</style>
</head>
<body>
<img src="./images/1.jpg" alt="">老师真帅ayfc老师真帅ayfc老师真帅ayfc
</body>
问题一
<style>
input {
height: 50px;
/* 自动内减 */
box-sizing: border-box;
/* 方法一:设置垂直对齐方式 */
/* vertical-align: bottom; */
/* 方法二:设置浮动 */
float: left;
}
</style>
</head>
<body>
<input type="text"><input type="button" value="搜索">
</body>
</html>
问题二
<style>
img {
vertical-align: bottom;
}
</style>
</head>
<body>
<img src="./images/1.jpg" alt=""><input type="text">
</body>
对齐
问题三
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
}
input {
vertical-align: top;
}
</style>
</head>
<body>
<div class="father">
<input type="text">
</div>
</body>
问题四
<style>
.father {
width: 400px;
background-color: pink;
}
img {
/* 解决方法一:改变img标签的垂直对齐方式不为baseline即可 */
/* vertical-align: bottom; */
/* 解决方法二:设置img转换成块级元素 */
display: block;
}
</style>
</head>
<body>
<div class="father">
<img src="./images/1.jpg" alt="">
</div>
</body>
问题5
<style>
.father {
width: 600px;
height: 600px;
background-color: pink;
line-height: 600px;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="father">
<img src="./images/1.jpg" alt="">
</div>
</body>