重构页面遇到的各种奇怪问题
2016-11-29 本文已影响29人
一书and一世界
重构
记录一下干货
特定html标签相关的奇怪问题
-
textarea
<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)
<!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>
左图出现奇怪的间距(元素换行之后会有一个换行符),右图是解决之后的状态
奇怪的间距
清除了边距
解决方法
- 把行内块元素写一在同一行 (不推荐,如果元素多的话太长了,可读性差)
<div>
<span id="span1"></span><span id="span2"></span>
</div>
- 加注释(推荐)
<div>
<span id="span1"></span><!--
--><span id="span2"></span>
</div>
- 用浮动(不推荐,脱离文本流了,弄起来有点麻烦)
height:100%的问题
height:100%不起作用
<!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%;
正确的姿势是这样的(记得内联元素最好要放外部文件哦):
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;background-color:red">
<p>
这样这个div的高度就会100%了
</p>
</div>
</body>
</html>
height:100%之后出现滚动条
未完待续...
