資訊專欄INFORMATION COLUMN
摘要：張鑫旭的深入理解之學(xué)習(xí)筆記不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會因設(shè)備寬度而等比改變。可以利用該特性實現(xiàn)圖標(biāo)變色的效果與定位不計算區(qū)域，只限于以內(nèi)的盒子。
張鑫旭的CSS深入理解之border學(xué)習(xí)筆記border-width
border-width不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會因設(shè)備寬度而等比改變。因此從語義上來說，邊框支持百分比毫無意義。text-shadow/box-shadow/outline也有相同語義
border-width的默認(rèn)標(biāo)識為medium，因為border-style為double時支持的最小寬度為3px
border-stylesolid - 一條實線
dashed - 在Chrome/Firefox 和 IE 上渲染效果有寬高比區(qū)別，適合單純作為虛線框使用
dotted - 在Chrome/Firefox上實線部分以方格圖案展示，IE上實線部分以圓展現(xiàn)?？衫迷撎匦栽贗E8上實現(xiàn)圓角
double - 由兩條實線和一條虛線組成，實線寬度相等，虛線寬度為總寬度-實線寬度*2?？衫迷撎匦詫崿F(xiàn)菜單效果
https://codepen.io/curlywater...
其他3D效果兼容性不佳，謹(jǐn)慎使用
border-color在未設(shè)置border-color時，color作為邊框色，border-color不會繼承。text-shadow/box-shadow類似。
可以利用該特性實現(xiàn)圖標(biāo)hover變色的效果
https://codepen.io/curlywater...
border與background定位background-position不計算border區(qū)域，只限于padding以內(nèi)的盒子?？梢岳眠@一特性實現(xiàn)背景圖片距離容器右側(cè)定位
border與三角等圖形構(gòu)建利用border相交會產(chǎn)生邊緣等分的內(nèi)嵌效果，可以實現(xiàn)三角、梯形等圖形構(gòu)建
https://codepen.io/curlywater...
常見的應(yīng)用
https://codepen.io/curlywater...
border與透明邊框邊框使用box-shadow，原先border變透明來增加點(diǎn)擊區(qū)域
使用背景透明的圖片+drop-shadow實現(xiàn)圖標(biāo)顏色修改：相對定位向左偏移，設(shè)置右邊框，外部容器使用overflow:hidden隱藏原始圖標(biāo)
border實現(xiàn)等高布局
局限：不支持百分比，只可左邊區(qū)域根據(jù)右邊區(qū)域變化
https://codepen.io/curlywater...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/117038.html
摘要：本文是對慕課網(wǎng)張鑫旭的課程深入理解之的學(xué)習(xí)筆記，并結(jié)合了一些個人理解。 本文是對慕課網(wǎng)張鑫旭的課程《CSS 深入理解之 border》的學(xué)習(xí)筆記，并結(jié)合了一些個人理解。 border-width 不支持百分比 border-width 不支持百分比單位，原因如下： 在實際設(shè)計中，邊框一般是固定大小的，不會隨著盒子寬度的增加而增加 margin 和 padding 為百分比單位時，...
摘要：張鑫旭的深入理解之學(xué)習(xí)筆記與容器的尺寸可視尺寸對于沒有設(shè)定的塊元素，可改變元素水平方向的可視尺寸占據(jù)尺寸對于元素，可改變元素水平垂直方向的占據(jù)尺寸與百分比單位普通元素的百分比都是相對于容器的寬度計算的絕對定位元素的百分比是相對于包含塊的寬 張鑫旭的CSS深入理解之margin學(xué)習(xí)筆記 margin與容器的尺寸 可視尺寸：對于沒有設(shè)定width的塊元素，margin可改變元素水平方向...
摘要：張鑫旭的深入理解之學(xué)習(xí)筆記與容器的尺寸元素值過大，一定影響元素尺寸為定值，會影響元素尺寸為或者為，同時值沒有暴走，不影響元素尺寸元素水平影響尺寸，垂直不影響尺寸，但是會影響占據(jù)空間會顯示背景色負(fù)值與百分比單位不支持負(fù)值百分比相對于自身寬 張鑫旭的CSS深入理解之padding學(xué)習(xí)筆記 padding與容器的尺寸 block元素 padding值過大，一定影響元素尺寸 width為定...
摘要：張鑫旭的深入理解之學(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個層級，離父級層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。 張鑫旭的CSS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個層級，離父級層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個 z-index 值不為 ...
摘要：難怪超過三分之一的開發(fā)人員工作需要一些知識。但是隨著行業(yè)的飽和，初中級前端就業(yè)形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。 為什么 call 比 apply 快？ 這是一個非常有意思的問題。 作者會在參數(shù)為3個（包含3）以內(nèi)時，優(yōu)先使用 call 方法進(jìn)行事件的處理。而當(dāng)參數(shù)過多（多余3個）時，才考慮使用 apply 方法。 這個的原因...
閱讀 4105·2021-11-16 11:50
閱讀 1086·2021-11-11 16:55
閱讀 3767·2021-10-26 09:51
閱讀 950·2021-09-22 15:03
閱讀 3619·2019-08-30 15:54
閱讀 3387·2019-08-30 15:54
閱讀 2570·2019-08-30 14:04
閱讀 1000·2019-08-30 13:53
