css中元素的分类
按照显示元素分类:
- 行内元素(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中元素的分类的更多相关文章
- css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0
css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示: ht ...
- CSS中元素水平居中和垂直居中的方法
#CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...
- css中元素定位
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...
- CSS中元素的显示模式
在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level).块级元素(block-level). 1,首先介绍什么是行内元素,什么又是块级元素? 1.1,行内元素就 ...
- css中元素的auto属性值是什么意思,比如margin:0 auto表示什么?
auto 你可以理解为一种 自动/自适应 的概念 比如 现在项目需要一个宽度为960px的整体布局居中 根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少 ...
- css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- css中元素的位置
一.display 1.display:none 隐藏标签 2.display:inline 将块级标签改为内联标签 3.display:block 将内联标签改为块级标签 4.display:inl ...
- CSS中元素各种居中方法(思维导图)
前言 用思维导图的方式简单总结一下各种元素的居中方法,如下图: 补充一下: table自带功能 100% 高度的 afrer before 加上 inline block优化 div 装成 table ...
随机推荐
- magento2常见的命令
常见的命令如下: php bin/magento list 查看所有命令列表 ----------------------------moudule相关的参数------------------ ...
- database design three form
https://www.cnblogs.com/linjiqin/archive/2012/04/01/2428695.html
- VS 2012 在 windows 8 中无法使用 Deubgger.Lunch() 对服务进行调试
找到了外文资料: Debugger.Launch() not displaying JIT debugger selection popup on Windows 8/8.1 If execu ...
- Attempt to load Oracle client libraries threw BadImageFormatException. This problem will occur when running in 64 bit mode with the 32 bit Oracle client components installed.
System.Data.OracleClient 已经过时了.微软不再支持它. 因此,我建议你为. NET 使用Oracle数据提供程序:ODP.Net. 你可以从以下位置下载: 版本:Release ...
- ECharts.js学习(三)交互组件
ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包含主标题和副标题. legend:图例组件,展现了不同系列的标记(symbol ...
- Id vs Instancetype
我写了一篇 Id vs Instancetype的文章,欢迎访问!
- manbook pro和inode联网
macbook pro可以通过usb以太网转换器来实现有线联网. 1.下载inode 7 2.在终端中输入:sudo /library/StartupItems/iNodeAuthService/iN ...
- 为什么 Category 不能增加成员变量-nonfragile
三.既然是 non-fragile ivars,为什么 Category 不能增加成员变量? 看过一些资料,理由并不是很让人信服.我觉得并不是做不到,只是现在没有做,现在不支持.我在 Opti ...
- 【jQuery】Deferred(延迟)对象
本文针对jQuery-todolist项目中使用到的Deferred(延迟)对象进行具体分析 $.Deferred() 是一个构造函数,用来返回一个链式实用对象方法来注册多个回调,并且调用回调队列,传 ...
- UVALive - 6837 Kruskal+一点性质(暴力枚举)
ICPC (Isles of Coral Park City) consist of several beautiful islands. The citizens requested constru ...