html能插入背景的行级元素,Html元素类型:块级元素、行内元素(内联元素)和行内块级元素...

2021年6月17日 15点热度 0条评论 来源: big maomimkq

8种机械键盘轴体对比

本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?

html中的标签元素大体被分为三种不同的类型:块级元素、内联元素(又叫行内元素)和内联块级元素。事实上,我以前用的时候只是建立在对它们的初步了解之上,可能有时候的使用方法并不正确,这次我需要在实验的基础上去更加深入地认识它们,并且进行一些简单的对比,了解它们之间的差别与联系,从而能够正确地使用它们。

块级元素

特点每个元素都从新的一行开始,其后的元素另起一行,即使设置宽度为0,只要有高度,都会独占一行

元素的高度、宽度、行高以及顶部和内外边距(上下左右)都可设置

元素如果不设置宽度,则是它本身符容器的100%(和父元素的宽度一致)

常见的块状元素

div、p、h1~h6、ul、ol、dl、li、dd、hr、blockquote、address、table、menu、pre,HTML5新增的header、section、aside、footer等

常见的块状元素

内联元素(行内元素)

特点和其他元素都在一行上;

元素的高度、宽度及顶部和底部边距不可设置;

元素的宽度就是它包含的文字或图片的宽度,不可改变。

常见的内联元素

span、img、a、lable、input、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、textarea、select、small、sub、sup,strong、u(下划线)、button(默认display:inline-block)

常见的内联元素

内联块级元素(行内块级元素)

特点(同时具有块级元素、内联元素的特点)和其他元素都在一行上;

元素的高度、宽度、行高以及内外边距(上下左右)都可设置

常见的内联块状元素

input、textarea、select、button

常见的内联块级元素

三种元素类型样式对比

代码

我是第一个div,宽度200px,高度100px,背景色为红色 我是第二个div,宽度200px,高度100px,背景色为蓝色

我是第一个span,宽度200px,高度100px,背景色为红色

我是第二个span,宽度200px,高度100px,背景色为蓝色

我是第一个button,宽度200px,高度100px,背景色为红色

我是第二个button,宽度200px,高度100px,背景色为蓝色

效果

我是第一个div,宽度200px,高度100px,背景色为红色

我是第二个div,宽度200px,高度100px,背景色为蓝色我是第一个span,宽度200px,高度100px,背景色为红色我是第二个span,宽度200px,高度100px,背景色为蓝色我是第一个button,宽度200px,高度100px,背景色为红色我是第二个button,宽度200px,高度100px,背景色为蓝色

实质上,虽然对span这个内联元素设置了宽度和高度,然而并没有起到效果。

总结

三种元素类型的特点决定了它的显示方式和一些属性的可设置性,我们再做网页开发的时候一定要用好它们,有时候如果元素标签本身的类型不能满足我们布局需要的时候,可以使用样式设置对它们进行类型修改变换。设置display:block;可以将元素转换块级元素;

设置display:inline;可以将块状元素转换为内联元素;

设置display:inline-block;可以将元素设置为内联块级元素。

    原文作者:big maomimkq
    原文地址: https://blog.csdn.net/weixin_28946137/article/details/118017147
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。