css第三帖

一、布局

使用块元素搭建网页结构，改变默认文档流的方式，让其在一行中显示多列。【让块在一行中显示】

<div>
	<div></div>
	<div></div>
	<div></div>
</div>
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

1.浮动布局（float）

（1）float

float:left/right

可以使块元素脱离当前的文档流

1. 宽度如果没有手动指定那么就由内容决定
2. 多个浮动元素在一个浮动流中并排显示，如果一排放不下就会自动换行
3. 浮动元素失去了对父元素的支撑

（2）clear

clear:left/right/both

清理左边/右边/左右两边的浮动元素
一般使用这个特性强制子元素换行，达到支撑父元素的目的

1. 一行多列：
   全部浮动

ul>li{
    float:left;
    }

一行两列
1）方法一：

两列都浮动
	.left {float:left }
	.right {float:right; }

2）方法二：

一列浮动，一列添加margin-left
	.left {float:left; width:200px}
	.right {margin-left:220px;}

（3）overflow、overflow-x、overflow-y
可取值：auto/none/visible/scroll
当父元素的宽/高固定，子元素的宽/高超过了父元素就可以使用这个特性
（4）display
可取值：block/inline/inline-block/…（块/行内/行内块）
行内块：
可以与其他行内元素共享一行空间
可以指定宽高

2.定位布局（position）

（1）static
静态（默认） 非定位元素
（2）relative
定位元素（相对定位）
参照点：原先所在的位置
特性：不脱离文档流（宽度默认为为100%，原来在文档流的位置不会被抢占），但是可以覆盖在其他元素上
（3）absolute
定位元素（绝对定位）
参照点：距离它最近的父定位元素，如果没有，参照视口
特性：脱离文档流（宽度由内容决定，原来在文档流的位置被其他元素抢占）
（4）fixed
定位元素（固定定位）
特性：脱离文档流
参照点：相对于浏览器视口，并且不会随着网页的滚动而滚动
（5）sticky
定位元素（粘滞定位 【CSS3新特性】）
特性：不脱离文档流
参照点：是relative与fixed的集合，使用top/left/right/bottom设置过渡点，当超过了这个临界点，就提现fixe固定在网页中的特性

【注】

1. 只能定位元素才能使用定位属性
   top 、left、bottom、right
2. 改变定位元素在z轴中的位置
   z-index
   默认为0，值越小越靠下

3.伸缩盒（flex）

作用：主要应用在响应式(网页可以随着终端的屏幕尺寸合理调整布局)布局中
应用：

1. 父元素(宽高都需要明确)
   设置为伸缩盒：display:flex
   设置伸缩方向：flex-direction:row/column默认为row
   设置是否换行：flex-wrap:nowrap/wrap
2. 子元素
   基础值：flex-basic:
   扩张值：flex-grow:
   收缩值：flex-shrink:
   速写：flex:grow shrin basic; 或flex:grow;

二、优先级

1. 选择器优先级
   !important > 行内样式>ID选择器 > 类选择器=伪类选择器=属性选择器 > 标签选择器=伪元素选择器 > 通配符 > 继承 > 浏览器默认属性
2. 选择器权重：
   内联样式表的权值为 1000
   ID 选择器的权值为 100
   Class 类选择器的权值为 10
   HTML 标签选择器的权值为 1

三、动画（animation）

1) 定义动画帧

  @keyframes 动画名称 {
    	from {
    		  left:0;
    	}
    	to {
    		   left:1600px;
    	}
  }

或

		@keyframes 动画名称 {
			0% {
				left:0;
			}
			...
			100% {
				left:1600px;
			}
		}

2) 引用动画
动画名称：animation-name:
一次动画持续时间：animation-duration:3s;
动画重复的次数：animation-iteration-count:(2【两次】/infinite【循环】)
动画运动方式：animation-timing-function:(linear【线性】/steps()【步数】)
动画最后一帧的填充样式：animation-fill-mode:(forwards【最后一帧】/backwards【第一帧】/both)
动画方向：animation-direction:(alternate-reverse【交替反转】/reverse【反转】/alternate【交替】)
延迟：animation-delay:
动画状态：animation-play-state:running;
3) 第三方css动画库：animate.css
如何应用第三方库css/js【iconfont fontawesome animate.css】：

1. 模块用 npm install xxx
2. 本地下载 animate.css/iconfont.css
3. cdn 别人吧代码管理在别人的服务器（cdn）上,我们在线应用
   https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css
   https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css

四、变形（transform）

1. 变形函数：
   放大两倍：transform:scale(2);
   缩小一半：transform:scale(0.5);
2. 旋转：
   rotate(45deg);
   rotateX(45deg);
   rotateY(45deg);
   rotateZ(45deg);
3. 倾斜:
   skew(45deg)
   skewX(45deg)
   skewY(45deg)
4. 移动
   translate(300px)
   translateX(300px)
   translateY(300px）

五、过渡（transition）

属性： transition-property
持续时间：transition-duration
时间曲线函数：transition-timing-function
transition与animation的区别：

1. transition表示某些属性的过渡
   例如：width:100px -> 200px 过渡
   transition-property:width;
   transition-duration:2s;
   transition-timing-function:linear;
   不需要定义关键帧
2. transition用于表示简单的动画，需要触发（:hover）

六、媒体查询（@media）

不适用于大型的电商网站
适用于网页html结构相同，但是需要在不同设备上显示不同的布局