Project refactor
@ -1,14 +0,0 @@
|
||||
一个功能的实现:
|
||||
|
||||
需求:**li下面有a标签,要求li之间有竖线间隔,竖线的长度和a相同,鼠标放到li上高亮,高亮的区域没有到达竖线。**如下图:
|
||||
|
||||
|
||||
|
||||
![](images/4.png)
|
||||
|
||||
|
||||
|
||||
**实现的方式就是:**
|
||||
|
||||
- 设置li的margin间隔
|
||||
- 设置a的margin为负值,padding为正值即可。
|
@ -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、浏览器五大内核
|
||||
|
||||
IE:trident
|
||||
|
||||
firefox:gecko
|
||||
|
||||
chrome/safari:webkit
|
||||
|
||||
Opera:presto
|
||||
|
||||
谷歌和欧朋共同开发:blink
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -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-top:1px;常用)
|
||||
|
||||
2、为父元素添加 overflow: hidden;样式即可(完美)
|
||||
|
||||
3、为父元素或者子元素声明浮动(float:left;可用)
|
||||
|
||||
4、为父元素添加 border-top(border-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;
|
||||
```
|
@ -1,15 +0,0 @@
|
||||
首先ul可以居中:margin: 0 auto;
|
||||
|
||||
之后,li居中的方式使用百分比。
|
||||
|
||||
比如两列居中:
|
||||
li {
|
||||
width: 48%;
|
||||
margin: 10px 1%;
|
||||
}
|
||||
|
||||
比如三列居中:
|
||||
li {
|
||||
width: 31.3333%;
|
||||
margin: 10px 1%;
|
||||
}
|
@ -1,6 +0,0 @@
|
||||
只能用在p标签上:
|
||||
|
||||
overflow:hidden; /*超出隐藏*/
|
||||
white-space:nowrap; /*强制不换行*/
|
||||
text-overflow:ellipsis; /*超出的显示省略号
|
||||
*/
|
@ -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需要一行显示并且居中显示,**
|
||||
|
||||
**那么就设置ul:text-align:center; 设置 li:display:inline-block.**
|
||||
|
||||
**此时有个问题就是 li 之间有间距,解决办法就是设置ul:font-size:0;**
|
||||
|
||||
vertical-align:top;是没法解决的,它解决的是上下的问题。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -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,占据剩余的空间。**
|
||||
- **如果两个div,a和b,设置的宽度大于剩余的空间,并且a的flex:1; b的flex:2;那么a和b都会缩放,缩放后a和b的宽度比为 1:2.**
|
||||
- **如果两个div,a和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)
|
@ -1,11 +0,0 @@
|
||||
1、父元素设置display:flex;之后,子元素中如果有行内元素,可以直接设置宽高了。
|
||||
|
||||
|
||||
|
||||
2、解决上下盒子间距:vertical-align:top; 或者 font-size:0;
|
||||
|
||||
解决左右盒子间距:font-size:0;
|
||||
|
||||
|
||||
|
||||
3、用背景和图片的关键就是看,是否经常更换,更换的用图片,否则用背景图。
|
@ -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. 最后另写背景颜色。
|
@ -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)
|
@ -1,12 +0,0 @@
|
||||
20181018 animation和transition的区别
|
||||
|
||||
过渡动画:transition
|
||||
|
||||
逐帧动画:animation
|
||||
|
||||
|
||||
|
||||
transition 需要触发条件,而且只有开始和结束之间的过渡。
|
||||
|
||||
animation:不需要触发,中间可以插入无数关键帧。
|
||||
|
@ -1,21 +0,0 @@
|
||||
### 问题描述
|
||||
|
||||
在一个div中放一个img,但是img的下方和div之间有3px的间隔。
|
||||
|
||||
这是浏览器的解析问题,不同的浏览器间隔的还不同。
|
||||
|
||||
foxfire是5px,chrome是3px。
|
||||
|
||||
|
||||
|
||||
### 解决办法
|
||||
|
||||
```css
|
||||
/*方式一*/
|
||||
div {font-size: 0;}
|
||||
/*方式二*/
|
||||
img{display: block;}
|
||||
/*方式三*/
|
||||
img{vertical-align: top;}
|
||||
```
|
||||
|
Before Width: | Height: | Size: 470 KiB |
Before Width: | Height: | Size: 4.3 KiB |
Before Width: | Height: | Size: 61 KiB |
Before Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 127 KiB |
Before Width: | Height: | Size: 129 KiB |
Before Width: | Height: | Size: 170 KiB |
Before Width: | Height: | Size: 1011 B |
Before Width: | Height: | Size: 1.8 KiB |
@ -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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -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;为每个单元格居中。
|
BIN
#JS阶段经验总结/.DS_Store
vendored
@ -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)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -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是不存在兼容问题的。
|
||||
|
Before Width: | Height: | Size: 6.2 KiB |
BIN
01-HTML/.DS_Store
vendored
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.8 KiB |
Before Width: | Height: | Size: 685 B After Width: | Height: | Size: 685 B |
Before Width: | Height: | Size: 131 KiB After Width: | Height: | Size: 131 KiB |
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 5.7 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 988 B After Width: | Height: | Size: 988 B |
Before Width: | Height: | Size: 697 B After Width: | Height: | Size: 697 B |
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
Before Width: | Height: | Size: 278 KiB After Width: | Height: | Size: 278 KiB |
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 740 B After Width: | Height: | Size: 740 B |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 648 KiB After Width: | Height: | Size: 648 KiB |
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 51 KiB |
Before Width: | Height: | Size: 71 KiB After Width: | Height: | Size: 71 KiB |
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 47 KiB |
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 127 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 302 KiB After Width: | Height: | Size: 302 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |