Python全栈 Web（CSS常用样式大全）

常用内联样式：
	func-size
	color
	background-color
内部样式表：
	<style>
		选择器1{
			属性：值；
		}
		选择器2{
			属性：值；
		}
		...
	</style>
外链方式：
	<link rel="stylesheet" type="text/css" href=".css文件名">

样式优先级：
	默认 < 稳文档内嵌/元素选择器 < 行内
	不发生冲突 同步  发生冲突 后来者居上


选择器：
	标签选择器：
		p{
			color: red;
		}
	类选着器：
		.cls{
			样式
		}
		<p class="cls">文本</p>
		<p class="cls1 cls2"> 文本 </p>
	标签类结合：
		p.cls{
			样式
		}
		表示在指定标签中匹配class属性
	id选着器：
		#nav{
			样式
		}
		<div id="nav"></div>
	群组选择器：
		div, p{
			样式
		}
		<div></div>
		<p></p>
	后代选择器：
		#nav #npc/div{
			样式
		}
	子代选择器：
		选择器1>选择器2/标签{
			样式
		}
	伪类选择器：
		超链接伪类选择器：
			:link		访问前
			:visited	访问后
			:active		鼠标点按
			:hover		鼠标滑过
		其他元素伪类选择器：
			:hover		鼠标滑过
			:active		鼠标点按
		伪类选择器只能和其他选择器/元素结合使用
			p:hover{
				鼠标滑过p元素的新样式
			}
	选择器优先级：
		标签选择器：		1
		类/伪类选择器：	10
		id选择器：		100
		行内选择器：		1000


尺寸单位：
	px
	%
	in	英寸 1in 2.54cm
	pt	榜   1pt = 1/72 in
	cm
	m
	deg	角度


颜色单位：
	英文单词（transparent: 透明）
	rgb(r,g,b)	0~255
	rgba(r,g,b,a)透明度
	十六进制：#fff


元素分类：
	块元素
		独占一行 支持宽高
		div h1 p ul ol table form
	行内元素
		可以共行 大小由内容决定
		span i b label u sub sup
	行内块元素
		可以共行 支持宽高
		img input


常用属性：
	img{
		width: 300px;
		height: 300px;
		color: red;
		background-color: #fff;
		font-size: 24px;
		font-weight: normal; 	取消字体加粗
		text-decoration: none;	取消下划线
		vertical-align: top/middle/bottom; 
		左右元素与其的对齐方式（只能在行内块元素中使用）
	}


尺寸：
	img{
		width: 300px/50%;
		height: 300px/50%;
	溢出处理：
		overflow: visible/hidden/scroll/auto;		
		默认可见/溢出部分不显示/始终有滚动条溢出可用/自动产生滚动条
	}	


边框：
	div{
		border: width style color;
		宽度 样式 颜色 缺一不可
		border: 1px solid/dashed/dotted/double;
		实线/虚线/点线/双线
		border: none;	取消边框
	单独设置：
		border-top: 	上
		border-right：	右
		border-bottom:	下
		border-left:	左
		border-width：	宽度
		border-style:	样式
		border-color:	颜色
	三角标：
		width: 0px;
		height: 0px;
		border-top: 100px solid red;
		border-right: 100px solid green;
		border-bottom: 100px solid transparent;
		border-left: 100px solid transparent; 
		
	}
	轮廓线：
		div{
			outline: width style color;
			outline: none;	取消轮廓线
		}
	圆角边框：
		div{
			border-radius: 10px/10%;
			超过50%就是圆形
			border-radius: 10px 20px 30px 40px;  上 右 下 左
			一个值：表示是个角相等
			两个值：表示上下、左右相等
			三个值：左右相等 其他分别设置
			四个值：表示上右下左全不分别设置
		}
	边框阴影：
		div{
			box-shadow: offset-x offset-y blur spread color
			水平偏移 垂直偏移 延伸距离(可以省略) 阴影颜色
			box-shadow: 10px 10px 10px pink;

		}
盒模型：
	外边距：
		div{
			margin: 10px/10%;
			有四个值 最少一个 最多4个
			效果同上（圆角边框）
			margin: 0px; 		清除外边距
			margin: 0px auto;	在父元素内水平居中
			margin: -10px;		位置微调
		单独设置：
			margin-top: 	上
			margin-right:	右
			margin-bottom:	下
			margin-left:	左
			可以是像素也可以是百分比
		默认具有外边距的元素：
			body p h1~h6 ul ol
		}
	内边距：
		div{
			padding: 10px/10%;
			有四个值 最少一个 最多4个
			效果同上（圆角边框）
			padding-top 	上
			padding-right 	右
			padding-bottom 	下
			padding-left 	左
		具有默认内边距的元素：
			ol ul 文本框 密码框 按钮 td
		}
	声明盒模型计算方式：
		div{
			box-sizing: border-box/content-box; 
			内边距+边框+内容的共同尺寸/默认值
		}
	改变元素类型：
		div{
			display: block/inline/inline-block/none;
			转换为块元素（显示元素）/转换为行内元素/行内块元素/隐藏元素
		}
背景相关属性：
	背景颜色：
		background-color:red;
	背景图片：
		div{
			background-image：url("./1.jpg")
		图片平铺：
			background-repeat: repeat/no-repeat/repeat-x/repeat-y;
			水平和垂直平铺/不重复平铺/水平平铺/垂直平铺
		图片尺寸：
			background-size: 10px 10px/10%/cover/contain;
			当前元素宽 高/元素比例/将图片拉伸全部覆盖元素超出部
			分裁剪掉/将图片拉至刚好被容纳 超出部分不管
			拉伸：图片比例不变
		图片的位置：
			background-position: x/x% y/y%;		水平偏移/垂直偏移
			百分比参照尺寸获取
			background-position: 0% 0%;		图片左上角显示
			background-position: 100% 100%;	图片右下角显示
			background-position: 50% 50%;	图片居中显示
			background-position: left/center/right top/center/bottom;
			方位值表示：左/中/右 上/中/下
		}
	简写：
		div{
			background: color/url()/repeat/position; 
		}
文本相关属性：
	字体：
		div{
		字体大小：
			font-size: 24px;	设置字体大小
			font-family: "微软雅黑", "黑体", "KaiTi"; 	设置字体类型
		字体类型：
			font-weight: normal/bold/lighter;
			正常显示/加粗显示/极细文本
		字体加粗：
			font-weight: 400/700/100;
			数字越大越粗   400=normal/700=bold
		字体样式：
			font-style: normal/italic/oblique;
			正常显示/使用倾斜显示/使文本倾斜达到斜体效果
		简写：
			font: style weight size family;
			family 必须写 不写没效果
		}
	文本：
		div{
			color: green;		文本颜色
		文本对齐：
			text-align: left/center/right/justify;
			默认水平左对齐/居中/右对齐/两端对齐
		文本行高：
			line-height: 32px/2;
			设置行高位32像素/设置行高为字体大小的2倍
			文本居中方式：
				将行高设置为和元素一样的高度
				一行文本一定的垂直居中的 上下空隙由浏览器默认分配
		文本装饰线：
			text-decoration: underline/overline/line-through/none;
			下划线/上划线/删除线/取消下划线
		}
表格属性：
	div{
		width:; 
		height:;
		background:;
		color:;
		margin:;
		padding:;
	边框合并：
		border-collapse: separate/collapse;
		默认边框分离/合并边框
		td不支持外边距  只能写在table里
	边框边距：
		border-spacing: h-Value v-Value;
		border-spacing: 10px 10px;
		只能在表格分离的状态下使用
	}
过渡效果：
	div{
	过渡属性：
		transition-property: width/height;
		指定某个属性添加过渡效果 宽度过渡/高度过渡
		transition-property: all;	将所有能过渡的属性都进行过渡
		能够添加过渡的属性：所有颜色相关的、取值为数值的
	过渡时长：
		transition-duration: 1s/100ms;		1秒完成过渡/100毫秒
	时间曲率：
		transition-timing-function: ease/linear/ease-in/ease-out/ease-in-out;
		默认开始结束满中间块/匀速/开始慢结束块/开始块结束慢/慢开始结束中间加速后减速
	过渡延迟：
		transition-delay: 1s/100ms;
		1秒后开始过渡/100毫秒
		过渡时长必须设置其他可以省略 必须写在默认样式中
	简写：
		transition:property duration timing-function delay;
		duration必须写
	}

布局：
	普通流布局：
		默认方式  浏览器默认布局方式
	浮动布局：
		div{
			float: left/right/none;
			元素向左浮动停靠在其他元素便于/向右浮动/默认
		特点：
			元素飘浮会脱流 后面的元素会补位
			所有的元素只要设置浮动都可设置宽高
			行内元素或行内块元素浮动后 水平方向之间没有空隙
		浮动元素特殊效果：
			文字环绕效果 浮动元素会遮挡正常元素 但是不会遮挡内容
		解决不占位影响：
			1.指定父元素的高度
			2.父元素中设置 ：overflow: hidden;
			3.清除浮动：
				clear: none/left/right/both;
				默认不处理/清除左浮影响/正常元素左边不允许出现浮动元素/两边都不允许
			4.父元素末尾添加空块元素 设置：clear: both;
		}
	定位布局：
		div{
			position: relative/absolute/fixed/static;
			相对定位/绝对定位/固定定位/默认文档流布局
			只有设置了非默认属性  才算是已经定位的元素
		偏移属性：
			用来配合已定位的属性 进行位置移动
			top: 10px;		以元素的上边界向下为正方向
			right: 10px;	以元素的右边界向左为正方向
			bottom: 100px;	以元素的下边界向上为正方向
			left: 10px;		以元素的左边界向右为正方向
		}
定位方式：
	div{
	相对定位：
		position: relative;
		按照当前位置偏移
	绝对定位：
		position: absolute;
		定位后会脱流  脱流的所有元素都可以设置宽高
		按照离他最近的祖先元素偏移 如果没有按照body位置偏移
		一般采用父元素相对定位 子元素绝对行为方式
		浮动 + 外边距调整元素位置 = 绝对定位 + 偏移属性
	固定定位：
		position: fixed;
		按照浏览器窗口进行定位 配合偏移属性使用 定位后元素都会变成块元素
	层叠次序调整：
		z-index: 0~n；		默认0 数字越大越靠上
		数值相同 后来者居上
		只能用在已经定位的元素上 子元素永远在父元素之上 不受层次影响
	}

显示方式：
	div{
		display: none/block/inline/inline-block;
		隐藏元素并且不占位/转换为块元素/转换为行内元素/转换为行内块元素
	}
显示效果：
	div{
		visibility: visible/hidden;
		默认显示/隐藏元素并占位
		opacity: 0~1;
		设置元素的透明度
		继承效果：
			子元素最终效果 = 父元素opacity * 自身opacity
		vertical-align: top/middle/bottom;
		调整垂直对齐方式 常见于行内块元素
		cursor: default/pointer/text/crosshair;
		默认值/设置为小手形状/输入I形状/ +形状
	}
转换属性：
	div{
		transform: 转换函数1 转换函数2...;
	转换原点设置：
		transform-origin: x y;
		transform-origin: 像素/百分比/方位值;		默认以元素中心为原点
	转换函数：
		平移转换：
			transform: transform(x,y);
			x：水平方向平移距离 y：垂直方向  一个值等于translateX(value)
			transform: translateX(value)	水平方向位移
			transform: translateY(value)	垂直方向位移

		缩放变换：
			transform: scale(value)/scaleX()/scaleY();
				正常缩放/横向缩放/垂直缩放
			value：默认1  大于1会等比放大 0~1会缩小 小于0会翻转
		旋转变换：
			transform: rotate(90deg/-90deg);
			顺时针旋转90度/逆时针旋转90度
			transform: rotate3d(45deg/-45deg);
			transform: rotateX(ndeg);	沿x轴翻转
			transform: rotateY(ndeg);	沿y轴翻转
			transform: rotateZ(ndeg);	沿z轴旋转
	旋转原点会影响旋转效果
	如果涉及旋转操作 会连带坐标轴一起旋转，影响后面的位移
	}






HTML 会跳动的小心心

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#box{
			width: 200px;
			height: 160px;
			/*background-color: pink;*/
			margin: 100px auto;
			position: relative;
		}
		#box:hover{
			transform: scale(1.2);
		}
		.c1,.c2{
			width: 100px;
			height: 160px;
			position: absolute;
			border-radius: 50px 50px 0 0;
			background-color: red;
		}
		.c1{
			top:0;
			left:0;
			
			transform:rotate(45deg);
			transform-origin: right bottom; 
		}
		.c2{
			top:0;
			right: 0;
			transform:rotate(-45deg);
			transform-origin: left bottom;
		}

	</style>
</head>
<body>
	<div id="box">
		<span class="c1"></span>
		<span class="c2"></span>
	</div>
</body>
</html>