01HTML

HTML

标题标签：<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
段落标签：<P></P>
换行标签：<br/>
加粗：<strong></strong> <b></b>
倾斜：<em></em> <i></i>
删除：<del></del> <s></s>
下划线：<ins></ins> <u></u>
无语义标签：<div></div> <span></span>
图片标签：<img src="" alt="" title="">
超链接：<a href="" target="_self或_blank">
表格标签：<table><thrad><tr><th></th></tr></thrad><tbody><tr><td></td></tr></tbody></table>
	合并单元格：合并列<td colspan="5"></td> 合并行<td rowspan="5"></td>
无序列表：<ul><li></li></ul>
有序列表：<ol><li></li></ol>
自定义列表：<dl><dt></dt><dd></dd></dl>
表单域：<from action="" method="" name=""></from>
文本框：<input type="text" name="" value="" id="">
label：<label for="id对应值"></label>
密码：<input type="password">
单选：<input type="radio" name="" checked> 默认选中：checked
复选：<input type="checkbox" name="" checked>
提交：<input type="submit">
重置：<input type="reset">
按钮：<input type="button">
文件域：<input type="file">
下拉列表：<select><option selected="selected"></option></select> 默认选中：selected="selected"
文本域：<textarea clos="" rows=""></textarea>

HTML5

语义化标签：
    头部标签：header<header></header>
    nav标签：nav<nav></nav>
    内容标签：article<article></article>
    文档区域：section<section></section>
    侧边栏标签：aside<aside></aside>
    尾部标签：footer<footer></footer>
视频标签：<video src=""></video>
音频标签：<audio src=""></audio>
	自动播放：autoplay="autoplay"   谷歌需要添加muted="muted"
	向用户显示播放控制：controls="controls"
	循环播放：loop="loop"
	播放器宽度：width
	播放器高度：height
	预加载：preload="auto"
	不预加载：preload="none"
	静音播放：muted="muted"
新增表单元素
	邮箱：email<input type="email">
	网址：url<input type="url">
	日期：data<input type="data">
	时间：time<input type="time">
	月：month<input type="month">
	周：week<input type="week">
	数量：number<input type="number">
	手机号：tel<input type="tel">
	颜色：color<input type="color">
		自动获取焦点：autofocus="autofocus"
		内容不为空：required="required"
		提示文本：placeholder=""
		文件多选：multiple="multiple"

CSS

样式

行内样式：<div style="color:pink;">
外部样式：<link rel="stylesheet" href="">
内部样式：<style></style>

选择器

标签选择器：p div...
类选择器：.类名
id选择器：#id名
通配符选择器：*
后代选择器：元素1 元素2 {样式声明} 元素2为元素1的后代即可
子代选择器：元素1>元素2 {样式声明} 元素2为元素1的儿子
并集选择器：元素1,元素2,... {样式声明}
伪类选择器：没有经过:link 访问过:visited 鼠标经过:honer 鼠标按下:active 获取焦点通常对于input表单input:focus

字体属性

字体：font-family： "";
大小：font-size： 20px;
粗细：font-weight: 700；默认正常normal或者400 加粗bold或者700
样式：font-style: normal; 默认正常normal 斜体：italic
行高：line-height:20px;
复合写法：font: style weight size/height family

文本属性

颜色：color:pink;
对齐方式：text-align: center; 左对齐left 右对齐right 居中对齐center
装饰：text-decoration: none; 默认none 下划线underline 删除线line-through
缩进：text-indent:2em;
行高：line-height:20px;

元素显示模式

快级元素display: block;
行内元素display: inline;
行内快元素display: inline-block

背景

背景颜色：background-color: pink;
背景图片：background-image: url("");
背景平铺：background-repeat: repeat; 默认平铺repeat X轴平铺reprat-X Y轴平铺repeat-Y 不平铺 no-repeat
背景位置： background-position: x y; center top right bottom left 2px
背景固定：background-attachment: scroll; 默认滚动scroll 固定fixed
背景半透明：background: rgba(0,0,0,.3);
复合写法：background：color image repect attachment position

边框

border boder-top border-bottom border-left border-right
边框粗细：border-width: 5px;
边框样式：border-style: none; 默认none 实线solid 虚线dashed 点画线dotted
边框颜色：border-color: pink;
复合写法：border: width style color;

内边距

padding padding-top padding-bottom padding-left padding-right
padding: 5px; 上下左右都为5
padding: 5px 10px; 上下为5，左右为10
padding: 5px 10px 15px; 上为5，左右为10，下为15
padding: 5px 10px 15px 20px; 上为5，右为10，下为15，左为20

外边距

margin margin-top margin-bottom margin-left margin-right
与内边距属性一致
块级元素水平居中：margin: 0 auto;
补充：让行内元素或者行内快元素水平居中，对父级元素添加text-align: center;

块级元素嵌套块级元素造成塌陷

为父级元素设置边框：border
为父级元素设置内边距：padding
为父级元素添加overflow: hidden;

为所有元素清除内外边距

* {
    padding:0;
    margin:0;
}

圆角边框

border-radius: 10px;
border-radius:50%;
border-radius:10px 20px 30px 40px;

盒子阴影

box-shadow: 水平阴影(必选) 垂直阴影(必选) 模糊距离 阴影尺寸 阴影颜色
box-shadow: 10px 10px 10px 10px raba(0,0,0,.3);

浮动

float: left; 左浮动left 右浮动right

清除浮动

额外标签法：在浮动元素末尾添加一个空标签，必须为块级元素
    例如：<div class="clear"></div>
    .clear {
    	clear: both;
    }
给父级元素添加 overflow: hidden;
给父级元素添加after伪元素：
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility:hidden;
    }
    .clearfix {
        /*IE6、7专有*/
        *zoom: 1;
    }
给父级元素添加双伪元素：
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix {
	display: both;
}
.clearfix {
    /*IE6、7专有*/
    *zoom: 1;
}

定位

定位 = 定位模式 + 位偏移
	静态定位：按标准流的方式拜放没有边偏移
		position: static;
	相对定位：相对于自己原先位置移动；原先位置继续占有，不会存在脱标
		position: relative;
	绝对定位：如果没有祖先或者祖先没有定位，则以浏览器为基准；如果祖先有定位，则以最近一级带有定位的祖先为基准；原先位置不会占有，会脱标
		position: absolute;
	固定定位：固定于浏览器的可视区域的位置；不会占有原先的位置，会脱标；不会随着滚动条的滚动而滚动
		position: fixed;
	粘性定位：相对定位和固定定位的混合；以浏览器的可视窗口为参照点移动元素；占有原先位置，不脱标；必须添加位偏移其中一个
		position: sticky;
	位偏移：top bottom left right
	定位叠放：数值越大盒子越靠上；只有定位的盒子才具有z-index属性
		z-index: 数值;
定位注意问题：
	绝对定位和固定定位不会触发外边距合并问题；
	行内元素添加绝对定位或者固定定位可以直接设置宽高
	块级元素添加绝对定位或者固定定位如果不给宽高，默认大小为内容大小
	绝对定位会完全压住下面标准流的文字
    补充：浮动不会压制住下面标准流的文字

显示与隐藏

显示元素：
    display: block;
    visibility: visible;
隐藏元素：
display: none; 位置不保留
    visibility: hidden; 位置保留
对于溢出元素：
    overflow: visible; 默认超出显示
    overflow: hidden; 隐藏超出部分
    overflow: scroll; 不论是否溢出显示都存在滚动条
    overflow: auto; 溢出时显示滚动条

精灵图

background-position: x y;
background:url("") no-repeat x y;

字体图标

1、将下载包里面的fonts文件夹放在页面目录下；
2、从style.css中将字体图标引入
3、打开icomoon文件夹下面的html文件，复制对应小框框
4、按着字体的方式修改样式

自制三角

{
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: pink;
}

鼠标光标

cursor: default; 小白(默认)
cursor: pointer; 小手
cursor: move; 移动
cursor: text; 文本
cursor: not-allowd; 禁止

图片和文本对齐

基线对齐(默认)：vertical-align: baseline;
底部对齐：vertical-align: bottom;
居中对齐：vertical-align: middle;
顶部对齐：vertical-align: top;

解读图片底部空白缝隙：
给图片添加：vertical-align: bottom/middle/top;
把图片装换成块级元素：display: block;

溢出显示

单行溢出：
    1、强制一行内显示文本
    white-space: noweap;
    2、超出部分隐藏
    overflow: hidden;
    3、文字用省略号代替超出部分
    text-overflow: ellipsis;
多行溢出：
    1、超出部分隐藏
	overflow: hidden;
    2、文字用省略号代替超出部分
    text-overflow: ellipsis;
    3、弹性伸缩盒子模型显示
    display: -webkit-box;
    4、限制在一个块元素显示的文本行数
    -webkit-line-clamp: 2;
    5、设置或检查伸缩盒子对象的子元素排序方式
    -weblit-box-orient:vertical;

取消表单轮廓线

取消表单轮廓线：outline: none;

文本域防拖拽

文本域防拖拽：resize: none;

CSS3

选择器

属性选择器：
    必须属于input,同时必须包含value这个属性
    	input[value]
    必须属于input,同时满足属性=值的某些元素
 	   input[type=password]
    必须属于div,然后具有以icon开头的这些元素
 	   div[class^=icon]
    必须属于div,然后具有以icon结尾的这些元素
 	   div[class$=icon]
    必须属于div,其中含有icon的这些元素
 	   div[class*=icon]
结构伪类选择器：
    第一个元素：first-child或者first-of-type
    最后一个元素：last-child或者last-of-type
    第n个元素：nth-child(n)或者nth-of-type(n)
    公式：nth-child(3n)或者nth-of-type(-5+n)
    nth-child()和nth-of-type之间的区别：
    	nth-child(): 先排序再找元素
    	nth-of-type(): 先找元素在对元素进行排序
伪元素选择器：
	::before{
		/*必须含有*/
		content: "";
	}
		::after{
		/*必须含有*/
		content: "";
	}

盒子模型

box-sizing: content-box; 默认content-box 盒子总大小为固定给定的宽高border-box

图片模糊

filter: blur(2px); 数值越大越模糊

盒子大小计算

width: calc(100%-30px);

过渡

transition: 过渡属性(必须) 花费时间(必须) 运动曲线 何时开始
transition: all 1s ease .3s;
transition: witdth 1s ease .3s, height 1s ease .3s;

2D转换

2D转换：
	移动：不会影响其他盒子的定位，对行内元素无效
        transform: translateX(x);
        transform: translateY(y);
        transform: translate(x,y);
    旋转：
    	transform: rotate(45deg);
    	设置元素旋转中心点
    		transform-orgin: right bottom;
    		transform-orgin: x y;
    		transform-orgin: 50% 50%;
    缩放(倍数)：
    	transform: scale(x); 同时修改高宽比例
    	transform:scale(x,y);
    复合写法：transform: translate rotate scale; 位移需要放在最前面

动画

动画：
	定义动画：
        @keyframes 动画名称 {
            刚开始 0%或者from
            from {

            }
            中间状态(可以任意多个) x%，x为整数
            50% {

            }
            结束 100%或者to
            to {

            }
        }
	调用动画：animation-name: 动画名称;
	持续时间：animation-duration: .3s;
    运动曲线：animation-timing-function: ease;
    	默认ease: 慢->块->慢
    	ease-in-out: 慢->块->慢
    	ease-in: 慢->块
    	ease-out: 块->慢
    	linear: 匀速
    	steps(): 步长
    何时开始：animation-delay: 0s;
    播放次数：animation-iterction-count: 1; 循环infinite
    下一周期逆向播放：animation-direation: normal; 不逆向normal 逆向paused
    运动结束后是否回到起点：animation-fill-node: backwords: 回到起点backwords 保持forwards
    是否停止动画：animation-play-statee: running; 不停止running 停止paused

3D转换

 3D转换：
	移动：
		transform: translateZ(z);
		transform: translateX(x) translateY(y) translateZ(z);
		transform: translate3d(x,y,z);
	透视：3D转换中透视是加载在父元素上面的，透视数值越小，物体显示越大(照相机与物体之间距离)
		perspective: 50px;
	旋转：
		transform: rotateX(360deg);
		transform: rotateY(180deg);
		transform: rotateZ(90deg);
		transform: rotate3d(x,y,z,de); 矢量为轴进行旋转