html中的区块元素和内联元素

html中的区块元素和内联元素

1、html中区块元素和内联元素的区别

区块元素的特点

  • 每个元素独占一行,默认情况下宽度等于父元素的宽度
  • 不设置高度时,高度为0,有内容时高度由内容撑开,不解析换行符
  • 可以设置width、height、margin、padding属性
  • dispaly:block

常用的区块元素有

  • div(盒子)、 address( 定义地址)
  • ul(无序列表)、ol(有序列表)、li(列表的项)
  • dl(定义列表)、dd(定义列表中定义条目)、dt(定义列表中的项目)
  • p(段落)、h1~h6(网页中的标题,从大到小)
  • table(表格)、td(标准单元格)、tr(行)、th(表头单元格)
  • form(表单)、pre(预格式化文本)、hr(分割线)
  • caption (表格标题)、thead(表格表头)、tbody(表格主体)

内联元素的特点:

  • 相邻的元素会排列在同一行,排不下时会自动换行
  • 不支持宽高属性,宽高完全由内容撑开,会解析换行符
  • 使用部分样式会出错(上下margin和padding等),只能设置margin-left、margin-right、padding-left、padding-right.(可以出现效果)
  • dispaly:inline

常见的内联元素有

  • span(行间元素) 、textarea(多行文本输入控件)
  • b(加粗)、strong(加重)、i(斜体)、em(着重)
  • sub(下标)、sup(上标)
  • ins(插入)、del(删除)、br(换行)、a(定义锚以及超链接)
  • img(图片)、input(表单项)、label(表单标记)
  • big(大号字体加粗)、small9(呈现小号字体效果)
  • code(定义计算机代码文本)、q(定义短的引用)、select(定义单选或者多

虽然input和img都是行内元素,但是它们是可以设置宽和高的。主要是因为它们是内敛块元素。

内敛块元素的特点:
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,即:

  • 和其他元素都在一行上;

  • 元素的高度、宽度、行高以及顶和底边距都可设置。
    常见的内敛块元素有:

  • img(图片)

  • input(表单项)

  • iframe(框架)

  • canvas(画布)

  • video(视频)

  • audio(音频)

同时也提到了替换元素和不可替换元素,如下:

替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容,如img标签,在我们查看代码时图片不显示,但是在窗口可以显示出来

不可替换元素 html 的大多数元素是不可替换元素,即其内容直接表现给用户端,如p标签,标签内的内容在查看代码时会显示出来。

主要用的三个CSS样式有:

  • dispaly:block-----块级元素
  • dispaly:inline-----内联元素
  • dispaly:inline-block–内联块元素、同行显示并可修改宽高内外边距等属性

三个样式可以相互设置转化

~~写在后面的一点个人见解:对于内联元素使用上下margin和padding样式出错的问题的一点解释:W3C标准中讲到padding适用于所有元素,但是给内联元素设置上下padding时为何出错呢?这是由于内联元素不支持宽高,即使设置了上下padding在浏览器中不会显示,但并不会影响其他元素。margin也能用于内联元素,这是规范所允许的,但是margin-top和margin-bottom对内联元素(对行)的高度没有影响,并且由于边界效果(margin效果)是透明的,他也没有任何的视觉影响。这是因为边界应用于内联元素时不改变元素的行高度。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值