CSS 教程(2)-屬性4-邊框,輪廓,Margin,Padding等

1.CSS 邊框?qū)傩?/strong>
CSS邊框?qū)傩栽试S你指定一個(gè)元素邊框的樣式和顏色绎谦。

  • 邊框樣式
    邊框樣式屬性指定要顯示什么樣的邊界奠蹬。
    border-style屬性用來(lái)定義邊框的樣式

border-style 值:
none: 默認(rèn)無(wú)邊框
dotted: dotted:定義一個(gè)點(diǎn)線邊框
dashed: 定義一個(gè)虛線邊框
solid: 定義實(shí)線邊框
double: 定義兩個(gè)邊框粪糙。 兩個(gè)邊框的寬度和 border-width 的值相同
groove: 定義3D溝槽邊框于未。效果取決于邊框的顏色值
ridge: 定義3D脊邊框忿墅。效果取決于邊框的顏色值
inset:定義一個(gè)3D的嵌入邊框。效果取決于邊框的顏色值
outset: 定義一個(gè)3D突出邊框咬像。 效果取決于邊框的顏色值

  • 邊框?qū)挾?br> 您可以通過(guò) border-width 屬性為邊框指定寬度算撮。
    為邊框指定寬度有兩種方法:可以指定長(zhǎng)度值生宛,比如 2px 或 0.1em(單位為 px, pt, cm, em 等),或者使用 3 個(gè)關(guān)鍵字之一肮柜,它們分別是 thick 陷舅、medium(默認(rèn)值) 和 thin。

  • 邊框顏色
    border-color屬性用于設(shè)置邊框的顏色素挽∶镒福可以設(shè)置的顏色:
    name - 指定顏色的名稱(chēng)狸驳,如 "red"
    RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
    Hex - 指定16進(jìn)制值, 如 "#ff0000"
    您還可以設(shè)置邊框的顏色為"transparent"预明。
    注意: border-color單獨(dú)使用是不起作用的,必須得先使用border-style來(lái)設(shè)置邊框樣式耙箍。

  • 邊框-單獨(dú)設(shè)置各邊
    在CSS中撰糠,可以指定不同的側(cè)面不同的邊框:

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
    border-bottom-color: red;
}
  • 邊框-簡(jiǎn)寫(xiě)屬性
    上面的例子用了很多屬性來(lái)設(shè)置邊框。
    T你也可以在一個(gè)屬性中設(shè)置邊框辩昆。
    你可以在"border"屬性中設(shè)置:
    border-width
    border-style (required)
    border-color
border:5px solid red;

2.CSS 輪廓(outline)
輪廓(outline)是繪制于元素周?chē)囊粭l線阅酪,位于邊框邊緣的外圍,可起到突出元素的作用汁针。
輪廓(outline)屬性指定元素輪廓的樣式术辐、顏色和寬度。

  • outline 在一個(gè)聲明中設(shè)置所有的輪廓屬性
p 
{
    border:1px solid red;
    outline:green dotted thick;
}
  • outline-color 設(shè)置輪廓的顏色
  • outline-style 設(shè)置輪廓的樣式
  • outline-width 設(shè)置輪廓的寬度
p.one
{
    border:1px solid red;
    outline-style:solid;
    outline-width:thin;
}

3.CSS Margin(外邊距)
CSS Margin(外邊距)屬性定義元素周?chē)目臻g施无。
margin沒(méi)有背景顏色辉词,是完全透明的
margin可以單獨(dú)改變?cè)氐纳希禄猓笕鹛桑疫吘唷R部梢砸淮胃淖兯械膶傩浴?br> Margin可以使用負(fù)值兴想,重疊的內(nèi)容幢哨。

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

4.CSS Padding(填充)
CSS Padding(填充)屬性定義元素邊框與元素內(nèi)容之間的空間。
當(dāng)元素的 Padding(填充)(內(nèi)邊距)被清除時(shí)嫂便,所"釋放"的區(qū)域?qū)?huì)受到元素背景顏色的填充捞镰。
單獨(dú)使用填充屬性可以改變上下左右的填充”刑妫縮寫(xiě)填充屬性也可以使用岸售,一旦改變一切都改變。

p.ex1 {padding:2cm;}
p.padding {padding-bottom:2cm;}

5.所有CSS 尺寸屬性
height 設(shè)置元素的高度蔚龙。
line-height 設(shè)置行高冰评。
max-height 設(shè)置元素的最大高度。
max-width 設(shè)置元素的最大寬度木羹。
min-height 設(shè)置元素的最小高度甲雅。
min-width 設(shè)置元素的最小寬度解孙。
width 設(shè)置元素的寬度。

6.CSS Display(顯示) 與 Visibility(可見(jiàn)性)
display屬性設(shè)置一個(gè)元素應(yīng)如何顯示抛人,visibility屬性指定一個(gè)元素應(yīng)可見(jiàn)還是隱藏弛姜。

  • 隱藏元素 - display:none或visibility:hidden
    隱藏一個(gè)元素可以通過(guò)把display屬性設(shè)置為"none",或把visibility屬性設(shè)置為"hidden"妖枚。但是請(qǐng)注意廷臼,這兩種方法會(huì)產(chǎn)生不同的結(jié)果。
    visibility:hidden可以隱藏某個(gè)元素绝页,但隱藏的元素仍需占用與未隱藏之前一樣的空間荠商。也就是說(shuō),該元素雖然被隱藏了续誉,但仍然會(huì)影響布局莱没。
    display:none可以隱藏某個(gè)元素,且隱藏的元素不會(huì)占用任何空間酷鸦。也就是說(shuō)饰躲,該元素不但被隱藏了,而且該元素原本占用的空間也會(huì)從頁(yè)面布局中消失臼隔。

  • CSS Display - 塊和內(nèi)聯(lián)元素
    塊元素是一個(gè)元素嘹裂,占用了全部寬度,在前后都是換行符摔握。
    塊元素的例子:
    <h1>
    <p>
    <div>
    內(nèi)聯(lián)元素只需要必要的寬度寄狼,不強(qiáng)制換行。
    內(nèi)聯(lián)元素的例子:
    <span>
    <a>
    如何改變一個(gè)元素顯示
    可以更改內(nèi)聯(lián)元素和塊元素盒发,反之亦然例嘱,可以使頁(yè)面看起來(lái)是以一種特定的方式組合,并仍然遵循web標(biāo)準(zhǔn)宁舰。
    下面的示例把列表項(xiàng)顯示為內(nèi)聯(lián)元素:

li {display:inline;}

下面的示例把span元素作為塊元素:

span {display:block;}

注意:變更元素的顯示類(lèi)型看該元素是如何顯示拼卵,它是什么樣的元素。例如:一個(gè)內(nèi)聯(lián)元素設(shè)置為display:block是不允許有它內(nèi)部的嵌套塊元素蛮艰。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末腋腮,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子壤蚜,更是在濱河造成了極大的恐慌即寡,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,525評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件袜刷,死亡現(xiàn)場(chǎng)離奇詭異聪富,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)著蟹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)墩蔓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)梢莽,“玉大人,你說(shuō)我怎么就攤上這事奸披』杳” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,862評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵阵面,是天一觀的道長(zhǎng)轻局。 經(jīng)常有香客問(wèn)我,道長(zhǎng)样刷,這世上最難降的妖魔是什么仑扑? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,728評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮颂斜,結(jié)果婚禮上缭受,老公的妹妹穿的比我還像新娘慰技。我一直安慰自己慢宗,他們只是感情好快毛,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布愈犹。 她就那樣靜靜地躺著聂示,像睡著了一般耿战。 火紅的嫁衣襯著肌膚如雪琉用。 梳的紋絲不亂的頭發(fā)上姨蝴,一...
    開(kāi)封第一講書(shū)人閱讀 51,590評(píng)論 1 305
  • 那天俊啼,我揣著相機(jī)與錄音,去河邊找鬼左医。 笑死授帕,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的浮梢。 我是一名探鬼主播跛十,決...
    沈念sama閱讀 40,330評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼秕硝!你這毒婦竟也來(lái)了芥映?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,244評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤远豺,失蹤者是張志新(化名)和其女友劉穎奈偏,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體躯护,經(jīng)...
    沈念sama閱讀 45,693評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡惊来,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了棺滞。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片裁蚁。...
    茶點(diǎn)故事閱讀 40,001評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡内狸,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出厘擂,到底是詐尸還是另有隱情昆淡,我是刑警寧澤,帶...
    沈念sama閱讀 35,723評(píng)論 5 346
  • 正文 年R本政府宣布刽严,位于F島的核電站昂灵,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏舞萄。R本人自食惡果不足惜眨补,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望倒脓。 院中可真熱鬧撑螺,春花似錦、人聲如沸崎弃。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,919評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)饲做。三九已至线婚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間盆均,已是汗流浹背塞弊。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,042評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留泪姨,地道東北人游沿。 一個(gè)月前我還...
    沈念sama閱讀 48,191評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像肮砾,于是被迫代替她去往敵國(guó)和親诀黍。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案唇敞? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類(lèi)選擇器 屬性選擇器 繼承屬性: color蔗草,font,text-align疆柔,li...
    wzhiq896閱讀 1,754評(píng)論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類(lèi)選擇器 屬性選擇器 繼承屬性: color咒精,font,text-align旷档,li...
    love2013閱讀 2,315評(píng)論 0 11
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒(méi)有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,060評(píng)論 0 1
  • 覽完《萬(wàn)萬(wàn)沒(méi)想到》鞋屈,就想接著看類(lèi)似的書(shū)范咨,想起了《暗時(shí)間》故觅。 不知怎么來(lái)評(píng)價(jià)這書(shū),因?yàn)榭吹谌ɡ麃唽W(xué)解題時(shí)渠啊,蒙...
    付曉閱讀 195評(píng)論 0 0