web学习笔记6-css样式总结

css属性总结
分类	属性名	作用	属性值	备注
文本处理	color	字体颜色	red rgb rgba hex	单词 rgb rgba 16进制
	font-size	字体大小	16px	像素值
			em	参照物是父级，父级的n倍
			rem	参照物是html，根元素html的n倍（谷歌浏览器默认是16px）
	text-decoration	文本修饰线	line-through	删除线
			underline	下划线
			none	去除所有修饰线
	line-height	行高	40px	像素值（当行内元素的行高等于父级时，元素垂直居中）
	text-align	文本水平对齐方式	center	水平居中对齐
			left	水平居左对齐
			right	水平居右对齐
	vertical-align	与左右两侧内容在垂直方向的对齐方式	baseline	基线对齐，默认值
			top	顶部对齐
			bottom	底部对齐
			middle	中线对齐
	font-family	字体型号	"微软雅黑“，”宋体“	从前往后依次取值，可以写多个值
	font-weight	字体字重	normal 400	正常体
			lighter 300	细体
			bold 600	粗体
	text-indent	首行缩进	2em	中文首行缩进两字符
	white-space	文本溢出换成省略号	nowrap	强制不换行
	overflow		hidden	溢出隐藏
	text-overflow		ellipsis	超出的文本替换成省略号
背景处理	background-color	背景颜色	red rgb rgba hex	单词 rgb rgba 16进制
	backgroud-image	背景图	url(图片路径)	所在区域需要设置宽高
	backgroud-image	渐变效果	linnear-gradient（颜色1，颜色2）	只有颜色渐变
	backgroud-image		linnear-gradient（角度值，颜色1，颜色2）	带角度的渐变
	backgroud-image		linnear-gradient（角度值，颜色1 开始位置 结束位置，颜色2 开始位置 结束位置）	带角度与起始位置的渐变
	backgroud-size	背景图尺寸	(600px 300px)	像素值
			(100% 100%)	百分比注意图片失真问题
			(100% auto)	宽度正好，高度自适应，会牺牲高度
			(auto 100%)	高度正好 ，宽度自适应，会牺牲宽度
			contain	至少显示一张完整的图，剩余空间平铺
			cover	铺满整个屏幕，超出部分裁掉
	backgroud-position	背景图定位	left top	默认左上角，先说左右，再说上下；                                                  X轴：left左 center中 right右；                                                             Y轴：top上 center中 bottom下
			150px -50px	像素值，向右 向上
	background-repeat	背景图重复方式	repeat	默认值，X轴Y轴都重复
			repeat-x	只允许在X轴重复
			repeat-y	只允许在Y轴重复
			no-repeat	不允许重复
盒子模型	box-sizing	盒子模型计算方案	content-box	内容盒子（默认）
			border-box	边框盒子（怪异盒模型）
	pdding	内间距	10px	上右下左四个方向的内间距都是10
			10px 20px	上下10 左右20
			10px 20px  30px	上10 左右20 下30
			10px 20px 30px 40px	上10 右20 下30 左40
	pdding-top		10px	上内间距10
	padding-right		10px	右内间距10
	padding-bottom		10px	下内间距11
	padding-left		10px	左内间距11
	margin	外间距	10px	上右下左四个方向的外间距都是10
			10px 20px	上下10 左右20
			10px 20px  30px	上10 左右20 下30
			10px 20px 30px 40px	上10 右20 下30 左40
	margin-top		10px	上外间距10
	margin-right		10px	右外间距10
	margin-bottom		10px	下外间距11
	margin-left		10px	左外间距11
	border	四个方向的边框	1px solid #000	综合设置：边框粗细 线型 颜色
	border-top	上边框
	boder-right	右边框
	border-bottom	下边框
	boder-left	左边框
	border-width	边框宽度	1px	设置四个方向边框的粗细
	border-style	边框线型	solid单实线 dashed虚线 dotted点状	double双实线
	border-color	边框颜色	red rgb rgba hex	单词 rgb rgba 16进制
	border-{top}-{color}		设置单方向边框的单个属性
大小处理	width	宽度	100px 100%	像素值 百分比
	height	高度	100px 100%	像素值 百分比
显示模式	display	块级元素	block	以块级元素的形式显示
		行内元素	inline	以行内元素的形式显示
		行内块元素	inline-block	以行内块元素的形式显示
		元素消失	none	元素消失并释放布局空间
隐藏与显示	background-color	背景色设为透明度	background-color：transparent；	只影响背景颜色，不会释放布局空间
			background-color：rgba(0,0,0,0)；
	visibility	可见度	hidden	隐藏
			visible	可见（默认）
	opacity	透明度	0 完全透明；1完全不透明；0.5半透明	所有元素一起变透明，不释放布局空间
	display	修改显示模式	none	元素消失并释放布局空间
溢出控制	overflow	控制溢出情况	visible	溢出可见
			hidden	溢出隐藏，直接裁掉
			scroll	添加滚动条，无论是否需要直接添加
			auto	自动添加滚动条
修饰与美化	list-style	列表样式	none	去掉列表前的标识符
	borde-radious	边框圆角	10px 或10%	像素值或者百分比，四个角弧度统一
			10px 20px	左上右下 右上左下 对角线
			10px 20px  30px	左上 右上左下 右下
			10px 20px 30px 40px	从左上角开始顺时针给四个角设置
	border-{top}-{left}-radios	单独设置某个角
	box-shadow	元素阴影	值1：5px	必写，阴影的X轴偏移量
			值2：5px	必写，阴影的Y轴偏移量
			值3：5px	羽化值，越大阴影越虚化
			值4：5px	扩展半径，越大阴影范围越大
			值5：#aaa	阴影颜色
			值6：outset	外阴影
	cursor	光标	default	默认，箭头
			pointer	手形
			wait	等待，转圈圈，沙漏
			text	工字形，文本输入
			crosshairs	十字光标，截图用
浮动	float	左浮动	left（start）	向父级元素的左侧边界靠拢
		右浮动	right（end)	向父级元素的右侧边界靠拢
定位	position	定位方式	static	静态定位，文档流布局
			relative	相对定位，参照自己原来的位置
			absolute	绝对定位，参照最近的非静态祖先元素
			fixed	固定定位，参照根元素
	z-index	调整层级	整数值，无单位，可以有负数	数字越大，层级越靠上
	top/right/bottom/left	移动方向	像素值 百分比	距离参照物移动的距离，负值反方向
弹性布局容器属性	display	显示模式	flex	使用本属性的父容器将使用弹性布局
	flex-direction	主轴方向	row	行模式，默认值
			column	列模式
			row-reverse	反向行模式
			column-reverse	反向列模式
	flex-warp	是否换行	nowarp	不换行，默认值
			warp	换行
	flex-flow	主轴方向与是否换行	row主轴方向 nowarp是否换行	两个属性的简写
	justify-content	项目在主轴上的对齐方式	flex-start	项目在主轴上起点对齐
			flex-end	项目在主轴上终点对齐
			center	项目在主轴上居中对齐
			spance-between	项目在主轴上两端对齐
			spance-evenly	项目在主轴上公平对齐
			spance-around	项目在主轴上环绕对齐
	align-items	项目在交叉轴上的对齐方式	flex-start	项目在交叉轴方向上起点对齐
			flex-end	项目在交叉轴方向上终点对齐
			center	项目在交叉轴方向上居中对齐
弹性布局项目属性	flex-grow	项目增长属性	0 默认值 不增长	父容器有剩余空间也不会放大
			1	增长，其他项目为0时，直接占满所有空间
			n	等比例增长
	flex-shrink	项目收缩	0	不收缩
			1	默认，收缩
	flex-basis	项目在主轴方向上的大小	auto	主轴上项目尺寸是自设尺寸
			500px	主轴上项目尺寸是被规定（500px）
过渡	transition	过渡	最简写写执行时间就行，其他都可以不写，执行时间在前，延迟时间在后，其他没顺序
变换	transform	位移	translateX（100px）	X轴向右移动100px，正值向右，负值向左
	transform	位移	translateY（100px）	Y轴向下移动100px，正值向下，负值向上
	transform	位移	translate（100px，100px)	向右移动100，向下移动100
	transform	位移	translate（100px)	只写一个值，默认为X轴
	transform	旋转	rotate X（30deg)	元素围绕X轴旋转
	transform	旋转	rotate Y（30deg)	元素围绕Y轴旋转
	transform	旋转	rotate （30deg)	二维平面，默认围绕中心点旋转
	transform	缩放	scale（）	同时负责X轴与Y轴的缩放
	transform	缩放	scaleX（）	只负责X轴的缩放
	transform	缩放	scaleY（）	只负责Y轴的缩放
	transform	扭曲	skewX（20deg）	X轴的扭曲
	transform	扭曲	skewY（20deg）	Y轴的扭曲
	transform	扭曲	skew（20deg，20deg）	XY一起扭曲
	transform-origin	切换基点	nter默认值，可以是百分比/关键字	切换基点的位置