🎸元素(标签)显示类型分为:快元素、行内(内联)元素、行内快元素
🎸下面是它们的特点介绍:
1.快标签
🎸 块元素的标志是:
块元素的代码后台界面都会显示:display:block;/display:list-item;属性
代码后台在:随便一个网页,点击右键--点击检查--找到左上角有一个像这样的箭头标志,点击箭头选择网页中你想看的地方,就能在Elements界面及下面的styles界面看到相应的代码情况
🎸注意一点:p标签里可以放文本,但不能嵌套快级标签(元素)
2.行内(内联)标签
代码演示:
结果:
结果发现这些标签就是可以在一行显示的,这就是行内元素的特点:可以在一行显示内容
行内元素的标志是:代码后台都有一个display:inline的属性
3.行内快元素
特性是既能像块元素一样设置宽和高,也能像行内元素一样允许在一行中显示,所以这种同时具备了块元素和行内元素特点的元素(标签)被称为行内快元素。
行内快元素的标志是:display:inline-block;属性
4.盒子模型
块元素和行内快元素可以设置内外边距和边框,盒子模型有的特性都可以设置
行内元素只能设置边距的左右边距,不能设置上下边距
5.元素类型间的转化
想让三种类型在一起转化,直接加上对应的代码标志即可;
例如快元素想转换为行内元素,直接在style里面加上display:inline;想转换成行内快元素,直接加上display:inline-block;其他的同理
代码演示:
6.display:none属性的运用
对于display属性还有一个属性值:display:none;也用的很多,可以实现当你鼠标放在父标签身上时,子标签显现,不放是子标签隐藏
就像京东网页这样:
代码演示:
结果: