HTML中元素类型及元素类型的转换

对卦卦上心

于 2022-08-01 15:57:34 发布

阅读量1.7k

点赞数 4

分类专栏： web前端 css html 文章标签： css html5 css3

本文链接：https://blog.csdn.net/liu0218/article/details/126103054

版权

web前端同时被 3 个专栏收录

46 篇文章 2 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

1. 块级元素：

不可以设置宽度高度
可以与其它内联标签，文字或图片在同一行
盒模型不能正常使用，上下失效，左右[生效]!

块级元素常见有：div、h1~h6、p、ul、dl、ol 、form等

例：

<style>
   div{
      height: 110px;
      background-color: red;
      }
</style>
<body>
    <div></div>
</body>

2.内联元素(行内元素)：

不可以设置宽度高度
可以与其它内联标签，文字或图片在同一行
盒模型不能正常使用，上下失效，左右生效!

内联元素常见有：a、span、i、u、b等

例：

<style>
 a{
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 20px; 
    padding: 20px;
 }
</style>
<body>
 <a href="#">内联元素</a>
</body>

tip：行内元素之间如果有换行符，浏览器会解析成一个空格，2属性之间会有间隙，2个元素写在一行就不会用这种情况，例如：

<a href="#">2132</a>
<span>312312</span>

显示效果：

3.行内块元素(可变元素)：

可以设置宽度高度
可以与文字内容在一行
可以正常使用盒模型

行内块常见的元素有：img、input

例：

<style>
 img{
     width: 300px;
     height: 400px;
     margin: 50px;
   }
</style>
<body>
	<img src="./image/简立方项目-首页_82.jpg" alt="">
</body>

4.元素类型的转换

通过display属性进行元素类型的转换，它的常见值有：

block：块元素
inline：行内元素
inline-block：行内块元素
none：隐藏该元素，让浏览器不解析该元素
flex：弹性盒子

对卦卦上心

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML中元素类型及元素类型的转换

块级元素常见有div、h1~h6、p、ul、dl、ol、form等。盒模型不能正常使用，上下失效，左右[生效]!内联元素常见有a、span、i、u、b等。none隐藏该元素，让浏览器不解析该元素。可以与其它内联标签，文字或图片在同一行。可以与其它内联标签，文字或图片在同一行。行内块常见的元素有img、input。inline-block行内块元素。inline行内元素。盒模型不能正常使用，可以与文字内容在一行。...
复制链接

扫一扫