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 ...
随机推荐
- 【心得体会】我考完MOS我明白了…
[心得体会]我考完MOS我明白了… 原创 2017-11-10 MSP-李桑榆 MSPrecious成长荟 MOS备考 这篇文章写给还没有考或者准备考MOS的同学 网上有很多介绍MOS考试的 http ...
- 初始python(三)
1. 循环 if, while, forbreak : 结束整个循环continue :跳出当前这次循环,但不结束整个循环else :结束整个循环后才执行,不能与break合用,但可以与continu ...
- 在Activities之间导航
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="ht ...
- C语言程序员必读的5本书
本文由 伯乐在线 - programmer_lin 翻译自 fromdev.欢迎加入技术翻译小组.转载请参见文章末尾处的要求. 你正计划着通过看书来学习C语言吗?“书籍是人类最忠诚的朋友“.海明威一定 ...
- 在ubuntu上使用QQ的经历
pidgin-lwqq: 项目首页:https://github.com/xiehuc/pidgin-lwqq sudo add-apt-repository ppa:lainme/pidgin-lw ...
- Linux中从oracle官网下载jdk文件不是标准的gzip格式文件问题
首先你要知道,在linux系统中,文件类型跟后缀名无关,后缀名只是为了方便识别,所以你下载的压缩包可能是tar.gz格式的,也有可能是tar.bz2或tar.xz格式,因为可能别人压缩之后不小心改错了 ...
- 【jQuery】todolist
1 2 3 用npm命令下载依赖,优点:不用去网上找链接,代码都一样 4.jQuery自动下载进node_modules文件下 npm install jquery --save 这句命令的意思是保 ...
- [整理记录备忘] Docker相关
docker安装 linux上安装Docker(非常简单的安装方法) https://blog.csdn.net/qq_36892341/article/details/73918672 修改dock ...
- BigDecimal.setScale用法总结
1. BigDecimal num1 = new BigDecimal(2.225667);//这种写法不允许,会造成精度损失 2. BigDecimal num2 = new BigDecimal( ...
- CSS3 - 新单位vw、vh、vmin、vmax使用详解(附样例)
像 px.em 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位.CSS3 又引入了新单位:vw.vh.vmin.vmax.下面对它们做个详细介绍. 一.基本说明 1,vw.vh.vmi ...