CSS元素类型

CSS元素类型

学习目标

1. 元素类型分类依据和元素类型分类
2. 元素类型的转换
3. 元素垂直居中
4. 置换和非置换元素的概念和应用案例

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

根据css显示分类，XHTML元素被分为
三种类型：块状元素，内联元素，行内块元素、可变元素
1、块状元素（block element）

• A）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包块div，dl，dt，dd,ol,ul,fieldest,(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
作用：块状元素和内联元素之间的转换。
说明：各属性值的作用
2）block块状显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。或者就是让元素竖排显示。
3）Inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示。或者就是让元素横排显示。
4）当元素设置了float属性后，就相当于该元素具备了块状元素显示的特点；
5）Inline-block行内块状元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。
Img，input
6）none此元素不会被显示。
7）List-item：将元素转换成列表。Li的默认类型

• A、大部分块元素display属性值默认为block，其中列表的默认值为list-item。
• B、大部分内联元素的display属性值默认为inline，其中img，input,默认为inline-block。

三、元素垂直居中

条件：

1. 必须给容器（父元素）加上text-align：center；
2. 必须给当前元素转成行内块元素（display：inline-block；）再给当前元素加上：vertical-align：middle；
3. 在当前元素的后面（没用回车）加上同级元素span；并对span进行vertical-align：middle；width：0；height：100%；display：inline-block等设置；垂直对齐方式{vertical-align：top/bottom/middle；}

语法：选择符{vertical-align：middle/top/bottom；}
常见应用案例：不同大小的图片在div当中垂直居中

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

扩展知识点：html中的非置换元素与置换元素
网页中有类特殊的元素：如img/input/select/textarea/button等，他们被称为可置换元素。他们区别一般inline元素这些元素拥有内在尺寸，他们可以设置width/height属性。他们的性质同设置了display：inline-block的元素一致。
置换元素，W3C中给出了定义：置换元素主要是指img，input，textarea，select等这类默认就有css格式化外表范围的元素。进而可知，非置换元素就是除了img，input,textarea,select等置换元素以外的元素。

a)置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。
例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看（x）html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。Html中的<img>、<input>、<textarea>、<select>都是置换元素。
置换元素在显示中生成了框，这也就是有的内联元素能够设置宽高的原因。

b)非置换元素：html的大多数元素是非置换元素，即其内容直接表现给用户端。