关于盒模型的理解
CSS中一個很重要的概念是盒模型，CSS處理網(wǎng)頁時，它認為每個元素都包含在一個不可見的盒子里
由內(nèi)容區(qū)域、內(nèi)容區(qū)域周圍的空間（內(nèi)邊距，padding）、內(nèi)邊距的外邊緣（邊框，border）和邊框外面將元素與相鄰元素隔開的不可見區(qū)域（外邊距，margin）構(gòu)成。具體如下圖 瀏覽器中元素的寬度與其width屬性值并不一致（除非沒有內(nèi)邊距和邊框）。CSS中的寬度指示的是內(nèi)邊距里內(nèi)容區(qū)域的寬度，而在瀏覽器中顯示寬度則是內(nèi)容寬度、左右內(nèi)邊距和左右邊框的總和，顯示高度與之類似。 當(dāng)使用了box-sizing:border-box;則元素的顯示寬度就等于width屬性的值。內(nèi)容寬度、內(nèi)邊距和邊框都包含在里面。如下圖 看起來似乎是CSS設(shè)置的寬度變大了，但其實，更改的并不是CSS，改變的是瀏覽器對于寬度的計算，我們來看一個例子： <!DOCTYPE html> <html> <head><title>Test</title><link rel="stylesheet" type="text/css" href="css/test.css"> </head> <body><div class="box"></div> </body> </html> .box{border: 20px solid rgb(255,189,200);padding: 20px;height: 100px;width: 100px;background: rgb(160,197,232); }效果：
寬度和高度都為180px，即20+20+100+20+20 = 180px，而內(nèi)容區(qū)域一樣是100px，加上box-sizing:border-box之后：
寬度和高度為100px，而內(nèi)容區(qū)域只剩下20px，即100 - 20 - 20 - 20 - 20 = 20px 即當(dāng)加上box-sizing:border-box之后，瀏覽器對于CSS中設(shè)置的width的計算方式變成了：border-left +?padding-left + content?+ padding-right?+ border-right的總寬度，對于height的計算變成了：border-top +?padding-top + content + padding-bottom +?border-bottom的總高度關(guān)于盒模型中border的應(yīng)用：
制作小三角形： 最終效果： 示例： <!DOCTYPE html> <html> <head><title>Test</title><link rel="stylesheet" type="text/css" href="css/test.css"> </head> <body><div class="box"></div> </body> </html> .box{border: 100px solid rgb(255,189,200);/* 使用:after偽類的時候可以不添加solid，使用content的內(nèi)容可保證小三角出現(xiàn) */border-top-color: #333;border-left-color: #7fc;border-bottom-color: #f4c;height: 0px;width: 0px; } 解釋： 盒模型中，margin，border，padding都可以分成上、下、左、右四個部分，都可以進行分別控制，而當(dāng)我們把padding和content的大小都設(shè)為0，而border給定寬度時，將會出現(xiàn)如上圖所示的圖形。我們也可以試試給定padding和content部分空間時的形態(tài)： .box{border: 100px solid rgb(255,189,200);border-top-color: #333;border-left-color: #7fc;border-bottom-color: #f4c;padding: 20px; /* 給予padding部分空間 */height: 20px; /* 給予content部分空間 */width: 20px; }效果：
簡單應(yīng)用：
<!DOCTYPE html> <html> <head><title>Test</title><link rel="stylesheet" type="text/css" href="css/test.css"> </head> <body><div class="box"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul></div> </body> </html> .box{background: #2b2b2b;border-radius: 5px 5px;padding: .5em 0 .9375em .9375em;position: absolute;width: 222px; } .box:after{border: solid transparent;border-top-color: #2b2b2b;border-width: 15px;content: " ";height: 0;left: 50%;margin-left: -15px;position: absolute;top: 99.9%;width: 0; } li{color: white; }效果：
以上只是個人粗淺理解，有啥問題，大家可以提出，一起探討！轉(zhuǎn)載于:https://www.cnblogs.com/TwinklingZ/p/5334363.html
總結(jié)
- 上一篇： [sh]uniq-sort-awk
- 下一篇： 第一章 简单工厂模式