css3新特性

css3私有前缀#

私有前缀是为了让浏览器在 CSS3 规范还没有完全定稿时，能够试验性地实现新的 CSS 属性而引入,例如-webkit-border-radius

常见私有前缀

• -webkit-:主要用于 Google Chrome 和 Safari 浏览器
• -moz -：用于 Mozilla Firefox 浏览器
• -ms -：用于 Microsoft Internet Explorer 浏览器

https://caniuse.com,浏览器属性兼容查询网站

新增长度单位-vw、vh、vmax、vmin#

/* vw（viewport width）是一个相对长度单位 */
/* vw是基于视口（viewport）的宽度来计算的。1vw等于视口宽度的 1%。例如，如果视口的宽度是 1000px，那么 1vw就是 10px（1000px * 1% = 10px） */
.box-test {
    width: 50vw;
    height: 50vw;
    border: 1px solid #DD302D;
}


/* vh（viewport height）是基于视口（viewport）的高度进行计算的。1vh等于视口高度的 1%。例如，如果视口的高度是 600px，那么 1vh就是 6px（600px×1% = 6px） */
.box-test {
    width: 50vh;
    height: 50vh;
    border: 1px solid #DD302D;
}
/*  vmax是取视口宽度和视口高度两者中的最大值作为基准来计算的。1vmax等于视口宽度和视口高度最大值的 1% */
/*  相反vmin是取视口宽度和视口高度两者中的最小值作为基准来计算的。1vmin等于视口宽度和视口高度最小值的 1% */
.box-test {
    width: 50vmax;
    height: 50vmin;
    border: 1px solid #DD302D;
}

calc#

calc 可以在CSS 中进行动态的数值计算

/* 宽度是视口高度 -40px*/
width:calc(100vh -40px)  

新增盒子属性#

box-sizing#

box-sizing 用于改变默认的 CSS 盒模型中元素的宽高计算方式

/* content-box,标准盒模型，默认值，元素的宽度和高度只计算content，不包括padding、border和margin,盒子的可能会被撑出指定宽高  */
/* border-box，怪异盒模型， 元素的宽度和高度包括padding、border和margin，盒子不会撑出指定宽阔，  */
.box-test {
    width: 20px;
    height: 20px;
    background-color: deepskyblue;
    box-sizing: border-box;
}

resize#

可以控制是否允许用户调节元素尺寸，需要配合overflow使用

/* none,默认值，不允许调整 */
/* horizontal 可以调节元素高度 */
/* vertical 用户可以调节元素的高度 */
/* both  可以调节元素的宽度和高度 */

.box-test {
    width: 20px;
    height: 20px;
    background-color: deepskyblue;
    resize: horizontal;
    overflow: auto;
}

box-shadow#

用于给元素添加阴影效果

    /*  两个值- 水平位置、垂直位置，可以是负值，必填 */
    box-shadow: 10px 10px;
    /*  三个值- 水平位置、垂直位置 颜色(默认黑色) */
    box-shadow: 10px 10px blue;

    /*  三个值- 水平位置、垂直位置 模糊程度 */
    box-shadow: 10px 10px 20px;

    /* 四个值- 水平位置、垂直位置、模糊程度、颜色*/
    box-shadow: 10px 10px 20px deeppink;

    /* 五个值- 水平位置、垂直位置、模糊程度、阴影外延值、颜色*/
    box-shadow: 10px 10px 20px 20px deeppink;
    /* 六个值- 水平位置、垂直位置、模糊程度、阴影外延值、颜色、内阴影*/
    box-shadow: 10px 10px 20px 20px deeppink inset;

opacity#

用于设置元素的不透明度

/* 0为 完全透明，1为完全不透明，可以使用中间的小数*/
/* rgba 主要用于设置颜色的透明度，只影响颜色相关的属性 */
/* 使用opacity元素内部的所有内容，包括文本、图像、子元素等，都会统一受到该不透明度的影响 */
.box-test {
    width: 200px;
    height: 200px;
    background-color: deepskyblue;
    opacity: 0;
}

新增背景属性#

background-origin#

设置背景图的原点

    /* 从padding区域开始显示背景图像-默认值*/
    background-origin: padding-box;
    /* 从content区域开始显示背景图像 */
    background-origin: content-box;
    /* 从border区域开始显示背景图像 */

    background-origin: border-box;

background-clip#

用于规定背景的绘制区域

    /* 默认值，边框以外的背景图、颜色不呈现  */
    background-clip: border-box;
    /* padding以外的背景图、颜色不呈现 */
    background-clip: padding-box;
    /* content以外的背景图、颜色不呈现 */
    background-clip: content-box;
    /* 背景只呈现在有文字上，其余部分不显示，需要与透明文字配合使用 */
    color: transparent;
    -webkit-background-clip: text;

background-size#

用于控制背景图像的尺寸大小

     /* 默认值-背景图的真实大小 */
    background-size: auto;

    /* 使用像素设置背景图的宽高 */
    background-size: 200px 200px;
    /* 使用百分比设置背景图的宽高 */
    background-size: 100% 100%;
    /* 将背景图等比例缩放、使背景图片的宽或高与容易的宽或高相等，将完整背景图片包含在容器内，可能会造成容器里部分区域没背景图   */
    background-size: contain;
    /* 将背景图等比例缩放、尽可能的完整的呈现背景图 ，背景图片有可能显示不完整  */
    background-size: cover;

background-复合属性#

    /* 背景颜色、背景url、是否重复、位置 / 大小 原点 裁剪方式*/
    background: skyblue url("favicon.ico") no-repeat  10px 10px / 500px 500px border-box content-box;

多背景图#

一个元素内可以设置多个背景图，并设置属性、指定位置

     background: url("images/serch_icon.png") no-repeat left top,
                url("images/serch_icon.png") no-repeat right top,
                url("images/serch_icon.png") no-repeat left bottom,
                url("images/serch_icon.png") no-repeat right bottom;

新增边框属性#

border-radius#

border-radius属性可以将盒子变为圆角

  /* 同时设置四个圆角半径 像素*/
   border-radius: 10px;
  /* 同时设置四个圆角半径 百分比,父元素宽或高的百分比*/
   border-radius: 10px;

   /* 设置左上角圆角半径，一个值是正圆半径，两个值分别是椭圆x、y半径*/
    border-top-left-radius: 10px 10px;
    /* 设置右上角圆角半径，一个值是正圆半径，两个值分别是椭圆x、y半径*/

    border-top-right-radius: 10px;
    /* 设置左下角圆角半径，一个值是正圆半径，两个值分别是椭圆x、y半径*/

    border-bottom-left-radius: 10px;
    /* 设置右下角圆角半径，一个值是正圆半径，两个值分别是椭圆x、y半径*/

    border-top-right-radius: 10px;

边框外轮廓#

边框外轮廓是在manger外新增的一层，不参与盒模型大小的计算、也不占位

    /* 设置外轮廓的宽度、颜色、线的类型、偏移量(设置外轮廓与边框的距离，可以设置负值)*/
    outline-width: 100px;
    outline-color: red;
    outline-style: solid;
    outline-offset: 12px;

新增文本属性#

文本阴影text-shadow#

/* 水平位置、垂直位置(允许负值、必填) ，模糊的距离、阴影的颜色(可选) */
text-shadiw: 10px 10px 10px red;

文本换行#

    /*
    normal 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格-默认值
    pre 原样输出，与 pre 标签的效果相同。
    pre-wrap 在 pre 效果的基础上，超出元素边界自动换行
    pre-line 在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略
    nowrap 强制不换行
    */
    white-space: pre-wrap;

文本溢出#

 /*
     clip : 当内联内容溢出时，将溢出部分裁切掉,默认值
     ellipsis :当内联内容溢出块容器时，将溢出部分替换为 ...
     text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible值， white-space 为 nowrap 值
     */
    text-overflow:clip;

文本修饰#

css3将 text-decoration升级成了复合属性

text-decoration: text-decoration-line || text-decoration-style || text-decoration- color

/* 
设置文本装饰线的位置
none: 默认值，无装饰
underline:下划线
overline:上划线
line-through:贯穿线
*/

text-decoration-line:underline;


/* 
文本装饰线的形状
solid:实线，默认值
double:双线
dotted：点线
dashed:虚线
wavy:波浪线
*/
text-decoration-style:soild;

/* 文本装饰线的颜色 */
text-decoration-color:red;

文本描边#

只有webkit内核的浏览器可用

/* 文字描边的宽度 */
-webkit-text-stroke-width:10px;
/* 文字描边的颜色 */
-webkit-text-stroke-color:red;
/* 复合属性 */
-webkit-text-stroke:10px red;

新增渐变#

线性渐变#

     /* 默认 从上向下渐变 ,最少设置两个颜色*/
     background-image: linear-gradient(red,yellow,green);

   /* 使用方向关键字改变渐变方向  颜色依次是方向设置后的颜色顺序*/

    /* 向右渐变 */
    background-image: linear-gradient(to right, red, yellow, green);
    /* 向左渐变 */
    background-image: linear-gradient(to left, red, yellow, green);
    /* 向左上渐变*/
    background-image: linear-gradient(to left top, red, yellow, green);
    /* 向左下渐变*/
    background-image: linear-gradient(to left bottom, red, yellow, green);

    /* 使用角度设置改变渐变方向 */
    background-image: linear-gradient(20deg, red, yellow, green);

	/* 调整渐变开始的位置 */
 /* 0~50px是纯红色 ，50~100px是从红渐变黄 100~150px是从黄渐变绿 150px之后是纯绿*/
 background-image: linear-gradient(red 50px, yellow 100px, green 150px);

径向渐变#

    /* 以中心点为圆心，向外部渐变，默认 */
    background-image: radial-gradient(red, yellow, green);

    /* 使用关键字 将径向渐变圆心设置为左上角 */
    background-image: radial-gradient(at left top, red, yellow, green);
    /* 通过像素调整圆心的位置 x方向、y方向 */
    background-image: radial-gradient(at 100px 50px, red, yellow, green);
    /*  使用关键字调整渐变行政为正圆 */
    background-image: radial-gradient(circle, red, yellow, green);
    /*  使用像素值调整渐变行政为正圆 */
    /* 默认渐变形状受容器形状的影响，将宽高点设置为一样的值，可以实现正圆 */
    background-image: radial-gradient(100px 100px, red, yellow, green);
    /* 渐变的区域 */
    background-image: radial-gradient(red 50px, yellow 100px, green 150px);

重复渐变#

重复渐变必须基于线性渐变和径向渐变的基础之上，在没有发生渐变的区域，重新开始渐变，就是重复渐变，如果渐变原先就充满整个容器，就不会产生重复渐变

    /* 重复线性渐变 */
    background-image: repeating-radial-gradient(red 10px, yellow 10px, green 10px);

    /* 重复径向渐变 */
    background-image: repeating-linear-gradient(red 10px, yellow 10px, green 10px);

web字体#

基础写法#

使用font-family指定字体，必须本机拥有对应的字体，可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体

  @font-face {
      font-family: "自定义字体名字";
      src: url("./font1/方正手迹。ttf");
  }

.box-test1 {

    font-size: 100px;

    font-family: "自定义字体名字";

}

针对某几个文字进行单独定制可以使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont

兼容性写法#

@font-face {
font-family: "nam";
font-display: swap; 
 src: url('webfont.eot'); /* IE9 */ 
 src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
   url('webfont.woff2') format('woff2'), 
   url('webfont.woff') format('woff'), /* chrome、firefox */ 
   url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android*/
   url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */ 
}

字体图标#

相比图片更加清晰。

灵活性高，更方便改变大小、颜色、风格等。

兼容性好， IE 也能支持

阿里图标官网地址：https://www.iconfont.cn/

<i> i标签一般用来呈现字体图标</i>

2D变换#

二维坐标系图


2D变换_位移#

/*
translateX():设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比
translateY() :设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度的百分比
translate() :一个值代表水平方向，两个值代表：水平和垂直方向
*/

.box-test1{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: translateX(50px);
}

1. 位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。

2. 与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。

3. 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。

4. transform 可以链式编写，例如：transform: translateX(30px) translateY(40px);

5. 位移对行内元素无效。

6. 位移配合定位，可实现元素水平垂直居中

2D变换_缩放#

2D 缩放是让元素放大或缩小，借助缩放，可实现小于 12px 的文字

/*
scaleX()  设置水平方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小
scaleY() 设置垂直方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小
scale(() 同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放

*/


.box-test1{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: scaleX(0.5);
}

2D变换_旋转#

让元素在二维平面内，顺时针旋转或逆时针旋转

/*


rotateZ()  设置旋转角度，需指定一个角度值( deg )，正值顺时针，负值逆时针
 rotate() 如果只设置一个值,相当于rotateZ()，如果是3D变化，是多个值
*/


.box-test1{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: rotateZ(30deg);
}

2D变换_扭曲#

让元素在二维平面内被“拉扯”，进而“走形”

/*
skewX() ：设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯
skewY() : 设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯
skew() ：一个值代表 skewX ，两个值分别代表： skewX 、 skewY
*/


.box-test1{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: skewX(30deg);
}

2D变换_多重变换#

多个变换，可以同时使用一个 transform 来编写,多重变换时，建议最后旋转

/*  先进行位移、然后缩放、然后旋转*/
.box-test1{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: translate(100px, 100px) scale(0.5) rotate(45deg);
}

2D变换_变换原点#

元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点。

修改变换原点对位移没有影响， 对旋转和缩放会产生影响。

如果提供两个值，第一个用于横坐标，第二个用于纵坐标。

如果只提供一个，若是像素值，表示横坐标，纵坐标取 50% ；若是关键词，则另一个坐标取 50%

/*
transform-origin: 50% 50% ， 变换原点在元素的中心位置，百分比是相对于自身---默认值
transform-origin: left top ，变换原点在元素的左上角
transform-origin: 50px 50px ， 变换原点距离元素左上角 50px 50px 的位置
transform-origin: 0 ，只写一个值的时候，第二个值默认为 50%
*/
.box-test1{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform-origin: left top;
    transform: translate(100px, 100px) scale(0.5);
}

3D变换#

开启3D空间#

元素进行 3D 变换的首要操作，父元素必须开启 3D 空间

/*

flat：让子元素位于此元素的二维平面内（ 2D 空间）-- 默认值
preserve-3d ： 让子元素位于此元素的三维空间内（ 3D 空间）
*/
.box-test{
    width: 200px;
    height: 200px;
    border: 1px solid black;
    transform-style: preserve-3d;
}

设置景深#

指定观察者与 z=0 平面的距离，能让发生 3D 变换的元素，产生透视效果，看来更加立体

.box-test {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 20px 0 auto;
    /* 开启3D空间 */
    transform-style: preserve-3d;
    /* 设置景深 （有透视效果，近大远小）*/
    /*  perspective 设置给发生 3D 变换元素的父元素 */
    /*  指定观察者距离 z=0 平面的距离，不允许负值。默认值是none，即不指定透视*/
    perspective: 500px;
}

.box-test1 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    transform: rotateX(30deg);
 }

透视点位置#

透视点位置，就是观察者位置；默认的透视点在元素的中心

.box-test {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 0 auto;
    /* 开启3D空间 */
    transform-style: preserve-3d;
    /* 设置景深 */
    perspective: 500px;
    /* 透视点位置默认是开启3D空间元素的正中央 */
    /* 设置透视点的位置 相对坐标轴往右偏移300px， 往下偏移400px（相当于人蹲下300像素，然后向右移动400像素看元素） */
    perspective-origin: 300px 400px;
}

3D位移#

3D 位移是在 2D 位移的基础上，可以让元素沿 z 轴位移

.box-test1 {
    width: 200px;
    height: 200px;
    background-color: rgba(0,191,255,0.726);
    /*  translateZ 设置 z 轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比 */
    /* translate3d 第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，且均不能省略 */
    transform: translate3d(100px,100px,0px);
 }

3D旋转#

3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和 y 轴旋转

    /*
    rotateX 设置 x 轴旋转角度，需指定一个角度值( deg )，面对 x 轴正方向：正值顺时针，负值逆时针
    rotateY 设置 y 轴旋转角度，需指定一个角度值( deg )，面对 y 轴正方向：正值顺时针，负值逆时针
    rotate3d 前 3 个参数分别表示坐标轴： x , y , z ，第 4 个参数表示旋转的角度，参数不允许省略。
            例如 transform: rotate3d(1,1,1,30deg) ，意思是： x 、 y 、 z 分别旋转30 度
    */
    transform: rotate3d(1,1,1,30deg);

3D缩放#

3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放

    /*
    scaleZ  设置 z 轴方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小
    scale3d  第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，参数不允许省略
    */
    transform:scale3d(1.5,1.5,1);

多重变换#

多个变换，可以同时使用一个 transform 来编写

/* 多重变换时，建议最后旋转 */
transform: translateZ(10px) scaleZ(11) rotateY(4deg)

背部可见性#

使用 backface-visibility 指定元素背面，在面向用户时是否可见, backface-visibility 需要加在发生 3D 变换元素的自身上

    /*
    visible ：指定元素背面可见，允许显示正面的镜像,默认值
    hidden ： 指定元素背面不可见
    */
    backface-visibility: hidden;

过渡#

过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一种样式

定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡效果

.box-test {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 100px auto;
    /*
     设置哪个属性需要过渡效果
    all ：过渡所有能过渡的属性。
    具体某个属性名 ，例如： width 、 height ，若有多个以逗号分隔
     */
    transition-property: all;

    /* 设置过渡持续时间 单位 s、ms
    如果想让所有属性都持续一个时间，那就写一个值。
    如果想让每个属性持续不同的时间那就写多个时间，用逗号间隔。 */
    transition-duration: 1s;


    /*  设置过渡的延迟时间 单位s、ms，触发事件后从指定时间之后开始过渡*/
    transition-delay: 1ms;


    /*    设置过渡的类型

    ease:平滑过渡 ，默认值 ，先慢再快最后变慢
    linear:线性过渡，匀速
    ease-in:先慢后快
    ease-out:先快后慢
    ease-in-out:先慢再快最后变慢

    step-start:不考虑过渡时间，直接显示最终效果，相当于没有过渡效果
    step-end:触发时间后，等过渡持续时间之后，直接显示最终效果
    steps(步数,end):接受两个参数的步进函数，相当于将效果分成多少份，一次完成一份
                      第一个参数必须为正整数，指定函数的步数
                      第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间点，默认值是end
    cubic-bezier( number, number, number, number)：特定的贝塞尔曲线类型
                                                   线制作贝赛尔曲线的网址：https://cubic-bezier.com


    */

    transition-timing-function: ease-out;
}


/*
过渡效果 hover 的时候属性变化
*/
.box-test:hover {
    height: 400px;
    width: 800px;
}

不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。

常见的支持过渡的属性有：颜色、长度值、百分比、 z-index 、 opacity 、 2D 变换属性、 3D 变换属性、阴影

/* 复合属性写法 */
/* 如果设置了一个时间，表示 duration ；如果设置了两个时间，第一是 duration ，第二个是delay ；其他值没有顺序要求*/
transition:1s 1s linear all;

动画#

一段动画，就是一段时间内连续播放 n 个画面。每一张画面，我们管它叫做“帧”。一定时间内连续快速播放若干个帧，就成了人眼中所看到的动画。同样时间内，播放的帧数越多，画面看起来越流畅

关键帧指的是，在构成一段动画的若干帧中，起到决定性作用的 2-3 帧

动画和过渡的主要区别:

1. 过渡需要触发条件，动画不需要
2. 动画可以进行精细设置调整，过渡只关注始末

动画属性#

.box-t {
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
    /*  哪个元素做动画，就给哪个元素设置动画的名字，自定义 */
    animation-name: box-to-right;
    /* 动画持续的时间 */
    animation-duration: 3s;
    /* 设置动画的延迟 */
    animation-delay: 0.5s;

    /***其他动画属性***/

    /* 设置动画播放方式，值与过渡的transition-timing-function一致 */
    animation-timing-function: linear;

    /* 动画播放的次数,inherit是无限循环播放，也可以写数字，写几动画就会播放几次 */
    animation-iteration-count: 2;

    /* 动画播放的方向 */
    /* normal ： 正常方向 (默认) */
    /* reverse ： 反方向运行*/
    /* alternate ： 动画先正常运行再反方向运行，并持续交替运行*/
    /* alternate-reverse ： 动画先反运行再正方向运行，并持续交替运行*/
    animation-direction: normal;

    /* 动画以外的状态,不发生动画的时候停留位置
    backwards 停留在第一帧
    forwards 停留在最后一帧
    */

    animation-fill-mode: forwards;

    /* 动画的播放状态 paused暂停 running播放，可以使用选择器设置事件使用该属性 */
    animation-play-state:paused;


}

定义动画效果#

方式一

/* 定义一个动画(一组关键帧)
 @keyframes是设置关键帧的关键字
  box-to-right 是自定义的动画名字

 */

@keyframes box-to-right {
    /* 设置第一帧 */
    from {
        
    }
    /* 设置最后一帧 */
    to {
        /* 最后一帧的位置是向右移动900px的地方 */
        transform: translate(900px);
        /* 最后一帧的颜色是红色 */
        background-color: #DD302D;
    }


}

方式二

@keyframes box-to-right {
    /* 第一帧 */
    0%{
    }
    /* 可以设置0%~100%中间任意帧*/
    50%{
        border-radius: 50%;
    }

    /* 最后一帧*/
    100%{
        transform: translate(900px);
    }
    
}

复合属性#

/* 只设置一个时间表示 duration ，设置两个时间分别是： duration 和 delay ，其他属性没有数量和顺序要求 */
animation: box-to-right 3s 0.5s linear 2 alternate-reverse forwards;

多列布局#

作用：专门用于实现类似于报纸的布局

    /*指定列数 */
    column-count:4;
    /* 指定列宽 */
    column-width:100px;
    /* 同时指定列宽和列数，值没有数量和顺序要求*/
    columns:4 100px;
    /* 设置列边距*/
    column-gap:20px;
    /* 设置列与列之间边框的风格，值与 border-style 一致 */
    column-rule-style:dashed;
    /* 设置列与列之间边框的宽度 */
    column-rule-width:2px;
    /* 设置列与列之间边框的颜色 */
    column-rule-color:red;
    /*  设置边框的复合属性 */
    coumn-rule:2px dashed red;
    /* 指定是否跨列；值: none 、 all */
    column-span:all;

伸缩盒模型#

2009 年， W3C 提出了一种新的盒子模型 —— Flexible Box （伸缩盒模型，又称：弹性盒子）。

它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序 等等

截止目前，除了在部分 IE 浏览器不支持，其他浏览器均已全部支持

伸缩盒模型的出现，逐渐演变出了一套新的布局方案 —— flex 布局。

• 传统布局是指：基于传统盒状模型，主要靠： display 属性 + position 属性 + float属性。

• flex 布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上。

伸缩项目、伸缩容器#

伸缩容器： 开启了 flex 的元素，就是：伸缩容器

1. 给元素设置： display:flex 或 display:inline-flex ，该元素就变为了伸缩容器。

2. display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。

3. 一个元素可以同时是：伸缩容器、伸缩项目

伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目

1. 仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。

2. 无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。

.box-main{

    width: 1000px;
    height: 600px;
    background-color: #888;
    /* 将该元素变为伸缩容器(开启了flex布局) */
    /* 伸缩容器所有的直系子元素变为了伸缩项目*/
    display: flex;

}

/*伸缩项目*/
.box-inner{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    border: 1px solid black;
    box-sizing: border-box;
}

主轴和侧轴#

主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。

侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）

主轴方向#

改变了主轴的方向，侧轴方向也跟着改变，如果主轴是从上到下，主轴就是从左到右

    /* 设置主轴方向 
     row：默认值，从左到右
     row-reverse：从右到左
     column： 从上到下
     column-reverse:从下到上
     */
    
    flex-direction:column-reverse;

主轴换行方式#

    /*
    nowrap: 默认值，不换行，伸缩容器不够会挤压伸缩项目
    wrap:伸缩容器不够自动换行
    wrap-reverse:伸缩容器不够反向换行，
    */
   flex-wrap: wrap;

/* flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要 */
flex-flow: row wrap;

主轴对齐方式#

    /*

    flex-start ：默认值,主轴起点对齐
    flex-end ：主轴终点对齐。
    center ：居中对齐
    space-between ：均匀分布，两端对齐，项目与项目之间的距离是相等的，与边缘没有距离
    space-around ：均匀分布，项目与项目之间的距离，是项目边缘的2倍。
    space-evenly ：均匀分布，两端距离与中间距离一致。

    */
    justify-content: flex-start;

侧轴对齐方式#

一行侧轴对齐

 /*
    flex-start ：侧轴的起点对齐。
    flex-end ：侧轴的终点对齐。
    center ：侧轴的中点对齐。
    baseline : 伸缩项目的第一行文字的基线对齐。
    stretch ：默认值，如果伸缩项目未设置高度，将占满整个容器的高度。

    */
    align-items: flex-start;

多行侧轴对齐

  /*
    flex-start ：与侧轴的起点对齐。
    flex-end ：与侧轴的终点对齐。
    center ：与侧轴的中点对齐。
    space-between ：与侧轴两端对齐，中间平均分布。
    space-around ：伸缩项目间的距离相等，比距边缘大一倍。
    space-evenly : 在侧轴上完全平分。
    stretch ： 默认值,占满整个侧轴

    */
    align-content: flex-start;

水平垂直居中#

父容器开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中

    justify-content: center;
    align-items: center;

父容器开启 flex 布局，随后子元素 margin: auto

.box-main{

    width: 1000px;
    height: 600px;
    background-color: #888;
    /* 将该元素变为伸缩容器 */
    display: flex;
    


}

.box-inner{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    border: 1px solid black;
    margin: auto;
}

伸缩性#

项目在主轴的基准长度

浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值 auto ，即：伸缩项目的宽或高

    /* 伸缩项目在主轴上的基准长度
     若主轴是横向，宽时效
     若主轴是纵向，高失效
     */
    flex-basis: 300px;

flex-grow（伸)

flex-grow 定义伸缩项目的放大比例，默认为 0 ，即：纵使主轴存在剩余空间，也不拉伸（放大）

    /*
    若所有伸缩项目的 flex-grow 值都为 1 ,如果有剩余空间，他们将评分剩余空间
    若三个伸缩项目的 flex-grow 值分别为： 1 、 2 、 3 ，则：分别瓜分到： 1/6 、 2/6 、 3/6 的空间
    */
    flex-grow: 1;

flex-shrink(缩)

flex-shrink 定义了项目的压缩比例，默认为 1 ，即：如果空间不足，该项目将会缩小

    /*
    三个收缩项目，宽度分别为： 200px 、 300px 、 200px ，它们的 flex-shrink 值分别为： 1 、 2 、 3
    若想刚好容纳下三个项目，需要总宽度为 700px ，但目前容器只有 400px ，还差 300px
    计算分母： (200×1) + (300×2) + (200×3) = 1400
    项目一： (200×1) / 1400 = 比例值1
    项目二： (300×2) / 1400 = 比例值2
    项目三： (200×3) / 1400 = 比例值3
    
    最终使用每个项目的比例值 *300
    */
    flex-shrink:1;

flex复合属性#

flex 是复合属性，复合了： flex-grow 、 flex-shrink 、 flex-basis 三个属性，默认值为 0 1 auto 。

如果写 flex:1 1 auto ，则可简写为： flex:auto

如果写 flex:1 1 0 ，则可简写为： flex:1

如果写 flex:0 0 auto ，则可简写为： flex:none

如果写 flex:0 1 auto ，则可简写为： flex:0 auto —— 即 flex 初始值

项目排序与单独对齐#

    /*
    order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0
    */
    order: 2;

    /*
    单独调整当前项目的对齐方式
    默认值是auto，继承父元素的align-items属性
    */
    align-self: center;

响应式布局#

媒体查询#

/* 检测打印机或打印预览应用的样式 */
@media print {
   .box-inner{
       background-color: #666666;
   }
}
/* 检测屏幕(电脑、手机屏幕等)应用的样式 */
@media screen {
    .box-inner{
        background-color: green;
    }
}

/* 检测所有设备 */
@media all {
    
}

媒体特性#

全部媒体特性查询网址

示例:

/* 检测视口的宽度为1000px的时候 应用下面的样式*/
@media (width: 1000px) {
    .box-inner{
        background-color: green;
    }

}

/* 检测视口的宽度小于等于1000px的时候 应用下面的样式*/
@media (max-width: 1000px) {
    .box-inner{
        background-color: red;
    }

}

/* 检测视口的宽度大于等于1000px的时候 应用下面的样式*/
@media (min-width: 1000px) {
    .box-inner{
        background-color: skyblue;
    }

}

运算符#

• and :并且

• 或者or:或

• not:否定

• only:肯定

 @media screen and (min-width: 1000px)  and (max-width: 1200px){
    .box-inner{
        background-color: skyblue;
    }

}

阈值划分#

响应式布局可以根据屏幕大小划分，根据具体情况编写样式

超小屏幕<=768px , 中等屏幕<= 992px ,大屏幕<=1200px,超大屏幕>1200px,宽度为参考值，非绝对值

BFC#

BFC 是 Block Formatting Context （块级格式上下文）

默认处于关闭状态，当元素满足某些条件后，功能被激活

激活即该元素创建了BFC(开启BFC)

BFC可以解决的问题#

1. 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。
2. 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。
3. 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

开启BFC#

根元素、浮动元素、绝对定位、固定定位的元素、行内块元素

表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption

overflow 的值不为 visible 的块元素、伸缩项目、多列容器

column-span 为 all 的元素（即使该元素没有包裹在多列容器中）

display 的值，设置为 flow-root