2018-01-24 16:35:19 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2018-02-01 22:58:37 +08:00
|
|
|
|
## 隐藏盒子的几种方式
|
2018-01-24 16:35:19 +08:00
|
|
|
|
|
|
|
|
|
|
隐藏盒子，有以下几种方式：
|
|
|
|
|
|
|
|
|
|
|
|
（1）方式一：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
overflow：hidden; //隐藏盒子超出的部分
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
（2）**方式二**：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
display: none; 隐藏盒子，而且不占位置(用的最多)
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2018-01-27 14:40:56 +08:00
|
|
|
|
比如，点击`X`，关闭京东首页上方的广告栏。
|
2018-01-24 16:35:19 +08:00
|
|
|
|
|
|
|
|
|
|
（3）方式三：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
visibility: hidden; //隐藏盒子，占位置。
|
2018-02-01 22:58:37 +08:00
|
|
|
|
visibility: visible; //让盒子重新显示
|
|
|
|
|
|
|
2018-01-24 16:35:19 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
（4）方式四：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
pacity: 0; //设置盒子的透明度（不建议，因为内容也会半透明），占位置
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
（4）方式五：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
Position/top/left/...-999px //把盒子移得远远的，占位置。
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
（5）方式六：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
margin-left: 1000px;
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 设置盒子的半透明
|
|
|
|
|
|
|
|
|
|
|
|
方式一：`pacity: 0.4`。优点是方便。缺点是：里面的内容也会半透明
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
方式二：css3的技术来解决半透明。如下：
|
|
|
|
|
|
|
|
|
|
|
|
- background: rgba(0,0,0,0.3);
|
|
|
|
|
|
|
|
|
|
|
|
- background: rgba(0,0,0,.3);
|
|
|
|
|
|
|
|
|
|
|
|
备注：`a`指的是alpha透明度。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 给标签的形状设置为圆角矩形
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
border-radius: 10px 0 0 10px;
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 行高的问题：儿子把父亲撑开
|
|
|
|
|
|
|
|
|
|
|
|
比如对于下面这样的标签：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<a href=""></a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
前置条件：如果我们给父亲div的行高设为31px，然后给儿子a的行高也设置为31
|
|
|
|
|
|
|
|
|
|
|
|
结果：当我们给儿子a设置了字体属性之后，会发现，父亲被撑高为32px了。因为font字体自身会比较大，多撑出了一个像素。
|
|
|
|
|
|
|
|
|
|
|
|
解决办法：**行内元素尽量不要设置font属性**。对于行内元素而言，如果它和父亲都设置了行高，就不要去给自己设置font属性了。要么就，不要同时设置行高。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 背景图不能撑开盒子
|
|
|
|
|
|
|
|
|
|
|
|
高和行高都可以城开盒子，但背景图不能撑开盒子。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## JS
|
|
|
|
|
|
|
|
|
|
|
|
### 超链接`<a>`的href跳转
|
|
|
|
|
|
|
|
|
|
|
|
一个空白的超链接如下：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<a href=""></a>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
当点击超链接时，由于 href 的属性值的不同，可以产生很多种情况：
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
href="" //刷新页面
|
|
|
|
|
|
|
|
|
|
|
|
href="#" //跳转到当前页面的顶部（不会刷新）
|
|
|
|
|
|
|
|
|
|
|
|
href="javascript:void(0)" // 什么都不做
|
|
|
|
|
|
|
|
|
|
|
|
href="javascript:;" // 什么都不做
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
