国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 深入理解之 border 【筆記】

william / 1198人閱讀

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

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

border-width 不支持百分比

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

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

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

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

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

border-width 支持的關(guān)鍵字有 （數(shù)值對 IE8+ 有效, chrome 等不太一樣，因?yàn)闃?biāo)準(zhǔn)對具體實(shí)現(xiàn)沒有規(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è)來實(shí)現(xiàn) IE7、8下的圓角效果（鏈接請用 IE 打開）

double

雙線

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

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

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

inset、outset、groove、ridge

不好看，一般不用

兼容性差

border-color 與 color

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

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

類似的還有 box-shadow, text-shadow ...

border 與 background 定位

background 定位的局限：只能相對于容器的左上角定位，不能相對于右側(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：三角、梯形

通過border-color: transparent

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

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

border 與透明邊框

支持 IE7+，兼容性好

使用

background 右側(cè)定位

三角圖形

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

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

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

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

border 與等高布局

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

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

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

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

相關(guān)文章

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

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

    he_xd 評論0 收藏0

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

    摘要：張鑫旭的深入理解之學(xué)習(xí)筆記與容器的尺寸可視尺寸對于沒有設(shè)定的塊元素，可改變元素水平方向的可視尺寸占據(jù)尺寸對于元素，可改變元素水平垂直方向的占據(jù)尺寸與百分比單位普通元素的百分比都是相對于容器的寬度計(jì)算的絕對定位元素的百分比是相對于包含塊的寬 張鑫旭的CSS深入理解之margin學(xué)習(xí)筆記 margin與容器的尺寸 可視尺寸：對于沒有設(shè)定width的塊元素，margin可改變元素水平方向...

    stefan 評論0 收藏0

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

    摘要：張鑫旭的深入理解之學(xué)習(xí)筆記與容器的尺寸元素值過大，一定影響元素尺寸為定值，會影響元素尺寸為或者為，同時(shí)值沒有暴走，不影響元素尺寸元素水平影響尺寸，垂直不影響尺寸，但是會影響占據(jù)空間會顯示背景色負(fù)值與百分比單位不支持負(fù)值百分比相對于自身寬 張鑫旭的CSS深入理解之padding學(xué)習(xí)筆記 padding與容器的尺寸 block元素 padding值過大，一定影響元素尺寸 width為定...

    learn_shifeng 評論0 收藏0

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

    摘要：張鑫旭的深入理解之學(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個(gè)層級，離父級層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。 張鑫旭的CSS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個(gè)層級，離父級層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個(gè) z-index 值不為 ...

    Steven 評論0 收藏0

  • css揭秘筆記——形狀

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

    dantezhao 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<