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属性设置子元素水平对齐方式。

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

     

  • 相关阅读:
    MVC设计模式
    二十三种设计模式
    描绘质量属性的六个常见属性场景。
    《架构漫谈》读后感
    软件架构师的工作过程
    《架构之美》阅读笔记06
    《架构之美》阅读笔记05
    《架构之法》阅读笔记04
    《架构之美》阅读笔记03
    《构架之美》阅读笔记02
  • 原文地址:https://www.cnblogs.com/cwp-bg/p/7630006.html
Copyright © 2011-2022 走看看