1
0
mirror of https://github.com/Daotin/Web.git synced 2024-11-01 05:24:46 +08:00

Project refactor

This commit is contained in:
Daotin 2020-12-30 11:39:04 +08:00
parent 432e0cb9e2
commit 67c2d89dc7
727 changed files with 538 additions and 2726 deletions

View File

@ -1,14 +0,0 @@
一个功能的实现:
需求:**li下面有a标签要求li之间有竖线间隔竖线的长度和a相同鼠标放到li上高亮高亮的区域没有到达竖线。**如下图:
![](images/4.png)
**实现的方式就是:**
- 设置li的margin间隔
- 设置a的margin为负值padding为正值即可。

View File

@ -1,111 +0,0 @@
### 20181008 课程笔记
1、浮动和定位的时候宽高由内容撑开。
2、定位的话绝对定位和固定定位可以改变盒子的属性但是相对定位不会。
3、相对定位和绝对定位的区别
相对定位不脱离文档流,是相当于自身的。
绝对定位是脱离文档流的,相对于最近的具有定位属性的父元素。
4、浮动元素上下左右居中
- 子元素:浮动添加绝对定位 absolute。
- 在浮动元素外面再嵌套一层div将这一层div居中。转化为块元素居中
- 父元素display: flex; justify-content: center; align-items: center;
- **最简单粗暴的**设置上下margin值。
- 设置百分比。
5、元素上下居中
- 行内元素父元素line-height
- 行内块元素:
```css
父元素line-height; font-size:0;
子元素vertical-align: middle;
```
- 块元素:
1、有固定宽高
```css
父元素position: relative;
子元素position:absolute; top: 50%; margin-top: -xxpx;
```
2、无固定宽高
```css
父元素position: relative;
子元素position:absolute; top: 50%; left:50%; transform: translate(-50%, -50%);
或者:
父元素display: flex; justify-content: center; align-items: center;
或者:
父元素position: relative;
子元素position:absolute; top:0; bottom:0; left:0; right:0; margin: auto;
或者:
父元素dispaly:table;
子元素display:table-cell; text-align:center; vertical-align:middle;
或者:
转换成行内块元素。
父元素: text-align:center; line-height
```
6、浏览器兼容问题
- a标签中插入图片在低版本的IE浏览器中有默认边框。
解决办法图片的border:0;
- 代码换行会产生间距(图片并排放置的话,图片之间出现间距)
解决办法1图片浮动。2为图片的父元素font-size:0;
9、transform的变换相当于相对定位保留原来的位置的。
10、浏览器五大内核
IEtrident
firefoxgecko
chrome/safariwebkit
Operapresto
谷歌和欧朋共同开发blink

View File

@ -1,470 +0,0 @@
# BFC的概念及案例
## BFC的概念
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域只有Block-level box参与 它规定了内部的Block-level Box如何布局并且与这个区域外部毫不相干。
### BFC的布局规则
- 内部的Box会在垂直方向一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边 与包含块border box的左边相接触
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时浮动元素也参与计算所以会清除浮动。
### 哪些元素或属性能触发BFC
- 根元素 html
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
## 案例一:两栏布局
**要求:左边固定宽度,右边宽度可变。**
**方式一:**
思路左边固定宽度浮动右边不设置宽度设置margin-left空出左边的宽度。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.dv1 {
width: 200px;
height: 500px;
background-color: pink;
float: left;
}
.dv2 {
margin-left: 200px;
height: 500px;
background-color: peru;
}
</style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
</body>
</html>
```
**方式二:**
思路BFC的区域不会与float box重叠。所以将右边设置为BFC区域。
这里是有 absolute 绝对定位。
```css
body {
position: relative;
}
.dv1 {
width: 200px;
height: 500px;
background-color: pink;
float: left;
}
.dv2 {
height: 500px;
background-color: peru;
position: absolute;
left: 200px;
right: 0;
}
```
注意:右边一定要加 right:0;
**方式三:**
思路:使用 overflow不为visible 将右边设置为BFC区域。
```css
.dv1 {
width: 200px;
height: 500px;
background-color: pink;
float: left;
}
.dv2 {
height: 500px;
background-color: peru;
overflow: hidden;
}
```
## 案例二:三栏布局
**要求:左边固定宽度,右边固定宽度,中间宽度自适应。**
**方案一:**
思路:使用两栏布局的方案一
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.dv1 {
width: 200px;
height: 500px;
background-color: pink;
float: left;
}
.dv2 {
height: 500px;
background-color: peru;
margin-left: 200px;
margin-right: 200px;
}
.dv3 {
width: 200px;
height: 500px;
background-color: pink;
float: right;
}
</style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
<div class="dv3"></div>
</body>
</html>
```
可以看到 dv3 掉了下来???
为什么呢因为dv2是块级元素单独占一行所以dv3只能显示在下一行。
怎么办呢我们将dv2和dv3的顺序调换一下就好了
```html
<div class="dv1"></div>
<div class="dv3"></div>
<div class="dv2"></div>
```
**方案二:**
思路:使用两栏布局的方案二
```css
body {
position: relative;
}
.dv1 {
width: 200px;
height: 500px;
background-color: pink;
float: left;
}
.dv2 {
height: 500px;
background-color: peru;
position: absolute;
left: 200px;
right: 200px;
}
.dv3 {
width: 200px;
height: 500px;
background-color: pink;
float: right;
}
```
**方案三:**
思路:使用两栏布局的方案三
```css
.dv1 {
width: 200px;
height: 500px;
background-color: pink;
float: left;
}
.dv2 {
height: 500px;
background-color: peru;
overflow: hidden;
}
.dv3 {
width: 200px;
height: 500px;
background-color: pink;
float: right;
}
```
结果也是dv3 被挤了下来。调换dv2和dv3的顺序即可。
**方案四:**
思路:使用弹性布局
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
}
.dv1 {
width: 200px;
height: 500px;
background-color: pink;
}
.dv2 {
width: 100%;
height: 500px;
background-color: red;
flex: 1;
}
.dv3 {
width: 200px;
height: 500px;
background-color: pink;
}
</style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
<div class="dv3"></div>
</body>
</html>
```
## 案例三解决父元素与子元素之间的margin-top问题
原文链接https://www.cnblogs.com/ranyonsue/p/5461749.html
### 问题描述
父元素的盒子包含一个子元素盒子给子元素盒子一个垂直外边距margin-top的时候父元素盒子也会往下走margin-top的值而子元素和父元素的边距则没有发生变化如下图
![](images/1.png)
源代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
html {
padding: 0;
margin: 0;
}
.parent {
width: 200px;
height: 200px;
background-color: #aaa;
}
.children {
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
```
### 原文分析
官方介绍:
In this specification, the expression *collapsing margins* means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
**所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。**
毗邻的定义为同级或者嵌套的盒元素并且它们之间没有非空内容、Padding或Border分隔。
这就是原因了。“嵌套”的盒元素也算“毗邻”,也会 Collapsing Margins。这个合并Margin其实很常见就是文章段落元素`<p/>`并列很多个的时候每一个都有上下1em的margin但相邻的`<p/>`之间只会显示1em的间隔而不是相加的2em。
### 解决办法
这个问题的避免方法很多,只要破坏它出现的条件就行。给 **Outer Div** 加上 padding/border或者给 **Outer Div / Inner Div** 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。
1、修改父元素的高度增加 padding-top 样式模拟padding-top1px常用
2、为父元素添加 overflow: hidden样式即可完美
3、为父元素或者子元素声明浮动floatleft可用
4、为父元素添加 border-topborder-top: 1px solid transparent; 可用) 
5、为父元素或者子元素声明绝对定位 。
## 案例四:清除浮动
来自笔记CSS/03-链接伪类、背景、行高、盒子模型、浮动
清除浮动不是不用浮动,清除浮动产生的问题。
> 问题:当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误(占据父盒子的位置)。
### 方法一
**额外标签法:**在最后一个浮动元素后添加标签。
```css
clear: left | right | both /*用的最多的是clear:both;*/
```
### 方法二
给浮动元素的父集元素使用`overflow:hidden;`
> 注意:如果有内容出了盒子,不能使用这个方法。
### 方法三(推荐使用)
伪元素清除浮动。
> : after 相当于在当前盒子后加了一个盒子。
### 清除浮动总结:
1. 给父元素高度,缺点:高度无法自适应
2. 父元素加 overflow:hidden; 缺点:超出会被隐藏
3. 父元素加定位absolute/fixed缺点脱离文档流。
4. 父元素加浮动,缺点:可能父元素的父元素继续塌陷
5. 父元素加inline-block缺点行内块的缺点。
6. 浮动元素的最后加一个额外标签标签使用clear:both; 缺点:结果冗余
7. 万能清除法,伪元素清除浮动。
```css
content: ".";
display: block;
height: 0;
visibility: hidden;
clear:both;
overflow: hidden;
```

View File

@ -1,15 +0,0 @@
首先ul可以居中margin: 0 auto;
之后li居中的方式使用百分比。
比如两列居中:
li {
width: 48%;
margin: 10px 1%;
}
比如三列居中:
li {
width: 31.3333%;
margin: 10px 1%;
}

View File

@ -1,6 +0,0 @@
只能用在p标签上
overflow:hidden; /*超出隐藏*/
white-space:nowrap; /*强制不换行*/
text-overflow:ellipsis; /*超出的显示省略号
*/

View File

@ -1,219 +0,0 @@
一屏网页
需要在css最开始加入下面核心代码
```html
html,body {
height:100%;
}
```
示例代码1
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/base.css">
<style>
html,
body {
height: 100%;
}
.aic {
height: 90%;
background-color: pink;
}
.menu {
height: 10%;
background-color: brown;
}
.menu ul {
width: 80%;
height: 100%;
background-color: #ff0;
margin: 0 auto;
}
.menu li {
float: left;
height: 100%;
width: 12.5%;
position: relative;
}
.menu a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
</ul>
</div>
<div class="aic"></div>
</body>
</html>
```
![](images/2.png)
上面这个不好li的宽度设置百分比li的个数确定了。
示例代码2
下面的代码将ul的高度确定比如设置为文字的高度而不是百分比高度然后将ul定位后li就自动定位了然后设置li的margin即可。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/base.css">
<style>
html,
body {
height: 100%;
}
.aic {
height: 90%;
background-color: pink;
}
.menu {
height: 10%;
background-color: brown;
position: relative;
}
.menu ul {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.menu li {
display: inline-block;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">首页</a>
</li>
</ul>
</div>
<div class="aic"></div>
</body>
</html>
```
![](images/3.png)
20181012
**上面的ul宽度是不确定的而li需要一行显示并且居中显示**
**那么就设置ultext-align:center; 设置 lidisplay:inline-block.**
**此时有个问题就是 li 之间有间距解决办法就是设置ulfont-size:0;**
vertical-align:top;是没法解决的,它解决的是上下的问题。

View File

@ -1,448 +0,0 @@
1、弹性布局子元素设置宽度但是不设置高度的话**子元素的高度继承父元素的高度**。
2、主要看css3的属性display不是css3的flex才是。
```css
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s
```
3、主轴方向为横向时如果一个div同时设置了width和flex:1;的话,按谁的来?
- **不论设置的宽度大于或者小于剩余的宽度这个div都是按照flex占据剩余的空间。**
- **如果两个diva和b设置的宽度大于剩余的空间并且a的flex:1; b的flex:2;那么a和b都会缩放缩放后a和b的宽度比为 1:2.**
- **如果两个diva和b设置的宽度小于剩余的空间并且a的flex:1; b的flex:2;那么a和b都会放大放大后a和b的宽度比为 1:2.**
4、三栏布局左右固定宽度中间自适应但是和左右有间距。
- 方式1左右宽度固定中间flex:1; 然后设置margin值。
- 方式2左右宽度固定中间flex:0.9; 然后在三栏布局的父盒子设置 justify-content:space-between; 即可。
代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
body {
display: -ms-flex;
display: -webkit-flex;
display: -o-flex;
display: -moz-flex;
display: flex;
flex-direction: column;
justify-content: space-between;
}
header {
width: 100%;
height: 100px;
background-color: #000;
}
main {
width: 100%;
flex: 0.9;
background-color: #fff;
display: flex;
justify-content: space-between;
}
footer {
width: 100%;
height: 50px;
background-color: #f00;
}
.left {
flex: 0.2;
background-color: #f0f;
}
.middle {
flex: 0.5;
background-color: #ff0;
}
.right {
flex: 0.2;
background-color: #0ff;
}
</style>
</head>
<body>
<header></header>
<main>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</main>
<footer></footer>
</body>
</html>
```
![](images/7.png)
5、`width: -webkit-calc(100%/2 - 2px);` 属性:可以接受加减乘除。
**注意:减号之间要有空格。记得加-webkit-等。**
6、支付宝上下固定中间可以滑动。示例图如下
![](images/5.png)
思路1
- 上下 fixed 定位。
思路2
- 上中下三栏布局,上下固定,中间 flex:1;
- 设置中间内容 overflow-y:scroll; 如果内容超出了就可以上下滑动。
7、设置字体随着页面的缩放而缩放。
如下图UI设计稿为750px。a1的宽高在UI设计稿的尺寸为71px和70px。
如下代码可在不同尺寸的显示器上,图片字体等都可以等比例缩放。
如果
![](images/6.png)
示例上面支付宝的稿件UI尺寸为750px使用上面的方式进行代码编写。
代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/base.css">
<style>
html {
font-size: calc(100vw/7.5);
}
body {
/*由于UI是2倍图。字体大小为12px所以这里是24/100*/
font-size: 0.24rem;
}
html,
body {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
width: 100%;
}
.header li {
height: 2.52rem; /*li的高度是可变的测量原图li的高度为252px*/
text-align: center;
width: 25%;
float: left;
background-color: #3F454F;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.header li i {
display: inline-block;
width: 0.7rem; /*原背景图的宽高为70px和69px*/
height: 0.69rem;
background: url('./images/sys.png') no-repeat;
background-size: 0.7rem 0.69rem;
margin-bottom: 0.3rem;
}
.header li p {
color: #fff;
}
.main {
flex: 1;
width: 100%;
overflow-y: scroll;
opacity: 0.5;
}
.main li {
float: left;
width: 25%;
height: 1.79rem;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main li i {
display: inline-block;
width: 0.49rem;
height: 0.49rem;
background: url('./images/fly.png') no-repeat;
background-size: 0.4rem 0.49rem;
margin-bottom: 0.3rem;
}
.main li p {
color: #3F454F;
}
.main li:nth-of-type(4n) {
border-right: 0;
}
.main li:nth-last-of-type(-n+4) {
border-bottom: 0;
}
.footer {
width: 100%;
border-top: 1px solid #ccc;
}
.footer li {
height: 1rem;
width: 25%;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer li i {
display: inline-block;
width: 0.44rem;
height: 0.44rem;
background: url("./images/zfb.png") no-repeat;
background-size: 0.44rem 0.44rem;
}
.footer li p {
color: #00AAEE;
}
</style>
</head>
<body>
<div class="header">
<ul class="clearfix">
<li>
<i></i>
<p>扫一扫</p>
</li>
<li>
<i></i>
<p>扫一扫</p>
</li>
<li>
<i></i>
<p>扫一扫</p>
</li>
<li>
<i></i>
<p>扫一扫</p>
</li>
</ul>
</div>
<div class="main">
<ul>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
<li>
<i></i>
<p>机票火车票</p>
</li>
</ul>
</div>
<div class="footer">
<ul class="clearfix">
<li>
<i></i>
<p>支付宝</p>
</li>
<li>
<i></i>
<p>支付宝</p>
</li>
<li>
<i></i>
<p>支付宝</p>
</li>
<li>
<i></i>
<p>支付宝</p>
</li>
</ul>
</div>
</body>
</html>
```
演示:
![](images/1.gif)

View File

@ -1,11 +0,0 @@
1、父元素设置display:flex;之后,子元素中如果有行内元素,可以直接设置宽高了。
2、解决上下盒子间距vertical-align:top; 或者 font-size:0;
解决左右盒子间距font-size:0;
3、用背景和图片的关键就是看是否经常更换更换的用图片否则用背景图。

View File

@ -1,18 +0,0 @@
多背景图叠加
代码如下:
```css
background: url("1.png") 0 0 no-repeat,
url("2.png") 0 0 no-repeat;
background-color: red;
```
注意:
1. 书写的顺序先写小图,在写大图。
2. 最后另写背景颜色。

View File

@ -1,106 +0,0 @@
20181017 如何实现如下功能
![](images/2.gif)
这个首页链接,鼠标放上去的时候,可以上下翻动怎么做呢?
**设计思路:**
- li标签里面是一个a
- a里面是个div
- div里面是个span
- span里面是“首页”和p标签“HOME”。
![](images/8.png)
**实现思路:**
- 首先设置宽度但是不用设置高度高度由a撑开
- 设置a的高度这时候文字“首页“是在顶部的可以设置padding-top的值往下直到”首页“到达中间此时header的高度为a的高度+padding-top的高度
- 设置div的高度为“首页“的高度然后加上overflow:hidden;
- 当鼠标放在a上是设置span的margin-top为负值可以将字往上移动最后加上过渡效果即可。
**实现代码:**
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/base.css">
<style>
header {
width: 100%;
}
ul {
width: 100%;
background-color: #ff0;
text-align: center;
}
ul li {
display: inline-block;
background-color: #f0f;
margin: 0 20px;
}
li a {
display: block;
width: 100%;
height: 50px;
background-color: #0ff;
padding-top: 28px;
}
li a div {
width: 100%;
height: 22px;
overflow: hidden;
}
span {
display: block;
}
li a:hover span {
margin-top: -20px;
transition: margin 0.5s;
}
</style>
</head>
<body>
<header>
<ul class="clearfix">
<li>
<a href="javascript:;">
<div>
<span>首页
<p>HOME</p>
</span>
</div>
</a>
</li>
</ul>
</header>
</body>
</html>
```
![](images/3.gif)

View File

@ -1,12 +0,0 @@
20181018 animation和transition的区别
过渡动画transition
逐帧动画animation
transition 需要触发条件,而且只有开始和结束之间的过渡。
animation不需要触发中间可以插入无数关键帧。

Binary file not shown.

View File

@ -1,21 +0,0 @@
### 问题描述
在一个div中放一个img但是img的下方和div之间有3px的间隔。
这是浏览器的解析问题,不同的浏览器间隔的还不同。
foxfire是5pxchrome是3px。
### 解决办法
```css
/*方式一*/
div {font-size: 0;}
/*方式二*/
img{display: block;}
/*方式三*/
img{vertical-align: top;}
```

Binary file not shown.

Before

Width:  |  Height:  |  Size: 470 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1011 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1,220 +0,0 @@
## 块元素水平垂直居中的方法
### 一、元素没有固定的宽和高
#### 方法一使用transform
```css
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
```
**优点:**
- 内容可变高度
- 代码量少
**缺点:**
- IE8不支持
- 属性需要写浏览器厂商前缀
- 可能干扰其他transform效果
- 某些情形下会出现文本或元素边界渲染模糊的现象
**示例代码:**
```html
<style>
.dv {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="dv">我不知道我的宽度和高是多少,我要实现水平垂直居中</div>
</body>
```
#### 方法二使用css3伸缩盒子
**核心代码:**
```css
/*父盒子使用*/
display: flex;
justify-content: center;
align-items: center;
```
**示例代码:**
```html
<style>
.parent {
width: 800px;
height: 500px;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.dv {
background-color: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="dv">我不知道我的宽度和高是多少,我要实现水平垂直居中</div>
</div>
</body>
```
**注意**:此时父元素的宽高需要确定,否则无法实现垂直方向上的居中显示。
### 二、元素有固定的宽和高
#### 方法一:使用 margin 负间距
**此方案代码关键点:**
- 必需知道该子div的宽度和高度
- 然后设置位置为绝对位置,
- left: 50%; top: 50%;
- 最后将该子div分别左移和上移左移和上移的大小就是该子div宽度和高度的一半。
**关键代码:**
```css
/*子元素使用*/
position: absolute;
left: 50%;
top: 50%;
margin-left: -xxpx;
margin-top: -xxpx;
```
**示例代码:**
```html
<style>
.dv {
width: 200px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="dv">知道我的宽度和高是多少,实现水平垂直居中</div>
</body>
```
#### 方法二margin:auto 实现绝对定位元素的居中
该方法兼容ie8以上浏览器
**此方案代码关键点:**
- 上下左右均0位置定位
- margin: auto;
**关键代码:**
```css
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
```
**示例代码:**
```css
<style>
.dv {
width: 200px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="dv">知道我的宽度和高是多少,实现水平垂直居中</div>
</body>
```

View File

@ -1,66 +0,0 @@
### 方法一使用line-height
示例:
```html
<style>
div {
width: 500px;
height: 300px;
border: 1px solid red;
text-align: center;
line-height: 300px;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="1.png" alt="">
</div>
</body>
```
### 方法二:使用 table
示例:
```html
<style>
div {
width: 500px;
height: 300px;
border: 1px solid red;
text-align: center;
display: table; /*水平方向居中*/
}
span {
display: table-cell; /*垂直方法居中*/
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<span>
<img src="1.png" alt="">
</span>
</div>
</body>
```
注意:行内块元素的外面需要包两层。一层为 display:table一层为 display:table-cell;
span 设置了 display:table-cell 就相当于一个单元格只有一个单元格的话就自动水平居中了之后设置vertical-align: middle;为每个单元格居中。

Binary file not shown.

View File

@ -1,214 +0,0 @@
## js变量提升与函数提升的过程详解
先来看两个栗子,下面的两段代码分别输出什么?
```js
// 代码段1
function foo() {
var a = 1;
function a() {}
console.log(a);
}
foo();
// 代码段2
function foo() {
var a;
function a() {}
console.log(a);
}
foo();
```
答案是代码段1打印的是1代码段2打印的是 a() 函数。
为什么会这样呢这就涉及到js中的变量提升和函数提升的具体过程了。
### 1、变量的提升
js是怎么创建变量的呢
如下面的代码:
```
var a = 1;
var b = 2;
```
js在解析上面的代码的时候其实会按照下面的方式进行解析的
```js
var a;
var b;
a = 1;
b = 2;
```
所以 js 并不是在我们定义一个变量的时候,声明完成之后立即赋值,而是把所有用到的变量全部声明之后,再到变量的定义的地方进行赋值,变量的声明的过程就是变量的提升。
所以我们看下下面的栗子:
```
function foo() {
var a = 1;
console.log(a);
console.log(b);
var b = 2;
}
foo();
```
上面的代码在js的眼中是这样解析的
```js
function foo() {
var a;
var b;
a = 1;
console.log(a); // 1
console.log(b); // undefined
b = 2;
}
foo();
```
所以输出的 a 的值为1 b的值为 undefined。
变量在声明提升的时候是全部提升到作用域的最前面一个接着一个的。但是在变量赋值的时候就不是一个接着一个赋值了而是赋值的位置在变量原本定义的位置。原本js定义变量的地方在js运行到这里的时候才会进行赋值操作而没有运行到的变量不会进行赋值操作。
所以变量的提升,提升的其实是变量的声明,而不是变量的赋值。
### 2、函数的提升
函数的提升和变量的提升类似,都是提升到作用域的最开始的位置,只不过变量的提升是分两步的,第一步是变量声明的提升,第二步是变量的赋值。而函数的提升是直接将整个函数整体提升到作用域的最开始位置,相当于剪切过去的样子。
### 3、变量提升和函数提升的顺序
在作用域中,不管是变量还是函数,都会提升到作用域最开始的位置,不同的是,函数的提升后的位置是在变量提升后的位置之后的。
举个栗子:
下面的代码输出什么?
```js
function foo() {
console.log(a);
var a = 1;
console.log(a);
function a() {}
console.log(a);
}
foo();
```
上面的代码在js眼中是这样解析的
```js
function foo() {
var a;
function a() {}
console.log(a); // a()
a = 1;
console.log(a); // 1
console.log(a); // 1
}
foo();
```
所以从上面的栗子可以看到变量的提升是在函数提升之前的但是变量赋值的部分是在js原型到变量定义的位置才给变量赋值的而函数提升是相当于直接剪切到最前面的。
我们再看一个更加复杂一点的栗子:
```js
function foo() {
console.log(a);
var a = 1;
console.log(a);
function a() {}
console.log(a);
console.log(b);
var b = 2;
console.log(b);
function b() {}
console.log(b);
}
foo();
```
js是这样解析的
```js
function foo() {
var a;
var b;
function a() {}
function b() {}
console.log(a); // a()
a = 1;
console.log(a); // 1
console.log(a); // 1
console.log(b); // b()
b = 2;
console.log(b); // 2
console.log(b);// 2
}
foo();
```
**最后,注意:只有声明的变量和函数才会进行提升,隐式全局变量不会提升。**
下面的栗子中b不会进行变量提升。
```js
function foo() {
console.log(a);
console.log(b); // 报错
b = 'aaa';
var a = 'bbb';
console.log(a);
console.log(b);
}
foo();
```
### 4、参考链接
js变量提升与函数提升的机制 https://segmentfault.com/a/1190000008568071
![](https://github.com/Daotin/pic/raw/master/fgx.png)

View File

@ -1,193 +0,0 @@
1、下面代码执行结果为
```js
var a = 123;
fn(a);
function fn(a) {
a = 456;
}
console.log(a); // 123
```
> a = 123 形参是局部变量,不会影响实参的值。(传值与传址的区别)
2、下面代码的执行结果是
```js
var a = 1&&2;
var b = true || false;
var c = a*b+3;
console.log(c);
```
> c = 2*1+3; 1&&2不是true而是2.
3、下列字符串符合该 `/.\.\d/` 正则对象的有ABD
A&.123ab”
B: “123.&.1.23ac”
C: “bbc123”
D: “?.123?”
> 正则开头没有^,结尾没有$,则只需要包含即可。
4、判断是否为真数组的方法
> - **Array.isArray(xxx);**
> - **Array == instanceof(xxx)**
> - **判断xxx是否存在数组中的方法。如 if(xxx.sort)**
5、下列函数的结果为
```js
function say(a,b,b) {
alert(a+b+b);
}
say(1,2,3);
```
> 结果为7.a=1,b=2之后b=3将之前b的值覆盖了。
6、下面那个方法没有兼容问题D
A: getElementsByClassName
B: nextSibiling
C: childNodes
D: parentNode
> A: IE8 不兼容getElementByClassName和 indexOf函数
>
> 封装代码:
>
> function daotin_indexOf(str, list) {
>
> var index = -1;
>
> for (var i = 0; i < list.length; i++) {
>
> if (str == list[i]) {
>
> return i;
>
> }
>
> }
>
> return index;
>
> };
>
> function daotin_getElementByClassName(className) {
>
> var allEle = document.getElementsByTagName("*");
>
> var list = [];
>
> for (var i = 0; i < allEle.length; i++) {
>
> if (allEle[i].className) {
>
> var classList = allEle[i].className.split(" "); //["ll", "haha"]
>
> // if (classList.indexOf(className) != -1) {
>
> if (daotin_indexOf(className, classList) != -1) {
>
> list.push(allEle[i]);
>
> }
>
> }
>
> }
>
> return list;
>
> }
>
> B,C 都有可能获得文本节点。
>
> 所以本题答案D
7、给整个页面绑定一个滚动事件的最好的写法A
A: window.onscroll
B: document.onscroll
C: window.document.onscroll
D: document.body.onscroll
> 除了A其他都有兼容性问题。
![](images/1.png)
8、下面方法没有兼容问题的是D
A: window.event
B: returnValue
C: keyCode
D: onclick
> A 的兼容写法window.event || e
>
> B 是阻止默认事件的兼容写法如下:
>
> function stopDefault(e) {
>
> var e = window.event || e;
>
> if (e.preventDefault) {
>
> e.preventDefault();
>
> } else {
>
> e.returnValue = false;
>
> }
>
> };
>
> C e.which || e.keyCode
>
> D 不是兼容性问题addEventListerner只是绑定多个事件的时候用的和兼容性没关系。
9、处理兼容性正确的是ABD
A: window.event||e
B: e.which||e.keyCode
C: document.documentElement||document.body
D: document.documentElement.scrollTop||document.body.scrollTop
> C 这两个属性都是存在的只不过scrollLeft和scrollTop的属性在不同的浏览器下有的存在于document.documentElement有的存在于document.body。所以只看C是不存在兼容问题的。

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.2 KiB

BIN
.DS_Store vendored

Binary file not shown.

BIN
01-HTML/.DS_Store vendored

Binary file not shown.

View File

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

View File

Before

Width:  |  Height:  |  Size: 685 B

After

Width:  |  Height:  |  Size: 685 B

View File

Before

Width:  |  Height:  |  Size: 131 KiB

After

Width:  |  Height:  |  Size: 131 KiB

View File

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 988 B

After

Width:  |  Height:  |  Size: 988 B

View File

Before

Width:  |  Height:  |  Size: 697 B

After

Width:  |  Height:  |  Size: 697 B

View File

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

View File

Before

Width:  |  Height:  |  Size: 278 KiB

After

Width:  |  Height:  |  Size: 278 KiB

View File

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

View File

Before

Width:  |  Height:  |  Size: 740 B

After

Width:  |  Height:  |  Size: 740 B

View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

View File

Before

Width:  |  Height:  |  Size: 648 KiB

After

Width:  |  Height:  |  Size: 648 KiB

View File

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 51 KiB

View File

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 71 KiB

View File

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

View File

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

View File

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

View File

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

View File

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.1 KiB

View File

Before

Width:  |  Height:  |  Size: 127 KiB

After

Width:  |  Height:  |  Size: 127 KiB

View File

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

View File

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 73 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

View File

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 302 KiB

After

Width:  |  Height:  |  Size: 302 KiB

View File

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

View File

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View File

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

View File

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Some files were not shown because too many files have changed in this diff Show More