css样式入门笔记

页面布局

header	头
nav	导航
section	主体
footer	底部

css高级选择器

层次选择器
E F  后代
E>F 子选择器
E+F 相邻弟弟
E~F 通用兄弟

结构伪类选择器

E:first-child     			第一个子元素
E:last-child  				最后一个
E F:nth-child(n) 			E元素中找第n个子元素F，E可加可不加

E:first-of-type 			父元素内具有指定类型的第一个E元素
E:last-of-type       		最后一个
E F:nth-of-type(n)          第n个

（区别，如果 p p div p  想要第三个p标签 用第一种不能实现）

属性选择器

E[attr]      满足e元素的条件下具有attr属性
E[attr=val]  并且属性值为val(区分大小写)
E[attr^=val] 以……开头 包括本身
E[attr$=val] 以什么什么结束
E[attr*=val] 任意位置匹配包含的……

选择器用，分隔

字体样式

font-family  字体类型  font-family:"隶书";
font-style   设置斜体   :italic;
font-weight  粗细      :bold
font-size   字号 px(像素)  em、rem、cm、mm、pt、pc
font    	简写  斜体》粗细》大小》类型  一一排列就可以

文本样式

color
text-align  水平对齐方式 justify(两端对齐)
text-indent:em或px   首行缩进  
line-height:px    行高
text-decortion: none(无)underline(下划线)、overline(上划线)、line-through(删除线)
vertical-align: middle(居中) 、top 、bottom
text-shadow:color x-offset(x轴位移，水平阴影偏移量) y-offset(Y轴便宜)  bllur-radius(模糊半径);

超链接伪类样式

a:hover(未访问过)\link（访问过后）\visited（鼠标悬浮）\active（单机未释放）{}
      伪类顺序link>visited>hover>active

鼠标悬浮样式

url	    	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default		默认光标（通常是一个箭头）
auto		默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer		光标呈现为指示链接的指针（一只手）
move		此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text		此光标指示文本。
wait		此光标指示程序正忙（通常是一只表或沙漏）。
help		此光标指示可用的帮助（通常是一个问号或一个气球）。

列表样式

list-style-type: none (无标记符号) disc（实心圆，默认类型） circle（空心圆）、square（实心方块）
list-style-image:   自定义图片
list-style-position

背景样式

background-color 背景颜色——>十六进制\trans parent 继承
background-image:url(图片路径) 背景图像 
background-repeat :repeat(沿水平和垂直两个方向平铺)、no-repeat不平铺只显示一次  repeat-x只    沿水平方向平铺  repeat-y 只沿垂直方向平铺
background-position  背景定位 Xpos水平位置 Ypos垂直位置 单位（px）     x%y%百分比  xy方向（left、center……）
简写顺序：颜色 背景图位置 背景定位 背景重复设定
background-size  背景尺寸  auto默认值使用图片原样
                             cover 放大填充整个元素
                              contain 保持本身比例，缩放到正好适应的背景区域
		percentage 百分比

线性渐变
linear-gradient(postion渐变方向、color1第一种颜色 、color2……  )
兼容 -weibkit-linear-gradient
         -moz-
         -o-
 二维变换
 	matrix(n,n,n,n,n,n)          定义 2D 转换，使用六个值的矩阵
	translate(x,Y)               定义 2D 转换，沿着X和Y轴移动元素
	translateX(n)                定义 2D 转换，沿着X轴移动元素
	translateY(n)				 定义2D 转换，沿着Y轴移动元素
	scale(x,y)					 定义2D 缩放转换，改变元素的宽度和高度
	scaleX(n)					 定义 2D 缩放转换，改变元素的宽度
	scaleY(n)					 定义2D 缩放转换，改变元素的高度
	rotate(angle)				 定义2D 旋转，在参数中规定角度
	skew(x-angle,Y-angle)		 定义2D 倾斜转换，沿着X和Y轴
	skewX(angle) 				 定义2D 倾斜转换，沿着X轴
	skewY(angle)				 定义2D 倾斜转换，沿着Y轴

边框

border-top-color 上边框
	           -bottom     下
	border-color:red; 四个边框一样
	border-color:red blue;  上下，右左
	border-color:red blue green; 上 ，右左 ，下
	border-color:red blue green blown;   上右下左

边框粗细
border-top-width：5px;
……
border-width:1px 3px 5px 2px;

边框样式
border-style:none  无
                      hidden 不显示
	     dottd  点状
	     dashed  虚线
	     solid    实线
	     double  双实线

四个边相同的简写  
border:1px solid #3a6587;

边距

外边距
margin-top
margin-right
……
margin

内部距离
padding

盒子模型

box-sizing: content-box(默认值，盒子的总长度)（谷歌盒子模型） 
			border-box（盒子的宽度或高度等于元素内容的宽高）（ie盒子模型） 
			 inherit;

圆角边框

border-radius:20px（左上） 10px（右上） 50px（右下） 30px（左下）;
border-radius:50%;  圆形

盒子阴影

box-shadow:inset(阴影类型)

浮动

display:block 块状元素默认值，inline 行内元素 inline-block 行内块状 none 不显示
float:left \  right \none
清除浮动
clear:left \right\both\none

解决父级边框塌陷方法
	浮动元素后面加空div（简单，空div会造成html代码冗余）
	设置父元素的高度  （简单，元素固定高会降低拓展性）
	父级添加overflow（简单，下拉列表框的场景不能用）(独立块模型)
	父级添加伪类after（写法比上面复杂，但没有副作用，推荐使用）E:after{content:"";display:block;clear:noth}

定位

position:	static 
			relative 相对定位 相对自身位置进行偏移  top left right bottom  top:20px;
	浮动元素设置相对定位  设置第二个盒子右浮动，再设置第一第二盒子相对定位；根据自身原来的显示位置进行偏移，真实体积位置不变
			absolute  绝对定位 top bottom left right 根据父元素或者祖先元素中离自身最近的具有定位属性（相对或者绝对）进行定位，如果找不到就以body进行定位。绝对定位的元素从标准文档流中脱离，，意味着他们对其他元素的定位不会造成影响。不设定偏移量将保持原来的位置，但是体积变了
			fixed  固定定位，以浏览器窗口进行定位
			z-index 调整元素定位时重叠层的上下位置    :整数，默认0   ，设置了positon时，值大的在小的上方

opacity:x 元素透明度，越小越透明

动画

加兼容 -webkit-谷歌  -moz-  -o-
transform:[transform-funciton]*;   变形，translate(x轴，y轴 一个值时是x轴)\translateX\translateY 平移 平面上的移动，背景依然保留
				  scale(sx缩放量,sy 一个值时表示俩个值相同)缩放,不会影响真实大小
				  rotate(a) 旋转, 单位使用deg，按中心进行顺时针旋转
				  skew(x  y)倾斜
transition：  呈现一种动画过渡   transition:all(过渡或动态模拟的css属性) 0.8s(时间) ease-in-out(过渡时间的变化 ease快到慢、linear匀速、ease-in越来越快、ease-out越来越快、ease-in-out先快后慢)  2s(开始延迟);     

过渡触发伪类    :hover{}   :active{}点击不抬起  :focus{}焦点  :checked{}

animation    通过类似flash动画的关键帧来声明一个动画    设置关键帧     @keyframes IDENT(名字){
									from{css样式}
									pecentage{样式}
									to{样式}
								}

						   @keyframes spread{
							%0{width:0;}
							%33{width:23px;}
						}


animation:animation-name由@keyframes创建的动画名称
	animation-duration动画时间
	animation-timing-function动画方式    
	animation-delay延迟时间   
	animation-iteration-count动画的播放次数    值通常为整数，默认1，特殊值infinite表示动画无限次数
	animation-direciton动画的播放方向   normal动画每次都是循环向前播放，alternate动画播放为偶数次数则向前播放  
	animation-play-state动画的播放状态   running将暂停的动画重新播放，paused将正在播放的元素动画停下来
	animation-fill-mode动画开始之前和结束之后发生的操作； forwards表示动画再结束后继续应用最后关键帧的位置，backwards表示会在向元素应用动画样式时迅速应用动画的初始帧，both表示元素动画同时具有forwards和backwards的效果