zoukankan      html  css  js  c++  java
  • 前端笔记----类型转换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属性设置子元素水平对齐方式。

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

     

  • 相关阅读:
    BZOJ1187 [HNOI2007]神奇游乐园(插头dp)
    BZOJ4926 皮皮妖的递推
    BZOJ3684 大朋友和多叉树(多项式相关计算)
    BZOJ4574 [Zjoi2016]线段树
    杜教筛进阶+洲阁筛讲解+SPOJ divcnt3
    从几场模拟考试看一类分块算法
    bzoj3142 luogu3228 HNOI2013 数列
    luogu3244 bzoj4011 HNOI2015 落忆枫音
    codeforces 286E Ladies' Shop
    BZOJ4825 单旋
  • 原文地址:https://www.cnblogs.com/cwp-bg/p/7630006.html
Copyright © 2011-2022 走看看