css元素显示模式（行内、块级、行内块）
div、p、h系列、ul、li、dl、dt、dd、form、header、anv、footer。块级元素一般作为大容器，可以嵌套:文本级元素、行内元素、行内块元素等等.img有行内块元素特点，但是chrome调试工具中显示的inline。但是: p标签中不要嵌套div、p、h等块级元素。2、高度和宽度默认由内容撑开。a标签内部可以嵌套任意元素。但是:a标签不能嵌套a标签。（一行只能显示一个）1、一
1.块级元素
显示特点：
1、独占一行（一行只能显示一个）
2、宽度默认是父元素的宽度，高度默认由内容撑开
3、可以设置宽高
代表标签：
div、p、h系列、ul、li、dl、dt、dd、form、header、anv、footer
<style>
div:nth-child(1) {
/* 块级元素默认和父亲一样宽度 */
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 块级 -->
<div></div>
</body>
关于块级元素的一些想法
如果想让一个块级盒子，例如div在电脑上显示出来，可以不设置宽度，但是必须设置高度，否则在电脑屏幕上肉眼看不见
如果有二个盒子，只要子盒子有宽高，父盒子不用任何设置，都能被看到
例如：
<style>
div{
background-color: pink;
}
button{
height: 100px;
}
</style>
</head>
<body>
<div>
<button></button>
</div>
</body>
2.行内元素
特点：
1、一行可以显示多个
2、高度和宽度默认由内容撑开
3、不可以设置宽高
代表标签：
a、span、b、u、i、strong、ins、em、del
<style>
span {
/* 行内不可以设置宽高 */
width: 300px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<!-- 行内 -->
<span>span</span>
<b>b</b>
<strong>strong</strong>
<u>u</u>
<i>i</i>
<s>s</s>
<del>del</del>
<em>em</em>
<ins>ins</ins>
</body>
3.行内块元素
显示特点：
1、一行可以显示多个
2、可以设置宽高
代表标签：
input、textarea、button、select
<style>
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 行内块 -->
<img src="imgs/bg33.png">
</body>
特殊情况：
img有行内块元素特点，但是chrome调试工具中显示的inline
4.显示模式转换
display: block;
display: inline-block;
display: inline;
5、html标签嵌套注意点
块级元素一般作为大容器，可以嵌套:文本级元素、行内元素、行内块元素等等.
但是: p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素
但是:a标签不能嵌套a标签
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)