显示方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示方式</title>
<style>
.box {
width: 500px;
height: 100px;
background-color: orangered;
}
</style>
<style>
/*显示方式：display
block：
1.支持设置宽高
2.自带换行
重点：所有有宽高、参与位置布局的都是block
inline：
1.不支持设置宽高，宽高只能有文本撑开
2.不带换行，一行显示不下会自动换行(保留数据的整体性)
重点：存放文本的
inline-block:
1.支持设置宽高
2.不带换行，一行显示不下会自动换行(以标签整体换行，标签左右有间距)
重点：不去主动设置该显示方式，系统的两个img、input都设置为了单标签(不会嵌套任何东西)
注：如果要用inline-block参与布局，为了标签布局不受内容影响，设置vertical-align: top
*/
a {
width: 500px;
height: 100px;
display: block;
background-color: pink;
}
owen {
width: 100px;
height: 100px;
display: inline-block;
background-color: cyan;
font-size: 30px;
/*文本垂直对齐方式: baseline top bottom*/
vertical-align: top;
}
owen:nth-of-type(2) {
font-size: 20px;
}
img {
width: 100px;
height: 100px;
background-color: tan;
}
input {
width: 100px;
height: 100px;
background-color: tan;
vertical-align: top;
}
</style>
</head>
<body>
<a href="5.边界圆角.html" class="box"></a>
<div>div1</div>
<div>div2</div>
<a href="">a1</a>
<a href="">a2</a>
<owen>html/css</owen>
<owen>javascript</owen>
<owen></owen>
<owen></owen>
<owen></owen>
<img src="img/lss.jpg" alt="">
<input type="text">
<div></div>
</body>
</html>
8187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
