HTML+CSS常用元素和属性

HTML+CSS
元素	缩写	作用
font-size:  ;	fz	设置文字大小
text-indent: 2em;	ti 2em	首行缩进2字符距离
text-align: center;	tac	文字水平居中
list-style-type:none		去掉li的点
text-decoration: none;	tdn	去除下划线
margin: 0 auto	m0 a	大盒子水平居中
line-height: 36px;	lh	设置行高(文字垂直居中)
font-weight: 700;	fw	文本加粗
font-family: 微软雅黑;	ff	设置字体
img		插入图片	atl	替换文本 加载失败就会显示文字信息
display: block;	db	转化为块元素	独占一行   设置宽高生效    宽度默认是父级的100%
display: inline;	di	转化为行类元素	一行显示多个  设置宽高不生效   尺寸和内容一样大
display: inline-block;	dib	转化为行类块	一行显示多个 设置宽高生效
background: url( )	bgu	设置背景图片	no-repeat 0px -170px;  设置精灵图和位置
background-repeat: no-repeat;	brn	背景图片不平铺
background-size: cover;	bgs	背景图片大小
background-color: ;	bgc	背景色
border : 1px solid #000;	bd1 +solid	盒子边框	border : 1px dashed #000; 虚线边框
background-position: 0 0;	bp	精准定位背景
left  左                   top   上                right 右                 bottom  下
margin	mar	外边距
panding	pan	内边距
box-sizing: border-box;	先输入bs再输入bb	自动内减
:first-child		第一个
:last-child		最后一个
:nth-last-child(1)		倒数第一个
display: none;		隐藏元素
background-image: linear-gradient(transparent,rgba(255, 255,255,0.5) ,transparent);
opacity		透明度
outline: none;		取消点击搜索栏产生的框
::placeholder{		设置搜索框的文字属性
overflow: hidden;		溢出部分隐藏
box-shadow:0px 3px 5px 0px		盒子阴影
border-radius		圆角边框
position: absolute;	pa	相对定位
position: relative;		绝对定位
::after		在什么什么后面加伪元素	要加content: ''
.box::before		在什么什么前面加伪元素	要加content: ''
transition: all 0.5s;	ts	过渡
vertical-align: middle;		去除img下面空隙
perspective: 800px;		开启近大远小
preserve-3d		开启3D
transform		将这个东西
translateX(800px)		移动
rotate(360deg);		旋转
animation		使用动画	forwards：最后一帧状态backwards：第一帧状态linear（匀速） infinite(无限循环)  alternate(来回)paused 暂停
display: flex;	df	使用flex 布局	给父元素添加
space-evenly;                                                    边距相等
flex-wrap: wrap;                                                弹性盒子换行
align-self:flex-end;		底部排行
flex-direction: column;		切换X为主轴	row-reverse 行, 从右向左  column-reverse 列, 从下向上 row 行, 水平(默认值)
justify-content: center;	j-c c	主轴居中
justify-content: space-between;		圣杯布局
justify-content: space-around;		1：2布局
flex-start		从左往右布局（默认）
align-items: center;	aIc	侧轴居中
align-content		行对齐方法（取值和jc一样）
link：favicon.ico		网页图标