CSS元素分类及区别
元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而<strong>和<p>也不一样。在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一。
- 替换和不可替换元素
从元素本身的特点来讲,可以分为替换和不可替换元素。
a) 替换元素
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如:
<img src=”cat.jpg” />
<input type="submit" name="Submit" value="提交" />
浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
b) 不可替换元素
(X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。例如:
<p>段落的内容</p>
段落<p>是一个不可替换元素,文字“段落的内容”全被显示。
- 显示元素
除了可替换元素和不可替换元素的分类方式外,CSS 2.1中元素还有另外的分类方式:块级元素(block-level)和行内元素(inline-level,也译作“内联”元素)。
a) 块级元素 Block element
在视觉上被格式化为块的元素,最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的。
典型的块级元素有:<div>(常用块级容易,也是css layout的主要标签)、<p>、<h1>到<h6>,等等。
通过CSS设定了浮动(float属性,可向左浮动或向右浮动)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。
但是浮动元素比较特殊,由于浮动,其旁边可能会有其他元素的存在。而“list-item”(列表项<li>),会在其前面生成圆点符号,或者数字序号。
块级元素,高度和宽度是可以设置的,块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。
b) 行内元素 Inline element
通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度。行内元素不形成新内容块,即在其左右可以有其他元素,例如<a>、<span>(常用内联容器,定义文本内区块)、<strong>等,都是典型的行内级元素。
display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素,例如<img>、<input>等等。
不过元素的类型也不是固定的,通过设定CSS 的display属性,可以使行内元素变为块级元素,也可以让块级元素变为行内元素。
在《CSS权威指南》这样定义到:"任何不是块级元素的可见元素都是内联元素,其表现的特性是"行布局"形式。这其中一点记住很关键,“内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度”。因为在你设置宽度高度大半天后没反应才发现,原来这只是个内联元素。另外对行元素设置margin /padding的top和bottom属性也是无效的。
CSS元素分类及区别的更多相关文章
- Web前端开发基础 第四课(CSS元素分类)
元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...
- HTML的标签元素分类的区别
HTML ,即Hyper Text Markup Language 超文本标记语言: 文本:纯字符,如window中的txt文本 超文本:在纯文本中嵌入样式,图片,音频,视频,链接等内容 HTML的基 ...
- CSS元素分类
快级元素:在html中<div>,<p>,<h1>,<form>,<ul>,<li>就是块级元素. ...
- CSS——元素分类
1.标签元素被分为三大类:块状元素.内联元素和内联块元素. (1)常见块状元素有:<div>.<p>.<h1>...<h6>.<ol>.&l ...
- CSS基础学习-7.CSS元素分类
- CSS学习笔记之元素分类
在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div> ...
- 深入css布局篇(1) — 盒模型 & 元素分类
深入css布局(1)-- 盒模型 & 元素分类 " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...
- CSS中的元素分类
CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...
- css的书写位置+元素分类
1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...
随机推荐
- EF学习系列
http://www.cnblogs.com/Wayou/archive/2012/09/20/EF_CodeFirst.html http://kb.cnblogs.com/zt/ef/#
- js关于DOM和BOM
关于BOM和DOM BOM 下面一幅图很好的说明了BOM和DOM的关系 BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及 ...
- php的session实现
对于两次http请求,如果第一次http请求的重要数据要被第二次请求获取,办法是将第一次http请求数据保存下来,保存的办法很多,大体上有使用数据库,缓存,文件等等,那么php中的session实现实 ...
- phonegap学习入门
phonegap 开发入门 PhoneGap官方网站上有详细的入门示例教程,这里,我针对使用PhoneGap进行Android移动应用的开发对其官网的Get Started进行一些介绍.补充. Ste ...
- web ajax跨域问题解决方案
jsonpHandler({ "code": "aaa", "price": 1780, "tickets": 5 ...
- django 序列化json问题
from django.core import serializers @login_required def ajax_get_data(request): json_data = serializ ...
- testservice小项目总结
关于自做小项目testservice的总结: 1.Activity与Service的绑定及之间的通信: 1)关于Activity和Service的生命周期的理解: 2)bindService方法中Se ...
- easyui combo+pagination 图标选择器
从数据库读取分页显示 $(function () { initTable(1, 180); $('#cc').combo({ editable: false, panelWidth: 'auto', ...
- Java中String、StringBuffer、StringBuilder和toString的介绍
作为一个刚接触java的小白,觉得字符串是个比较大的知识点,所以我把自己整理的一点笔记写成随笔,与园友一起分享,也请园友多多指出意见. 一.String类 1.字符串长度——length() Stri ...
- SpringMVC入门1
SpringMVC核心类与接口 •DispatcherServlet 前端控制器(也称总控制器),把请求给转发到具体的控制类 •HandlerMapping 映射处理器,负责映射中央处理器转发给con ...