重構(gòu)
記錄一下干貨
特定html標簽相關(guān)的奇怪問題
-
textarea
<textarea cols="30" rows="10"></textarea> <!--推薦這樣寫-->
<textarea cols="30" rows="10"> <!--會出現(xiàn)幾個空格-->
</textarea>
<textarea cols="30" rows="10"> <!--換行之后有幾個空格-->
</textarea>
chrome下第二個textarea會出現(xiàn)幾個空格,第三個textarea會換行再加幾個空格,所以最好使用第一個textarea的寫法句號 (其他瀏覽器有空切換到windows測試)
css相關(guān)的奇怪問題
行內(nèi)塊元素之間的奇怪間隔
以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>
左圖出現(xiàn)奇怪的間距(元素換行之后會有一個換行符),右圖是解決之后的狀態(tài)
奇怪的間距
清除了邊距
解決方法
- 把行內(nèi)塊元素寫一在同一行 (不推薦,如果元素多的話太長了,可讀性差)
<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% 徒恋。但是不能實現(xiàn)
</p>
</div>
</body>
</html>
height:100%這個可以看做是繼承的,div沒有向上繼承過來的height:100%,所以不可以實現(xiàn)height:100%;
正確的姿勢是這樣的(記得內(nèi)聯(lián)元素最好要放外部文件哦):
<html style="height: 100%;">
<body style="height: 100%;">
<div style="height: 100%;background-color:red">
<p>
這樣這個div的高度就會100%了
</p>
</div>
</body>
</html>
height:100%之后出現(xiàn)滾動條
未完待續(xù)...
