【原创】HTML&CSS 学习笔记（3）--HTML基础知识2__元素分类：block,inline,inline-block

 

html三种类型的元素

html元素分为三种类型

 block  element

块元素三要素

• 新起行，并强行结束
• 他前后的内容，会自己这个逻辑块给分隔开了, 前后的内容，逻辑上分块了
•  竖直方向上，一定有默认的间距，而且margin距离会取max融合

        img这种即使看起来换行摆放了，但是上下是无间隔，也证明是inline元素

 

inline element

•  一定在一行内
• inline元素是没有竖直方向的间隔的，的如img
•  

 

inline-block element

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

 

参考资料

https://www.cnblogs.com/KeithWang/p/3139517.html

https://www.cnblogs.com/weibo806/p/5956300.html

 

css里强行指定显示格式

css里，还可以把某个元素强行指定其显示格式

（1） display: inline-block

（2）display: inline

（3）display :block

 

block inline inline-block元素详解

（1）常用块元素：

  每次都独立起一行，且终止这一行（强制换行），还把前后的元素分隔为不同的块了

• 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
• 块元素就是强制分行，错误的！
• 快元素就是独占一行，强制换行，并非就一定是块元素，而是，还分隔了前后的元素，还起到了划分模块作用！
• 比如br就不能说是block element
• 独占一行,默认情况下，其宽度自动填满其父元素宽度 100%
• 元素的高度、宽度、行高以及顶和底边距都可设置。
• 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致--减去一些margin等），除非设定一个宽度。
• 肯定可以包含 行内元素
• 除了几个 最小的特殊块元素，其他的都可以再包含其他块元素

                      div,head,body p h1-h6

                       ol,ul,table,form

                       li

        其中最小不可拆分/嵌套块元素： p ,h1~h6 ,不能里面再嵌套 其他块元素，但可以 嵌套 行内元素

 

（2）常用内联元素 /行内元素：

           在1行内，写完后面也不分行

                    span

                     i

                    em

                   strong

                    <sub>

                   <sup>

                    <textarea>

• 和其他元素都在一行上，可自动换行（一般在一行，也可能跟随宽度而自动换行，不是强制换行）
• 元素的高度、宽度及顶部和底部边距不可设置；
• 元素的宽度就是它包含的文字或图片的宽度，不可改变。
• 可以包含/嵌套 其他行内元素，绝对不可包含块元素
• 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
• 行内元素起边距作用的只有margin-left，margin-right，padding-left，padding-right，其它属性不会起边距效果
• 行内元素设置width，height属性无效

        <img > 是inline element

       所以比较小时，一般是width小，会自动平铺多个图片

 

（3）常用行内块元素： inline-block 

• 这个元素还是inline元素，但是元素的内容显示方式却是block的显示方式
• 和其他元素都在一行上；
• 元素的高度、宽度、行高以及顶和底边距都可设置

                   image

                   input

 

（4）分类不确定，模糊的元素，需要根据情况分辨，

比如<a> <br>等

<a>content  </a>     

a标签之间的内容content有可能是inline元素，也可能是block元素

我开始觉得a 算inline因为不强制换行，但实际是比较灵活，都有可能

<br>                      

br虽然强制分行了，但是并不把前后的文本分隔开来

我之前觉得算block，但书的解释是模糊，因为这个不会像p那样吧内容强制分为2块，我觉得说的有道理