block,inline,inline-block的区别

最新推荐文章于 2024-07-17 19:36:38 发布

li530893850

最新推荐文章于 2024-07-17 19:36:38 发布

阅读量409

点赞数 1

分类专栏： web 文章标签： display inline

本文链接：https://blog.csdn.net/li530893850/article/details/50747605

版权

web 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、每个元素都有自身的级别：如。p是一个块级元素，span 是行元素，以下是常用的块级和行级元素

1.1常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。

1.2常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

二、block，inline和inlinke-block细节对比

display:block

1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3. block元素可以设置margin和padding属性。

display:inline

1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2. inline元素设置width,height属性无效。
3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
三、下面是一个练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>JSP Page</title>
       <link rel="stylesheet" href="css/new_file.css" />
       <script type="text/javascript" src="js/new_file.js"></script>
   </head>
   

   <body>
       
       <div class="box">例1<h1>我在div里面</h1></div>
       <p class="box">例1..<h1>我在div外面了</h1></p>

       <span style="width: 400px ;height: 100; background-color: red;" class=" db">例2</span>

       <span style="width: 400px ;height: 100; background-color: red; padding-left:90px;">例3</span>

   </body>

</html>