html、css基礎(chǔ)注意點(diǎn)(前端必看篇)
我要評(píng)論之前第一次接觸html，一直使用table進(jìn)行布局，十分麻煩還相當(dāng)丑陋，造成當(dāng)初并沒有多大的興趣，直到半年前開始接觸到了使用div+css編寫頁面，才對(duì)它有了興趣。作為一個(gè)菜鳥記錄自己的點(diǎn)滴教訓(xùn)與收獲，主要還是給自己看的，也希望對(duì)以后想要學(xué)習(xí)的同學(xué)有所幫助，同時(shí)也還請(qǐng)各位前輩多多指出不足。
1 減少無意義標(biāo)簽的使用
簡(jiǎn)單的舉個(gè)例子：
對(duì)于這個(gè)頂部的結(jié)構(gòu)，
錯(cuò)誤：通欄>版心>左邊+(右邊>ul>li*9>a)
正確：通欄>版心>左邊+(ul>li*9>a)
對(duì)于右邊的部分，不需要使用一個(gè)div包裹ul，明明一個(gè)ul就可以實(shí)現(xiàn)何必使用多余的div標(biāo)簽進(jìn)行嵌套呢。所以在編寫過程中明明可以用一個(gè)標(biāo)簽解決的，不要使用無意義的標(biāo)簽多層嵌套。
2 關(guān)于命名以前學(xué)習(xí)java，因?yàn)橛⒄Z不好，喜歡用拼音命名，這樣做不好，雖然一開始學(xué)習(xí)就知道，但是并不是很注意。在身邊人的提醒下，尤其自己也感覺用拼音的不便性，糾正，以后要更注意命名。英語不好沒關(guān)系，這不是還有有道和度娘嗎？
再有就是標(biāo)簽發(fā)生嵌套時(shí)候的命名。一般同一層級(jí)的標(biāo)簽的命名問題不是很大，只需要使用一個(gè)單詞就可以。但是當(dāng)發(fā)生嵌套的時(shí)候就需要使用“-”進(jìn)行連接，不然很容易自己分不清哪個(gè)標(biāo)簽是哪個(gè)。比如以上那個(gè)頂部通欄可以使用top命名整個(gè)，右邊部分可以叫top-right，后面可能還會(huì)有top-right-detail-link如果太長就可以縮寫為top-r-d-link，還是太長甚至可以縮寫為trd-link，注意是太長才縮寫，短的話為了保證意思的理解不用縮寫，另外最后一個(gè)單詞為了理解也最好不要縮寫。
3 特殊符號(hào)的使用上面那個(gè)下拉箭頭是使用菱形符號(hào)◇制作的，使用了兩個(gè)標(biāo)簽進(jìn)行嵌套書寫，
<i><s>◇</s></i>
s標(biāo)簽使用position控制需要顯示部分的位置，i標(biāo)簽控制窗口大小，同時(shí)隱藏溢出。
- i {
- width: 15px;
- height: 8px;
- position: relative;
- overflow: hidden;
- }
- i s {
- font: 400 14px/14px consolas;
- position: absolute;
- top: -6px;
- }
以上是通行的做法，作為菜鳥，在不考慮兼容的情況下，感覺使用一個(gè)標(biāo)簽就可以解決，對(duì)于字符使用行高控制垂直位置，用寬高限制顯示區(qū)域。
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>測(cè)試</title>
- <style>
- i {
- display: inline-block;
- height: 50px;
- width: 100px;
- overflow: hidden;
- font: 400 100px/0px SimSun;
- }
- </style>
- </head>
- <body>
- <i>◇</i>
- </body>
- </html>
這是效果： 
目前只是測(cè)試了在谷歌，火狐下的效果，沒有問題，有什么不妥之處還請(qǐng)指出。
4 相鄰行內(nèi)塊元素之間的距離
上面的導(dǎo)航如果使用轉(zhuǎn)化為行內(nèi)塊元素，那么相鄰兩個(gè)元素之間就會(huì)有幾像素的距離，可能粗看看不出來，但是放大以后可以看見，解決這個(gè)問題的唯一辦法就只能使用浮動(dòng)。
5 數(shù)值的連寫：
在css中有一些屬性的值可以連寫。比如padding、border-radius。前者為上、右、下、左，后者四個(gè)方向?yàn)樽笊稀⒂疑?、右下、左下。它們都是順時(shí)針方向排列的，只是起點(diǎn)不同。如果將四個(gè)方向看作a、b、c、d。那么當(dāng)后面書寫連續(xù)的2個(gè)數(shù)值時(shí)代表的是：ac、bd；3個(gè)數(shù)值代表a、bd、c；4個(gè)數(shù)值不用說代表的就是a、b、c、d了。
6 清除浮動(dòng)
清除浮動(dòng)的方法有4種，最普遍的是使用偽元素。
- .clearfix:before, .clearfix:after {
- content: "";
- display: table;
- }
- .clearfix:after {
- clear: both;
- }
- .clearfix {
- *zoom: 1; /*IE/7/6*/ /*兼容IE6下的寫法*/
- }
7 設(shè)置高度
上面講到浮動(dòng)突然想到關(guān)于的板塊高度的問題，一般來說盡量不要使用一個(gè)固定的高度把一個(gè)板塊寫死，不要寫死！不要寫死！不要寫死！重要的事情說3遍。寫死了怎么做響應(yīng)式？
8 元素的margin,padding
對(duì)于所有元素margin和padding的水平方向（左右）都是起作用的，只有行內(nèi)元素的垂直方向（上下）是不起支撐作用的。需要注意的是padding可以將元素邊框撐大，但是并不會(huì)將元素?cái)D離原來的垂直位置。
9 相對(duì)定位與絕對(duì)定位的使用
定位總共有四種：絕對(duì)定位、相對(duì)定位、固定定位、靜態(tài)定位。后兩種定位，沒有什么好說的，就是前面的兩種定位，需要注意的是相對(duì)定位會(huì)占據(jù)原來文檔流的位置，而絕對(duì)定位則不占據(jù)原來的文檔流位置，所以在需要使用定位的時(shí)候，需要按照實(shí)際情況，具體情況具體分析，考慮到底是使用相對(duì)定位還是使用絕對(duì)定位。舉個(gè)栗子：
- * { 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; }
- <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是下面板塊的內(nèi)容，如果完全使用相對(duì)定位和絕對(duì)定位解決問題，那么left為了不影響下面的板塊應(yīng)該使用absolute，這樣的話超過上面部分的list就會(huì)被遮蓋，所以要給list的父盒子設(shè)置一定的層級(jí)，照道理來說需要使用relative去占據(jù)上面部分的位置，因?yàn)樗琅f屬于上面的部分。這樣的話需要給b也設(shè)置relative，為了不被遮擋還需要設(shè)置左外邊距。
10 使用定位居中元素
塊級(jí)元素的水平居中可以使用margin：0 auto；使用定位解決的辦法是：設(shè)置定位后設(shè)置left（top）為50%，再使用margin-left回退自己身位的一半。
- height: 20px;
- width: 50px;
- position: absolute;
- left: 50%;
- margin-left: -25px;
11 背景和圖片
經(jīng)常被問到應(yīng)該什么情況下使用img插入圖片，什么時(shí)候用背景。簡(jiǎn)單得講我認(rèn)為，一般的網(wǎng)站里的圖標(biāo)都用背景，具體涉及到某件產(chǎn)品那么使用img圖片。
以上這篇html、css基礎(chǔ)注意點(diǎn)(前端必看篇)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
原文地址：http://www.cnblogs.com/qing9442/archive/2016/07/26/5709413.html
相關(guān)文章
html/css基礎(chǔ)篇——html代碼編寫過程中的幾個(gè)警惕點(diǎn)(必看)
下面小編就為大家?guī)硪黄猦tml/css基礎(chǔ)篇——html代碼編寫過程中的幾個(gè)警惕點(diǎn)(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-27- 下面小編就為大家?guī)硪黄狧TML CSS樣式基礎(chǔ)(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-23
- 下面小編就為大家?guī)硪黄狧TML基礎(chǔ)總結(jié)推薦(段落)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-13
HTML基礎(chǔ)知識(shí)——css樣式表,樣式屬性,格式與布局詳解
下面小編就為大家?guī)硪黄狧TML基礎(chǔ)知識(shí)——css樣式表,樣式屬性,格式與布局詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-11HTML基礎(chǔ)知識(shí)——設(shè)置超鏈接的樣式簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄狧TML基礎(chǔ)知識(shí)——設(shè)置超鏈接的樣式簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-11- 下面小編就為大家?guī)硪黄狧TML基礎(chǔ)必看——全面了解css樣式表。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-11
HTML基礎(chǔ)必看---表單,圖片熱點(diǎn),網(wǎng)頁劃區(qū)和拼接詳解
下面小編就為大家?guī)硪黄狧TML基礎(chǔ)必看---表單,圖片熱點(diǎn),網(wǎng)頁劃區(qū)和拼接詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-10HTML基礎(chǔ)重點(diǎn)_一般標(biāo)簽、常用標(biāo)簽和表格
下面小編就為大家?guī)硪黄狧TML基礎(chǔ)重點(diǎn)_一般標(biāo)簽、常用標(biāo)簽和表格。小編覺得挺不錯(cuò)的， 現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-09- 下面小編就為大家?guī)硪黄獪\談HTML（css基礎(chǔ)樣式）。小編覺得挺不錯(cuò)的， 現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-27
- 這篇文章主要介紹了前端開發(fā)每天必學(xué)之HTML入門基礎(chǔ)知識(shí)，介紹了學(xué)習(xí)web前端開發(fā)需要掌握的基礎(chǔ)技術(shù)，感興趣的小伙伴們可以參考一下2016-06-21