CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体...

CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用。(兼容性不好)

必要元素:

     指定一个盒子为伸缩盒子 display:flex;

  设置属性来调整此盒子的子元素的布局方式:如 flex-direction;

  明确主侧轴及方向

  可互换主侧轴,也可改变方向

各属性:

   

设置主轴方向

a)  flex-direction:row(默认属性)

  1. row:从左往右

b)  flex-direction:row-reverse

  1. row-reverse从右向左排列

c)  flex-direction:column

  1. 竖直反向,从上往下

d)  flex-direction:column-reverse

  1.  竖直方向,从下往上

主轴的对齐方式

a)  justify-content:flex-start;

  1. 从主轴开始的方向对齐

b)  justify-content:flex-end

  1. 从主轴结束的方向对齐

c)  justify-content:center

  1. 居中对齐(水平/竖直)

d)  justify-content:space-round

  1. 平分父盒子空间

e)  justify-content:space-between

  1.  两端对齐,中间平分

侧轴对齐方式

a)  align-items:flex-start

  1. 从侧轴开始的方向对齐

b)  align-items:flex-end

  1. 从侧轴结束的方向对齐

c)  align-items:center

  1. 在侧轴方向上居中

d)  align-items:baseline

  1. 基线对齐,与flex-start等效

e)  align-items:stretch

  1. 拉伸,和父盒子高度一样
  2. 有高度不会被拉伸

伸缩比例

a)  flex:number

b)  不设置就不参与平分

元素换行

a)      flex-wrap:wrap;  换行,控制伸缩盒子里面的元素

b)      flex-wrap:nowrap; 默认不换行 会自动缩减宽度

控制 换行 堆叠的元素

a)      align-content: flex-start

    起始点对齐 各行向弹性盒容器的起始位置堆叠

b)      align-content: flex-end;

    终止点对齐 将结尾铺满 开头空着

c)       align-content: center ;

      居中对齐,各个盒子向弹性盒容器的中间位置堆叠/y轴中间

d)      align-contnt: space-around;

            四周环绕:各行在弹性盒容器中平均分布

e)      align-content: space-between;

            顶端和底部对齐,中间部分为空

f)       align-content:  stretch ;

        拉伸   高度会自适应

 align-self;   覆盖父元素设置的align-items

           align-self: stretch

flex-start      /    flex-end  / center     / stretch

   侧轴起始点对齐/终止点对齐/居中对齐/拉伸

 order:number ;   控制子元素的顺序

.order li:nth-child(2) {

                                          order: 10;   // 让其位置在第十位

}

 

WEB字体

  1. 可以使用自己指定的特殊字体,无需考虑用户是否安装
  2. 支持程度较好
  3. .eot字体是IE专用字体

使用web字体

  声明字体

  @font-face{
    font-family:"webfont";  /*定义的字体名字*/
    src:url ("       路径");
    src:url("字体路径") format();/*format()函数给浏览器提示是该字体文件是何种类型*/
    }
    .web-font{
           font-family:'webfont'; /*定义字体名字*/
     }

  伪元素添加图标字体 (给那个标签添加icon类名那个标签就会有这个图标)

   .icon::before{
      content: '\e655';
      font-family: iconfont;
  }

b)    在伪元素添加的时候content=“\e67c”

 

鼠标滚轮事件

  window.onmousewheel=function(){}

 

转载于:https://www.cnblogs.com/mingm/p/6861295.html

你可能感兴趣的:(CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体...)