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标签中 ...
随机推荐
- 事后调试之MiniDump转储
程序发布后,针对在用户使用过程中出现的一些问题进行调试,这个过程可以称为是事后调试.在程序Crash时转储MiniDump文件供软件开发工程师分析是一种比较常用的方法.下面介绍两种常用的在程序Cras ...
- python日期时间处理
time模块 #-*- coding: utf-8 -*- """ #获取当前时间的时间戳(单位秒) time.time() #推迟指定秒数后再运行 time.sleep ...
- codeforces 305E Playing with String
刚开始你只有一个字符串每次能选择一个有的字符串s,找到i,满足s[i - 1] = s[i + 1],将其分裂成3 个字符串s[1 ·· i - 1]; s[i]; s[i + 1 ·· |s|] ...
- iOS自定义的UISwitch按钮
UISwitch开关控件 开关代替了点选框.开关是到目前为止用起来最简单的控件,不过仍然可以作一定程度的定制化. 一.创建 UISwitch* mySwitch = [[ UISwitchalloc] ...
- 如何改变dreamweaver的编码方式
- 转:Hprose for php(一)——快速入门
文章来自于:http://blog.csdn.net/half1/article/details/21095665 本文参考了Hprose官方的用户手册,Hprose官网:http://www.hpr ...
- 转载:关于 Token,你应该知道的十件事
关于 Token,你应该知道的十件事 原文地址:http://alvinzhu.me/blog/2014/08/26/10-things-you-should-know-about-tokens/ 原 ...
- [转]Windows平台下安装Hadoop
1.安装JDK1.6或更高版本 官网下载JDK,安装时注意,最好不要安装到带有空格的路径名下,例如:Programe Files,否则在配置Hadoop的配置文件时会找不到JDK(按相关说法,配置文件 ...
- UOJ 216 Jakarta Skyscrapers
http://uoj.ac/problem/216 题意:给定A,B,C,如果集合中有数i,j(i>j),那么集合就会增加i-j这个数,问有没有在初始集合为{A,B}400步内生成C的方案. 思 ...
- [Android] hid设备按键流程简述
hexdump /dev/hidraw0就能看到usbhid设备传输过来的裸流 如:按下Input键 003ae60 0000 0096 8000 006b 0000 0000 0000 0000 * ...