前端笔记----类型转换display

Posted 2020-10-09 天宇之游

 

display属性用来在行内元素，块元素，行内块元素之间进行转化。

常用的属性有：

1、none ：元素隐藏且不占位置，相当于不存在，一般用在动态展示效果；
2、block ：元素以块元素显示，有些行内元素需要使其具备块元素的特征，需要转化；
3、inline ：元素以行内元素显示，块元素有时需要具备行内元素的特征；
4、inline-block ：元素以行内块元素显示，同时具备行内元素和行内块元素的特征，支持所有的属性；

一、行内元素：

特点：

• 不支持宽、高、margin上下、padding上下；
• 宽高由内容决定；
• 所有盒子并在一行，自动换行；
• 编写代码如果换行，盒子之间会产生间距；
• 子元素如果也是行内元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式，一般用来做居中属性；

注意点：由于盒子之间产生了间距，一般需要去除间隙。

方法一：去掉行内元素编写代码之间的换行，会使得代码不美观，一般不适用；
方法二：将行内元素的父级设置font-size为0，行内元素自身再设置font-size，注意权重的问题；

二.块元素。

特点：

• 支持全部的样式
• 如果没有设置宽度，默认的宽度等于父级元素的宽度；
• 独占一行，即使内容不足一行，剩下的也被空白占据；

注意点：块元素的标签很多含有默认的边框，内外边距，字体大小，还有可能产生塌陷，一般需要初始化处理，去掉默认和清除塌陷；

三、行内块元素

这个元素种类其实是不存在的，只是为了便于理解拆分出来。

特点：

• 支持全部样式；
• 如果没有设置宽高，宽高由内容决定；
• 所有盒子并在一行，自动换行；
• 编写代码如果换行，盒子之间会产生间距；
• 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

实际开发的套路是如果当前元素属性不能满足要求，直接将其转化为行内块元素。