html 和 css 代码总结

----------------------- HTML ---------------------

！tab （快速生成框架）
在标签中，必须写

----------------------- HTML 常用标签 ---------------------

1. 排版标签

<html>                                          根标签，最大的标签
<head>                                          网页头部显示内容
<title></title>                                 文档标题
<hx></hx>                                       标题标签
<p></p>                                         段落换行标签
<hr />                                          水平线标签
<br />                                          换行标签
<div></div>                                     用来布局的，只能放一个
<span></span>                                   用来布局的，可以放好多个span
<b></b>和<strong></strong>                      文字加粗标签,推荐使用strong
<i></i>和<em></em>                              文字斜体标签，推荐使用em
<s></s>和<del></del>                            文字加删除线显示，推荐del
<u></u>和<ins></ins>                            文字加下划线显示，不赞成使用u

2. 图像标签

img scr= 该语法中src属性用于指定图像文件的路径和文件名

scr =""           <img src="./" alt="">       <img src="../" alt="">
alt =""             图像不能显示时的替换文本
title=""            鼠标悬停图片上时显示的内容
width=""            设置图像的宽度
height=""           设置像素的高度高和宽只需要设置一个就可以，会等比例缩放
border=""           设置图片边框 后面会使用css来做，这里只要记住这个单词就好了

3. a 链接标签

     <a href="跳转目标">文本或图像</a><a href="demo.html"内部链接 </a><a href="#"> 空连接</a> 点击链接 会回到顶部 有一个刷新的效果<a href="javascript:;"> 空连接</a> 这样不会跳转刷新   <a href="网址"> <img src="文件名" /> </a> 图像链接<a href="" target="_blank"> 文本或图像 </a> //默认是_self，_blank是在新窗口打开

4. base 标签
2. base可以 设置整体链接的打开方式
3. base写到<head></head>之间`
4. 把所有的连接都默认添加target="_blank" （在新的链接打开）

     <base target="_blank">   // 在新的链接打开

5. pre 标签预格式化文本 （基本不用）

<pre>不需要段落和换行标签了， 可以对空格和空行， 进行控制
</pre>

6. 特殊字符（理解）

空格符：&nbsp
大于号：&gt
小于号: &lt

----------------------- HTML 表格 table ---------------------

1. 创建表格

table 用来定义一个表格标签
caption 表格标题
thead 用于定义表格的头部。用来放标题之类的东西
tbody 用于定义表格的主体。放数据本体
tfoot 放表格的脚注之类
tr 标签用来定义表格中的行，必须嵌套在table标签中
th 表头单元格标签
td 用来定义表格中的单元格，必须嵌套在标签中

 <table><caption>我是表格标题</caption><thead>表格的头部，标题之类</thead>:用于定义。用来放的东西。<tbody>表格的主体。放数据本体</tbody>:<tfoot>表格的底部</tfoot><tr>  // tr 放在 thead tbody tfoot 里面<th>表头单元格标签</th><td>单元格内的文字</td></tr></table>

2. title 表格属性
9. border：设置表格的边框，默认参数为0，这时不显示表格，可以改为1
10. height: 高
11. width: 宽
12. align: 水平对齐方式三种方式：left左,center中,right右
13. cellspacting: 单元格与单元格之间的距离，一般设置为0
14. cellpadding: 内容与单元格边框的距离

经常有个说法，三参为0，border cellpadding cellspacing为0

3. 合并单元格（难点）

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan="合并单元格的个数“
合并单元格顺序（先上后下先左后右的顺序）
合并单元格三部曲
1.先判断是跨行还是跨列合并
2.根据先上后下先左后右的原则找到目标单元格，然后写上合并方式还有要合并的单元格数量
3.删除多余的单元格

---------- HTML 列表标签不需要写table ----------

1. ul li 无序列表

2. ol li 有序列表

3. dl li 自定义列表

4. form 表单域

 <form action="url地址" method="提交方式" name="表单名称">各种表单控件</form>属性      值               用处
action   url地址值     用于指定接收并处理表单数据的服务器程序的url地址
method   get/post       用于设置表单数据的提交方式，其取值为get或者post
name     名称         用于指定表单的名称，以区分同一个页面中的多个表单

5. 表单域中的 input 控件（重点）

属性       属性值     描述text      单行文本输入框     昵称，用户名password   密码输入框       密码，输入内容不可见radio      单选按钮            单选，性别 加入这个代码就可以了checkbox     复选框         多选，爱好
type        button      普通按钮            就是普通按钮，你给他什么提示，他就显示什么，请输入IDsubmit      提交按钮            不需要value来提示，默认就是提交，提交注册，确认注册reset      重置按钮             重置所填，重置已经输出的内容image     图像形式的提交按钮 把文字替换成图片按钮，imsge是不带s的file      文件域          上传文件按钮hidden      隐藏域    可以当变量来用 不是给用户用的 是给程序员用的   accept(file的) "image/png,image/jpg"  可以指定 用户选择什么类型的文件
name        用户定义        控件的名称        自己定义控件的名称，除了单选和复选其他不能重复
value       用户定义        input控件中的默认文本值  value后面填写默认提示内容
size        正整数     input控件中在页面显示的宽度
checked     默认选择        表示那个单选或者复选按钮一开始就被选中了

补充几个属性:
placeholder 输入的内容不需要删除（submit 按钮没有该属性）
maxlength这个用于设置输入的最大个数,比如游戏ID名称和设置的最大密码个数
**** 可以当变量来用不是给用户用的是给程序员用的

6. label 标签（理解）

1.绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点
<label> 用户名： <input type="radio" name="username" value="请输入用户名"</label>2.第二种比较常用的 用法for属性规定label与哪个表单元素绑定
分两个步骤:看下面代码
<label for="nc">昵称：</label>
<input type="text或者其他都可以" id="nc" />
for=“x”,然后后面input也加上id=“x”理解：当鼠标点击label标签里面的文字时，光标会定位到指定的表单里面点击文字，会直接和点到框框里时一样的效果

7. textarea控件（文本域）

<textarea > 文本内容 </textarea>
ols=“每行中的字符数”
rows"显示行数"实际开发不用

8. select下拉列表

option 里面的下拉选项
里面的属性 selected = "selected"时，当前选项即为默认选项

<select><option>选项1</option><option>选项2</option><option selected="selected">选项3</option>
</select>

----------------------- CSS 基础选择器---------------------

标签选择器 p、div
类选择器(class)以及多类名 .class
ID选择器 #id
通配符选择器 *

----------------------- CSS 复合选择器 --------------------

后代选择器 ul li { 样式声明 }
子选择器 div > p { 样式声明 }
并集选择器 ul,div { 样式声明 }
伪类选择器—链接伪类选择器

        1.未访问的链接 a:link 把没有点击过的{访问过}链接选出来*/a:link {  }2.选择点击过的链接 a:visited */a:visited {  }3.选择鼠标进过的链接变成蓝色 a:hover */a:hover {  }4.选择鼠标正在按下还没松开的那个链接 a:active */a:active {  }/5.注意事项：必须要顺序书写，LVHA的顺序，  先 link visited hover active */

伪类选择器---- :focus 伪类选择器（input 类表单元素才能获取）
:focus 伪类选择器用于选取获得焦点的表单元素。

     input:focus { background-color:yellow;}

--------------------------- Emmet 语法 ----------------------------

div*10 直接出现10个div P也是一样的
ul>li 直接就是ul li都出现了 div>span
div+p 直接就是div p都出现了
.mingzi 直接就是 div class=“mingzi”
#mingzi 是 div id=“mingzi”
p.mingzi 是 p class=“mingzi”
div{啊啊啊}*5 5个这个
.mingzi$*5 就是 mingzi1、mingzi2、mingzi3、4、5
div{$}*5 就是 1、2、3、4、5

快速生成CSS样式语法：

        text-indents 2px;       ti2width: 100px;           w100height: 200px;          h200line-height: 26px;      li26text-decoration: none;   tdn

-------------------- CSS 属性书写顺序(重点) --------------------

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

--------------------------- CSS 字体属性--------------------------------

字体系列 font-family

p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

字体大小 font-size
字体粗细 font-weight

 属性值       描述normal      默认值bold     粗体（加粗）100-900     400=normal   700=bold  数字后面不带单位

文字样式 font-style

 属性值       描述normal      默认值italic      斜体

字体复合属性

body { font: font-style font-weight font-size/line-height font-family; font: italic 700 28px "microsoft YaHei"不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性font: 28px "microsoft YaHei"font： 12px/1.5    字体大小 和 行高  1.5是倍数 也可以写固定值}

--------------------------- CSS 文本属性--------------------------------

文本颜色 color

     预定义的颜色值     red，green等十六进制            #ff0000 #eeeeeergb代码           rgb(255,0,0) 或  rgb(100%,0%，0%)

对齐文本 text-align

 left        左对齐（默认）right      右对齐center      居中对齐

装饰文本 text-decoration

 none            默认，没有装饰线        （最常用）underline     下划线。链接 a 自带的   （常用）overline        上划线。              （几乎不用）line-through    删除键。              （不常用）

文本缩进与em单位 text-indent

  text-indent: 10px;text-indent: 2em;

行间距 line-height

line-height: 26px;

--------------------------- CSS 引入方式--------------------------------

行内样式表（行内式）

 <div style="color: red; font-size: 12px;">1111111111</div>

内部样式表（嵌入式）

 <style>div {color: red;font-size: 12px;}</style>

外部样式表（链接式）

 <link rel="stylesheet" href="css文件路径">rel               定义当前文档与链接文档直接的关系，在这里需要制定为“stylesheet”，stylesheet      表示被链接的文档是一个样式表文件                    href            定义所链接外部样式表文件的 URL ， 可以是相对路径，也可以是绝对路径。

--------------------------- Chrome 调试工具----------------------------

1.打开调试工具（按下 F12 键或者右击页面空白处检查）
2.使用调试工具

Ctrl+滚轮 可以放大开发者工具代码大小。
右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。
Ctrl + 0 复原浏览器大小。
如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
如果有样式，但是样式前面有 黄色叹号提示 ，则是样式属性书写错误。

--------------------------- CSS 的元素显示模式----------------------------

块元素 ( 常见的块元素有 h1~h6、p、div、ul、ol、li等 )
行内元素 ( 常见的行内元素有 a、strong、b、em、i、del、s、ins、u、span 等 )
行内块元素 ( img 、input 、td )

元素显示模式转换

转换为块元素：display: block
转换为行内元素：display: inline
转换为行内块：display: inline-block
转换为块级元素并且一行内显示： display:table（让一个HTML元素和它的子节点像table元素一样）

--------------------------- CSS 的背景----------------------------

背景颜色： background-color: transparent | 颜色值
transparent 透明背景色（默认值）
背景图片： background-image : none | url (url)
none （默认值，无背景图）
url(…/wang.png)
背景平铺：background-repeat: repeat | no-repeat | repeat-x | repeat-y
repeat （默认的，在纵向和横向上平铺）
no-repeat 不平铺
repeat-x 横向上平铺
repeat-y 纵向上平铺
背景图片位置： background-position: x y;
length 百分数或由浮点数字和单位标识符组成的长度值
position top | bottom | left | right | center 方位名词
（可以混合写，只写一个值，第二个默认居中）
背景图像固定: background-attachment : scroll | fixed
scroll 背景图像是随对象内容滚动
fixed 背景图像固定
背景复合写法: background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
背景色半透明（css3 中的）: background: rgba(0, 0, 0, .3);
用来调整背景图像的尺寸大小: background-size :
contain （缩小图片来适应元素的尺寸（保持像素的长宽比））
cover（扩展图片来填满元素（保持像素的长宽比））
| 100px 100px
| 50% 100%;

--------------------------- CSS 的三大特性 ----------------------------

层叠性（就近原则）（个样式就会覆盖另一个冲突的样式）
继承性（子承父业）（text-，font-，line这些元素开头的可以继承，以及color属性）
优先级（!important 权重无限大）

--------------------------- 盒子模型 ---------------------------

1.边框 border（width 、 style 、color 、collapse）

 边框简写：border: 1px solid red; 没有顺序属性                   作用border-width        边框粗细  单位pxborder-style        边框的样式  （none 默认无、solid 实线、dotted 点线、dashed 虚线）border-color        边框的颜色表格的细线边框border-collapse: collapse 表示相邻边框合并在一起collapse 单词是合并的意思

2.外边距 margin （基本跟内边距一样，多了一个水平居中，注意塌陷和合并问题）

 外边距可以让 块级盒子 水平居中行内元素 或者 行内块元素水平居中 给其父元素添加 text-align:center 即可常见的写法，以下三种都可以：margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;（重点用）

3.内边距 padding

     只写一个边：padding-left：5px；简写padding: 5px;            代表上下左右padding 5px 10px         代表上下是5   左右是10padding  5px 10px 20px   代表上是5   左右是10   下是20padding 5 10 20 30       上5 右10 下20 左30  顺时针方向

清除内外边距以及清除 li 前面的项目符号(小圆点)

* {padding:0; /* 清除内边距 */margin:0; /* 清除外边距 */}
或者html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0}li {list-style: none}

------- 浮动与清除浮动 float（浮动用来做文字环绕效果） -----

float ：left | right | none(默认值)
clear ：left | right | both
left 不允许左侧有浮动元素
both 同时清除左右两侧浮动的影响（几乎只用这个）

清除浮动的四种方法：

额外标签法也称为隔墙法，是 W3C 推荐的做法。（在浮动元素末尾添加一个空的标签）

<div style="clear:both"><div>,  直接写在body里的div里面 （ 新标签必须是块级元素）

父级添加 overflow 属性（是给 父元素 添加代码）

  div {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:after {clear:both; }.clearfix {*zoom:1;}

--------------------------- 定位 ----------------------------

1.定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为五个：

static （静态定位，默认的）(占有位置) 不能使用边偏移（很少用）
relative （相对定位） (占有位置) 相对于自身位置移动（常用）
absolute （绝对定位）（不占有位置）带有定位的父级（常用）
fixed （固定定位）（不占有位置）浏览器可视区（常用）
sticky （粘性定位）(占有位置) 浏览器可视区（当前阶段少）

2.边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

top （顶部偏移量，定义元素相当于其父元素 上边线的距离 ）
bottom （底部）
left （左侧）
right （右侧）

3.定位叠放次序（属性值相同，则按照书写顺序，后来居上）

z-index ：1；（数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上，不能加单位）

4.绝对定位的盒子居中（不能使用 margin:0 auto）

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
margin-left: -100px;：让盒子向左移动自身宽度的一半。

5.绝对定位和固定定位 也和浮动类似。

可以直接设置高度和宽度（不给宽度或者高度，默认大小是内容的大小）

--------------------------- 元素的显示与隐藏 ----------------------------

本质：让一个元素在页面中隐藏或者显示出来。

display 显示隐藏（但是不保留位置）
none （隐藏）
block （显示）
visibility 显示隐藏（但是保留原来的位置）
visible （元素可视）
hidden （元素隐藏）
overflow 溢出显示隐藏（但是只是对于溢出的部分处理）
visible （不剪切内容也不添加滚动条，默认）
hidden （超出的部分隐藏）
scroll （不管内容是否超出，总是显示滚动条）
auto （内容超出自动显示滚动条，不超出不显示）

--------------------------- 高级技巧篇 ---------------------------

1.使用精灵图核心总结：

精灵图主要针对于小的背景图片使用。
主要借助于背景位置来实现 — background-position 。
一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

2.字体图标 iconfont

3.CSS 三角

 div {width: 0;height: 0;line-height: 0;font-size: 0; // 为了兼容性的问题 才加入 line 和 fontborder: 50px solid transparent;  border-left-color: pink;}

4 鼠标样式 cursor

 li {cursor: pointer; }属性值             描述default           小白箭头  默认pointer           小手move              移动text              文本not-allowed       禁止

5.轮廓线 outline
给表单添加 outline: 0或者none 样式之后，就可以去掉默认的蓝色边框。

 input {outline: none/0; }

6.防止拖拽文本域 resize

 textarea{ resize: none;}

7.vertical-align 属性(设置图片或表单和文字对齐)
（这个可以解决图片底部默认空白缝隙问题）

 vertical-align : baseline | top | middle | bottombaseline （基线）  默认。 元素放置在父元素的 基线 上top      （顶线）  把元素的顶端 与 行中最 高 元素的顶端对齐middle   （中线）  把此元素放置在父元素的 中 部  （居中对齐）bottom   （底线）                 行中最 底 元素的顶端对齐

8.单行文本溢出显示省略号

     /*1. 先强制一行内显示文本*/white-space: nowrap; （ 默认的是 normal 自动换行）/*2. 超出的部分隐藏*/overflow: hidden;/*3. 文字用省略号替代超出的部分*/text-overflow: ellipsis;

9.多行文本溢出显示省略号（较大兼容性问题）

     overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示 */display: -webkit-box;/* 限制在一个块元素显示的文本的行数 */-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式 */-webkit-box-orient: vertical;

10.margin负值运用

让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

11.文字围绕浮动元素（巧妙运用浮动元素不会压住文字的特性）
12.行内块巧妙运用（页码在页面中间显示）

把这些链接盒子转换为行内块，之后给父级指定 text-align:center;
利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

13.CSS 三角强化

width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;

------------------------ CSS 初始化 ------------------------

1.京东 CSS 初始化

2.Unicode编码字体
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解CSS代码时候出现乱码的问题。

比如：
黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

-------------------- 项目搭建工作 --------------------

1.需要创建如下文件夹：

项目文件夹 项目名称
样式类图片文件夹 images
样式文件夹 css
产品类图片文件夹 upload
字体类文件夹 fonts
脚本文件夹 js

2.需要创建如下文件：

首页 index.html
CSS 初始化文件 base.css
CSS 公共样式文件 common.css

-------------------- 网站 favicon 图标 --------------------

一、制作favicon图标

把品优购图标切成 png 图片。
把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

二、favicon图标放到网站根目录下（跟 index.html 同级）

三、 HTML页面引入favicon图标

在html 页面里面的 head 元素之间引入代码。
修改 rel 、href 、type 的值

 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

-------------- 网站TDK三大标签SEO优化 ------------

     title 网站标题 <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！        </title>description 网站说明<meta name="description" content="" />    例子：<meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服饰装饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供预约的网上购物体验！" />keywords 关键字<meta namen="keywords" content="" /><meta namen="keywords" content="网上购物,网上商城,手机,笔记本,电视,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

-------------- LOGO SEO 优化 ------------

logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可。
为了搜索引擎收录我们，我们链接里面要放 文字（网站名称），但是文字不要显示出来。
方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。
方法2：直接给 font-size: 0; 就看不到文字了，京东的做法。
最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了。

注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。

-------------- 常用模块类名命名 ------------

1. 常用模块类名命名

快捷导航栏 shortcut
头部 header
标志 logo
购物车 shopcar
搜索 search
热点词 hotwrods
导航 nav
导航左侧 dropdown 包含 .dd .dt
导航右侧 navitems
页面底部 footer
页面底部服务模块 mod_service
页面底部帮助模块 mod_help
页面底部版权模块 mod_copyright

2. 注册页类名命名

注册专区 registerarea
注册内容 reg-form
错误的 error
成功的 success
默认的 default

-------------------------------------------------------------------

--------------------- HTML5 的新特性 ------------------

--------------------- 浏览器私有前缀 ------------------

-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性

     写法：-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;

--------------------- 新增的语义化标签 ------------------

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
这种语义化标准主要是针对 搜索引擎 的，可以使用多次
在 IE9 中，需要把这些元素转换为 块级元素！！

--------------------- 新增的多媒体标签 ------------------

1. 视频 <video> （ MP4 、 WebM 、 Ogg ）（属性去看主页）

2. 音频<audio> （ MP3 、 Wav 、 Ogg ）

--------------------- 新增的 input 类型 ------------------

email Email （类型）
url （链接类型）
date （日期类型）
time （时间类型）
month （月类型）
week （周类型）
number （数字类型）
tel （手机号码）
search （搜索框）
color （生成一个颜色选择表单）

--------------------- 新增的表单属性 ------------------

 属性            值          说明required      required   表示其内容不能为空，必填placeholder   提示文本    表单的提示信息，存在默认值将不显示。input::placeholder { （修改placeholder里面的字体颜色）color: pink;}autofocus    autofocus   自动聚焦属性，页面加载完成自动聚焦到指定表单    （就不需要你点击，可以直接打字输入）multiple      multiple    可以多选文件提交   在 file 中使用autocomplete   off/on    当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，  如需要关闭，填  autocomple="off"需要放在表单中，同时加上 name属性，同时成功提交

----------------------- CSS3 的新增 ------------------------

------------- 新增—属性选择器 ------------

注意：类选择器、属性选择器、伪类选择器，权重为 10。

        1. E[att]        选择具有 att 属性的E元素                                      input[value] {color: pink;}      2. E[att="val"]   选择具有 att 属性 且 属性值等于 val 的E元素   input[type=text] {color: pink;}3. E[att^="val"]  匹配具有 att 属性 且 属性值以 val 开头的E元素div[class^=icon] {color: red;}4. E[att$="val"]   匹配具有 att 属性 且 属性值以 val 结尾的E元素                                            section[class$=data] {color: blue;}5. E[att*="val"]   匹配具有 att 属性 且 属性值中含有 val 的E元素                                                                                                        div,section[class*=icon] {color: chartreuse;}

------------- 新增—结构伪类选择器 ------------

    一.   E:first-child  匹配父元素中的 第一个 元素 E 二.  E:last-child   匹配父元素中的 最后一个 元素 E 三.  E:nth-child(n)  匹配父元素中的第 n 个元素 E   n   数字     就是选择第 n 个元素，里面数字从1开始…   关键字    even   偶数选择出来，   pdd    奇数    公式     n  从0开始计算 但是第 0 个元素或者超出了元素的个数会被忽略 2n     就是  偶数，类似even2n+1   就是  奇数，类似pdd5n     就是  5 10 15...  （5是可以随意改的）n+5    就是  从第5个开始（包含第五个）到最后-n+5    就是  前5个，也就是从第一个到第五个{包含第五个}....  */四.E：first-of-type  指定类型 E 的第一个五.E：last-of-type   指定类型 E 的最后一个六.E：nth-of-type(n) 指定类型 E 的第 n 个区别：1. **nth-child** 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配2. **nth-of-type** 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子

------------- 新增—伪元素选择器 ------------

::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
属于行内元素（无法设置宽、高度）
语法： element::before { }
before 和 after 必须有 content 属性
伪元素选择器和标签选择器一样，权重为 1

--------------------- 盒子模型 ----------------------

可以分成两种情况：

box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
box-sizing: border-box 盒子大小为 width
（前提padding和border不会超过width宽度）

--------------------------- 圆角边框 ----------------------------

border-radius 属性用于设置元素的外边框圆角。

    简写属性border-radius: 左上角 右上角 右下角 左下角;border-radius: 20px 60px   前面是左上和右下   后面是右上和做下   也就是对角border-top-left-radius: 80px    这个是左上  以此类推，设置单个角的属性

--------------------------- 盒子阴影 ----------------------------

box-shadow 属性为盒子添加阴影

  box-shadow: h-shadow v-shadow blur spread clolr inset;(1和2 必须要有 ，其余可以省略)box-shadow： X轴移动  Y轴移动  模糊距离  阴影的尺寸大小  颜色  inset是内阴影，要用就加 box-shadow: 0px 20px 10px 10px rgba(0, 0,0, 0.3) inset;

--------------------------- 文字阴影 ----------------------------

text-shadow 属性将阴影应用于文本

     text-shadow: h-shadow v-shadow blur color;(1和2 必须要有 ，其余可以省略)text-shadow：10px 10px 10px rgba(0, 0,0, 0.3)文字阴影没有 spread 尺寸， 并且 没有 inset 内阴影。text-shadow: 10px 5px 10px rgba(0, 0,0, 0.8);font-size: 80px;

----------- 其他特性（滤镜、函数、过渡） --------------

1. 滤镜 filter

filter: 函数();例如： filter: blur(5px); blur模糊处理 数值越大越模糊（0 就不模糊了）/*   blur 是一个函数, 小括号数值越大越模糊 */

2. calc 函数:

 width: calc(100% - 80px); （括号里面可以使用 + - * / 来进行计算。）意思是父盒子 就是100%减去80px

3. 过渡（重点）
我们现在经常和 :hover 一起搭配使用。

 transition: 要过渡的属性 花费时间 运动曲线 何时开始  transition: width .5s ease 1s;      （ 如果要写多个属性，运用逗号进行分割 ）transition: all 2s;（后面两个可以省略） （all 相当于所以属性）运动曲线的参数去动画里看

------ 2D 转换（transform）移动、旋转、缩放、中心点 -------

1. 移动 translate

x就是x轴上移动位置，y就是y轴上移动，中间用逗号分隔
如果写 百分比 就是相对于自身的 百分比transform: translate(x,y); 或者分开写
transform: translateX(n);
transform: translateY(n);
1. 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
2. translate最大的优点：不会影响到其他元素的位置
3. translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
4. 对 行内标签 没有效果

2. 旋转 rotate （比如三角形旋转）

 transform:rotate(度数)  单位是 deg  比如 45deg    -45deg 就是逆时针默认旋转的中心点是元素的中心点

3. 转换中心点 transform-origin

 transform-origin: x y;   （默认是 50% 50% ）还可以给x y 设置 像素 或者 方位名词 （top bottom left right center）

4. 缩放 scale

 transform:scale(x,y);(2,2) ：宽和高都放大了2倍  (0.5,0.5)：缩小(2)相当于 scale(2,2)设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

5. 转换综合写法

格式：**transform: translate() rotate() scale()** ...等，其顺序会影转换的效果。（先旋转会改变坐标轴方向）transform: rotate(180deg) translate(50px,50px); /* 我们同时有位移和其他属性时，我们需要把位移放到最前面 */transform: translate(50px,50px) rotate(180deg) scale(1.2);

--------------------- 动画（animation） ------------------

1. 动画的基本使用

用keyframes 定义动画（类似定义类选择器）

 @keyframes 动画名称 {0%{width:100px;} 100%{width:200px;}}

元素使用动画

 div {/* 调用动画 */animation-name: 动画名称;/* 持续时间 */animation-duration: 持续时间;}

2. 动画常用属性

 animation-name: move动画名称：  规定 @keyframes动画的名称。 必须要有 */animation-duration: 2s           持续时间：  规定动画完成一个周期所花费的秒或毫秒，默认是0。  必须要有 */animation-timing-function: ease            运动曲线：  规定动画的默认曲线，默认是 "ease"* linerar是匀速的意思/animation-delay: 1s         何时开始： 下方是延迟一秒开始 默认是 0 。   */animation-iteration-count: infinite重复次数： count是次数  默认是 1 次 infinite是无限循环  */animation-direction: alternate;是否反方向播放： 默认是 "normal" ,"alternate"是逆播放 */animation-play-state: running;            动画是否正在运行或暂停： 默认是"running"，还有"pause"。 */跟鼠标配合使用 fover 当鼠标放在就动， 移开就停止 */animation-fill-mode: backwards;          动画结束后状态： 默认是回到起始状态 backwards。 停留在结束状态是forwards */曲线调节速度  属性animation--timing-function：linear       动画从头到尾的速度是相同的。匀速：ease         默认的。动画以低速开始，然后加速，在结束前变慢：ease-in      动画以低速开始：ease-out     动画以低速结束：ease-in-out  动画以低速开始和结束：steps()      指定了时间函数中的间隔数量(步长，比如5步，就是分5段来走)

3. 动画简写属性

animation:动画名称 持续时间 运动曲线 何时播放 播放次数 是否反方向 动画起始或结束时的状态 按顺序写，前 两个 属性不能省略！！！ animation: myfirst 5s linear 2s infinite alternate forwards;

简写属性里面不包含 animation-play-state （他是跟鼠标配合使用 fover 当鼠标放在就动）
想要动画走回来，而不是直接跳回来：animation-direction ： alternate
盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

--------------------- 3D 转换 ------------------

1.3D位移: translate3d(x,y,z)

translform:translateX(100px)：   在x轴上移动
translform:translateY(100px)：   在Y轴上移动
translform:translateZ(100px)：   在Z轴上移动（注意：translateZ一般用px单位）translateZ：近大远小 （往外是正值  往里是负值）transform:translate3d(x,y,z)：   其中 x、y、z 分别指要移动的轴的方向的距离

2.3D旋转: rotate3d(x,y,z)

 transform:rotateX(45deg)：沿着x轴正方向旋转 45度 transform:rotateY(45deg) ：沿着y轴正方向旋转 45degtransform:rotateZ(45deg) ：沿着Z轴正方向旋转 45degtransform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）

3.透视: perspective （透视写在被观察元素的父盒子上面的）

4.3D呈现 transfrom-style （是否开启三维立体环境）

transform-style: flat（子元素不开启3d立体空间默认的）
transform-style: preserve-3d （子元素开启立体空间）
代码写给父级，但是影响的是子盒子

-------------------------------------------------------------------

---------------- 移动端基础以及流失布局 -------------

1. meta视口标签
属性：

width （宽度设置的是viewport宽度，可以设置device-width特殊值）
initial-scale （初始缩放比，大于0的数字）
maximum-scale （最大缩放比，大于0的数字）
minimum-scale （最小缩放比，大于0的数字）
user-scalable （用户是否可以缩放，yes或no（1或0））

<meta name="viewport" content=
"width=device-width,   视口宽度和设备保持一致
user-scalable=no,       不允许用户自行缩放initial-scale=1.0,    视口的默认缩放比例1.0maximum-scale=1.0,     最大允许的缩放比例1.0minimum-scale=1.0">     最小允许的缩放比例1.0

2. 多倍图

background-size：单位 ** 属性规定背景图像的尺寸
单位：长度、百分比、cover、contain
cover （把背景图像扩展至足够大，以使背景图像完全覆盖背景区域）
contain （图像图像扩展至最大尺寸以使其宽度和高度完全适应内容区域）

3 多倍图切图 cutterman 插件

4. 特殊样式

 1. CSS3盒子模型box-sizing: border-box;-webkit-box-sizing: border-box;2. 点击高亮我们需要清除清除 设置为transparent 完成透明-webkit-tap-highlight-color: transparent;3.在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式-webkit-appearance: none;4.禁用长按页面时的弹出菜单img,a { -webkit-touch-callout: none; }

5. 最大宽度和最小宽度

max-width 最大宽度（max-height 最大高度）
min-width 最小宽度（min-height 最小高度）

--------------------- flex布局 ------------------

1.display：flex

常见父项属性：

1. flex-direction：设置主轴的方向

row （默认值从左到右）
row-reverse （从右道左）
column （从上到下，这个是设置 y 轴为主轴）
column-reverse （从下到上）

2. justify-content：设置主轴上的子元素排列方式

flex-start （默认值 从头部开始 如果主轴是x轴，则从左到右）
flex-end （ 从尾部开始 排列）
center （在主轴 居中对齐（如果主轴是x轴则水平居中））
space-around （平分剩余空间）
space-between （先两边贴边再平分剩余空间（重要））

3. flex-wrap：设置子元素是否换行

flex布局中默认是不换行的。（ nowrap 默认值不换行）
wrap （换行）

4. align-content：设置侧轴上的子元素的排列方式（多行）

flex-start （默认值从上到下）
flex-end （从下到上）
center （挤在一起居中（垂直居中））
space-around （子项在侧轴平分剩余空间）
space-between （子项在侧轴先分布在两头，再平分剩余空间）
stretch （设置子项元素高度平分父元素高度）

5. align-items：设置侧轴上的子元素排列方式（单行）

flex-start （默认值从上到下）
flex-end （从下到上）
center （挤在一起居中（垂直居中））
stretch （拉伸）

6. flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-flow: row wrap; （x轴为主轴，且多行）

常见子项属性：

flex 子项目占的份数
flex：number
align-self 控制子项自己在侧轴的排列方式
align-self: auto; （默认值，表示基础父辈的 align-items 属性）
order 属性定义子项的排列顺序（前后顺序）
order: number 数值越小，排列越靠前，默认为0（和 z-index 相反）

--------------------- rem适配布局 ------------------

1. 1 rem = html的（font-size）

2. 媒体查询（@media）

 @media mediatype and|not|only (media feature) {}@media screen and (min-width: 320px) {html {font-size: 100px;}}

mediatype 查询类型
all （用于所有设备）
print （用于打印机和打印预览）
scree （用于电脑屏幕，平板电脑，智能手机等）
关键字
and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。
媒体特性
width （定义输出设备中页面可见区域的宽度）
min-width （定义输出设备中页面最小可见区域宽度）
max-width （定义输出设备中页面最大可见区域宽度）

3. 媒体查询引入资源（理解））

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">实例：
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

4. Less （CSS 扩展语言）

5. VSCode px 转换rem 插件 cssrem

----------- 响应式开发（Bootstrap 框架） -----------

.container 类
.container-fluid 类
.row 行
.col-xs- 超小屏幕（手机，小于 768px ）：设置宽度为 100%
.col-sm- 小屏幕（平板， >=768px ）：设置宽度为 750px
.col-md- 中等屏幕（桌面显示器，>=992px ）：宽度设置为 970px
.col-lg- 大屏幕（大桌面显示器，>=1200px ）：宽度设置为 1170px
.col-md-offset-4 （向右侧偏移多少列）
.col-md-push-8 （向左侧移动多少列）
.col-md-pull-4 （向右侧移动多少列）
hidden-xs （或 -sm -md -lg ）隐藏
visible-xs 显示