网站首页 > 知识剖析 正文
块级元素:使用时,会自动换行的元素,可以包含行内元素和其他块级元素,可以设置宽,高,上下左右边距,默认 css 属性 display 的值为 block
- 块级元素常用的有哪些
- div // 块, 经常用来布局的块,类似箱子
- h1-h6 // 标题,肯定是会换行的啦
- p // 段落,我们写文章,段落也是换行处理的
- ul,ol,li // 列表,总不希望你写的列表,表格还跟其他东西掺杂一起吧,
- from // 表单,输入框总希望能够单独是一块独立的
- table // 表格,表格要整洁,总希望独立出来
- hr // 水平分割线,既然要分割,那也是要换行处理吧
- pre // 预格式化文本,代码按照我们手动编排好的顺序输出,你总不希望他还不给你行吧,不然就没意义了
- footer // 段尾,类似写作文结尾,都是另起一行
- article // 文章内容,看书的时候,文章内容都会在合适的位置给换行处理
- canvas // 绘制图形
- address // 地址
行内元素:不会自动换行,不可以设置宽高,只能设置左右边距,默认 css 属性 display 的值为 inline
- 块级元素常用的有哪些?
- b // 加粗
- big // 定义大字号
- i //斜体
- small // 小号文本
- abbr // 定义缩写,有些国际词语是有缩写的
- acronym // 定义只取首字母的缩写
- cite // 引用,文章内容的某一句话可能是引用其他名人说的
- code // 定义计算机代码
- dfn // 定义一个定义项目
- em // 定义强调的本文
- kbd // 定义键盘文本
- strong // 定义重要的文本
- samp // 定义样本文本。
- var // 定义变量
- a // 锚点,内容里经常会有几个关键词,可以点击过去查阅更多详细信息
- bdo
- br // 换行
- object // 内嵌对象
- q // 短的引用
- script
- span // 普通文档的节
- sub // 定义下标文本
- sup // 定义上标文本
- button // 按钮,
- input // 控件
- label // input 元素定义标注
- select // 定义选择列表,看起来很多,实际上占位就我们选择的那一个
- textarea // 定义一个多行的文本输入控件
行内块级元素,拥有行内元素的特性,不换行,也拥有块级元素的特性:既可以设置宽高也可以设置上下左右边距,默认 css 属性 display 的值为 inline-block
常见行内块级元素:
- img // 图片
- video // 视频
- audio // 音频
- map // 图像映射
块级元素和行内元素如何转换
- 块级元素变成行内元素
display: inline;
- 行内元素变成块级元素
display: block;
- 块级元素、行内元素变成行内块元素
display: inline-block;
其他
- a 标签只允许嵌套非 a 标签的 inline 类型元素。
- 这么多,不要为难自己死记硬背,记住常用的,用常识去记住就可以啦,面试考你的时候,记不住的,用常识去推理,基本都正确。
- 上一篇: 前端面试题-CSS-可替换元素和非替换元素
- 下一篇: DOM 操作之DOM概念和获取元素
猜你喜欢
- 2024-11-23 Python的selenium实现等待某个元素加载完成后返回结果
- 2024-11-23 DOM 操作之DOM概念和获取元素
- 2024-11-23 前端面试题-CSS-可替换元素和非替换元素
- 2024-11-23 小白总结:前端HTML基础知识点(1)——元素总结
- 2024-11-23 HTML Video 元素在 Vue 中消失的 muted 属性
- 2024-11-23 用CSS 实现元素垂直居中,有哪些好的方案?
- 2024-11-23 JavaScript知识点总结(7)
- 2024-11-23 Java 0基础入门 (Html表单、表单元素)
- 2024-11-23 《css大法》之使用伪元素实现超实用的图标库
- 2024-11-23 聊聊 CSS 隐藏元素的 10 种实用方法
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)