盒模型代碼簡(jiǎn)寫(xiě)

還記得在講盒模型時(shí)外邊距(margin)、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個(gè)方向的邊距是按照順時(shí)針?lè)较蛟O(shè)置的：上右下左。具體應(yīng)用在margin和padding的例子如下：

margin:10px 15px 12px 14px;/*上設(shè)置為10px、右設(shè)置為15px、下設(shè)置為12px、左設(shè)置為14px*/

通常有下面三種縮寫(xiě)方法:

1、如果top、right、bottom、left的值相同，如下面代碼：

margin:10px 10px 10px 10px;

可縮寫(xiě)為：

margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代碼：

margin:10px 20px 10px 20px;

可縮寫(xiě)為：

margin:10px 20px;

3、如果left和right的值相同，如下面代碼：

margin:10px 20px 30px 20px;

可縮寫(xiě)為：

margin:10px 20px 30px;

注意：padding、border的縮寫(xiě)方法和margin是一致的。

顏色值縮寫(xiě)

關(guān)于顏色的css樣式也是可以縮寫(xiě)的，當(dāng)你設(shè)置的顏色是16進(jìn)制的色彩值時(shí)，如果每?jī)晌坏闹迪嗤?#xff0c;可以縮寫(xiě)一半。

例子1：

p{color:#000000;}

可以縮寫(xiě)為：

p{color: #000;}

例子2：

p{color: #336699;}

可以縮寫(xiě)為：

p{color: #369;}

字體縮寫(xiě)

網(wǎng)頁(yè)中的字體css樣式代碼也有他自己的縮寫(xiě)方式，下面是給網(wǎng)頁(yè)設(shè)置字體的代碼：

body{font-style:italic;font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋體",sans-serif; }

這么多行的代碼其實(shí)可以縮寫(xiě)為一句：

body{font:italic small-caps bold 12px/1.5em "宋體",sans-serif; }

注意：

1、使用這一簡(jiǎn)寫(xiě)方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-varient、line-height)如未指定將自動(dòng)使用默認(rèn)值。

2、在縮寫(xiě)時(shí) font-size 與 line-height 中間要加入“/”斜扛。

一般情況下因?yàn)閷?duì)于中文網(wǎng)站，英文還是比較少的，所以下面縮寫(xiě)代碼比較常用：

body{font:12px/1.5em "宋體",sans-serif; }

只是有字號(hào)、行間距、中文字體、英文字體設(shè)置。

顏色值

在網(wǎng)頁(yè)中的顏色設(shè)置是非常重要，有字體顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設(shè)置顏色的方法也有很多種：

1、英文命令顏色

p{color:red;}

2、RGB顏色

這個(gè)與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來(lái)配色。

p{color:rgb(133,45,200);}

每一項(xiàng)的值可以是 0~255 之間的整數(shù)，也可以是 0%~100% 的百分?jǐn)?shù)。如：

p{color:rgb(20%,33%,25%);}

3、十六進(jìn)制顏色

這種顏色設(shè)置方法是現(xiàn)在比較普遍使用的方法，其原理其實(shí)也是 RGB 設(shè)置，但是其每一項(xiàng)的值由 0-255 變成了十六進(jìn)制 00-ff。

p{color:#00ffff;}

配色表：

長(zhǎng)度值

長(zhǎng)度單位總結(jié)一下，目前比較常用到px（像素）、em、% 百分比，要注意其實(shí)這三種單位都是相對(duì)單位。

1、像素

像素為什么是相對(duì)單位呢？因?yàn)橄袼刂傅氖秋@示器上的小點(diǎn)（CSS規(guī)范中假設(shè)“90像素=1英寸”）。實(shí)際情況是瀏覽器會(huì)使用顯示器的實(shí)際像素值有關(guān)，在目前大多數(shù)的設(shè)計(jì)者都傾向于使用像素（px）作為單位。

2、em

就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px ，那么 1em = 14px；如果 font-size 為 18px，那么 1em = 18px。如下代碼：

p{font-size:12px;text-indent:2em;}

上面代碼就是可以實(shí)現(xiàn)段落首行縮進(jìn) 24px（也就是兩個(gè)字體大小的距離）。

下面注意一個(gè)特殊情況：

但當(dāng)給 font-size 設(shè)置單位為?em?時(shí)，此時(shí)計(jì)算的標(biāo)準(zhǔn)以 p 的父元素的 font-size 為基礎(chǔ)。如下代碼：

html:

<p>以這個(gè)<span>例子</span>為例。</p>

css:

p{font-size:14px} span{font-size:0.8em;}

結(jié)果 span 中的字體“例子”字體大小就為 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

設(shè)置行高（行間距）為字體的130%（12 * 1.3 = 15.6px）。

———————————————————————————————————————————————————————————

以上內(nèi)容參考自慕課網(wǎng)：http://www.imooc.com

總結(jié)

以上是生活随笔為你收集整理的css知识笔记（四）——代码简写、颜色值、长度值的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。