成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

CSS 深入理解之 border 【筆記】

william / 1261人閱讀

摘要：本文是對(duì)慕課網(wǎng)張?chǎng)涡竦恼n程深入理解之的學(xué)習(xí)筆記，并結(jié)合了一些個(gè)人理解。

本文是對(duì)慕課網(wǎng)張?chǎng)涡竦恼n程《CSS 深入理解之 border》的學(xué)習(xí)筆記，并結(jié)合了一些個(gè)人理解。

border-width 不支持百分比

border-width 不支持百分比單位，原因如下：

在實(shí)際設(shè)計(jì)中，邊框一般是固定大小的，不會(huì)隨著盒子寬度的增加而增加

margin 和 padding 為百分比單位時(shí)，是相對(duì)于 containing block 的寬度而言的

邊框相對(duì)于盒子寬度來(lái)說(shuō)是很小的，如果像 padding、margin 那樣支持百分比單位，那么占的百分比數(shù)值也將會(huì)很小

同樣不支持百分比的還有 outline, box-shadow, text-shadow ...

border-width 支持的關(guān)鍵字有 （數(shù)值對(duì) IE8+ 有效, chrome 等不太一樣，因?yàn)闃?biāo)準(zhǔn)對(duì)具體實(shí)現(xiàn)沒(méi)有規(guī)定）

thin: 1px

medium: 3px 默認(rèn)值

為什么默認(rèn)值是 3px 呢？因?yàn)?b>border-style: double 至少要 3px 才有效果

thick: 5px

border-style

solid

dashed

chrome/firefox 和 IE 的虛線比例不一致

dotted

chrome/firefox 的點(diǎn)是方的，IE 的是圓的

可以用這個(gè)來(lái)實(shí)現(xiàn) IE7、8下的圓角效果（鏈接請(qǐng)用 IE 打開(kāi)）

double

雙線

雙線寬度永遠(yuǎn)相等，中間空白寬度 ±1

可用于實(shí)現(xiàn) menu 三道杠效果，上 border-style 是 double，下 border-style 是 solid。

兼容性好，不需要用偽元素

inset、outset、groove、ridge

不好看，一般不用

兼容性差

border-color 與 color

當(dāng)沒(méi)有指定 border-color 的時(shí)候，會(huì)使用 color 作為邊框色

當(dāng)需要邊框顏色和內(nèi)容顏色一致時(shí)可以簡(jiǎn)化代碼

類(lèi)似的還有 box-shadow, text-shadow ...

border 與 background 定位

background 定位的局限：只能相對(duì)于容器的左上角定位，不能相對(duì)于右側(cè)定位

CSS2 是這樣，CSS3 支持（IE9+）

解決辦法：

多層標(biāo)簽嵌套

使用 border

border-right: 50px solid transparent;
background: 100% 40px;

border 與圖形構(gòu)建

border-style

dotted：IE7、8圓角

double：三道杠圖標(biāo)

solid：三角、梯形

通過(guò)border-color: transparent

下拉按鈕、對(duì)話框、三角疊加形成更復(fù)雜圖形

用梯形拼合形成圓角效果，兼容性好

border 與透明邊框

支持 IE7+，兼容性好

使用

background 右側(cè)定位

三角圖形

增加單選/復(fù)選響應(yīng)區(qū)域大小

用盒陰影實(shí)現(xiàn)邊框，原先的 border 變成透明來(lái)增加點(diǎn)擊區(qū)域

擴(kuò)大渲染區(qū)域，drop-shadow

border 在布局中的應(yīng)用

border 與等高布局

用 border 模擬一欄，將內(nèi)容移至 border 內(nèi)

缺點(diǎn)：不支持百分比寬度

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116432.html

相關(guān)文章

  • 【學(xué)習(xí)筆記】CSS深入理解之border

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會(huì)因設(shè)備寬度而等比改變。可以利用該特性實(shí)現(xiàn)圖標(biāo)變色的效果與定位不計(jì)算區(qū)域，只限于以內(nèi)的盒子。 張?chǎng)涡竦腃SS深入理解之border學(xué)習(xí)筆記 border-width border-width不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會(huì)因設(shè)備寬度而等比改變。因此從語(yǔ)義上來(lái)說(shuō)，...

    he_xd 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之margin

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記與容器的尺寸可視尺寸對(duì)于沒(méi)有設(shè)定的塊元素，可改變?cè)厮椒较虻目梢暢叽缯紦?jù)尺寸對(duì)于元素，可改變?cè)厮酱怪狈较虻恼紦?jù)尺寸與百分比單位普通元素的百分比都是相對(duì)于容器的寬度計(jì)算的絕對(duì)定位元素的百分比是相對(duì)于包含塊的寬 張?chǎng)涡竦腃SS深入理解之margin學(xué)習(xí)筆記 margin與容器的尺寸 可視尺寸：對(duì)于沒(méi)有設(shè)定width的塊元素，margin可改變?cè)厮椒较?..

    stefan 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之padding

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記與容器的尺寸元素值過(guò)大，一定影響元素尺寸為定值，會(huì)影響元素尺寸為或者為，同時(shí)值沒(méi)有暴走，不影響元素尺寸元素水平影響尺寸，垂直不影響尺寸，但是會(huì)影響占據(jù)空間會(huì)顯示背景色負(fù)值與百分比單位不支持負(fù)值百分比相對(duì)于自身寬 張?chǎng)涡竦腃SS深入理解之padding學(xué)習(xí)筆記 padding與容器的尺寸 block元素 padding值過(guò)大，一定影響元素尺寸 width為定...

    learn_shifeng 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之z-index

    摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。遵循后來(lái)居上和誰(shuí)大誰(shuí)上的層疊原則。 張?chǎng)涡竦腃SS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個(gè) z-index 值不為 ...

    Steven 評(píng)論0 收藏0

  • css揭秘筆記——形狀

    摘要：把改成，就變成了這樣實(shí)現(xiàn)邊框內(nèi)圓角多重邊框還有下實(shí)現(xiàn)多重背景為某一層背景單獨(dú)設(shè)置類(lèi)似這樣的屬性等等。裁切路徑方案這種方案，當(dāng)內(nèi)邊距不夠?qū)挄r(shí)，會(huì)裁切掉文本。 自適應(yīng)的橢圓（border-radius的用法） 單獨(dú)指定水平和垂直半徑 長(zhǎng)寬固定的元素，可以通過(guò)指定寬高的一半，變?yōu)闄E圓形，格式為兩個(gè)值用/分開(kāi)。 width: 100px; height: 80px; border-radi...

    dantezhao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<