溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
html和css基礎注意點有哪些，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
1 減少無意義標簽的使用
簡單的舉個例子：
對于這個頂部的結構，
錯誤：通欄>版心>左邊+(右邊>ul>li*9>a)
正確：通欄>版心>左邊+(ul>li*9>a)
對于右邊的部分，不需要使用一個div包裹ul，明明一個ul就可以實現何必使用多余的div標簽進行嵌套呢。所以在編寫過程中明明可以用一個標簽解決的，不要使用無意義的標簽多層嵌套。
2 關于命名
以前學習java，因為英語不好，喜歡用拼音命名，這樣做不好，雖然一開始學習就知道，但是并不是很注意。在身邊人的提醒下，尤其自己也感覺用拼音的不便性，糾正，以后要更注意命名。英語不好沒關系，這不是還有有道和度娘嗎？
再有就是標簽發生嵌套時候的命名。一般同一層級的標簽的命名問題不是很大，只需要使用一個單詞就可以。但是當發生嵌套的時候就需要使用“-”進行連接，不然很容易自己分不清哪個標簽是哪個。比如以上那個頂部通欄可以使用top命名整個，右邊部分可以叫top-right，后面可能還會有top-right-detail-link如果太長就可以縮寫為top-r-d-link，還是太長甚至可以縮寫為trd-link，注意是太長才縮寫，短的話為了保證意思的理解不用縮寫，另外最后一個單詞為了理解也最好不要縮寫。
3 特殊符號的使用
上面那個下拉箭頭是使用菱形符號◇制作的，使用了兩個標簽進行嵌套書寫，
<i><s>◇</s></i>
s標簽使用position控制需要顯示部分的位置，i標簽控制窗口大小，同時隱藏溢出。
CSS Code復制內容到剪貼板
i {
width: 15px;
height: 8px;
position: relative;
overflow: hidden;
}
i s {
font: 400 14px/14px consolas;
position: absolute;
top: -6px;
}
以上是通行的做法，作為菜鳥，在不考慮兼容的情況下，感覺使用一個標簽就可以解決，對于字符使用行高控制垂直位置，用寬高限制顯示區域。
XML/HTML Code復制內容到剪貼板
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>測試</title>
<style>
i {
display: inline-block;
height: 50px;
width: 100px;
overflow: hidden;
font: 400 100px/0px SimSun;
}
</style>
</head>
<body>
<i>◇</i>
</body>
</html>
這是效果： 
目前只是測試了在谷歌，火狐下的效果，沒有問題，有什么不妥之處還請指出。
4 相鄰行內塊元素之間的距離
上面的導航如果使用轉化為行內塊元素，那么相鄰兩個元素之間就會有幾像素的距離，可能粗看看不出來，但是放大以后可以看見，解決這個問題的唯一辦法就只能使用浮動。
5 數值的連寫：
在css中有一些屬性的值可以連寫。比如padding、border-radius。前者為上、右、下、左，后者四個方向為左上、右上、右下、左下。它們都是順時針方向排列的，只是起點不同。如果將四個方向看作a、b、c、d。那么當后面書寫連續的2個數值時代表的是：ac、bd；3個數值代表a、bd、c；4個數值不用說代表的就是a、b、c、d了。
6 清除浮動
清除浮動的方法有4種，最普遍的是使用偽元素。
CSS Code復制內容到剪貼板
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/ /*兼容IE6下的寫法*/
}
7 設置高度
上面講到浮動突然想到關于的板塊高度的問題，一般來說盡量不要使用一個固定的高度把一個板塊寫死，不要寫死！不要寫死！不要寫死！重要的事情說3遍。寫死了怎么做響應式？
8 元素的margin,padding
對于所有元素margin和padding的水平方向（左右）都是起作用的，只有行內元素的垂直方向（上下）是不起支撐作用的。需要注意的是padding可以將元素邊框撐大，但是并不會將元素擠離原來的垂直位置。
9 相對定位與絕對定位的使用
定位總共有四種：絕對定位、相對定位、固定定位、靜態定位。后兩種定位，沒有什么好說的，就是前面的兩種定位，需要注意的是相對定位會占據原來文檔流的位置，而絕對定位則不占據原來的文檔流位置，所以在需要使用定位的時候，需要按照實際情況，具體情況具體分析，考慮到底是使用相對定位還是使用絕對定位。舉個栗子：
CSS Code復制內容到剪貼板
* { margin: 0; padding: 0; color: #fff; font-size: 20px; }
.nav { height: 30px; background-color: pink; border-bottom: 4px solid red; }
.w { width: 100px; margin: 0 100px; position: relative; height: 30px; z-index: 1; }
.nav-list { height: 30px; background-color: red; }
.left { width: 100%; height: 400px; background-color: peru; position: absolute; }
.b { margin-left: 210px; width: 100px; height: 100px; background-color: lightblue; position: relative; }
XML/HTML Code復制內容到剪貼板
<div class="nav">
<div class="w">
<div class="nav-list">list</div>
<div class="nav-list">list</div>
<div class="nav-list">list</div>
<div class="nav-list">list</div>
<div class="nav-list">list</div>
</div>
</div>
<div class="left">left</div>
<div class="b">b</div>
List屬于上面部分，left為底層的廣告，b是下面板塊的內容，如果完全使用相對定位和絕對定位解決問題，那么left為了不影響下面的板塊應該使用absolute，這樣的話超過上面部分的list就會被遮蓋，所以要給list的父盒子設置一定的層級，照道理來說需要使用relative去占據上面部分的位置，因為他依舊屬于上面的部分。這樣的話需要給b也設置relative，為了不被遮擋還需要設置左外邊距。
10 使用定位居中元素
塊級元素的水平居中可以使用margin：0 auto；使用定位解決的辦法是：設置定位后設置left（top）為50%，再使用margin-left回退自己身位的一半。
CSS Code復制內容到剪貼板
height: 20px;
width: 50px;
position: absolute;
left: 50%;
margin-left: -25px;
11 背景和圖片
經常被問到應該什么情況下使用img插入圖片，什么時候用背景。簡單得講我認為，一般的網站里的圖標都用背景，具體涉及到某件產品那么使用img圖片。
看完上述內容，你們掌握html和css基礎注意點有哪些的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
