CSS-元素类型属性

YL0301
181 阅读4分钟

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、总结：

image.png

二、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、隐藏元素（重点）

隐藏元素存在多种方法，下面来分别讲解

image.png

（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则即为行内块元素

页面中的除了置换元素之外都是非置换元素

avatar
文章
阅读
粉丝