HTML文档由各种元素组成。比如,p、table、span等等。每个元素都会对文档的表现有所影响。CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容。

元素可以根据它的创建方式分为两种:替换元素和非替换元素。创建方式会对盒模型的表现有所影响,后续的笔记中会看到。

  • 替换元素:这种元素的内容部分并非由文档直接显示,而是用其他内容来替换。最常见的替换元素img,它是由文档本身之外的一个图片文件来替换的。input也是替换元素,是根据类型的值来决定内容是什么,有时内容被替换成单选钮,有时是文本输入框。
  • 非替换元素:大部分HTML元素都是非替换元素,内容由浏览器在元素本身生成的框中显示。比如,span。

根据元素的显示角色分为两种:块级元素和行内元素。

  • 块级元素:会生成一个元素框,并填充其父级元素的内容区,旁边不能有其他元素。当然这是在默认情况下,有浮动定位设置另说。其中,列表项有个特殊的表现,没错,就是会有标记符,这个标记符会“关联”到元素框
  • 行内元素:在文本行内生成元素框,不会打断这行文本。

  在HTML中,行内元素可以继承块元素,反之不允许,违反了HTML层次结构的要求。不过CSS没有这种限制。

下面这一行代码中,em可以继承p。

<p>这是一个段落中的<em>重点内容</em></p>

但是反过来就不合理,

<em>这是一个段落中的<p>重点内容</p></em>

css可以改变元素的角色,但是还是建议遵守文档层次结构要求。

 

CSS权威指南学习笔记 —— HTML元素分类的更多相关文章

  1. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  2. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

  3. CSS权威指南学习笔记 —— 初步认识CSS

    层叠样式表(Cascading Style Sheets,CSS)可以影响文档的表现.CSS是依附于文档的,如果不存在某种文档,CSS基本上是没有用的. 为什么会有CSS 在web早期(1990-19 ...

  4. css权威指南学习笔记

    2016-08-03 1,继承 一般大多数框模型属性都是不能继承的.如:padding .margin .border .background 都不能继承. 继承值,完全没有特殊性.(就是优先级最低) ...

  5. css权威指南学习笔记--列表与生成内容

    列表属性 1.list-style-type:css2多于css2.1 2.list-style-image:有继承,子级列表会继承该图像 3.list-style-position:inside|o ...

  6. HTTP权威指南-学习笔记

    目录 HTTP权威指南-学习笔记 HTTP: Web的基础 URL与资源 HTTP报文 连接管理 HTTP结构 Web服务器 代理 缓存 集成点: 网关,隧道及中继 Web机器人 识别,认证与安全 客 ...

  7. JavaScript 权威指南-学习笔记(一)

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  8. css权威指南读书笔记

    今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...

  9. Hadoop权威指南学习笔记二

    MapReduce简单介绍 声明:本文是本人基于Hadoop权威指南学习的一些个人理解和笔记,仅供学习參考,有什么不到之处还望指出,一起学习一起进步. 转载请注明:http://blog.csdn.n ...

随机推荐

  1. 匿名方法和Lambda表达式

    匿名方法本质上是一传递给委托的代码块,是使用委托的另一种方法. 规则: 1.匿名方法中不能使用跳转语句跳至次匿名方法的外部,反之亦然:匿名方法外部的跳转语句也不能跳转到匿名方法的内部: 2.在匿名方法 ...

  2. OpenStack high-level Functionsenabled

  3. java中如何将char数组转化为String

    1.直接在构造String时建立. char data[] = {'s', 'g', 'k'}; String str = new String(data); 2.String有方法可以直接转换. S ...

  4. 委托-异步调用-泛型委托-匿名方法-Lambda表达式-事件【转】

    1. 委托 From: http://www.cnblogs.com/daxnet/archive/2008/11/08/1687014.html 类是对象的抽象,而委托则可以看成是函数的抽象.一个委 ...

  5. zabbix client安装配置执行

    1 创建zabbix 用户 groupadd zabbix; useradd -g zabbix zabbix; passwd zabbix; 两次输入password 2 下载获得zabbix的包, ...

  6. Yii2权威指南中文版及众包翻译平台

    Yii2在今年4月份公布了beta版本号,预计下半年会推出正式版本号(可用于生产环境). Yii2使用了新的PHP语法特性(PHP5.4+)并集成了大量新的编程最佳实践, 如命名空间.响应式界面组件库 ...

  7. 【ThinkPHP学习】ThinkPHP自己主动转义存储富文本编辑器内容导致读取出错

    RT. ThinkPHP的conf文件里的Convention.php有一个配置选项 'DEFAULT_FILTER' => 'htmlspecialchars', // 默认參数过滤方法 用于 ...

  8. 【泛化物品】【HDU1712】【ACboy needs your help】

    ACboy needs your help Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  9. Java基础笔记-异常总结,包

    异常:是对问题的描述,将问题进行对象封装, 异常的体系: Throwable: 1.Error 2.Exception 1.RuntimeException 异常体系的特点: 异常体系中的所有类以及建 ...

  10. JSP简介

    论坛 博客 微论 问答 游戏厅 天涯客 读书 更多 手机 服务 登录 注册   聚焦 民生 文学 旅游 财经 汽车 IT数码 时尚 情感 娱乐 视频 更多 北京 上海 广东 更多 天涯部落> J ...