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

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

常用的属性有:

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

一、行内元素:

标签:a、span、em、i、b、strong;

特点:

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

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

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

二.块元素。

标签:div p ol ul h1-h6 li dl dt dd form;

特点:

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

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

三、行内块元素

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

特点:

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

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

 

原文地址:https://www.cnblogs.com/cwp-bg/p/7630006.html