Web/05-CSS进阶/01-CSS的一些小知识.md

126 lines
2.1 KiB
Markdown
Raw Normal View History

## CSS
### 隐藏盒子的几种方式
隐藏盒子,有以下几种方式:
1方式一
```
overflowhidden; //隐藏盒子超出的部分
```
2**方式二**
```
display: none; 隐藏盒子,而且不占位置(用的最多)
```
3方式三
```
visibility: hidden; //隐藏盒子,占位置。
```
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:;" // 什么都不做
```