資訊專(zhuān)欄INFORMATION COLUMN
摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會(huì)因設(shè)備寬度而等比改變。可以利用該特性實(shí)現(xiàn)圖標(biāo)變色的效果與定位不計(jì)算區(qū)域，只限于以?xún)?nèi)的盒子。
張?chǎng)涡竦腃SS深入理解之border學(xué)習(xí)筆記border-width
border-width不支持百分比，原因是邊框本身具有寬度固定的意義，不同設(shè)備的邊框不會(huì)因設(shè)備寬度而等比改變。因此從語(yǔ)義上來(lái)說(shuō)，邊框支持百分比毫無(wú)意義。text-shadow/box-shadow/outline也有相同語(yǔ)義
border-width的默認(rèn)標(biāo)識(shí)為medium，因?yàn)閎order-style為double時(shí)支持的最小寬度為3px
border-stylesolid - 一條實(shí)線
dashed - 在Chrome/Firefox 和 IE 上渲染效果有寬高比區(qū)別，適合單純作為虛線框使用
dotted - 在Chrome/Firefox上實(shí)線部分以方格圖案展示，IE上實(shí)線部分以圓展現(xiàn)?？衫迷撎匦栽贗E8上實(shí)現(xiàn)圓角
double - 由兩條實(shí)線和一條虛線組成，實(shí)線寬度相等，虛線寬度為總寬度-實(shí)線寬度*2?？衫迷撎匦詫?shí)現(xiàn)菜單效果
https://codepen.io/curlywater...
其他3D效果兼容性不佳，謹(jǐn)慎使用
border-color在未設(shè)置border-color時(shí)，color作為邊框色，border-color不會(huì)繼承。text-shadow/box-shadow類(lèi)似。
可以利用該特性實(shí)現(xiàn)圖標(biāo)hover變色的效果
https://codepen.io/curlywater...
border與background定位background-position不計(jì)算border區(qū)域，只限于padding以?xún)?nèi)的盒子?？梢岳眠@一特性實(shí)現(xiàn)背景圖片距離容器右側(cè)定位
border與三角等圖形構(gòu)建利用border相交會(huì)產(chǎn)生邊緣等分的內(nèi)嵌效果，可以實(shí)現(xiàn)三角、梯形等圖形構(gòu)建
https://codepen.io/curlywater...
常見(jiàn)的應(yīng)用
https://codepen.io/curlywater...
border與透明邊框邊框使用box-shadow，原先border變透明來(lái)增加點(diǎn)擊區(qū)域
使用背景透明的圖片+drop-shadow實(shí)現(xiàn)圖標(biāo)顏色修改：相對(duì)定位向左偏移，設(shè)置右邊框，外部容器使用overflow:hidden隱藏原始圖標(biāo)
border實(shí)現(xiàn)等高布局
局限：不支持百分比，只可左邊區(qū)域根據(jù)右邊區(qū)域變化
https://codepen.io/curlywater...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117038.html
摘要：本文是對(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í)，...
摘要：張?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è)厮椒较?..
摘要：張?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為定...
摘要：張?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 值不為 ...
摘要：難怪超過(guò)三分之一的開(kāi)發(fā)人員工作需要一些知識(shí)。但是隨著行業(yè)的飽和，初中級(jí)前端就業(yè)形勢(shì)不容樂(lè)觀。整個(gè)系列的文章大概有篇左右，從我是如何成為一個(gè)前端工程師，到各種前端框架的知識(shí)。 為什么 call 比 apply 快？ 這是一個(gè)非常有意思的問(wèn)題。 作者會(huì)在參數(shù)為3個(gè)（包含3）以?xún)?nèi)時(shí)，優(yōu)先使用 call 方法進(jìn)行事件的處理。而當(dāng)參數(shù)過(guò)多（多余3個(gè)）時(shí)，才考慮使用 apply 方法。 這個(gè)的原因...
閱讀 3950·2021-11-16 11:50
閱讀 947·2021-11-11 16:55
閱讀 3671·2021-10-26 09:51
閱讀 872·2021-09-22 15:03
閱讀 3438·2019-08-30 15:54
閱讀 3272·2019-08-30 15:54
閱讀 2482·2019-08-30 14:04
閱讀 926·2019-08-30 13:53
