简介

CSS3 简介

CSS3 是 CSS 技术升级版本，是对普通 CSS 样式的一种补充
HTML 标签是页面的骨架， CSS 是页面的皮肤，那么 CSS3 就是页面的灵魂，它丰富了页面的交互和显示效果。

1. 什么是 CSS3 ？

在 2001 年 W3C 就完成了 CSS3 的草案规范。 CSS3 规范的一个新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容，这些模块独立实现和发布，也为日后 CSS 的扩展奠定了基础。另外一方面，由于受支持设备和浏览器厂商的限制，设备或者厂商可以有选择的支持一部分模块，支持 CSS3 的一个子集，这样有利于 CSS3 的推广。我们日常工作中其实 CSS 和 CSS3 是在一起使用的，有时候你甚至不知道已经使用了 CSS3 。因为 CSS3 就是 CSS 升级演变的产物。

2. 为什么要学习 CSS3 ？

前端已经进入了图形化时代，丰富的页面效果在使用 CSS2 实现成本很高。使用 CSS3 可以轻松完成动画或者过渡效果，远离脚本实现动画，节省开发时间。
CSS3 可以代替很多图片，减少标签的嵌套，这意味着页面的标签更少，静态资源请求数减少，打开页面的时间更快更好。
CSS3 做到了向后兼容，在低版本浏览器中它不会打乱原有的布局，最多就是不起作用。

3. CSS3 新增特性

边框特性：增加了圆角的定义和图片边框
多背景图：一个元素上可以使用多张背景图
颜色：不但可以使用线性渐变和径向渐变，还可以设置颜色的透明度
多列布局和弹性盒模：前端布局的革命。
空间：增加了 2D 和 3D 空间。
过渡和动画。
web字体：告别千篇一律的微软雅黑
媒体查询：在不同的分辨率下不再通过 JS 去控制样式
丰富的阴影效果。多用于 hover，悬浮等场景。

5. 兼容性

目前 Chrome 、Firefox 、IE 9+ 基本上支持了大部分的 CSS3 特性。对于支持性不好的也可以使用前缀。

盒模型

border 边框

在页面中做一些分割来区分不同的区域，这个属性可以用来给元素添加一个边框，也可以作为不同区域的分割线。

1.解释

CSS 的 border 属性是一个用于设置各种单独的边界属性的简写属性。 border 可以用于设置一个或多个以下属性的值： border-width、border-style、border-color。
任何一个 h5 标签通过添加一个 border 属性，可以给它设置边框的宽度、展示出来的样子（实线、虚线、圆点等）和颜色。

2. 语法

border: [border-width ||border-style ||border-color |inherit] ;

border-width、border-style、border-color它们的用法遵循 css 的：左上、右上、右下、左下的原则。最多可以添加 4 个参数。

boder可以直接设置元素的宽度、边框样式、颜色，不需要再去单独通过border-width、border-style、border-color去设置。

兼容性

浏览器全部支持

实例

border:1px solid #ddd; 
border-top:1px solid #000; // 顶部增加一个边框
border-width: 4px;
border-right-color:green;

小结

border-width 属性会有影响设定元素的尺寸。

div{
widht:100px;
height:100px
border-width:2px;
}

上面这样的设置 div 在页面中实际站位是 104px，如果不注意很容易造成页面错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’box-sizing: content-box;’，它在页面中实际宽度 = width+border

在 table 中使用 border，要使用border-xx这样的属性，为的是去掉一边避免重叠。

td{
    border:1px solid #ccc;
    border-bottom:none;
}

border-color 如果不设置那么它会使用元素中字体的颜色。
如果我们需要给 button 设置一个颜色，那么它就会失去浏览器自带的交互效果。
border-top 的使用和 border 的使用方法是一样的，如果要个性化一个边的颜色，可以这样设置： border-top-color:red;也可以这样设置： border-top:1px solid red;。
有时候在元素内可能会使用margin-top这样的属性来让子元素和父元素的顶部有一个间隔，但是如果没有达到我们想要的效果，可以在父元素设置一个看不见的border就可以解决这个问题。

border-radius 圆角

语法

遵循 css 通用的：左上、右上、右下、左下的原则。

border-radius:value;

只有一个参数时：

border-radius:value; /* value 代表给这个元素 4 个方向增加一个的圆弧值。*/

多个参数时，中间用空格分开：

border-radius:value1 value2; /* value1 代表 左上、右下，value2 代表 右上、左下角圆弧值。 */
border-radius:value1 value2 value3; /* value1 代表左上 value2 代表 右上 左下 value3 代表右下 */
border-radius:value1 value2 value3 value3; /* value1 ~ value4 分别代表左上、 右上 、右下 、左下四个角的圆弧值 */

兼容性

浏览器全部支持

实例

<div class="demo"></div>

.demo{   
    border-radius:0  8px 0 8px;  
}
或
.demo{   
    border-top-right-radius:1%;  
    border-bottom-left-radius:1%;
}

小结

border-radius：50% 会让一个宽度和高度相等的块级元素变成一个圆。
如果圆角过大，记得要设定 padding ，这样可以避免里面的内容超出元素。
不要让 border-radius 的 % 值大于 50，因为如果两个相邻的半径和超过了对应的盒子的边的长度，那么浏览器要重新计算以保证它们不重合。虽然表面上看没有问题但是这样会对性能有影响。
如果用 rem、em 单位在移动端用border-radius 画圆，在部分机型里面是椭圆的问题，可以通过 50% 来解决，或者使用 px 配合缩放 scale 来实现 rem 单位的效果。
在内联元素span这类标签使用这个属性的时候同样有效但是记得不要使用%这样会导致一些span 标签的圆角不一样因为 % 是参考长和宽计算的。
border-radius 圆角并不会隐藏标签内部元素的内容，如果有内容溢出的情况记得增加overflow:hidden;
任何元素都可以使用这个属性,包括视频、音频标签等等。
一般情况下不推荐 border-top-left-radius 这类的写法除非是需要在某种交互过程中需要改变其中一个的圆角值而其它的保持不变。因为这类的标签会影响浏览器渲染的性能。

box-shadow 阴影

通过 box-shadow 可以给任意 H5 元素添加阴影，可以是一个，如果用,号隔开可以添加多个。

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

.demo{
    box-shadow:1px 1px 5px #ccc;
}

实例

给demo加一个阴影

.demo{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    box-shadow: 1px 1px 5px #ccc;
}

2. 给demo加多个阴影

.demo{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    box-shadow: 1px 1px 5px #ccc,2px 2px 5px rgba(255, 25, 25,.5),3px 3px 1px rgba(5, 206, 89, 0.5) ;
}

小结

给元素增加一个悬浮效果

.demo{
    width:100px;
    height:100px;
    transition: box-shadow 1s;
}
.demo:hover{
     box-shadow: 1px 1px 5px #ccc；
}

css3 下雨效果

<div class="demo"></div>

.demo{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 100px 100px 4px #dedede, 30px 40px 4px #dedede,70px 20px 4px #dedede,80px 60px 4px #dedede;
}

3. 阴影叠加,box-shadow 形成的阴影效果可能是一个组合

.demo{
      width: 100px;
      height: 100px; 
      text-align: center;
      line-height: 100px;;           
      box-shadow:  15px 0 15px -15px #000, -15px 0 15px -15px #000;
  }

4. 如果给一个元素添加多个阴影，那么后面的颜色层级高于前面的，也就是说如果前 3 个参数一样，后面的颜色会覆盖前面的颜色。 5. 不要给不规则的图形添加阴影，因为这只会添加到块级元素中，不会验证图片的路径添加阴影，可以使用滤镜来达到这样的效果。

box-sizing 盒类型

语法

box-sizing: content-box | border-box

它接受一个参数 content-box 或 border-box。

上图是一个盒模型结构

content-box 的计算方式是:
- width = content width;
- height = content height
border-box 的计算方式是：
- width = border + padding + content width
- heigth = border + padding + content heigth

小结

推荐设置 box-sizing 为border-box ，这样写样式不必在去减去 padding ，也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug
如果不设置 box-sizing 不同浏览器会有不同的计算方式

颜色渐变

gradients 渐变

通过 gradients 这个属性就可以实现颜色的渐变。它的实现是通过浏览器生成的，可以当成是矢量图形
不过值得注意的是虽然它是一个颜色，但是使用它之后就不能再使用背景图片了

定义

CSS3 渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。

以前，必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的（和我们使用矢量图是一样的效果）。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义。

代码

线性渐变

.demo{
    background: linear-gradient(direction|angle, color-stop1, color-stop2, ...);
}

说明：创建一个线性渐变至少需要两个颜色，他们的默认方向是从上到下的。

使用角度可以创建更细腻的渐变。但要注意的是：这个角度指的是水平方向和渐变线之间的角度。0度从下到上 90度从左到右，这样一个顺时针的变化。

实例

渐变方向正好是上下方向，那么只要写两个颜色就好

.demo{
    width: 100px;
    height: 100px;
    background: linear-gradient(red,green);
}

让红色在元素 70%的位置之后在开始向绿色渐变

.demo{
    width: 100px;
    height: 100px;
    background: linear-gradient(red 70%,green);
}

创建一个从左到右的渐变背景色

.demo{
    width: 100px;
    height: 100px;
    background: linear-gradient(to right,red 70%,green);
}

创建一个从左上到右下的渐变颜色(这里的 to right bottom 也可以写成 right bottom 。)

.demo{
    width: 100px;
    height: 100px;
    background: linear-gradient(to right bottom,red,green);
}

创建一个 30 度角的线性渐变。

.demo{
    width: 100px;
    height: 100px;
    background: linear-gradient(30deg,red,green);
}

创建一个 0 度角的线性渐变。

 .demo{
    width: 100px;
    height: 100px;
    background: linear-gradient(0deg,red,green);
}

径向渐变

.demo{
    background-image: radial-gradient(shape size at position, start-color, ..., last-color);
}

说明：径向渐变同样可以省略 shape size at position ，这样默认就是一个圆形的径向渐变，中心点在元素的中心点位置。每个颜色后面可以跟一个表示长度的数值 % px rem 等，用来表示颜色的覆盖区域，大于这个数值则开始径向渐变。

实例

创建一个红色到绿色的径向渐变。

.demo{
    width: 200px;
    height: 100px;
    background:radial-gradient(red,green);
}

说明：渐变默认形状是椭圆形，但是如果在一个宽度和高度相等的元素内则会变成圆形，但是其实还是椭圆的，只是看到的像圆形，这是因为两个中心点重合了。

创建一个椭圆红色到绿色的假圆形径向渐变。

.demo{
    width: 100px;
    height: 100px;
    background:radial-gradient(red,green);
}

说明：这不是真的圆形如果宽度和高度不相等则变成椭圆的。

创建一个真正的圆形渐变。

.demo{
    width: 100px;
    height: 100px;
    background:radial-gradient(circle,red,green);
}

创建一个重复的径向渐变。

.demo{
    width: 100px;
    height: 100px;
    background:repeating-radial-gradient(circle,red 5%,green 20%);
}

设定渐变的不同size我们左下对比。

.demo{
    width: 100px;
    height: 100px; 
    float: left;
    margin-right: 10px;;  
}
.demo0{
    background-image: radial-gradient( red, green);
}
.demo1{
    background-image: radial-gradient(closest-side , red, green);
}
.demo2{
    background-image: radial-gradient(farthest-side , red, green);
}
.demo3{
    background-image: radial-gradient(closest-corner , red, green);
}
.demo4{
    background-image: radial-gradient(farthest-corner , red, green);
}

说明：从左到右依次为：默认 closest-side farthest-side closest-corner farthest-corner,可以清楚的观察到渐变的中心点都是元素的中心点，当时他们的过度点出现了明显的不同。

改变渐变的中心点。

.demo{
    width: 100px;
    height: 100px; 
    background-image: radial-gradient( at top left,red, green);
}

说明，也可以是数量单位例如

background-image: radial-gradient( at 10% 20%,red, green);

我们可以把它理解为一个坐标。

总结

不要写成下面这样：

(left,circle,red 10%,yellow 50%,green 50%)

left 前面一定要加上 at 不然它的兼容性很不好。

使用渐变背景色可以是 background 也可以是 background-image 但不要写成 background-color 。
设置了渐变背景色就不能在用一个元素内在使用图片了，如果想叠加图片可以像下面这样的结构：

<div class="demo">
    <div class="demo-img"></div>
</div>

通过在内部新建一个标签来引用你想插入的图片，并通过定位来达到想要的效果 4. 尽量使用渐变而不是图片，这样可以减少网络请求，也减少项目体积。 5. 渐变属性因为不兼容 IE8 浏览器，所以在使用这个的时候要做好降级处理。例如可以在 IE8 使用纯色，或者通过图片代替，而非 IE8 在使用渐变，这也可以通过 JS 判断环境。

文字处理

text-justify 对齐

是给对齐属性text-align:justify做一个补充。改变字与字之间的间距使得每行对齐。

要使用这个属性一定要先设置 text-align:justify;
且仅仅兼容 IE 浏览器。

text-overflow 文字超出

text-overflow 用于设置当文字内容超过所在元素设定的范围时候的展示效果。
text-overflow: clip|ellipsis|string;
text-overflow一定要和overflow: hidden;、white-space: nowrap; 一起使用，不能单独用。
这个属性通常是在有设置宽度和高度的元素使用

text-shadow 文本阴影

可以给任意的字符设置一个或多个阴影

.demo{
    text-shadow: h-shadow v-shadow blur color;
}

文字排版

word-break 文本打断

一段英文段落，在其文本所在的元素边缘通常都会把整个单词另起一行，而这个属性可以打破这种排版方式，让这个段落的英文单词都是分开的，同汉字一样，在元素的边缘只是最后一个字母换行。

word-break: normal|break-all|keep-all;

这个和 word-wrap有区别， word-wrap必须要是连续的英文字符,而它没有限制，所以不要记混。
这个属性对英文字符、半角空格、连字符都起作用。

word-wrap 换行

只用于英文
word-wrap 属性允许长单词或 URL 地址换行到下一行。
这个属性有一个近似属性wrod-break, wrod-wrap主要是换行，wrod-break是用来英文句子怎么在内断开的。

对比

说明从左往右，第一张图什么都不设定，第二张图设置word-wrap: break-word,它在空格处换行了。而第三章图设置word-break:break-all;在空格处没有换行而是打破了连续的单词。

总结

必须要是连续的英文字符。
这个属性主要是对英文起作用，如果中英文混杂，则优先把中文和英文先换行，然后再打破连续的英文单词。

letter-spacing 字间距

这个属性常用来修改文字之间的距离，它允许为负值，默认的字符间的距离为 0。如果数值小于 0 字符会紧凑，大于 0 时越大越松散。

letter-spacing:5px;

与 word-spacing 的区别： word-spacing 这个属性只能作用英文，意思是两个英文单词之间的距离，这里要注意是‘英文单词’而不是‘字符’，而 letter-spacing 没有任何限制可以作用于‘任何字符’。
这个属性仅仅对字符起作用，不能作用于元素标签上面。
这个属性不可以是 % 这样的计量单位，因为它不是一个距离，没有相对点，浏览器不知道该如何解释。单位可以为‘px’ | ‘rem’ | ‘em’

空间转换2D和3D

perspective 透视

目前浏览器都不支持 perspective 属性（http://www.imooc.com/wiki/css3lesson/perspective.html）

transform 2D 平面转换

http://www.imooc.com/wiki/css3lesson/transform2d.html transfrom 这个属性可以改变一个目标元素在页面中的位置，允许旋转，缩放，倾斜或平移给定元素

transform 3D 空间转换

http://www.imooc.com/wiki/css3lesson/transform3d.html transform 属性向元素应用 3D 转换。属性允许我们对元素进行旋转、缩放、移动或倾斜。

总结

左手法则
设置 transform-origin 这个属性改变旋转起始点的位置
工作中遇到改变元素的位置，例如拖拽这些使用 transform:translate3D(x,y,z) 可以提高浏览器的性能，而且它的位置变化不会改变页面中其它元素的位置
rotateX、rotateY这些是 3D 空间的变化，不可以出席在 2D 空间上面。

过渡和动画

transition 过渡

transition 用来设置一个属性状态从开始到结束中间这个过程的变化。

实例：当鼠标移动到元素上，使用过渡属性来让元素的高度变化，从而实现一个过渡效果。

.demo{
    width: 100px;
    height: 100px;
    background: #000;
    transition: height 1s;
}
.demo:hover{
    height: 150px;
}

宽高过渡变化：transition: height 1s,width 1s; 或 transition: all 1s; 当鼠标移动上去 1s 之后开始动画： transition: height 1s ease-in 1s,width 1s ease-out 1s;

实例： hover 到按钮上改变按钮的位置和背景颜色。

.demo{
    width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    background: #000;
    color:#fff;
    border:none;   
    transition: background .4s,transform .4s;
}
.demo:hover{
   background: red;
   transform: translateY(-5px);  
}

总结

尽量不要使用 all 来驱动过渡的属性，这会使得浏览器卡顿。
尽量不要使用 margin-left 这类的属性，很可能会打乱页面元素的位置。
推荐使用 transform 来改变元素的位置和大小。

animation 动画

http://www.imooc.com/wiki/css3lesson/animation.html animation 是动画，而 transition 是过渡，可以说 animation 是 transition 的升级版，它可以创建一个持续的自动执行动画。

定义：animation 是几个属性值的缩写，我们定义一个动画通常使用 animation 就足够了，如果想单独改变动画的某些属性可以使用单独的动画属性去改变，构成一个动画的最基本属性需要一个@keyframes 和 duration。

排版布局

columns 字符分割

columns 是 column-width每列宽度，column-count 每列的列数这两个属性的缩写，当列宽和列数的乘积大于元素的宽度时候就不会在分开自动合成一列。当他们的乘积小于元素的外宽的时候，每列的实际宽度可能大于column-width 设定的值。

.demo{
    -webkit-columns:200px 2;
    column-gap:100px;
    column-rule:1px solid #ccc; 
}

屏幕快照 2021-03-11 上午10.37.23.png

flex 弹性盒子布局介绍

flex 布局也叫弹性布局，它的特点是可以实现子元素的自适应屏幕大小，可以自由的分配每个 box 需要占用的空间比例。我们把父元素称作为：容器。子元素称作为：项目。容器默认存在两个轴：水平主轴（mian axis）、垂直交叉轴（cross axis）。左侧是主轴的开始点，右侧是主轴的结束点，垂直方向上顶部是交叉轴的开始位置，底部是交叉轴的结束位置。

语法

通过下面两种形式都可以实现弹性盒模型“容器”的初始化

块级弹性模块。

div{
    display:flex; /* 创建一个弹性盒模型，容器为块级，项目自适应 */
}

内联弹性模块。

div{
    display:inline-flex; /* 创建一个行内盒模型 */
}

屏幕快照 2021-03-11 上午10.52.06.png

总结

需要父元素首先设置成 dislpay:flex 这样子元素才能起作用，而子元素的 float 、 clear 、 vertical-align 属性都失去作用。
子元素可以使用 position 来脱离 flex 布局。

flex order 排序

子元素可以通过设置 order 数值的大小来设定在页面中出现的顺序，数值小的在前，数值大的在后
通过使用 order 属性可以实现拖动排序，当 JS 脚本运行之后，只要确定元素拖动到指定的位置通过修改对应的 order 就可以轻松完成顺序的改变。
只有在弹性盒模型下起作用

flex 弹性盒子

display:flex 和flex 弹性盒子是有区别的，前者是修改display实现弹性和模型的，而 flex 仅仅是弹性盒模型下 flex-grow、flex-shrink 和 flex-basis三个的缩写属性，用来用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex父元素设置成 dispaly：flex 之后子元素的空间分配通过 flex 设置，其特点为弹性，即内部分配空间如果按照比例分配则其不会随着父元尺寸变化而变化。

语法

{
    flex: flex-grow flex-shrink flex-basis|auto|initial|inherit|none;
}

屏幕快照 2021-03-11 下午4.17.57.png

实例

给一个块级元素添加 flex 属性，让其子元素平均分配空间。

<div class="demo">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.demo{
    display:flex;
    width:200px;
    height:60x;
    line-height:60px;
    border: 1px solid #ccc;
    border-right: none;
}
div>.item{
    width:100px;
    border-right:1px solid #ccc;
    text-align: center;
    flex:1;
}

解释：容器 demo 设置了 flex 总宽度为200px，项目 item 设置宽度 100px；如果正常情况下会超出容器，我们通过设置 flex:1 让项目自适应容器，并等分了空间。

屏幕快照 2021-03-11 下午4.21.02.png

给一个块级元素添加 inline-flex 属性,让其变成行内元素，子元素平均分配

.demo{
    display:inline-flex;
    width:200px;
    height:60x;
    line-height:60px;
    border: 1px solid #ccc;
    border-right: none;
}
div>.item{
    width:100px;
    border-right:1px solid #ccc;
    text-align: center;
    flex:1;
}

demo和文字在一行，demo变成内联元素了。

屏幕快照 2021-03-11 下午4.21.57.png

一个左侧100px，右侧自适应的，左右布局

 <div class="demo-2">
    <div class="item-left">1</div>
    <div class="item-right">2</div>
</div>

.demo-2{
    display:flex;
}
.item-left{
    flex-basis: 100px;
}
.item-right{
    flex-grow:1;
}

屏幕快照 2021-03-11 下午4.23.10.png 4. 一个左侧为100px，右侧最大为600px的左右布局

.demo-2{
    display:flex;
}
.item-left{       
    flex-basis: 100px;
    background: red;
    flex-shrink:0;
}
.item-right{        
    flex-basis: 600px;
    background: yellow;
}

右侧最大宽度为600，如果小于 600 右侧将随屏幕尺寸缩小。屏幕快照 2021-03-11 下午4.23.59.png

总结

现在的很多前端开发都会接到一些设计稿，要求在各种终端都可以适应，那么用好 flex 是一个关键。 flex:1 是其中最常见的设置,它等价于：

.demo{
    flex-grow:1;
    flex-shrink:1;
    flex-basis:auto
}

其意思就是剩余空间就扩大，而剩余空间不足就缩小，就像弹簧一样。那么这部分就可以自适应各种屏幕大小了。

flex-basis 和 flex-grow 同时使用时候 flex-basis 不起作用。
flex 的属性默认是 0 1 auto，它们的顺序是 flex-grow flex-shrink 和 flex-basis 即三不：有剩余空间不扩大、当空间不足时缩小、不限制尺寸。
flex 属性有两个快捷值即 auto（ 1 1 auto）和 none（0 0 auto）。
尽量不要使用缩小，因为它的兼容性不是很好。

flex-direction 排列方向

flex-direction 用来调整主轴的方向，主轴默认是水平方向且从左到右，通过这个属性设置主轴的方是水平方向从左到右还是垂直方向从上到下或者从下到上排列。

<div class="demo">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.demo{
    display:flex; // 让容器变成弹性盒
    flex-direction:row-reverse; 改变项目的排列方向
}

实例

让子元素从上到下垂直方向排列

 display:flex; 
 flex-direction:column;

让子元素从下到上反向排列

 display:flex; 
 flex-direction:column-reverse;

让子元素从左到右排列

 display:flex; 
 flex-direction:row;

让子元素从左到右反向排列

display:flex; 
flex-direction:row-reverse;

通过 flex 可以做一个上下固定，中间自适应的布局。

<div class="demo">
    <div class="head">头部</div>
    <div class="content">内容</div>
    <div class="foot">尾部</div>
</div>

html,body{
    padding:0;
    margin:0;
    height: 100%;
    color:#fff;
}
.demo{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.head,.foot{
    
    flex:0 1 100px;
    background: #000;
}
.content{
    flex: 1;
    background: red;
}

这个布局就是两端固定，中间自适应的典型写法，而如果设置 flex-direction:row就变成了左右固定，中间自适应的横向布局。而他们正是组成页面的基础。

总结

一定要在弹性盒模型下使用。
可以通过样式直接设置排列顺序，节省浏览器性能。

flex-wrap 换行

默认情况下，设置了 display:flex 的容器是不会换行的，这时候如果我们希望它换行就可以通过 flex-wrap设置超出宽度换行，也可以设置它如何换行，既换行之后的排列的方向。

语法

屏幕快照 2021-03-11 下午4.36.49.png

实例

设置一个容器，当内部的内容超过容器的宽度时候向下换行。

.demo{
    display: flex;
    flex-wrap: wrap;
}
.item{
    width: 200px;
    height: 100px;
    line-height: 100px;
    background: #ccc;
    border-right: 1px solid #fff;
    text-align: center;
}

设置一个容器当内部的项目超过容器的宽度时候反向向下换行

 display: flex;
 flex-wrap:  wrap-reverse;

flex 弹性盒模型默认是不换行的既 nowrap

justify-content (轴内)对齐方式

justify-content 属性可以改变项目在容器中的对齐方式。

语法

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

屏幕快照 2021-03-11 下午4.56.03.png

通常我们在不知道容器宽度时候可以使用这种方式去设置我们的排版。

align-items 竖直方向对齐方式

align-items 属性定义flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。

子项目含有一个 align-self 属性可重写父级容器 align-items 属性，可以对单个项目对齐方式进行单一控制。

语法

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

屏幕快照 2021-03-11 下午5.01.05.png

实例

在可以使用 flex 的开发环境中，我们可以使用这种方式去对齐文字和图片，文字和 input这样的对齐方式简单快捷，远胜于其他的方式。

align-content 多轴对齐

align-content 是当容器内部的元素换行之后，我们如何设置他们所有在水平方向上排列的，这里要说的是它是一个多轴的统一设置。

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

屏幕快照 2021-03-11 下午5.07.04.png

使用 justify-content 属性对齐主轴上的各项（水平），它和 align-content 并不冲突
容器内必须有多行的项目，该属性才能渲染出效果

Grid 布局简介

通过设置 display: grid; 可以定义一个 CSS 网格。然后使用 grid-template-rows 和 grid-template-columns 属性来定义网格的 columns 和 rows。使用这些属性定义的网格被描述为显式网格 (explicit grid)。

语法

块级的网格。

    display:grid

内联级的网格。

    display:inline-grid;

屏幕快照 2021-03-11 下午5.16.18.png

grid-template 是 grid-template-columns 、grid-template-rows、 grid-template-areas 缩写。
grid 是 grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow的合并缩写。

提示：gird 属性很复杂因此不推荐 grid 的缩写

屏幕快照 2021-03-11 下午5.17.11.png

实例

创建一个块级的 Gird 布局。

<div class="demo">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.demo{
    display: grid;
    grid-template-columns:100px 100px;
    grid-template-rows:100px 100px;
    border:1px solid #eee
}
.item:nth-of-type(1){
    background: red;
}
.item:nth-of-type(2){
    background: green;
}
.item:nth-of-type(3){
    background: purple;
}

创建内联级的 Gird 布局。 display: grid; 改为 display: inline-grid;即可

Grid 布局是二维布局原因就是项目所在的单元格是由行和列产生的。
网格线的开始位置在容器的最顶端和最左边。
使用区域命名之后会影响网格线的名称会变成区域名-star、区域名-end
可以把 columns 理解为高度，rows理解为宽度这样便于理解

Grid 行和列

http://www.imooc.com/wiki/css3lesson/gridrows.html grid-template|auto/rows(行)|columns (列)

定义：

grid-template-columns 该属性是基于网格列. 的维度，去定义网格线的名称和网格轨道的尺寸大小。
grid-template-rows 该属性是基于网格行的维度，去定义网格线的名称和网格轨道的尺寸大小。
repeat() 函数表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。例如 repeat(2, 100px 200px 300px)实际就是 100px 200px 300px 100px 200px 300px。
auto-fill和 auto-fit 属性规定如何填充列（是否进行协调）。
fr fr 代表倍数关系，它数字部分都是整数例如 1fr 2fr 后面是前面的两倍。
minmax() 定义了一个长宽范围的闭区间，它与 CSS 网格布局一起使用。例如 minmax(10px, 100px) 就是这个长度是 10px ~ 100px 之间。
grid-auto-columns 指定了隐式创建的网格纵向轨道（track）的宽度，超出定义的列后，余下没有定义的列宽。
grid-auto-rows 用于指定隐式创建的行轨道大小。超出定义的行后，余下的行高。

语法

grid-template-columns:none | px | % | em| rem | fr | auto| minmax(min,max) | auto| repeat;
grid-template-rows:none | px | % | em| rem | fr | auto| minmax(min,max) | auto| repeat;
grid-auto-columns:none | px | % | em| rem | fr | auto| minmax(min,max) | auto| ;
grid-auto-rows:none | px | % | em| rem | fr | auto| minmax(min,max) | auto| ;

说明：grid-template-columns 和 grid-template-rows 接受多个值，并且它们可以混合使用。grid-auto-columns 和 grid-auto-rows 接受 1 个值。

grid-template-rows:repeat(2,10px 1rem 1em,1fr)

repeat的意思是重复，上面的意思每 4 行的高度分别是 10px 1rem 1em,1fr 一共重复 2 次，共 8 行。

grid-template-rows: 100px minmax(40px,60px)

minmax 的意思是取最大和最小，上面的意思是第 2 行的高度最小是 40px 最大是 60px

媒体查询

@media 媒体查询

@media 通常被人们称为媒体查询，其实就是响应式，它通过设定后面的参数来实现在不同的浏览器可视尺寸下的展示效果。它不仅仅可以用来设置 CSS 样式，也可以设置 HTML页面中 link 的引用

语法

在开始使用 @media 标签前，首先需要在 .html 文件中设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no>

这段代码主要是用来兼容移动设备的展示效果。

屏幕快照 2021-03-11 下午6.57.47.png

说明：我们设置时候通常规则如下：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover，user-scalable=no" name="viewport" />

意思是缩放比例为 1，最大缩放比例为 1 不可以手动缩放。里面的 viewport-fit 是指浏览器视图填充方式是否全屏。

@media 标签

下面我们就来看一下@media 标签的使用方法，先看一下语法：

@media mediatype and|not|only (media feature) {
    CSS Code...
}

说明： @media 不同于其它的 CSS3 属性，它是一个标签，后面跟了一个名称，和一个大括号，这和我们 JavaScript 函数很像，大家也可以这么理解。

1. mediatype

用来描述当前浏览器所在设备的类型，比如是计算机显示器、手机、电视等等。屏幕快照 2021-03-11 下午7.04.55.png

说明：我们常用的媒体类型通常设置为 screen。代码如下

@media  screen and (max-width: 500px) {
}

上面就是所有浏览器中适用我们 and 之后的规则。

2. 关键字 关键字就是用来描述响应条件的描述，具体作用如下：

and 就是和某种定制的屏幕宽度下；
not 关键字是用来排除某种指定的媒体类型；
only 用来定某种特定的媒体类型。

3. media feature 括号内的它就是用来指定分辨率的。写法如下：

@media only screen and (max-width: 500px) {

}

屏幕快照 2021-03-11 下午7.10.51.png

经验介绍：我们在设置媒体响应的条件时候，通常使用的是 max-width、min-width、max-height、min-height，这里面有一个比较绕人的地方：

min 代表最小也就是说满足我们设置条件的最小值是多少，比它大的都会满足。
max 则代表的是最大值，比它小的都会满足。

实例

当浏览器宽度小于 400px 时候背景色设红色，大于 400px 时候背景色设白色

@media screen and (max-width:400px){
    html,body{
        background:red;
    }
}

使用 only 当浏览器宽度小于 600px 时候背景色设红色，大于 600px 时候背景色设白色

@media only screen and (max-width:600px){
    html,body{
        background:red;
    }
}

使用多个 and 来设置屏幕背景色。当浏览器可视区域大于 600px 小于 800px 背景色为红色

@media only screen and (min-width:600px) and ( max-width:800px){
    html,body{
        background:red;
    }
}

总结

媒体查询不只是用来限定 css 文件中使用哪组样式，也可以直接作用在 link 标签上，让页面直接选择什么样的 css 文件。如

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

说明：@media 变成了标签属性 media ,上面的意思就是用来区分移动设备是横向还是纵向的。

伪类

only 元素选择 (only-child & only-of-type)

在前端开发页面的过程中需要对一些特定类型的元素赋予特殊的样式，通常我们不会在 HTML 标签上一个个去增加 class 去设置特殊的样式，这时候通过元素选择伪类就能解决这类问题。本章主要介绍 only-child 和 only-of-type 这两个伪类。

only-child 匹配属于父元素中唯一子元素。当元素添加这个伪类的时候，它在所属的父元素之内，有且仅有它自己时伪类生效
only-of-type 匹配属于父元素的特定类型的唯一子元素。

实例

only-child

当页面中只有一个.demo 标签时候背景变成红色,(当页面有两个 demo class 时候不再有任何效果)

<body>
    <div class="demo">慕课网</div>    
</body>


.demo:only-child{
    color:#fff;
    background: red;
    padding:10px;
}

当 demo 元素内部包含 demo 元素还是起作用的，因为 body 下面的子元素只有 1 个。

<body>
	<div class="demo"> 慕课网 
	    <div class="demo"> 慕课网  </div>
	    <div class="demo"> 慕课网  </div> 
	</div>
</body>

当在 demo 内部只有一个 demo 时候，内部的 demo 变成红色:

<div class="demo"> 慕课网 
    <div class="demo"> 慕课网  </div>
</div>

.demo>.demo:only-child{
    color:#fff;
    background: red;
    padding:10px;
}

only-of-type

给类名为 demo 的元素增加红色背景

<body>
    <div class="demo"> 慕课网 </div>   
</body>


.demo:only-of-type{
    color:#fff;
    background: red;
    padding:10px;
}

总结

这两个伪类功能很类似，我们不容易区分但是这里有个小技巧 :only-child 就像 JS 中的 id 一样，只能是唯一的。

before && after

before：元素的内容之前插入新内容。
after：元素的内容之后插入新内容。

实例

在元素内容之前插入文字：姓名。

<div class="demo">慕课网</div>

 .demo:before{
    content: '姓名：';
}

在元素内容之后插入：很好。

 .demo:after{
    content: '很好';
}

总结

使用伪类 after 清除元素内部浮动效果：

 <div class="demo">
    <div class="item">慕</div>
    <div class="item">课</div>        
</div>
<div class="">网</div>

.demo:after{
    content: '';
    display: block;
    clear: both;
}
.item{
    float: left;
}

屏幕快照 2021-03-11 下午7.35.37.png

下面灰色部分是没有清除浮动的效果，上面是清除浮动的效果。因为清除了浮动所以 “网” 这个字换行了。

在元素内容开始前插入图片。

<div class="demo">慕课网</div>

.demo:before{
    content: '';
    display:inline-block;
    width:12px;
    height:12px;
    font-size:12px;
    line-height:12px;
    background: url(//img.mukewang.com/wiki/5eea2f6809a8d35e00400040.jpg) center  no-repeat;
    background-size: cover;
}

屏幕快照 2021-03-11 下午7.39.19.png

总结

注意：对于 IE8 及更早版本中的:before、:after，必须声明。
在元素选择器后面这样写也可以：

.demo::before{

}
.demo::after{
    
}

nth 元素选择

nth-child(n) 选择器匹配属于其父元素的第 N 个子元素；
nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，从最后一个子元素开始计数；
nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。

都是用来匹配父元素内部子元素的

.item:nth-child(2n+1){
}
.item:nth-of-type(n){
}
.item:nth-last-child(2n){
}
n 从 0 开始计数的正整数。

使用 nth-of-type(3n+1) 起作用，而 nth-of-type(1+3n) 不起作用，所以 n 一定要放在最前面。
让所有偶数的背景变红:

.item:nth-of-type(2n){
    background: red;
}

计算函数

calc 计算属性

通过计算函数，可以在不刷新浏览器的情况下，实时的让属性值发生变化，calc() 函数用于动态计算长度值。

calc()可以按照我们写的公式，在浏览器中进行计算，使用的时候，要注意：运算符的前后都需要保留一个空格，例如：width: calc(100% - 20px)；中，- 号前后要有一空格。
它支持 “+”， “-”，“*”，“/” 运算；
calc() 函数使用标准的数学运算优先级规则。

语法

.demo{
    /* property: calc(expression) */
    width: calc(100% - 80px);   /* demo 的宽度 = 父元素总体宽度 - 80px */
     height: calc(100% /3);    /* 高度为父元素的 1/3 */
      width: calc( (100% + 200px) /3);  /* 宽度为父元素的 (100% + 200px) /3 */
}

calc 多用于在父级元素大小变动时候内部子元素的大小展示
遇到复杂的运算，我们可以人为的去先处理下，来减少内部的（ )
calc 中的运算符的前后都需要保留一个空格

**非原创，参考文章：www.imooc.com/wiki/css3le… **

CSS3-笔记

简介