资讯专栏INFORMATION COLUMN

块状元素、内联元素和内联块状元素

CoyPan / 1676人阅读

摘要:中,中的标签元素大体被分为三种不同的类型块状元素内联元素又叫行内元素和内联块状元素。注意只有内联内联块与内联内联块之间的空白符才会形成一个空格,文本元素除空白符也是属于内联元素。

CSS中,html中的标签元素大体被分为三种不同的类型:块状元素(display:block)、内联元素(又叫行内元素display:inline)和内联块状元素(display:inline-block)。可以通过代码来相互转换。
一.常用的块状元素有:

-

      、、

      块级元素特点:
      1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。

      2、元素的高度、宽度、行高以及顶和底边距都可设置。

      3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)。默认高度等于子元素高度。父子均是块级元素时,子块的高度可能冲破父级的限制

      二.常用的内联元素有:


      内联元素特点:
      1.和其他内联元素都在一行上;

      2.可以通过margin、padding来改变左右的距离,但不可以改变上下的距离,导致width、height、line-height失效或。可以使用border。

      3.内联元素之间有空白区域,空白区域的形成是因为之间有回车,在html中,空格、制表符、回车都属于空白符,多个空白符都会视为一个空格,空格的大小由父级

      的font-size决定。注意:只有内联(内联块)与内联(内联块)之间的空白符才会形成一个空格,文本元素(除空白符)也是属于内联元素。常用解决方法,给
      设置font-size: 0;,在上把font-size设置回去

      三.常用的内联块状元素有:

      
      

      inline-block 元素特点:
      1.和其他元素都在一行上;

      2.元素的高度、宽度、行高以及顶和底边距都可设置。

      3.它也会有元素间出现空白区域的问题

      四、参考的文章:
      https://www.jianshu.com/p/1cf...

      https://segmentfault.com/a/11...

      文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

      转载请注明本文地址:https://www.ucloud.cn/yun/117269.html

      相关文章

      • 前端学习笔记之Html标签元素类别

        摘要:中的标签元素可以分为三种不同的类型块状元素内联元素和内联块状元素。常用的块状元素有等内联元素与块状元素相对应,具有如下特点和其他内联元素都在一行上元素的高度宽度行高及顶部和底部边距不可设置元素不能设置高度,宽度就是它包含的文字或图片的宽度。 HTML 中的标签元素可以分为三种不同的类型:块状元素、内联元素和内联块状元素。 块状元素的特点有: 1、独占一行。每个块级元素都从新的一行开始,...

        ghnor 评论0 收藏0
      • CSS盒模型

        摘要:常用块状元素常用内联元素常用内联块状元素盒模型填充设置元素与边框之间的距离,叫做填充。用设置,也分为四部分,即上右下左,它们是顺时针。1、什么是CSS盒模型?CSS盒子模型包括元素、内边距、边框、外边距,如下图:      2、元素分类:元素可以分为块状元素、内联元素、内联块状元素。     常用块状元素:、、...、、、、、、 、     常用内联元素:、、、、、、、、、、     常用内...

        Pandaaa 评论0 收藏0
      • html的嵌套规则

        html元素分为块状元素和内联元素,块状元素作为其他元素的容器。块状元素可以嵌套其他块状元素块状元素可以嵌套内联元素内联元素不能嵌套块状元素p内不能嵌套块状元素有几个特殊块状元素只能包含内联元素,而不能包含块状元素,这几个元素是:h1、h2、h3、h4、h5、h6、p、dt块状元素和块状元素并列,内联元素和内联元素并列li里面可以嵌套div下拉列表框option中只能嵌套文本ol和li之间、ul和...

        tinyq 评论0 收藏0
      • HTML+CSS基础课程-imooc-【更新完毕】

        摘要:包含后代选择器包含选择器,即加入空格用于选择指定标签元素下的后辈元素。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过进行选择。 6-1 认识CSS样式 CSS全称为层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式,可...

        Heier 评论0 收藏0
      • CSS阶段总结

        摘要:布局之左右布局与左中右布局方法为子元素设置浮动,然后在其父元素上使用类来清除浮动。 CSS布局之左右布局与左中右布局 方法:为子元素设置浮动,然后在其父元素上使用clearfix类来清除浮动。代码示例: html部分: a b c CSS部分: .child{ float: left; } .clearfix::after { display: block...

        daryl 评论0 收藏0

      发表评论

      0条评论

      最新活动
      阅读需要支付1元查看
      <