CSS-元素类型属性
一、元素类型及分类
1、分类:行内元素、块级元素、行内块元素
2、元素类型理解
(1)块级元素
含义:默认的是纵向排列,独占一整行,能设置宽度、高度
作用:用于区块划分
例如:div p ul li ol li dl dt dd h1-h6,form,以及一系列H5新增的语义化标签
(2)行内元素
含义:默认横向显示,不能实现宽度高度
作用:用于独立文本的修饰
例如:a b em i span strong s del u font sup sub mark
(3)行内块元素
含义:既遵循行内元素的特点,也遵循块级元素的特点,默认横向显示,且能实现宽度和高度
例如:input textarea select img
3、总结:
二、display属性及取值
浏览器中规定了一个display属性,三种元素显示形式都是被display这个属性控制,不同的取值代表不同的元素类型
1、块级元素
(1)元素显示:display:block;
2、行内元素
(1)元素显示:display:inline;
3、行内块元素
(1)元素显示:display:inline-block;
4、display取值
block/inline/inline-block(img,input,textarea,select)/
none/list-item(li)/table-row(tr)/table(table)/table-cell(td)/
table-header-group(thead)/table-footer-group(tfoot)/
table-row-group(tbody),flex,inline-flex; 等等......
5、注意事项:
1)img 的 display:inline------是一个特殊的行内块元素
2)li 的 display:list-item----是一个特殊的块级元素
3)table 的 display:table-----是一个特殊的块级元素
4)tr 的 display:table-row----是一个特殊的块级元素
5)td 的 display:table-cell---是一个特殊的块级元素
6、隐藏元素(重点)
隐藏元素存在多种方法,下面来分别讲解
(1)display:none;(常用)
隐藏元素且不占位置,后面元素会上去补位置
(2)visibility:hidden;
隐藏的元素占页面空间,后面的元素没有上去补位置
(3)设置宽高为0
实现:
width:0px; height:0px;
如果里面出现文本的话,还需配合 font-size:0px;---才会将文本也隐藏掉
直接隐藏元素,不占页面空间,后面元素上去补位置
(4)设置透明度
实现:
opacity:0;
让一个元素变透明,可以隐藏元素,且占页面空间,后面的元素没有上去补位置
(5)使用缩放
实现:
transform:scale(0);
可以隐藏元素,且占页面空间,后面的元素没有上去补位置
7、隐藏元素应用:主要应用于二级菜单中,让二级菜单中的元素隐藏,在滑过一级菜单时,使一级菜单下的二级菜单显示出来
三、元素类型转换
1、元素类型切换:直接使用 display 进行设置即可,如:块级元素切换行内元素,则给块级元素添加 display:inline;
2、注意事项
(1)切换时,遵循一个元素类型切换到另一个元素类型是允许的,如果切换成本类型是没有必要的
(2)使用盒子模型的时候,对于间距(内边距和外边距在使用的时候)来讲,块级元素上右下左都能实现效果,且撑开距离,但是在行内元素使用的时候,则不能实现上下,只能实现左右的间距
a标签转成块级元素时会被撑开,原因?(通常在做跳转按钮时扩大点击范围所用到)
原因1:块级元素没有设置宽度的情况下,则会继承父元素的一整行
原因2:line-height具有继承性,因此高度占了父元素的高度
四、行内块元素垂直居中
1、现象:行内块元素下面会有约3像素留白
2、原因:img 是行内块元素,默认的对其方式就是以英文文本的基线形式进行对其,所以下面有三个像素的留白
3、取消间距的方法
(1)调整行内块元素的垂直对其方式
使用vertical-align属性:控制一行内的内联元素的垂直对齐方式
属性取值:
baseline--------基线
top-------------顶线
bottom----------底线
middle----------中线
若要取消间距,取值不为baseline即可,在实际开发中应用的middle比较多
(2)转换成块元素
(1)display:block;
(2)float取值不为none;
(3)position:fixed/absolute;
五、置换元素非置换元素
理解:
一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,这些元素往往没有实际的内容,即是一个空元素,置换元素就是浏览器根据元素的属性和属性值,来决定元素的具体显示内容。大部分的置换元素的元素类型为inline-block,被称之为置换元素;html中的input,img,textarea,select则即为行内块元素
页面中的除了置换元素之外都是非置换元素