zoukankan      html  css  js  c++  java
  • 响应式布局

    使用@media的三种样式
     1、直接在css文件中使用
     @media 类型 and (条件1)and(条件2){
    css样式
     2、使用import导入@import url("css/02_css_M.css") all and (mix-980px)

     3、使用link链接,media属性用于设置查询方式
     <link rel="stylesheet" herf="css/02_css_M.css"media="all and
     (max-980px)">
     }

    flex 弹性盒布局

     1、给服容器添加display:flex/inline-flex;属性
     2、父容器可以使用的属性值有:
     flex-direction属性决定主轴的方向(即项目的排列方向)。
     row(默认值):主轴为水平方向,起点在左端。
    row-reverse:主轴为水平方向,起点在右端。
    column:主轴为垂直方向,起点在上沿。
    column-reverse:主轴为垂直方向,起点在下沿。
    flex-wrap属性定义,如果一条轴线排不下,如何换行。
    (1)nowrap(默认):不换行。父容器宽度不够,会自动挤压
    (2)wrap:换行,第一行在父容器上方。
    (3)wrap-reverse:换行,第一行在下方。
    flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

    justify-content属性定义了项目在主轴上的对齐方式。
    flex-start(默认值):左对齐
    flex-end:右对齐
    center: 居中
    space-between:两端对齐,项目之间的间隔都相等。(首尾项目,分别在父容器最左和最右)
    space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
    align-items属性定义项目在交叉轴上如何对齐。
    flex-start:交叉轴的起点对齐。
    flex-end:交叉轴的终点对齐。
    center:交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。(行高,字体等会影响基线)
    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
    3、子容器上可以使用的属性
    order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
    flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
    flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
    flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。
    浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
    flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
    该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
    align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
    默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
    (auto | flex-start | flex-end | center | baseline | stretch;)

  • 相关阅读:
    背水一战 Windows 10 (26)
    背水一战 Windows 10 (25)
    背水一战 Windows 10 (24)
    背水一战 Windows 10 (23)
    背水一战 Windows 10 (22)
    背水一战 Windows 10 (21)
    背水一战 Windows 10 (20)
    背水一战 Windows 10 (19)
    背水一战 Windows 10 (18)
    背水一战 Windows 10 (17)
  • 原文地址:https://www.cnblogs.com/zhang11424/p/6623528.html
Copyright © 2011-2022 走看看