html、css基礎(chǔ)注意點(前端必看篇)

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