CSS及C3基础样式

媒体查询css文件引入写法

<link rel="stylesheet" href="" media="screen and (max-width: 480px)">

媒体查询css style写法

@media screen and (max-width: 480px) {
	body {
		background-color: red;
	}
}

@media screen and (min-width:481px) and (max-width:768px) {
	body {
		background-color: yellow;
	}
}

@media screen and (min-width:769px) and (max-width:992px) {
	body {
		background-color: blue;
	}
}

@media screen and (min-width:993px) and (max-width:1200px) {
	body {
		background-color: pink;
	}
}

@media screen and (min-width:1201px) {
	body {
		background-color: orange;
	}
}

使用定位保证图片水平垂直居中（满足不知道图片高度时）

.d1 {
	width: 500px;
	height: 500px;
	position: relative;
}

.d1>img {
	/* 宽高可以不定 */
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
	
<div class="d1">
	<img src="img/1.png">
</div>

不使用定位情况下保证图片水平垂直居中（满足不知道图片高度时）

.d1 {
	width: 500px;
	height: 500px;
	display: flex;
	align-items: center;
}

.d1>img {
	/* 宽高可以不定 */
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

<div class="d1">
	<img src="img/1.png">
</div>

实际字体所占高度

隐藏滚动条，处理兼容问题

.d1{
	/* 兼容火狐 */
	scrollbar-width: none;
	/* 兼容IE10以上 */
	-ms-overflow-style: none;
	/* 兼容欧朋 */
	overflow: -moz-scrollbars-none;
}
/* 兼容谷歌，苹果 */
.d1::-webkit-scrollbar {
	display: none;
}

flex布局换行

.d1{
	display: flex;
    flex-wrap: wrap;
    /* 如果设置了高度，让第二行紧挨着第一行，保证正常布局 */
    align-content: flex-start;
}

一行字体多出换省略号

p{
	width: 100px;
	overflow: hidden;
	/* 禁止换行 */
	white-space: nowrap;
	/* 省略号 */
	text-overflow: ellipsis;
}

多行字体出现省略号（兼容性略差，功能能实现）

p {
	overflow: hidden;
	display: -webkit-box;
	/* 指第二行出现省略号 */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	text-overflow: -o-ellipsis-lastline;
	text-overflow: ellipsis;
}

单位

px	像素单位（相对长度单位）
pt	称“点单位”，1点=0.376毫米=1.07英美点=0.0148英尺=0.1776英寸（绝对长度单位）
em 	继承父级单位的font-size大小的倍数,即父级div{font-size:14px;}== (1em=14px)
rem  相对于html,body的font-size进行缩放,即祖先body{font-size:14px;}== (1rem=14px)
vw	当前屏幕可见宽度，即浏览器宽度1200px,1 vw=1200px/100=12px。
vh	当前屏幕可见高度，即浏览器高度900px,1 vh=900px/100=9px。

从一张大图中获取各种小图标

div {
	background: url(img/1.png) no-repeat;
	width: 30px;
	height: 30px;
	margin: 0 auto;
	background-position: 0 0;
}

修改图片颜色

.d1{
  overflow: hidden;
  height: 20px;
}
.di:hover>img{
  // 宽高自定
  filter: drop-shadow(0 20px #E62129);
  position: relative;
  top: -20px;
}
//利用图片投影修改投影颜色 替换原图
<div>
  <img src="1.png" alt="" height="20">
</div>

首行缩进两格

p {
	text-indent: 2em;
}

去除input默认样式

input{
    outline: none;
}

去除textarea默认样式

textarea{
    outline: none;
    // 禁止用户拉伸宽高
    resize: none;
}

input placeholder的默认字体样式，处理兼容问题

input::-webkit-input-placeholder {
   /* WebKit, Blink, Edge */
    color:#b3b3b3;
}
input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */   
    color:#b3b3b3; 
}
input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color:#b3b3b3;
}
input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color:#b3b3b3;
}

去除select箭头，处理兼容问题

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {
	display: none;
}

CSS和C3基础

浏览器兼容前缀：
	-moz-      火狐等使用 Mozilla内核的浏览器
	-webkit-   谷歌、Safari等使用 Webkit内核的浏览器
	-o-        Opera浏览器，使用Blink内核
	-ms-       IE，使用 Trident内核
	
在HTML中引入CSS样式的方式：
	(1)行内样式：直接在标签中用style属性设置CSS 如<p style="font-size:10px;">字体大小</p>
	(2)内部样式表：把css写在head的<style>中，规范化应为<style type="text/css">
	(3)外部样式表：文件扩展名为.css，在外部样式表中不需要<style>标签。
	1.链接式引用外部样式表：
		<link type="text/css" rel="stylesheet" href="css/style.css"/>
	2.导入式引用外部样式表：
	<style type="text/css">
	  @import url("css/stype.css");
	</typle>

样式优先级："就近原则"，!important>行内样式>内部样式表>外部样式表。

基本选择器的优先级：ID选择器>类选择器>标签选择器
CSS3的高级选择器
	1.层次选择器：
		(1)后代选择器A B{ }：中间用空格隔开，只要是A的后代元素都会被选中。
		(2)子选择器A>B{ }：只能选择A的子元素。
		(3)相邻兄弟选择器A+B{ }：只用于A后面一个同级元素
		(4)通用兄弟选择器A~B{ }：用于A后面所有的同级元素
	
	2.结构伪类选择器：根据文档对象模型DOM的节点(元素级别)来操作。
		(1)B:first-child	作为父元素的第一个子元素B，作用和(3)相似
		(2)B:last-child	作为父元素的最后一个子元素B
		(3)A B:nth-child(n)	在父级中查第n个子元素是不是B，不分类型
		(4)B:first-of-type 	选择父元素内B类型的第一个元素B
		(5)B:last-of-type	选择父元素内B类型的最后一个元素B
		(6)A B:nth-of-type(n) 在父级里先是不是B类型，再看位置n

	3.属性选择器：
		(1)A[arrt]  选择包含属性arrt的A标签(也可写多个属性，但要同时存在)
		(2)A[arrt = val]  选择包含属性arrt,且属性值=val(区分大小写)的A标签
		(3)A[arrt ^= val] 选择包含属性arrt,且属性值以val开头的任意字符串
		(4)A[arrt $= val] 选择包含属性arrt,且属性值以val结尾的任意字符串
		(5)A[arrt *= val] 选择包含属性arrt,且属性值包含val字符串的A标签

CSS3设置文本样式：
	(1)<span>标签：用来设置行内元素(或几个文字)的样式。
	(2)字体样式：
		font-size：常用单位px
		font-family：若同时设中英文字体，英文字体要设置在中文字体前面
		font-style：normal标准、italic斜体、oblique倾斜
		font-variant：small-caps; 字体设置为新型的大写字母，所有小写字母都转换为大写。
		font-weight：normal标准、bold粗、bolder更粗、lighter细、100-900数字越大越粗
		font：一次设置字体所有属性，顺序为"字体风格-粗细-大小-类型"
		如 font:italic bold 36px "宋体";
	(3)用font简写方式至少要指定 font-size和 font-family 属性，其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将使用默认值。缩写时 font-size 与 line-height中间要加"/"斜扛如 "12px/1.5em"
	
Text-transform：控制文本的大小写：
	none 		默认，定义既有小写字母也有大写字母的标准文本(原文)
	capitalize 	每个单词以大写字母开头
	uppercase 	全部为大写字母
	lowercase 	全部小写字母
	inherit 	从父元素继承text-transform属性的值。

direction属性：规定文本的方向/书写方向。
	ltr	文本方向从左到右
	rtl	方向从右到左
	inherit 继承父元素direction属性的值。
文字排版
	(1)适用大多数浏览器：
	从左向右 writing-mode: vertical-lr;
	从右向左 writing-mode: vertical-rl;
	(2)只适用IE浏览器:
	从左向右 writing-mode: tb-lr;
	从右向左 writing-mode: tb-rl

排版网页文本
	(1)color文本颜色:
		 rgb：如color:#FF0000; 另一种方法rgb(r,g,b)其中三个参数取整0~255
		 rgba：在rgb基础上加控制alpha透明度的参数，取值0~1，0表示完全透明
	(2)text-align水平对齐:left左(默认)、center中间、right右、justify两端对齐
	(3)text-indent首行缩进：2em或2px 缩进两个字符
	(4)text-height文本行高: 单位px或 按倍数(行高是字体大小的倍数)
	(5)text-decoration文本装饰：none默认无、underline下划线、overline上划线、line-through删除线
	(6)vertical-align垂直对齐：只能作用于<table>表格单元格的对象:top顶、middle居中、bottom底
	(7)text-shadow文本阴影：
		语法"text-shadow:阴影颜色 x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);"
		如text-shadow: blue 10px 10ox 2px;

CSS3设置超链接样式：
伪类:根据标签处于某种行为或状态来修饰超链接样式。其他标签如p可以使用hover
和active。
	语法"标签名:伪类名{声明;}"
	(1)a:link	未访问前的超链接
	(2)a:visited 访问过后
	(3)a:hover	鼠标移到链接上
	(4)a:active	鼠标点击未释放
	(5)设置伪类的顺序：a:link - a:visited - a:hover - a:active
	(6)虽有四种样式,但实际开发中只设置<a>标签选择器样式、鼠标悬浮链接样式

CSS3设置列表样式
	(1)list-style-type：列表项标记类型
	none无符号、decimal数字、disc实心圆(默认)、circle空心圆、square实心正方形
	(2)list-style-image：用图像做列表项标记
	(3)list-style-position：设置列表项标记的位置
	(4)list-style：一次设置列表的所有属性 (属性值为none时说明列表无样式)
	顺序为 list-style-type + list-style-position + list-style-image 

CSS3设置背景样式：
	(1)background-color：背景色不能继承，其默认值是透明transparent	
	(2)background-image：url(图片路径)、none(不显示背景图像)
	(3)background-repeat：背景图像重复平铺
		 repeat(沿水平和垂直方向)、no-repeat(不平铺,只显示一次)、
		 repeat-x(只沿水平方向)、repeat-y(只沿垂直方向)
	(4)background-position：背景图的位置(X水平Y垂直方向的偏移量，如果只有一个方向关键字，则默认另一个关键字为center)
		 1.Xpos Ypos:如 0px 0px：默认无偏移,从左上角出现
				   30px 40px：正向偏移,图像向右和向下出现
				   -50px -60px：反向偏移,图像向左和向上出现
		 2.X% Y%：如30% 50%(水平方向偏移30%，垂直方向居中)
		 3.X水平关键词(left,center,right)、Y垂直关键词(top,center,bottom)
	(5)background：一次设置背景的所有属性 
	(6)background-size背景图片尺寸：
		auto(保持图片原尺寸,不易失真)、cover(放大填满容器标签)、
		百分比percentage、contain(按照图片本身的宽高比例适应定义背景的区域)

gradient线性渐变：颜色沿着一条直线方向过渡
	(1)常规语法：" linear-gradient(position, color1, color2,...)"
	(2)浏览器兼容语法：" -兼容前缀-linear-gradient(position,color1,color2,...)"
	(3)渐变的直线方向：
		to left  从右向左、to top left 向左上方、to bottom left  向左下方、
		to right 从左向右、to top right向右上方、to bottomo right向右下方、
		to bottom从上向下、to top 从下向上、
	
CSS3径向渐变radial-gradient：圆形渐变，颜色从一个起点朝所有方向混合，语法和线性渐变相似。

盒子模型的组成：
content网页内容、border边框、padding内边距、margin外边距
	(1)边框border：
	  border-color 边框颜色：如border-color:#369 #000 #111 #F00;按“上右下左顺时针”设置
	  border-width 边框粗细：如细thin、中等medium、粗的thick
	  border-style 边框样式：常用none无边框、dotted点线边框、dashed虚线边框、solid实线边框
	  border 简写:如下边框border-bottom:2px red dashed;四条边框border:2px blue solid;
	(2)margin外边距：盒子边框以外和其他盒子间的距离 
		margin-top:上外边距、margin-bottom：下外边距
		margin-left：左外边距、margin-right：右外边距
		margin：简写"上右下左"
		auto：设置盒子在它的父容器里居中显示。如margin:0px auto;让整个盒子居中。
	(3)padding内边距：
		padding-left、padding-right、padding-top、padding-bottom、
		padding"上右下左"

盒子模型的尺寸：
增加边框、内边距、外边距后不会影响内容区域的尺寸，但会增加盒子模型的总尺寸。
	(1)内盒总尺寸 = border(上下/左右)+padding(上下/左右)+内容宽/高度
	(2)整个盒子的宽度 = 内容宽度+左右padding+左右边框border+左右margin

box-sizing拯救布局
(语法)box-sizing:content-box、border-box、inherit
	(1)content-box：盒子的宽度或高度=border+padding+(margin)+width/height
	(2)border-box：盒子的宽或高度等于元素内容的宽或高度
		(即 该内容宽/高度=盒子宽/高度-border-padding )
	(3)inherit：使元素继承父元素的盒子模型模式。

border-radius圆角边框：语法和边框相似，只是四个边框带圆角
(语法)border-radius:length{1~4个数字};
(1)用border-radius制作特殊图形
	圆形：元素的宽度和高度必须相同。圆角半径为元素宽度的一半，或直接设圆角半径为50%
	半圆形：元素的高度是宽度的2倍，且圆角半径为元素的宽度值。
	扇形：即制作四分之一圆形。"三同"元素宽度、高度、圆角半径 "一不同"

盒子阴影：和文本阴影相似
(语法)box-shadow:inset x-offset y-offset blur-radius color;
inset：内部阴影，可选。
x-offset：X轴水平位移，正值在右，负值在左。
y-offset：Y轴垂直位移，正值在下，负值在上。
blur-radius：模糊半径可选，只能>=0 值越大阴影向外面积越大,边缘越模糊。

标准文档流：元素根据块元素或行内元素的特性从上到下，从左到右的方式自然排列。
display属性：用于指定标签的显示方式
	block：块元素的默认值，该元素前后自带换行符
	inline：行内元素的默认值，元素会显示为行内元素
	inline-block：行内块元素，兼具行内元素和块元素的特性
	none：元素不会显示

float：指定网页元素向哪个方向浮动
left左、right右、none默认无(元素不浮动 显示在其文本出现的位置)
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果是右浮动，后面的文本流将环绕在它左边：

clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。
clear属性：规定元素的哪一侧不允许其他浮动元素。
	left(左侧不允许浮动元素)、right(右侧不允许)、
	both(左右都不允许，常用于文本在图片下方显示)、
	none(允许浮动元素出现在两侧)

解决父级边框塌陷的方法：
	(1)浮动元素后加空的div，该div设样式clear:both;margin:0px;padding:0px;
	(2)设置父元素固定高度把边框撑开。
	(3)父级添加overflow属性:设置外层盒子的overflow:hidden。但此方法不能用于有下拉列表框的场景。
	(4)父级用伪类after设样式(推荐)
	.clearfix::after{
	    content: "";/*伪元素内容为空*/
	    display: block;/*非默认的就行，也可以是table等等*/
	    height: 0;/*伪元素高度为0，不影响其他元素*/
	    clear: both;/*清除浮动*/
	    visibility: hidden;/*不可见*/
	}
	.clearfix{
	    zoom: 1;/*ie6元素没有BFC模式，但是这句代码会开启ie6中的hasLayout模式，只在ie中支持*/
	}

Overflow属性：溢出处理，也可用于扩展盒子高度。
	1) visible 默认溢出内容可见，显示在盒子外面
	2) hidden  多出来的内容被隐藏且没有滚动条
	3) scroll  有垂直水平2条滚动条，可查看多余内容
	4) auto    如果内容溢出，自动显示滚动条(只有垂直条)查看
	5) inherit 继承父特性


position属性：指定盒子的位置，相对它父级的位置或它自身应该在的位置。
	(1)static 默认无定位，元素按照标准文档布局。
	(2)relative相对定位
	a.特性:
		1.以标准文档流排版为基础，相当于它在原来位置偏移指定的距离。
		2.元素位置偏移后，仍会保留原位置。
		3.层级提高，可以遮盖标准文档流元素和浮动元素。
	b.使用场景：
		相对定位可以不设偏移量，让后面的绝对定位以它为祖先元素作基准定位。
	c.语法 position:relative,指定偏移量时：水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如
		div{ 
			position: relative;
			top:10px;
			left:-10px;
		}
	(3)absolute绝对定位
	a.特性：
		1.以已定位的祖先元素作基准定位，如果没有定位的祖先元素，则以浏览器窗口为基准定位。
		2.元素位置偏移后，不保留原位置(其他元素可以用它原来的空位)
		3.层级提高，可以遮盖标准文档流元素和浮动元素。
		4.设置绝对定位的元素脱离文档流，对其他盒子的定位无影响
	b.使用场景：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等。
	
	(4)fixed固定定位
	a.特性：直接以浏览器窗口为基准定位，偏移位置不受窗口滚动条滚动的影响。
	b.使用场景：窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。
	
	(1)绝对定位(position: absolute)
		将元素从文档流中拖出来，然后用left、right、top、bottom属性相对最靠近它的一个带有定位属性的父包含块进行绝对定位。如果不存在这样的父包含块，则相对于body元素即相对于浏览器窗口。
	
	(2)相对定位(position: relative)
	元素在正常文档流中的偏移位置。首先按static(float)方式生成一个元素(元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留。
	
	(3)固定定位(position: fixed)
	始终位于浏览器窗口内视图的设置位置，不受文档流动影响，
	另外属性background-attachment:fixed;的作用也是设置背景图片固定。
	
	relative与absolute组合：
	1、参照定位的元素必须是相对定位元素的前辈元素。
	2、参照定位的元素必须加入position:relative。
	3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

z-index属性：设置定位元素的堆叠顺序。默认值0，值大的层位于值小层的上方。
	网页中的元素都含有两个堆叠层级，一个是未设置绝对定位时所处的环境，此时z-index是0；另一个是设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定。

设置元素透明度的方法(通常两种方法搜设置以适应所有浏览器兼容)
	(1)opacity:x  		 x值为0~1，值越小越透明
	(2)filter:alpha(opacity=x) x值为0~100，值越小越透明

transform变形：
指效果的集合，如平移、旋转、缩放、倾斜效果。
语法 transform:[transform-function]*;
其中transform-function是变形函数，如要设置多个，则中间以空格分开。在用2D变形时要加浏览器兼容性前缀。
 
常用2D变形函数如下：
	(1)translate(tx,ty)：
	平移函数，将元素从原位置(基于X,Y坐标)移动到指定位置上。
	tx表示X轴(横坐标)上移动的向量长度，正值向右，负值向左。
	ty表示Y轴(纵坐标)上移动的向量长度，正值向下，负值向上。
	
	(2)scale(sx,sy)：
	缩放函数，定义宽高度(元素尺寸)的缩放比例，默认值1。0~0.99缩小，大于1放大。
	sx表示宽度即横坐标方向的缩放量。
	sy表示高度即纵坐标方向的缩放量。
	
	(3)rotate(a)；
	旋转函数，只取一个值为度数值,单位deg表示角度°
	正值顺时针转，负值逆时针转。
	rotate函数只旋转，不改变元素形状。
	
	(4)skew(ax,ay)：
	倾斜函数，取值为度数值，单位deg
	ax表示水平方向即X轴的倾斜角度。
	ay表示垂直方向即Y轴的倾斜角度。
	
3D变形函数：translate3d()平移函数、scale3d()缩放函数、rotate3d()旋转函数

transition过渡：指动画转换的过程，如渐现、渐弱、动画快慢等。
	通过指定属性的初始状态、结束状态，在两个状态间通过平滑过渡的方式实现动画。
	语法:[transition-property  transition-duration 
		     transition-timing-function  transition-delay]*
	(速记法)transition: 过渡属性 过渡用时 过渡的动画函数 过渡的延迟时间
	
	主要包括四个属性值：
	(1)transition-property：
	   过渡属性，设置过渡或动态模拟的CSS属性
	(2)transition-duration：
	   过渡用时，从旧属性到新属性的用时，单位为s
	(3)transition-timing-function：
	   指定过渡函数、过渡速度,有以下方式：
		ease	速度由快到慢，逐渐变慢(默认)
		liner	匀速
		ease-in  越来越快(渐显)
		ease-out 越来越慢(渐隐)
		ease-in-out 先加速再减速(渐显渐隐)
	(4)transition-delay：设置过渡是否延迟时间执行。
	注意：transition-duration指完成过渡需要的时间；transition-delay指过渡在什么时间之后触发。

animation制作动画的步骤:
	(1)通过类似Flash动画的关键帧(@keyframes)声明一个动画；
	其中@keyframes称为关键帧，可以设置多段属性。语法
	 @keyframes 动画名称{
		from{ //css样式代码 }
		百分比1{ //css样式 }
		百分比2{ //css样式 }
		100%{ //css样式 }
	 }
	(2)找到要设置动画的元素，调用关键帧已声明的动画。
	如 animation: spread(动画名) 2s linear(匀速);

animation动画的语法和属性：
	" animation: 动画名称 播放时间 播放方式 开始播放的时间 播放次数 播放方向 播放状态 动画时间之外的状态 "
	其中属性分别为：
	animation-name 动画名称、
	animation-duration 播放时间、
	animation-timing-function 播放方式、
	animation-delay 开始播放的时间、
	animation-iteration-count 播放次数(无限次用infinite)、
	animation-diriection 播放方向、
	animation-play-state 播放状态、
	animation-fill-mode 动画时间之外的状态
	
1.Anchor伪类 (伪类如:link冒号和伪类名之间不能有空格)
	在支持 CSS 的浏览器中，链接的不同状态可用不同的方式显示：
	a:link {color:#FF0000;}   /* 未访问的链接 */ 
	a:visited {color:#00FF00;} /* 已访问的链接 */ 
	a:hover {color:#FF00FF;}  /* 鼠标划过链接 */ 
	a:active {color:#0000FF;}  /* 已选中的链接 */

2.CSS类和伪类配合使用：
	p : first-child{ }   匹配父级中第一个<p>子元素
	p > i:first-child{ } 匹配所有<p>元素的第一个 <i> 子元素
	p:first-child i{ }  匹配第一个<p>元素中的所有 <i> 元素

	White-space属性：设置如何处理元素内的空白。
	normal 	默认。空白会被浏览器忽略。
	pre 		空白会被浏览器保留。其行为方式类似 <pre>标签。
	nowrap 	文本不会换行，文本在同一行上继续，直到遇到<br/>为止。
	pre-wrap 	保留空白符序列，但是正常地进行换行。
	pre-line 	合并空白符序列，但是保留换行符。
	inherit 	从父元素继承 white-space 属性的值。