相信CSS對(duì)網(wǎng)站設(shè)計(jì)高手來(lái)說(shuō)都不是一個(gè)陌生的詞匯，CSS的出現(xiàn)使得我們的網(wǎng)站設(shè)計(jì)更容易被閱讀，為網(wǎng)站建設(shè)行業(yè)的發(fā)展注入了血液。成創(chuàng)網(wǎng)絡(luò)今天就來(lái)講一講CSS在網(wǎng)站設(shè)計(jì)中的常用技巧。
第一點(diǎn)，網(wǎng)站設(shè)計(jì)中Block和inline元素對(duì)比
其實(shí)，所有的HTML元素都屬于block和inline兩者中之一，但BLOCK和INLINE又各自有著不同的特點(diǎn)。
block的特點(diǎn)主要體現(xiàn)在以下幾個(gè)方面：
1、block總是在新行上開(kāi)始；
2、block的高度，行高以及頂和底邊距都可控制；
3、block的寬度缺省是它的容器的100%，除非設(shè)定一個(gè)度
而INLINE元素在網(wǎng)站設(shè)計(jì)中的特點(diǎn)則主要表現(xiàn)在如下幾個(gè)方面：
1、inline總是和其他元素在一行上；
2、inline的高，行高及頂和底邊距不可改變；
3、inline的寬度就是它的文字或圖片的寬度，不可改變
第二點(diǎn)，網(wǎng)站設(shè)計(jì)中的box黑客方法
網(wǎng)站設(shè)計(jì)中之所以會(huì)存在如此多的box黑客方法，主要是因?yàn)樵贗E6之前的IE瀏覽器對(duì)box的理解跟別人都不一樣，它的寬度要包含邊線寬和空白。
要想讓IE5同其他瀏覽器保持一致，成創(chuàng)網(wǎng)絡(luò)建議大家可以使用以下辦法：
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
第一個(gè)寬度是所有瀏覽器都能讀懂的指令，但I(xiàn)E5.x卻不能讀懂第2行的寬度設(shè)置，因?yàn)槟且恍猩嫌锌瞻椎淖⑨尫?hào)，所以IE5.x就用20減掉一些空白，而其他瀏覽器則會(huì)用14作為寬度，因?yàn)樗堑?行，會(huì)覆蓋掉第1行。
第三點(diǎn)，網(wǎng)站設(shè)計(jì)中的頁(yè)面最小寬度
成創(chuàng)網(wǎng)絡(luò)認(rèn)為min-width是個(gè)非常方便的CSS命令，它可以指定頁(yè)面的最小寬度，保證排版的高準(zhǔn)確率，可惜的是IE無(wú)法理解它的意思，而把width當(dāng)成是最小寬度使用，為了解決IE的這一現(xiàn)狀問(wèn)題，在網(wǎng)站設(shè)計(jì)中可以使用以下CSS指令：
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
實(shí)際上也就是讓IE通過(guò)Javascript的判定最小寬度。
網(wǎng)站設(shè)計(jì)IE實(shí)現(xiàn)最大寬度CSS指令同理可寫(xiě)為：
#container
{
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
}
第四點(diǎn)，網(wǎng)站設(shè)計(jì)要區(qū)分大小寫(xiě)
當(dāng)我們?cè)赬HTML中使用CSS時(shí)，CSS里定義的元素名稱是區(qū)分大小寫(xiě)的。為了避免類似錯(cuò)誤的出現(xiàn)，成創(chuàng)網(wǎng)絡(luò)建議所有的定義名稱都可以采用小寫(xiě)。
第五點(diǎn)，網(wǎng)站設(shè)計(jì)時(shí)可取消class和id前的元素限定
當(dāng)我們給一個(gè)元素定義class或者id時(shí)，成創(chuàng)網(wǎng)絡(luò)建議大家可以省略前面的元素限定，因?yàn)樵诰W(wǎng)站設(shè)計(jì)中ID是一個(gè)頁(yè)面里唯一的，而class則可以在頁(yè)面中多次使用，限定某個(gè)元素毫無(wú)意義。