CSS元素分类

作者 : 开心源码 本文共772个字,预计阅读时间需要2分钟 发布时间: 2022-05-13 共253人阅读
  • 块状元素
  • 行内元素
  • 行内快元素

元素特点:

块状元素

  • 在页面中以矩形区域显示。
  • 自上而下排列,独占一行
  • 可以直接增加宽高
  • 一般情况下,作为其余元素或者内容的容器

行内元素

  • 在页面中最小单位也是矩形。
  • 在一行内一一排列。
  • 不可以直接增加宽高,大小是由内容撑开的。
  • 内联元素也符合盒模型的规则,但是个别属性会出现问题(padding-top/bottom margin-top/bottom)
  • 内联元素在一行内排列的时候,之间有间距

行内快元素

  • 可以设置宽高。
  • 默认情况下,在一行内一一显示,之间有间距。
  • 当前元素的display值为inline-block时,能支持vertical-align属性。

常用元素:

块状元素:

标签作用
div最常用的块级元素
dl和dt-dd 搭配使用的块级元素
form交互表单
h1 -h6标题
hr水平分隔线
ol有序列表
p段落
ul无序列表
li列表标签
fieldset表单字段集
colgroup-co表单列分组元素
table-tr-td表格及行-单元格

行内元素:

标签作用
a超链接(锚点)
b粗体
br换行
i斜体
em强调
img图片
input输入框
label表单标签
span常用内联容器,定义文本内区块
strong粗体强调
sub下标
sup上标
textarea多行文本输入框
u下划线
select项目选择

行内块元素:

标签作用
input表单标签
img图片标签

元素类型转换:

display属性
作用:检索或者者设置元素生成的盒模型类型。

常用属性值

  • display:block;
    作用:将元素转成块状元素,拥有块状元素特点。
    补充:大部分块状元素,默认的display的值都是block;

  • display:inline;
    作用:将元素转成内联元素,拥有内联元素的特点。
    补充:大部分内联元素,默认的display的值inline;

  • display:none;
    作用:将当前隐藏,并不占据空间。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS元素分类

发表回复