【前台进阶100天】Day05 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，br等；

B) 内联元素的体现形式是始终以行内一一进行显示；

C) 内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；

D)内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但是对于margin和padding个别属性值不生效;（margin上下属性不能正常显示）

a – 锚点 i – 斜体 em – 倾斜

span – 常用内联容器，定义文本内区块

strong – 粗体强调 b–加粗

3、内联块状元素

内联块状元素（inline-block）就是同时具有内联元素、块状元素的特点，<img>、<input>、<textarea></textarea>/<select></select>标签就是这种内联块状标签。

inline-block元素特点：

（1）和其余元素都在一行上；

（2）元素的高度、宽度、行高以及顶和底边距都能设置。

常见标签：img、input、textarea、select。

img – 图片 input – 输入框

textarea – 多行文本输入框

4、可变元素

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

注意：

img和input转换元素类型有些属性设置无效。

内联元素、内联块元素代码不在一行时，中间会有间隙，img是内联块元素，换行时中间会有3像素空隙。

三种元素类型可以互相转换，没有限制，但是一般不用内联块元素转内联元素，大部分都是内联元素、内联块元素转块元素，转内联块元素只有在垂直水平居中时用到。

二、元素类型的转换

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

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

image

常见属性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group/table

作用：块状元素和内联元素之间的转换。

说明：各属性值的作用

1.block块状显示：相似在元素后面增加换行符，也就是说其余元素不能在其后面并列显示。或者者就是让元素竖排显示。

当元素设置了float属性后，就相当于该元素具有块状元素显示的特点；可以加宽高。

2.inline内联显示：在元素后面删除换行符，多个元素可以在一行内并列显示。或者者就是让元素横排显示。

3.Inline-block行内块元素显示：元素的内容以块状显示，行内的其余元素显示在同一行。

（只有行内块这一个元素类型支持vertical-align属性）

img,input垂直对齐方式{vertical-align:top/bottom/middle;}

4.none 此元素不会被显示。隐藏且不占位

5.list-item:将元素转换成列表。li的默认类型。

注意：

1.大部分块元素display属性值默认为block，其中列表的默认值为list-item。

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

拓展：垂直水平居中的方法：

水平居中：text-align：center：（1）对文本有效；（2）对内联元素、内联块元素有效。

当前元素为有宽度的块元素时，可以用margin：0 auto；实现水平居中。

垂直居中：vertical-align：middle;只对内联块元素有效。

1.让一个元素实现垂直水平居中：

（1）给当前元素后面增加<span></span>空标签，代码不换行，必需写在一行上。

（2）给当前元素和span增加display:inline-block;转换为内联块元素。

（3）给span增加height属性，与父级同高；

（4）给当前元素和span增加vertical-align：middle；实现垂直居中。

（5）给父元素增加text-align：center;实现水平居中。

2.让一个图片实现垂直水平居中：

（1）给当前元素后面增加<span></span>空标签，代码不换行，必需写在一行上。

（2）给span增加display:inline-block;转换为内联块元素。（图片本身就是内联块元素，不需要再转换）

（3）给span增加height属性，与父级同高；

（4）给当前元素和span增加vertical-align：middle；实现垂直居中。

（5）给父元素增加text-align：center;实现水平居中。

3.用定位让元素或者图片实现垂直水平居中：

（1）给父元素定位：position:relative;

（2）给子元素加绝对定位：position：absolute;

（3）给子元素增加坐标属性：top:0;left:0;right:0;bottom:0;margin:auto;

（相当于给元素提供了四个参照范围）

4.让一个元素在当前浏览器窗口垂直水平居中：

第一种方法：（1）给元素增加固定定位：position:fixed;

（2）给元素增加坐标属性：top:0;left:0;right:0;bottom:0;margin:auto;

第二种方法：（1）给元素增加固定定位position：fixed;

（2）top:50%;left:50%;

（3）margin:-元素高度/2px 0 0 -元素宽度/2px；

（中心点的移动：从左上移到中心点）

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

Inline-block行内块元素显示：元素的内容以块状显示，行内的其余元素显示在同一行。

（只有这一个元素类型支持vertical-align属性）img,input

垂直对齐方式{vertical-align:top/bottom/middle;}

常见应用案例：不同大小的图片在div当中垂直居中

拓展：置换和非置换元素的概念

1、引题

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

2、置换元素与非置换元素

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

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

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

b) 不可替换元素（非置换元素）：(x)html 的大多数元素是不可替换元素，即其内容直接体现给客户端（如浏览器）。