重构

记录一下干货

特定html标签相关的奇怪问题

  • textarea

1
2
3
4
5
6
<textarea cols="30" rows="10"></textarea> <!--推荐这样写-->
<textarea cols="30" rows="10">  <!--会出现几个空格-->
</textarea>
<textarea cols="30" rows="10"> <!--换行之后有几个空格-->
</textarea>

chrome下第二个textarea会出现几个空格,第三个textarea会换行再加几个空格,所以最好使用第一个textarea的写法句号 (其他浏览器有空切换到windows测试)

css相关的奇怪问题

行内块元素之间的奇怪间隔

以span为例(设置了display:inline-block)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,div{
            height:100%;
            width:100%;
        }
        #span1{
            display:inline-block;
            width:45%;
            height:100%;
            background-color:black;
        }
        #span2{
            display:inline-block;
            width:45%;
            height:100%;
            background-color:red;
        }
    </style>
</head>
<body>
    <div>
        <span id="span1"></span>
        <span id="span2"></span>
    </div>
</body>
</html>

左图出现奇怪的间距(元素换行之后会有一个换行符,在《Javascript高级程序设计(第3版)》p269有介绍到类似的问题),右图是解决之后的状态

奇怪的间距
清除了边距

解决方法

  1. 把行内块元素写一在同一行 (不推荐,如果元素多的话太长了,可读性差)

    1
    2
    3
    <div>
        <span id="span1"></span><span id="span2"></span>
    </div>

  2. 加注释(推荐)

    1
    2
    3
    4
    <div>
        <span id="span1"></span><!--
        --><span id="span2"></span>
    </div>

  3. 用浮动(不推荐,脱离文本流了,弄起来有点麻烦)

height:100%的问题

height:100%不起作用

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
  <body>
    <div style="height: 100%;background-color:red">
      <p>
        想让这个div高度为 100% 。但是不能实现
      </p>
    </div>
  </body>
</html>

height:100%这个可以看做是继承的,div没有向上继承过来的height:100%,所以不可以实现height:100%;

正确的姿势是这样的(记得内联元素最好要放外部文件哦):

1
2
3
4
5
6
7
8
9
<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;background-color:red">
      <p>
        这样这个div的高度就会100%了
      </p>
    </div>
  </body>
</html>

height:100%之后出现滚动条

未完待续…