按照显示元素分类:

  • 行内元素(lnline-element):元素的高度,行高,顶底边距由元素所包含的图片或文字所决定,不可改变;其宽度为内容文字或图片的宽度所决定,而其左右边距可人为设置。 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)(<a>、<span>、<strong>)
  • 块级元素(block-element):总是独占一行,元素占据的高度,顶底左右边距可以人为设置;其宽度缺省为所在容器的100%,可人为设置;(<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>)
  • 空元素(void-element):即没有内容的HTML元素,例如:br、meta、hr、link、input、img

按照元素是否可替换分类:

  • 替换元素:浏览器根据其标签的元素与属性来判断显示具体的内容。

    比如:<input   type="text" />,这是一个文本输入框,换一个其他的时候,浏览器显示就不一样

    (X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。

  • 非替换元素: (X)HTML 的大多数元素是不可替换元素,他们将内容直接告诉浏览器,将其显示出来。

    比如<p>wanmei.com</p>

    浏览器将把这段内容直接显示出来。

  • 备注:行内替换元素的属性和行内块元素一致,竖直方向也能产生效果,几乎所有的可替换元素都是行内元素,例如<img>、<input>等等

css中元素的分类的更多相关文章

  1. css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0

    css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示:   ht ...

  2. CSS中元素水平居中和垂直居中的方法

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

  3. css中元素定位

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...

  4. CSS中元素的显示模式

     在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level).块级元素(block-level). 1,首先介绍什么是行内元素,什么又是块级元素? 1.1,行内元素就 ...

  5. css中元素的auto属性值是什么意思,比如margin:0 auto表示什么?

    auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...

  6. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

  7. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  8. css中元素的位置

    一.display 1.display:none 隐藏标签 2.display:inline 将块级标签改为内联标签 3.display:block 将内联标签改为块级标签 4.display:inl ...

  9. CSS中元素各种居中方法(思维导图)

    前言 用思维导图的方式简单总结一下各种元素的居中方法,如下图: 补充一下: table自带功能 100% 高度的 afrer before 加上 inline block优化 div 装成 table ...

随机推荐

  1. Eclipse导出可运行的jar包并运行

    https://blog.csdn.net/kpchen_0508/article/details/49275407 程序运行的第二种方式:

  2. 乘风破浪:LeetCode真题_021_Merge Two Sorted Lists

    乘风破浪:LeetCode真题_021_Merge Two Sorted Lists 一.前言 关于链表的合并操作我们是非常熟悉的了,下面我们再温故一下将两个有序链表合并成一个的过程,这是基本功. 二 ...

  3. OC基础数据类型-NSValue

    1.NSValue:将指针等复杂的类型存储为对象 struct sct { int a; int b; }sctt; NSValue * value = [[NSValue alloc] initWi ...

  4. Django的模版引擎与模版使用

    Django的模版引擎与模版使用 模版引擎是模版响应的后端.模版指的是HTML.css,js等相关的文件.模版引擎是将这些表示层文件与数据相整合在一起,然后将整合后的数据给到响应类型判断采用一次性响应 ...

  5. G、CSL 的训练计划【BFS 贪心】(“新智认知”杯上海高校程序设计竞赛暨第十七届上海大学程序设计春季联赛)

    题目传送门:https://ac.nowcoder.com/acm/contest/551/G 链接:https://ac.nowcoder.com/acm/contest/551/G来源:牛客网 题 ...

  6. JNI由浅入深_7_c调用Java方法一

    1.在Java中声明方法 <span style="font-size:14px;">/** * javah -encoding utf-8 -jni com.exam ...

  7. CSU - 1581 Clock Pictures (KMP的变形题,难想到)

    题目链接: http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1581 题目意思:告诉你现在有两个钟,现在两个钟上面都有n个指针,告诉你指针的位置, ...

  8. Linux Shell常用技巧(九)

    十九.  和系统运行进程相关的Shell命令:       1.  进程监控命令(ps):    要对进程进行监测和控制,首先必须要了解当前进程的情况,也就是需要查看当前进程,而ps命令就是最基本同时 ...

  9. 闲话缓存:ZFS 读缓存深入研究-ARC(二)

    Solaris ZFS ARC的改动(相对于IBM ARC) 如我前面所说,ZFS实现的ARC和IBM提出的ARC淘汰算法并不是完全一致的.在某些方面,它做了一些扩展: ·         ZFS A ...

  10. What to do next to activate this settings for already existing users

    Link: http://sharepoint.stackexchange.com/questions/89284/sharepoint-2013-mysite-increase-quota Cent ...