5:CSS元素类型

学习目标

  • 1、元素类型分类依据和元素类型分类
  • 2、元素类型的转换
  • 3、inline-block元素类型的应用
  • 4、置换和非置换元素的概念和应用案例

一、元素类型分类依据和元素类型分类

根据css显示分类,XHTML元素被分为
三种类型:块状元素,内联元素,行内块元素、可变元素
1.块状元素(block element)

A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等;

B)默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列。

C)块状元素都可以定义自己的宽度和高度。

D)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子

2.内联元素(inline element)(或是行内元素)

A) 常见的内联元素如:a,span,i,em,strong,b等
B) 内联元素的表现形式是始终以行内逐个进行显示;
C) 内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;
D)内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性值不能正确显示;
a - 锚点 i - 斜体 em - 倾斜
span - 常用内联容器,定义文本内区块
strong - 粗体强调 b--加粗

3.内联块状元素

内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,<img>、<input>标签就是这种内联块状标签。
inline-block元素特点:
A、和其他元素都在一行上;
B、元素的高度、宽度、行高以及顶和底边距都可设置

常见标签:img input textarea
img - 图片 input - 输入框
textarea - 多行文本输入框

4、可变元素

需要根据上下文关系确定该元素是块元素或者内联元素。

二、元素类型的转换

盒子模型可通过display属性来改变默认的显示类型

1)display属性与属性值 (18个属性值)

属性值:block/inline/inline-block/none/list-item/table-header-group/table-footer-group

作用:块状元素和内联元素之间的转换。
说明:各属性值的作用

1)Block块状显示:类似在元素后面添加换行符,也就是说其他元素不能在其后面并列显示。或者就是让元素竖排显示。
2)inline内联显示:在元素后面删除换行符,多个元素可以在一行内并列显示。或者就是让元素横排显示。
3)当元素设置了float属性后,就相当于该元素具备块状元素显示的特点;

4)Inline-block行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行。
(只有这一个元素类型支持vertical-align属性)img,input
垂直对齐方式{vertical-align:top/bottom/middle;}
5)none 此元素不会被显示。
6)list-item:将元素转换成列表。li的默认类型。

7)

A、大部分块元素display属性值默认为block,其中列表的默认值为list-item。

B、大部分内联元素的display属性值默认为inline,其中img,input,默认为inline-block。

三、inline-block元素类型的应用

Inline-block行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行。
(只有这一个元素类型支持vertical-align属性)img,input
垂直对齐方式{vertical-align:top/bottom/middle;}
常见应用案例:不同大小的图片在div当中垂直居中

四、置换和非置换元素的概念

拓展:

一、引题

在之前的浅谈HTML中的块级元素和内联元素中了解到了内联元素一般是不能设置宽高的,但是也有特殊。比如img是内联元素,但可以设置宽高,这肯定让不少人迷惑。这样我们就要引入HTML中置换元素的概念(非置换元素在w3c中没有给出明确的解释,姑且我们就把除置换元素外的元素当作非置换元素吧)。

二、置换元素与非置换元素

a) 置换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如:浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;<input>标签的type属性来决定是显示输入框,还是单选按钮等。 (x)html中的<img>、<input>、<textarea>、<select>都是置换元素。这些元素往往没有实际的内容,即是一个空元素。

置换元素在其显示中生成了框,这也就是有的内联元素(img,input)能够设置宽高的原因。

b) 不可替换元素(非置换元素):(x)html 的大多数元素是不可替换元素,即其内容直接表现给用户端(如浏览器)。

5:CSS元素类型的更多相关文章

  1. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  2. CSS元素类型

    前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素.行内元素和行内块元素.本文总结这三种显示方式的特征和区别. 1 写在前面 最近在整 ...

  3. [浅谈CSS核心概念] CSS元素类型和盒模型

    元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...

  4. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  5. CSS样式类型

    CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式 (一)内联式样式 内联式css样式表就是把css代码直接写在现有 ...

  6. HTML基础--元素类型及类型转换

    元素类型及类型转换 一.XHTML元素分类 根据css显示分类,XHTML元素被分为三种类型:块状元素,内联元素,可变元素 1.块状元素(block element) 1)块状元素在网页中就是以块的形 ...

  7. CSS选择器类型总结

    CSS选择器类型总结 1.通用选择器 一般用于给所有元素做一些通用性的样式设置,比如清除内边距.外边距等.但是效率比较低,尽量不要使用. * { margin: 0; padding: 0; } 2. ...

  8. js:给定两个数组,如何判断他们的相对应下标的元素类型是一样的

    题目: 给Array对象原型上添加一个sameStructureAs方法,该方法接收一个任意类型的参数,要求返回当前数组与传入参数数组(假定是)相对应下标的元素类型是否一致. 假设已经写好了Array ...

  9. MyBatis 元素类型为 "configuration" 的内容必须匹配 ".....

    修改MyBatis配置文件时,添加typeAliases节点,报了一个BuilderException: org.apache.ibatis.exceptions.PersistenceExcepti ...

随机推荐

  1. 推荐10本C#编程的最佳书籍

    C#和.NET非常受全球开发人员的追捧和热爱.书籍是人类进步的阶梯.想要学习C# ?这里有10本学习C#编程的最好书籍在等着你哦. 1.<C# 5.0 in a Nutshell>:权威的 ...

  2. 微软BI SSRS 2012 Metro UI Win 8 风格的报表课程案例全展示

    开篇介绍 微软BI SSRS 2012 Metro UI 高端报表视频教程 (http://www.hellobi.com/course/15)课程从2014年6月开始准备,于2014年9月在 天善B ...

  3. JVM的7种垃圾收集器:主要特点 应用场景 设置参数 基本运行原理

    原文地址:https://blog.csdn.net/tjiyu/article/details/53983650 下面先来了解HotSpot虚拟机中的7种垃圾收集器:Serial.ParNew.Pa ...

  4. funny

    var life = { "work_hard","have_fun","make_history" };

  5. 云主机IO性能测试

    1:数据读取速度 ucloud云主机最低224.8MB/S,最高508.8MB/S,平均410.7MB/S     阿里云主机最低17.4MB/S, 最高189.6MB/S,平均170.6MB/S   ...

  6. 2.翻译系列:为EF Code-First设置开发环境(EF 6 Code-First系列)

    原文链接:http://www.entityframeworktutorial.net/code-first/setup-entity-framework-code-first-environment ...

  7. SNF快速开发平台MVC-审核流,审核完成后会给下一个审核人发邮件,下一个审核人可以不登录系统,在邮件里进行审核处理

    审核流设计和使用参考以下资料: 审核流设计 http://www.cnblogs.com/spring_wang/p/4874531.html 审核流实例 http://www.cnblogs.com ...

  8. 0x02 Spring Cloud 学习文档

    每个Spring项目都有自己的; 它详细解释了如何使用项目功能以及使用它们可以实现的功能. Spring Cloud 版本 参考文档 API文档 Finchley SR2 CURRENT GA Ref ...

  9. Atitit 纯java项目的提升进度大法---通用json dsl接口

    Atitit 纯java项目的提升进度大法---通用json dsl接口 1. Json dsl接口1 1.1. Url:  http://aaa.com/api_jsondsl?dsl={}1 1. ...

  10. android sdk manager 代理设置

    启动 Android SDK Manager ,打开主界面,依次选择「Tools」.「Options...」,弹出『Android SDK Manager - Settings』窗口: 在『Andro ...