码迷，mamicode.com
首页 > 其他好文 > 详细

block，inline和inline-block概念和区别（转）

时间：2018-05-02 13:09:12      阅读：160      评论：0      收藏：0      [点我收藏+]

标签：sele   www   copyto   link   使用   css规范   lan   blank   出现   

总体概念
  1. 根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
  2. 行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。
    块级元素写完后会自动换行，有宽高可以修改。
    还有一种特殊的元素叫做行内块元素。
    大致分类是：
    行内元素有：title  span  br  a   style  em  b  i   strong pcdata tt big small dfn code samp kbd var cite abbr acronym object script map q sub bdo
    块级元素有：body  form  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  center  div pre noscript blockquote fieldset address
    行内块元素常见的有： img  input  td select textarea label
block, inline, inline-block细节对比
display：block
  1.  block元素可以包含block元素和inline元素，块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如<form>只能包含块级元素；p 元素，只能包含inline元素，而不能包含block元素，也有一些块级元素既可以包含块级，也可以包含行级元素。
  2. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
  3. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。当只设置了height属性时，则width默认是其父类元素的宽度。
  4. block元素可以设置margin和padding属性。
display：inline
  1. inline元素只能包含inline元素。
  2. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
  3. inline元素设置width,height属性无效，如果你要改变内联元素的行高即类似文本的行间距，那么你只能使用这三个属性：line-height，font-size，vertical-align。若想给inline元素设置宽高属性，则可使用以下两种方法（下面的方法是我个人收集的，如有不对，希望大家可以指出）
  • 将inline元素转换为块级元素后就都可设置了，即添加CSS样式时，加上”display:block;“这句话。
  • 将该inline元素的position设置为absolute或fixed，这样子它就具有块级元素的属性了。
  1. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果，注意元素范围是增大了，但是对元素周围的内容是没影响的。
[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <style type="text/css">  
  7.             *{  
  8.                 margin:0;  
  9.                 padding:0;  
  10.                 list-style:none;  
  11.                 border:0;  
  12.             }  
  13.             .a1{  
  14.                 background:pink;  
  15.                 margin-top:30px;  
  16.                 margin-bottom: 30px;  
  17.                 padding-top: 20px;  
  18.                 padding-bottom: 20px;  
  19.             }  
  20.             .div1{  
  21.                 width: 100px;  
  22.                 height:100px;  
  23.                 background:green;  
  24.             }  
  25.         </style>  
  26.     </head>  
  27.     <body>  
  28.         <a class="a1">CSDN</a>  
  29.         <div class="div1"></div>  
  30.     </body>  
  31. </html>  
运行结果如下左图所示：
技术分享图片技术分享图片
查看元素时，可看到右图的效果，在右图中，紫色部分为内边距，紫色下面的黄色部分是外边距，但它们两者并不起作用，块级元素div仍紧挨着元素a的底部，所以这就是元素范围是增大了，但是对元素周围的内容是没影响的。
display：inline-block
  1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
  2. 可以设置margin和padding属性。
文中很多内容都是参考前辈的，添加了一点点自己写的内容。因为自己还是菜鸟，所以写不出像前辈们那么优秀的文章，而且要是仅仅依靠我个人的经验去写，我怕写出来的文章会误导大家，不过我会继续努力的！

参考网址：https://www.cnblogs.com/KeithWang/p/3139517.html

block，inline和inline-block概念和区别（转）

标签：sele   www   copyto   link   使用   css规范   lan   blank   出现   

原文地址：https://www.cnblogs.com/Caersi/p/8979153.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！