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块,我觉得说的有道理