关于CSS3的应用
0
悬赏园豆：20
[已解决问题]
解决于 2017-09-09 09:54
为什么盒子的高度变成由boder的宽度来决定了？？？？求详解
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 * { 9 padding: 0; 10 margin: 0; 11 } 12 body { 13 background-color: gold; 14 } 15 .box { 16 margin: 100px auto; 17 height: 0; 18 width: 180px; 19 border-top-color: #fff; 20 border-bottom-color: #000; 21 border-style:solid; 22 /*为什么充当了高度的角色*/ 23 border-top-width:90px; 24 border-bottom-width: 90px; 25 border-left: none; 26 border-right: none; 27 border-radius: 90px; 28 position: relative; 29 } 30 31 .box::before,.box::after { 32 content: ""; 33 position: absolute; 34 top: 50%; 35 width: 22px; 36 height: 22px; 37 margin-top: -45px; 38 } 39 .box::before { 40 background-color: #000; 41 border: 34px solid #fff; 42 border-radius: 60px; 43 left: 0; 44 } 45 .box::after { 46 background-color: #fff; 47 border: 34px solid #000; 48 border-radius: 60px; 49 right: 0; 50 } 51 </style> 52 <body> 53 <div class="box"></div> 54 </body> 55 </html>
最佳答案
0
border 是你的box盒子的外边框，就想当于一个快递的包装盒，
box里面的内容是包装的商品，
如果box高度是0;就相当于包装盒里面没有商品，
border-width等于包装盒的厚度；
那么那个快递是不是也占有一定的空间。
不知道你听明白了没有。。
收获园豆：20
形容得很好，懂了懂了。之前从英文单词想，一直以为是指边框宽度。
其他回答(2)
0
border 也是盒子的一部分
0
border是盒子的边框 属于盒子的一部分