前端--阶段笔记（一）

第一次写笔记，没有用markdown语法，写的很烂，算是做个记录吧，给自己一个交代。

总体路线
1.H5C3
2.JS
3.前后端交互
4.vue
5.WeChat micro-app
6.React

ctrl+alt 选中图层
数据封装、继承和多态是面向对象的三大特点，我们后面会详细讲解。

hover伪类
after before 伪元素

快捷键
1.快速复制
Alt+Shift+下键（上下左右的下）；

2.shift+alt+鼠标左键 可以在多行中同一位置同时选中
方便对相同位置进行粘贴同样内容

解释型语言
编译型语言
标记语言
混合语言

html是标记语言
使用标签来对页面进行标记

web标准的构成
结构structure 主要是html
表现presentation 表现 css
行为behavior 交互编写 javascript

伪类用于向某些选择器添加特殊的效果。外观。
伪元素可以在盒子里插入一个新盒子。
实际上不存在，
逻辑上存在就像你们的硬盘分区。

标签
标题标签 h
段落标签 p
属性写在标签后面

!自动补全框架

html提供了h1 - h6 共六级网页标题标签 标题独占一行

段落标签 paragraph

break
换行

文本格式化标签
加粗斜体下划线
加粗 或者
斜体 em主要是强调 恰好选择了用斜体来表示强调 一般都用i来表示。
下划线 ins
删除线 del

divison 竖向分割 跨度 跨距 横向分割 div占据一行 span可以一行显示多个

开头不写斜杠/

alt 图片显示不出来的时候显示字
title 图片放上去的时候提示的文字
width
height
border
绝对路径 D:\web\img\logo.gif
or network address :
www.baidu.com/jpg.jpg

HTML中 怎么插入图片链接使用a标签和img标签，示例：

// < a href=’’> <//i m g sr c =’ / i mage /aaa .jp g’ >

绝对路径
相对路径/
网址/

< a > 超链接标签
anchor

<a //href=“目标地址” target = “目标窗口弹出方式
_self默认值，_blank新窗口”>
文本或者图像< / a>

链接分类
1外部链接
2内部链接
直接写内部的网页名字
3空连接
<//a href = “#”>
4下载链接
<//a href = “img.zip”>
5网页元素链接
例如用图片来跳转新链接
<// a href=“http://www.baidu.com”>
<// /a>
6锚点链接
本页面内的快速跳转
1.设置调整起点<// a href="#two"> 第二集
2.设置调整目的点添加id

第二集介绍

表格table

align =“left right center”
对齐方式
加边框
border 0 1

属于属性的 写在括号内
属于显示出的内容的 写在两个括号的中间

cellpadding table 中文字和边框的距离
cellspacing 内部边框中间的距离

caption 标题

th ！= thead
thead 定义表格头部 内部必须有tr
表格里面可以放任何元素
图片文字链接都可以

tbody

thead和tbody用于更好表示语义

合并单元格
rowspan = “2” 跨行合并 竖着 两个单元格
colspan 跨列合并 横着

无序列表 用 ul 列表哈 不是表格了
列表里面的元素用li

• 雏菊
• taiyanghua
• puchongcao

ul、ol、dl

无序列表重点
无序列表里面各项之间没有顺序级别之分，是并列的。
ul 里面只能有li
不能有p
li相当于一个容器 什么都可以放进去
无序列表自带样式格式

有序列表
ol

自定义列表
dl
只能有dt
和dd

dl里面只能有dt和dd
dt和dd 是并列关系

表单
表单域
表单控件/表单元素
表单提示信息

用户名：
密码：
性别： 男 女 保密
爱好：吃饭 睡觉 打豆豆

name和value是主要给后台人员使用的返回值

name和表单元素的名字要求 单选和复选框要有相同的name

单选radio
复选checkbox
下拉菜单select 配备option 写在form里面？

无序列表有序列表
自定义列表
表单
input标签
label标签
下拉表单
文本域标签 textarea
综合案例

表单 提交表单给服务器
文件域file input type 上传文件
文件上传:
文本域 上传文本 如留言意见等

第一天第二天的总结：
列表 有序无序自定义 ulol配li dl配dtdd
表格table tr td th表头
表单form

文本框 input type=”text“
密码框 input type=”password“
按钮 input type=”button“
label for=ID

<// input type=“radio” name=“sex” value=“1” id=“sex1”>
<// label for=“sex1” ><// img src=img/man.jpg>Male

name的主要作用是区分不同表单的元素

type=submit提交按钮 value=free to regist
button多数情况下用于启动js脚本
不提交表单
比如发送手机验证码
上传头像：

标签
属性
值

select
option

textarea

CSS

Css语法规范
css规则 主要两部分构成
选择器和声明部分
选择器表明是给谁改样式
声明表明怎么改
eg. h1 {
color: red;
}

tab自动补全

展开型来写
会有代码压缩

hr
被水平线分隔的标题和段落：

任何标签都可以设置类名，使用class属性，类名选择器以.符号开头

placeholder 输入框内提示文字

u
列出下划线

类选择器 .+类名
class=选择器名字

类选择器画盒子
div 画
类选择器填充颜色

选择器分为基础选择器和复合选择器

基础选择器又包括：
标签选择器、 （p h等） 调用：类名自动匹配调用
类选择器、 （class） 调用：class=“指定的类名”
id选择器、 （#开头 +id名字） 调用： id=“id名字”
通配符选择器。 （× 所以标签全部改） 调用：自动调用

课堂案例
css划分不同部分颜色 class选择器

多类名 一个标签多个名字
class中可以写多个类名字，中间用 空格 分开
id选择器常搭配js用

一个标签可以叠加多个类名
多个类名之间用空格隔开
class=“red font”

实际开发中复用 减少代码重复 可以统一修改样式等

字体属性
font-family:‘微软雅黑’ 单引号!
如果写了多个字体，那就以此类推，在显示页面的设备上有第一个字体
就用第一个字体，没有用第二个字体，依次类推。

实际开发中鼓励使用数字来表示加粗变细
font-weight 400normal 700bold

font-style 倾斜还是不倾斜
italic 倾斜

em {
font-style:normal;
}

font复合写法
font字体复合属性：font-style font-weight font-size（字号 字的大小 必须加px）/line-height(行高) fongt-family
div {
font:italic 700 16px/20px ‘microsoft yahei’;
}
必须保留font-size 和 font-family

文本属性
css text属性可以定义文本的外观，如文本颜色
文本对齐 装饰文本 文本缩进 行间距等

对齐文本
text-align：center;

text-decoration 下划线删除上划线等
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
text-indent 首行缩进 + px；
+em 缩进当前元素两个元素的单位

line-height 行间距 （行高）

css引入方式
1内部样式表
内嵌入

2行内样式表
样式写在行内,适合修改简单情况
入

3外部样式表
适合样式很多的情况
单独写到css文件中，然后引入html中使用
使用方法
1新建 .css文件
2引入 <link rel=“stylesheet” //relative?
href="(自己命名的css文件).css">
写在head中

图片居中对齐 通过将他父标签居中对齐来实现

emmit语法

• 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
• 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
• 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
• 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
• 如果生成的div 类名是有顺序的， 可以用 自增符号 $
• 如果想要在生成的标签内部写内容可以用 { } 表示

复合选择器
通过两个或者多个基础选择器不同方法组合而成
常用复合选择器：后代，子，并集，伪类选择器等
alt+shift+下键 快速复制

1包含选择器
后代选择器
称为包含选择器
选择父元素里面子元素
两个元素间用空格隔开
元素1 元素2 {shengming}
ul li {color:red;}

2子代选择器
亲儿子选择器
// >

3并集选择器
用,进行分割
元素1,元素2 {样式声明}
任何形式的选择器都可以成为并集选择器的子元素

按键变化形态？ 自动自带？
<input type="submit"value=“free to regist”>

#333黑色
#369蓝色

4伪类选择器

4.1链接伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
用冒号表示

书写顺序 lvha 不要颠倒
a:link 初始状态
visited 点过之后的状态
hover 鼠标经过时文字的样式
active

4.1焦点伪类选择器：focus：focus
焦点选择器 光标在哪里就选择哪个
input:focus { backgroud-color:red;}

Css元素显示模式

分为行内元素和块元素
块级元素
h1 - h6
p
div
ul
ol
li

注意
文字类元素内不能使用块元素
如 p 和 h 里面不能放div

块元素可以设置高宽
一行只能显示一个
内部可以搭配文字内容
容器级别可以放任何东西

块级元素特点：
1独占一行
2高度宽度内外边距均可控制
3宽度默认容器100%
4容器盒子内部可以放任何行内或者块级元素

行内元素
a
strong
b 粗文本
em
i 斜体
del 删除线
s 用del替代
ins 下划线
u
span

链接里不能再放链接
行内元素一行显示多个
不能设置宽高
只能容纳文本和其他行内元素
默认宽度是本身内容宽度

行内块元素
img input td
和相邻行内元素在一行但是有空白就爱你西
默认宽度是文字内容宽度
高度行高外边距都是可以设置的 （块元素特点）

行内元素转块元素
在style中声明并写入
display：block；

反过来
display：inline；

转为行内块
display：inline-block；

单行文字 垂直居中
技巧
让文字的行高等于文字的高度
height =
line-height
水平居中显示text-align：center

背景颜色
backgroud-color:transparent 透明清澈

背景图片
background-image：url(images/logo.png);

background-repeat:repeat;
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;

背景图片位置
background-position：x,y;
x y 可以是
length 百分数有浮点数子和单位标识符组成的长度值
position
top center bottom left center right

如果用方位词则和xy顺序无关

背景固定/滚动
background-attchment：scroll/fixed；

font
背景复合属性写法
background:
1背景颜色 2背景图片地址
3平铺（repeat repeat-x ） 4滚动or not 5位置

background:black url(…/images/bg.jpg)
no-repeat fixed center top;

1、背景图片语法
background-image:url() 引入背景图片
background-repeat:no-repeat 设置背景图片是否重复平铺
background-position:left top 设置图片的css背景定位，left代表靠左，top代表靠上

简写背景图片语法：
background:url(图片地址) no-repeat left top

设置半透明
background：rgba（0，0，0，0.3）；
最后一个参数是alpha透明度 取值0-1；
可以只写.X
opacity:0.5;//透明度设置

css三大特性
1层叠2继承3优先级

css层叠样式
样式冲突：就近原则
冲突才就近
不冲突不就近

子标签会继承父标签的某些样式
主要是文字的样式 行高可以继承
但是如高度内外边距之类的不会继承
行高不带单位那就是文字大小的倍数
body {
font:12px/1.5 Microsoft YaHei
}

子元素可以根据自己文字大小进行灵活调正

优先级
选择器相同则按照层叠原则

标签类型 权重
继承或者× 0000
元素选择器 0001
类选择器/伪类选择器 0010
ID选择器 0100
行内样式style= 1000
！important 无穷、

权重可以叠，但是永远不会进位！
复合选择器会有权重叠加
多个权重加在一起时最终权重
ul li {
color:green;
}

li {
color:red;
}

ul li 权重 0001+0001=0002

只要是继承权重，无论父元素中权重多高，
到子元素中全部都是0

css盒子模型
网页布局三大核心
盒子 浮动 定位

网页布局过程：
1准备好相关元素 网那个也元素基本都是盒子box
2利用css设置好盒子样式然后摆放到相关位置
3往往盒子放东西

border
content
padding 内边距
margin 外边距 盒子与盒子之间的距离
margin 按照顺时针方向摆放外边距数值上右下左

边框复合写法
border:1px solid pink;

边框各部分开写法：
border-top
border-bottom

表格细线边框
表格细边框 合并
border-collapse：collapse；

padding
一个 代表上下左右
两个代表上下 和 左右
三个代表上 左右 和 下
四个 顺时针顺序 上右下左

padding 需要加上width来进行计算
如果想省事 那就用margin

padding复合写法

padding:5px,10px;
写一个值，全部都是
写两个值，上下，左右
写三个值，上， 左右
写四个值，上右下左

padding 也会影响 盒子实际大小

padding 不会撑开盒子的情况
父元素没有指定宽度或者高度，不撑开父盒子大小
width可以写为百分比
width：100%;

外边距可以让块级盒子水平居中
1设置宽度width
2设置左右外边框 auto
margin:0 auto;

行内元素/行内块元素没有宽度无法自动水平居中
行内元素或行内块元素水平居中 给其父元素添加
text-align：center；

两个问题
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
https://www.w3school.com.cn/css/css_margin_collapsing.asp
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
相邻块元素垂直外边距合并（就是上下方向上的边距，即top和bottom）
数值不会相加，会合并为一个，以大的为准
解决方案 只给其中一个设置外边距

css第三天课程

嵌套块元素（两个块元素一个套一个）垂直外边距塌陷（竖直方向上的外边距合并）

塌陷：两个外边距相加 并向下移动
解决方案：

1.只给父元素设置上边框
border:1px solid transparent;

2.给父元素定义上内边距
padding

3.给父元素添加overflow：hidden (溢出隐藏)

浮动盒子不存在这个问题

清除内外边距

• {
  padding:0;
  margin:0;
  }

隐藏div盒子的属性
div {display:none;}

css中设置盒子在页面水平居中
margin:0 auto;

文字水平居中：
text-align：center；
垂直居中：
line-height = height；

solid dotted dashed （dash 破折号）

去掉li前面的项目符号（小圆点）
list-style：none；
去掉li前面的项目符号（小圆点）
如：
ul
{
list-style:square inside url(’/i/arrow.gif’);
}

圆角矩形
border-radius:10px(length);
可以按照百分比来写

border-top-right-radius:15px;右上角改为圆角
先后顺序不可更改

盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset（内部外部）;
box-shadow: 1px 1px 5px grey;

blur 模糊 n.v.

text-shadow： 水平 垂直 模糊距离 阴影颜色

css提供三种传统布局方式
简单来说就是把盒子怎么样就女性排列顺序

1普通流（标准流/文档流）
标签按照规定好的默认方式进行排列
2浮动

3定位

三种方式同时进行才能将页面写好
移动端布局会学习新的方式

两个准则：

多个块级元素竖直排列用 /标准流/
多个块级元素横向排列用 /浮动/
先用标准流排列上下位置
再用浮动设置左右位置

先设置盒子大小
再设置盒子位置

浮动 float：left/right

1浮动元素会脱离标准流（脱标）
2浮动的元素会一行内显示并且顶部对齐
3浮动元素会具有行内块元素特性

浮动的盒子不再保留原有位置

行内块元素特点，内容多宽度自然变多
如果没指定宽度 则为浏览器宽度

浮动元素经常和标准流父级搭配使用
准备一个父元素 然后把float放在父盒子内
父元素制定宽度和高度

li {
list-style：none；
}
清除小li样式 去除小圆点

浮动两个注意点
1和父元素搭配使用 以父元素为准来对齐
2子元素float
只影响后面的不影响前面的

浮动元素会生成一个块级框，而不论它本身是何种元素。
发生模式转换

父不设置高度
让子盒子撑开高度
那就用浮动

css第四天
清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度不需要清除浮动
清除浮动之后父级会根据浮动的子盒子自动检测高度

清除浮动

1.额外标签法，隔墙法 clear：both；
最后设置一个空盒子，把这个装进去。
装的盒子必须是块级元素
.clear {
clear:both;
}

2父级添加 overflow：hideen; 溢出隐藏

3:after伪元素 clearfix:after 写在父盒子里
高级写法 伪元素可以在盒子里插入一个新盒子
在标准流中没有写新盒子但是通过css给添加了盒子
代码更简洁
要照顾低版本浏览器

4双伪元素清除法
前后都添加盒子
代码更简洁
但是也要照顾低版本浏览器

书写特性遵循规范
1布局定位属性
2自身属性
3文本属性
4其他属性（css3）

现有结构后有样式
先理清楚布局结构，再写代码

实际开发中导航栏是用 li+a的办法来写

直接用a 搜索引擎会认为有推砌关键字嫌疑
推砌关键字有降权风险

行内块元素之间彼此都有空隙

shift+alt+鼠标左键 可以在多行中同一位置同时选中
方便对相同位置进行粘贴同样内容

#fff 白色

banner 横幅

多光标选择 css中可以用？
Windows: ctrl+alt+up or ctrl+alt+down
行高会继承
margin:20px 0 15px 0;
上20 下15 左右是0

定位 postition
在一个盒子内自由移动并且压住其他盒子
滚动页面的时候固定一些盒子

浮动横向排列盒子
定位自由移动或者放在某个位置或者压住其他盒子

定位 = 定位模式 + 边偏移

					  移动位置

静态 static （基本不用）
相对 relative 不脱标 相对于自身位置
绝对 absolute 他脱标 带有定位的父级
固定 fixed 他脱标 浏览器可视区
粘性 sticky 不脱标 浏览器可视区
四种定位模式

定位 postition
定位 = 定位模式 + 边偏移

e.g.
a {
position: sticky;
top: 10px;
}

1相对定位
相对自己原来的定位 不脱标
典型应用：给绝对定位当爹爹

2绝对定位
相对于祖籍元素来定位
不一定是爹也可能是爷爷
谁有看谁
以最近的为准

如果没有祖元素或者祖元素无定位
则参考浏览器（document文档）
如果父元素为标准流或者没有定位 如浮动
还是参考浏览器（document文档）
如果祖元素有定位（绝对相对固定）则参考祖元素
最近一级有定位的祖元素

子绝父相
子用绝对定位
父用相对定位

粘性定位
可以被认为是相对定位和固定定位的混合
选择器 {position:sticky;
top:10px;
}

1 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2 粘性定位占有原先的位置 （相对定位特点）
3 必须添加 top left right bottom 其中一个才有效
兼容性差ie不支持

层叠
添加z-index：1；
数值越高越靠上

浮动最早出现的目的是做文字环绕
浮动会压住盒子但是不会压住盒子里面的文字
定位会

焦点图 == 轮播图

加了绝对定位的盒子可以设置高度宽度

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，
行内块 的宽度和高度 跟内容有关系
因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。

行内元素添加绝对或者固定定位，可以直接设置宽度高度。
块级元素添加绝对或固定定位，如果不给宽度或者高度，默认是内容大小

脱标的盒子不会触发外边距合并问题
即 外边距塌陷

绝对定位即固定定位会完全压住盒子？

并集选择器
相同的属性放一个
eg .prev,
.next {
}

显示隐藏
display隐藏元素 配合js可以做很多事情
隐藏后不再占有原来位置
display none/block；

visibility:hidden 隐藏后仍然占有位置
visibility:hidden

overflow 对溢出部分进行处理
一般不想让溢出内容显示
如果有定位的盒子慎用overflow：hidden
visi

属性选择器
中括号[]
eg
input[value] {
color:pink;
}
必须是input并且必须包含value

如果是其中一种可以继续加
input[type=text] {
color:pink;
}
必须是input且value等于text

匹配具有选择具有一定特征的一部分
e[att] 匹配属性为att的e

匹配选择同样父标签中的子标签
first-child

nth-child(even)选择偶数的child
nth-child(odd)选择奇数的child
匹配前三个元素
ul li:nth-child(-n+3){}

nth-of-type
如果父盒子里面不止一种子类型，可以用这个
针对的是指定类型中的第N个

section div:nth-child(1){
bgc:red;
} 所有子元素统一排列，选取第一个，然后与div比较，
相互契合选择这个来进行修改，不匹配，不改动。

section div:nth-of-type(1){
bgc:red;
} 指定子元素中的元素统一排列，然后再匹配。

类选择器，属性选择器，伪类选择器权重为10

一、伪类选择器
是用来选择某个类，或者说，选择的是某个类的状态。
CSS 伪类用于向某些选择器添加特殊的效果。
二、伪元素选择器
是用来在文档中插入假象的元素。

tudou:hover::before {
display：block；
}

绝对定位盒子居中：
left:50%;
margin-left:-100px;(自身宽度的一半)

遮罩不占位置
所以遮罩是绝对定位absoulet
并且显示和隐藏的状态都吧不占有位置，
所以用display

visibility要占用域的空间，而display则不占用。bai

div也可以加 :hover

精灵图
一整个图片包含页面尽可能多的小图片
到了之后客户端进行切割显示

字体图标
通过css引入
一整块代码 不要写直接复制
先复制

@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?7kkyc2’);
src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),
url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’),
url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

font-face :载入一个字体;
（
将该字体的 .eot格式文件传到服务器上，用 font-face 加载到网页中。
）
然后css中调用 font-family

鼠标样式cursor
li {cursor:pointet}
default 默认小白箭头
pointer 小手
move 十字架型移动
text 竖线文本
not-allowed 禁止

取消文本框蓝色框
outline:0 ;
outline:none;
写在css中

防止文本域拖拽
resize:none;

图片文字在一行的时候
让他们垂直居中

设置一个元素的垂直对齐方式
但是只针对行内元素或者行内块元素
语法
vertical-align:baseline top middle bottom
常针对于图片来进行修改
实现行内块与文字垂直对齐

图片添加边框后下面有白边
因为图片默认是和文字基线对齐，所以会出现下面的白边
白边是为文字留下的空间
把vertical-align 改上去就行了
或者改为块元素 块元素没有vertical-align

单行文字溢出，用省略号代替多余部分
1 强制单行显示 （不许换行）
white-space:nowrap;
2 超出部分隐藏
overflow:hidden;
3 用省略号替代
text-overflow:ellipsis;

多行文字省略
*1. 超出的部分隐藏 */
overflow:?hidden;

/*2. 文字用省略号替代超出的部分 */
text-overflow:?ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display:?-webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp:?2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient:?vertical;

margin负值妙用
1解决相邻有边框块元素的边框相接过宽问题
margin：-1
让两个边框上下叠加在一起，显示出一个边框宽度的效果

给父盒子添加text-align:center 之后
父盒子内的所有行内元素和行内块元素都会居中显示

h5c3新特性 第二节

h5c3新特性
音视频标签
audio video

MP4全部支持
尽量用MP4
双标签

autoplay=autoplay
muted=muted
自动播放

h5新增input属性
限定为具体的内容格式
type=email
类型很多，我们现阶段重点记忆三个： number tel search

更改输入框默认填充字体颜色
input::placeholder{
color:pink;
}

tudou:hover::before {
display：block；
}

额外标签法清除浮动会额外添加太多的盒子
放在了heml标准流当中
结构臃肿
所以选用after伪元素来做

css3盒子模型
保持精准
不会被padding撑开不会被border撑开
box-sizing:border-box 盒子大小为width

css3 filter 滤镜
可以让图片模糊 或者色彩偏移
写在style里面
img {
filter:blur(15px); 数值越高模糊程度越高

}

img:hover {
filter:blur(0); 鼠标经过时，不再模糊
}

calc函数
计算函数
eg
width:calc(100%-80px);

css3 过渡 （重点）
动画效果 经常和:hover搭配使用
transition：要过渡的属性 过渡时长 运动曲线 何时开始;
div {
width:200px;
transition:width .5s ease 1s,height .5s ease 1s;
}

div:hover {
width:400px;
}

favicon图标
网站标签栏图标
1制作
2放在根目录下
3引入到html

PS做好图，然后引入
放在head中

tdk搜索优化
T tittle
d description
k keyword

tittle 建议写网站名 产品名 网站介绍
description

1.logo 里面 放h1 标签 提权
2.h1放链接 可以返回首页 吧logo的背景图片给链接即可
3.为了保证搜索引擎收录我们把链接里面放文字（网站名）但是不显示这个文字
方法1 text-indent 移动到盒子外面
然后overflowhidden
放法2 fontzize:0;
4最后给一个title属性 放鼠标上去可以看到文字

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

box-sizing: border-box; 边框不撑开盒子 不包括maigin
box-sizing: border-box;

一行带边框排不下了，那就把父盒子改宽点

ellipsis 省略号

1.常见的块级元素(自动换行， 可设置高宽 )有：
div,h1-h6,p,pre,ul,ol,li,form,table,label等
2。常见的行内元素（无法自动换行，无法设置宽高）有：
a,img,span，i（斜体）,em（强调）,sub(下标)，sup（上标）等。
3.常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 )有：
(button,input，textarea,select), img等

a是行内元素
一般都给转化为行内块元素

参数：

说明：

如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
默认值为：transparent none repeat scroll 0% 0%。
尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。
对应的脚本特性为background。请参阅我编写的其他书目。

示例：

div { background: red no-repeat scroll 5% 60%; }
body { background: url(“images/aardvark.gif”) repeat-y; }
pre { background: url(“images/aardvark.gif”) top; }
caption { background: fuchsia; }

var div = document.querySelector(‘div’);
console.log(div.id);

parseInt 解析整数

清除搜索框或者输入框的框 蓝色框
去掉input框的点击出现的蓝色边框

1、input{ outline:none; }
2、input:focus{ outline:none; }
3、经测试IE8,9,10,11下outline:none;点击有蓝色上边框，border：0;后所有边框消失
input{ outline:none; border:0; }

outline的复合属性顺序（一般按这个顺序）:outline-color(规定边框的颜色), outline-style(规定边框的样式), outline-width(规定边框的宽度)。