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

DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> html、css基礎注意點(前端必看篇)

編輯：前端技巧

之前第一次接觸html，一直使用table進行布局，十分麻煩還相當丑陋，造成當初並沒有多大的興趣，直到半年前開始接觸到了使用div+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基礎注意點(前端必看篇)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/qing9442/archive/2016/07/26/5709413.html

前端技巧

使用火狐的web developer禁用網頁樣式圖文詳解: 前置條件：已安裝了web developer插件操作步驟：選擇工具->Web Develop
網頁前端開發小細節: 1 select標簽必須閉合<select></select> 2 左右布局
DIV常見任務(上) —常規任務(顯示滾動條/隱藏div/禁止事件冒泡等等): 作為最常用的布局元素，DIV在Web開發中起著至關重要的作用。這裡總結一下我在使用DIV中遇到的各種

前端技巧關於網頁技巧 WEB前端代碼網頁特效代碼

DIV CSS 佈局教程網

相關文章