CSS对元素的分类

文章目录

概述

CSS从两个维度上将HTML元素进行了分类:

  1. 元素内容的表现形式上,将元素分为:置换元素、非置换元素。
  2. 元素自身的显示方式上,将元素分为:行内元素、块级元素、行内块级元素。

要清楚理解元素内容元素自身的区别:

  1. 讨论元素内容 的时候,元素就是个容器,里面装的东西就是要关注的内容
  2. 讨论元素自身 的时候,内容不重要,它的位置、宽高、内外边距才是重点

置换元素/非置换元素

重点关注元素内容的渲染效果:内容来源、如何创建。

浏览器渲染HTML文档,创建元素内容的时候,分两种情况:

  1. 可以直接从元素标签中获得元素内容。比如<p>内容区</p>,直接渲染内容区就能创建好<p>元素的内容,这种元素就是非置换元素
  2. 需要引入额外对象,才能创建好元素内容。比如<img src="photo.png" />,需要额外加载图片,才能创建好<img>元素的内容,再比如<button>按钮</button>,浏览器要引入一个按钮组件,才能创建好<button>元素的内容,这种元素就是置换元素

HTML文档中,大部分是都非置换元素 ,只有少数几个置换元素<img><select><textarea><input><button><iframe><video><audio><embed><object>

置换元素

特点:

  1. HTML源码文档中看元素标签,只能看到元素自身 ,看不到具体的元素内容
  2. 修改元素某些属性值,就可以改变元素内容 ,比如<input>type属性,<img>src属性
  3. 元素自身 一般拥有固定尺寸(宽、高、宽高比),部分元素有heightwidth属性
  4. CSS渲染模型美化不了元素内容 ,只能对元素自身进行美化

非置换元素

特点:

  1. HTML源码文档中看元素标签,可以同时看到元素自身 和具体的元素内容
  2. 严格遵循CSS渲染模型机制,元素自身元素内容 都可以被CSS美化

行内元素/块级元素/行内块级元素

重点关注元素自身的渲染效果:位置、宽高、内外边距。

这种分类方式跟CSS属性display有直接关系,该属性可选值有很多,这里只涉及其中三个:

  1. 行内元素 :用display: inline渲染的元素
  2. 块级元素 :用display: block渲染的元素
  3. 行内块级元素 :用display: inline-block渲染的元素

浏览器会为每个HTML元素赋予一个默认的display属性值,主动改变这个值就可以改变默认的元素分类,比如:

  1. display: block修饰<a>元素,就把行内元素变成了块级元素
  2. display: inline修饰<div>元素,就把块级元素变成了行内元素

行内元素

特点:

  1. 在父元素文档流中不会独占一行,左右两边可以出现其它行内元素
  2. 不能控制高度height和宽度width,默认高度和宽度分别为元素内容的高度和宽度
  3. 仅能在左右两个方向上控制外边距margin和内边距padding,上下两个方向不能控制
  4. 行内元素中不能放置块级元素,否则会被CSS渲染出来一些很奇怪的样式效果

在特点1中,相邻行内元素之间会存在空白间隙 的问题,可参考其它文章解决。

在特点2中,如果行内元素同时也是置换元素,就可以控制元素的宽高,这是特例。

常见行内元素:<img><a><label><span><strong><small><em><i><b><abbr><br><dfn><code><kbd><q><samp><sub><sup><var><city><iframe>

块级元素

特点:

  1. 在父元素文档流中独自占据一整行,左右两边不会出现其他元素
  2. 可以控制高度height和宽度width,默认高度为元素内容高度,默认宽度为父元素100%宽度
  3. 可以在上下左右四个方向上控制外边距margin和内边距padding

常见块级元素:<h1><h2><h3><h4><h5><h6><ol><ul><li><dl><dt><dd><div><form><fieldset><legend><article><header><main><footer><figure><blockquote><figcaption><hr><p><pre>

行内块级元素

既有行内元素特点,又有块级元素特点:

  1. 在父元素文档流中不会独占一行,左右两边可以有其它元素(行内元素特点)
  2. 可以控制高度height和宽度width(块级元素特点),默认高度和宽度分别为元素内容的高度和宽度(行内元素特点)
  3. 可以在上下左右四个方向上控制外边距margin和内边距padding(块级元素特点)

常见行内块级元素:<button><input><textarea><select>

相关推荐
脑袋大大的7 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0117 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui