CSS系列之块状元素内联元素内联块状元素(四)

最新推荐文章于 2024-08-25 22:20:40 发布

原创最新推荐文章于 2024-08-25 22:20:40 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

html 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了HTML中块状元素、内联元素及内联块状元素的特点与应用场景，并通过实例展示了如何使用这些元素来构建网页布局。

<!DOCTYPE html>
<html lang="en" xmlns:width="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>演示块状元素</title>
    <style type="text/css">

    </style>
</head>
<body>
   <div style="background-color: cyan">我是div</div>
   <div style="background-color: yellow"; width:300>
     我是设置了宽高的div
 </div>
   <span style="background-color: rebeccapurple">我是span1</span>
   <span style="background-color: aquamarine">我是span2</span>

  <!--元素分为块状元素,内联元素,内联块状元素
  块状元素:block表示:独自占据一行,不能与其他标签同处一行 可以设置宽高等属性-->
 <!--内联元素:inline表示 可以与其他标签同处一行 不可以设置宽高等属性-->
 <!--内联块状元素;inline-block表示:可以与其他标签同处一行,可以设置宽高等属性-->
  <span style="background-color: yellow">我是内联元素</span>
  <div style="display: inline-block; background-color: bisque; width: 600px">
      我是设置了display属性的div标签,我已经被改成了内联块状元素
  </div>




</body>
</html>


<!--元素分类-->
<!--块状元素,内联元素(行内元素),内联块状元素    
块状元素(block):    
1，每个块级元素都从新的一行开始，并且其后的元素也另起一行。就是nb，就是霸道，就是一个元素占一行。    
  并且在其后的元素也会另起一行。就是说我前面和我后面的元素，都离我远一点。    
2，元素的高度、宽高、行高以及顶和底边距都可设置。    
3，元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。    

内联元素(行内元素)(inline):    
1，和其他元素都在一行上。    
2，元素的高度、宽度及顶部和底部边距不可设置。    
3，元素的宽度就是它包含的文字或图片的宽度，不可改变。    

内联块状元素(inline-block):    
1，和其他元素都在一行上。    
2，元素的高度、宽度、行高以及顶和底边距都可设置。    

可以通过display属性将块状元素设置为内联块状元素    

常用的:    
块状元素:div p h1..h6 ol ul table address blockquote form    
内联元素:a span br em strong label q    
内联块状元素:img input    -->