• CSS-01 基础对齐设置


    CSS:;
    1、white-space:
    处理文本中的空白符,比如空格和换行符
    值:normal: 默认。空白会被浏览器忽略。
    pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止

    例子:<p style="white-space:nowrap">开票单位:</p>

    ;
    2、display:flex
    flex-wrap: wrap
    让弹性盒元素在必要的时候拆行

    flex-wrap:
    nowrap:默认值。规定灵活的项目不拆行或不拆列。
    wrap: 规定灵活的项目在必要的时候拆行或拆列。
    wrap-reverse:规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。
    initial:设置该属性为它的默认值
    inherit:从父元素继承该属性


    flex-direction:
    设置 <div> 元素内弹性盒元素的方向为相反的顺序:
    row:默认值。灵活的项目将水平显示,正如一个行一样。
    row-reverse:与 row 相同,但是以相反的顺序。
    column:灵活的项目将垂直显示,正如一个列一样
    column-reverse:与 column 相同,但是以相反的顺序
    initial:设置该属性为它的默认值。
    inherit:从父元素继承该属性。

    flex-flow:
    让弹性盒的元素以相反的顺序显示,且在必要的时候进行拆行:
    此属性是 flex-direction 和 flex-wrap 属性的复合属性。

    例子:flex-flow:row-reverse wrap;

    flex-grow: 属性用于设置或检索弹性盒子的扩展比率。
    注意:如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作用。

    number:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
    initial:设置该属性为它的默认值。
    inherit:从父元素继承该属性。

    例子:
    div:nth-of-type(1) {flex-grow: 1;}
    div:nth-of-type(2) {flex-grow: 3;} //让第二个元素的宽度为其他元素的三倍:

    object.style.flexGrow="5"

    ;
    3、position:
    属性规定元素的定位类型
    absolute:生成【绝对】定位的元素,相对于 static 定位以外的第一个【父元素】进行定位。
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

    fixed:生成【绝对】定位的元素,相对于浏览器【窗口】进行定位。
    元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

    relative:生成相对定位的元素,相对于其正常位置进行定位。
    因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

    static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
    inherit:规定应该从父元素继承 position 属性的值

    ;
    4、justify-content【横向】、align-content【纵向】
    注意:使用此属性,必须设置display: flex

    用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

    flex-start:默认值。项目位于容器的开头。
    flex-end:项目位于容器的结尾。
    center:项目位于容器的中心。
    space-between:项目位于各行之间留有空白的容器内。
    space-around:项目位于各行之前、之间、之后都留有空白的容器内

    ;
    5、align-content【纵向】、justify-content【横向】
    注意:使用此属性,必须设置display: flex
    在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)

    stretch:默认值。元素被拉伸以适应容器。
    center:元素位于容器的中心。
    flex-start:元素位于容器的开头
    flex-end:元素位于容器的结尾。
    space-between:元素位于各行之间留有空白的容器内。
    space-around:元素位于各行之前、之间、之后都留有空白的容器内。


  • 相关阅读:
    Ubuntu安装vsftp软件
    linux下LNMP环境安装笔记
    thinkphp在app接口开发过程中的通讯安全认证
    thinkphp在app接口开发过程中的通讯数据的封装
    thinkphp微信开发之jssdk拉取卡券及卡券的核销
    thinkphp微信开发之jssdk图片上传并下载到本地服务器
    用thinkphp进行微信开发的整体设计思考
    我常用的自定义函数之rmdir php删除目录及目录下的所有文件
    我常用的自定义函数之p 用于打印数据,调试代码很方便
    我常用的自定义函数之clean php自动过滤功能
  • 原文地址:https://www.cnblogs.com/qiupiaohujie/p/12509206.html
Copyright © 2020-2023  润新知