常见的inline元素、block元素、inline-block元素

最新推荐文章于 2024-10-01 19:52:33 发布

夏沫樱花雨

最新推荐文章于 2024-10-01 19:52:33 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/weixin_42012282/article/details/80515918

版权

  1.背景介绍
     2.知识解析
     3.常见问题
     4.解决方案
     5.编码实战
     6.扩展思考
     7.参考文献

    1.背景介绍

     历史 
     这三个元素到底是怎么产生的。
     line和block可能是类似于1+1=2的基础概念，还记得在没有网络的时代，有一种叫做剪报的东西，它是把从报刊杂志等上面剪下的文字、图片资料，整理分类并集纳成册。我们可以把剪下来的纸块看成是block元素，而用笔记录的文字、图画，看成是line元素。最早在做浏览器的时候加入这两个元素，可能是遵循同样的模式。
     inline-block，根据搜寻的资料发现，在IE5.5版就开始支持inline-block值，也就是1999年12月（最终版为2007年7月）。css2更新发布在1998年5月，2.1的更新草案则是在2002年8月2日发布的（css2.1版添加了display的inline-block值）。当年可能是为更好的进行元素布局，才在标准里给display添加inline-block值，使得我们有一个很方便的元素特性可供使用。
     至于W3C和IE之间发生过什么友好协商我们就不得而知了。
     目的
     理解这几个元素是学习web需要理解的核心概念之一
     每个html标签元素都有其默认的元素类型，主要包括两大类:inline内联元素、block块元素。除默认为以上两种，还有部分标签元素叫可变元素，会根据上下文语境决定该元素为inline元素或是block元素。在css里，有一个display的属性，他规定元素应该生成的框的类型。可能的值有很多，我们比较常用的有table-cell，inline-block等，也包括我们这次小课堂要讲的inline、block、inline-block。
     其中inline-block是在css2.1里新增的值。具有这个值的元素，我们可以把它叫做inline-block元素。
     以上元素的类型是我们学习web里需要理解的核心概念之一。
         对页面进行布局排版，究其根本是在普通文档流的基 础上，进行各种设置，达到我们想要的效果。
         这三个元素特性，完全影响我们的布局排版。下面就开始认识一下它们。
     2.知识解析
知识点1：常见的inline、inline-block、block元素
       常见元素：
     inline：a,span,br,i,em,strong,label,q,var,cite,code
     inline-block：img,input
     block：p，div,p,h1...h6,ol,ul,dl,table,address,blockquote,form
 inline特点:
     （1）和其他元素都在一行上，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
     (2)元素的高度、宽度及顶部和底部边距不可设置
      (3)元素的宽度就是它包含的文字或图片的宽度，不可改变。
 block特点:
         （1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。
     
         (2)元素的高度、宽度、行高以及顶和底边距都可设置。
     
         (3)元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
     inline-block特点:
 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，
     代码display:inline-block就是将元素设置为内联块状元素。
     和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

    3.常见问题
   问题一：inline和inline-block元素之间的间距问题
   问题二：inline-block元素的如何垂直居中
   问题三：利用浏览器来查看元素的类型
     4.解决方案
     问题1：inline和inline-block元素之间的间距问题
     去除inline-block元素间间距的N种方法
     问题2：inline-block元素的如何垂直居中
     方法1：设置上下padding值相等；
     方法2：设置vertical-align:middle;
     方法3：设置line-height大于font-size即可实现单行文本垂直居中，无需设置line-height和height值相等
    问题3：利用浏览器来查看元素的类型
     打开谷歌浏览器，F12，选中“Element”项，然后选中一个元素，在“Computed”的display中即可看到元素的类型，
     查看到底是inline元素还是block 元素，亦或是其它类型的元素。
     5.编码实战

问题；

1.想要一个块级元素，是设置div好，还是设置span加display

答；这个可以根据自己的需求去写，也可以用div标准的block

2.inline-block布局较float布局而言，有哪些优势呢？

float布局：每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行，第一个元素会沿着最高元素的右侧对齐，此原因是属于恶魔系的float属性破坏了inline box。

display:inline-block最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素。黑白通吃，左右逢源。inline-block属性的元素适用于inline box模型，所以，当其中的列表元素高度不一时，是不会有错位的。

（1）块级元素的默认长度? 答：默认长度是它父元素的长度。