css3（BFC很重要）

目录

新增长度单位

box-size怪异盒模型

resize调整盒子大小

box-shadow盒子阴影

opcity不透明度·

背景属性

1. background-origin

2. background-clip

3. background-size

4. backgorund 复合属性

5. 多背景图

边框圆角

边框外轮廓

文本

渐变

线性渐变

径向渐变

重复渐变

web字体

2D变换

3D变换

过渡

动画

多列布局

伸缩盒模型

响应式布局

BFC

---

新增长度单位

1. vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。

2. vh 视口高度的百分之多少 10vh 就是视口高度的 10% 。

box-size怪异盒模型

content-box： width 和 height 设置的是盒子内容区的大小。（默认值）

border-box ：width 和 height 设置的是盒子总大小。（怪异盒模型）

resize调整盒子大小

none 不允许用户调整元素大小。 (默认)

both 用户可以调节元素的宽度和高度。

horizontal 用户可以调节元素的宽度 。

vertical 用户可以调节元素的高度。

box-shadow盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */

box-shadow: 10px         10px        20px 3px      blue inset;

opcity不透明度·

值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完 全不透明。

背景属性

1. background-origin

作用：设置背景图的原点。

语法

       1. padding-box ：从 padding 区域开始显示背景图像。—— 默认值

       2. border-box ： 从 border 区域开始显示背景图像。

       3. content-box ： 从 content 区域开始显示背景图像。

2. background-clip

作用：设置背景图的向外裁剪的区域。

语法

       1. border-box ： 从 border 区域开始向外裁剪背景。 —— 默认值

       2. padding-box ： 从 padding 区域开始向外裁剪背景。

       3. content-box ： 从 content 区域开始向外裁剪背景。

       4. text ：背景图只呈现在文字上。

       注意：若值为 text ，那么 backgroun-clip 要加上 -webkit- 前缀

3. background-size

作用：设置背景图的尺寸。

语法：

       1. 用长度值指定背景图片大小，不允许负值。

       2. 用百分比指定背景图片大小，不允许负值。

       3. auto ： 背景图片的真实大小。 —— 默认值

       4. contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整 背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。

       5. cover ：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要

       注意：背景图片有可能显示不完整。—— 相对比较好的选择

4. backgorund 复合属性

语法：

       background: color url repeat position / size origin clip

注意：

       1. origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如 果设置了两个值，前面的是 origin ，后面的 clip 。

       2. size 的值必须写在 position 值的后面，并且用 / 分开。

5. 多背景图

CSS3 允许元素设置多个背景图片

/* 添加多个背景图 */
background: url(../images/bg-lt.png) no-repeat,
            url(../images/bg-rt.png) no-repeat right top,
            url(../images/bg-lb.png) no-repeat left bottom,
            url(../images/bg-rb.png) no-repeat right bottom;

边框圆角

同时设置四个角的圆角：

       border-radius:10px;

分开设置每个角的圆角，综合写法（几乎不用）：

       border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y

边框外轮廓

outline-width：宽度

          -color：颜色

          -style：风格

复合属性：outline:50px solid blue;

outline-offset 设置外轮廓与边框的距离，正负值都可以设置

文本

阴影：text-shadow: h-shadow v-shadow blur color;

换行：white-space：

                                

溢出：text-overflow：

修饰

渐变

线性渐变

默认从上到下渐变：

background-image: linear-gradient(red,yellow,green)；

使用关键词设置线性渐变的方向：

background-image: linear-gradient(to top,red,yellow,green);

background-image: linear-gradient(to right top,red,yellow,green);

使用角度设置线性渐变的方向：

background-image: linear-gradient(30deg,red,yellow,green);

调整开始渐变的位置：

background-image: linear-gradient(red 50px,yellow 100px ,green 150px);

径向渐变

多个颜色之间的渐变， 默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）

background-image: radial-gradient(red,yellow,green);

使用关键词调整渐变圆的圆心位置;

background-image: radial-gradient(at right top,red,yellow,green);

使用像素值调整渐变圆的圆心位置：

background-image: radial-gradient(at 100px 50px,red,yellow,green);

调整渐变形状为正圆 ：

background-image: radial-gradient(circle,red,yellow,green);

调整形状的半径 :

background-image: radial-gradient(100px,red,yellow,green);

background-image: radial-gradient(50px 100px,red,yellow,green);

调整开始渐变的位置:

background-image: radial-gradient(red 50px,yellow 100px,green 150px);

重复渐变

无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。

web字体

可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体

定制字体

中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。

可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont

字体图标

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

2D变换

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

3D变换

过渡

在线制作贝赛尔曲线：https://cubic-bezier.com

动画

多列布局

伸缩盒模型

响应式布局

完整列表请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

BFC