关于前端的一些学习记录（10）
继上次背景颜色相关属性后，继续介绍元素显示模式...
引入：那些<div>、<p> 既是标签也是元素，只是拥有不同的显示模式。
元素的显示模式：三种常见的为：块级元素、行内元素、行内块元素...
1.块级元素
显示特点：独占一行；可以设置宽高；宽度默认为父元素的宽度，高度由内容撑开。
例：div标签、p标签、h标签、ul、li、dl、dt、dd、form、header、nav、footer...
2.行内元素
显示特点：一行可以显示多个（堆叠）；不可以设置宽高；宽度和高度默认由内容撑开。
例：a标签、spar标签、b、u、i、s、strong、ins、em、del...
3.行内块元素
显示特点：一行可以显示多个；可以设置宽高；
例：input标签、textarea标签、button、select...特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示的结果是inline。
4.元素显示模式的转换
目的：改变元素默认的显示特点，让元素符合局部要求；
语法：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {color: pink;background-color: green;width: 300px;height: 300px;display: inline-block;}</style></head><body><div>the first block</div><div>the second block</div></body>
</html>
上述代码演示效果：
注意：一些标签是不允许相互嵌套的！记住：p标签不能套div标签和h标签，a标签中不能再有a标签！
如果您喜欢，希望能得到您的点赞；如果您想同我一起学习，欢迎关注我，咱们一起加油！
更多推荐
关于前端的一些学习记录（10）
发布评论