首页 新闻 会员 周边 捐助

关于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>
yj_smallblack的主页 yj_smallblack | 初学一级 | 园豆:184
提问于:2017-09-07 19:36
< >
分享
最佳答案
0

border 是你的box盒子的外边框,就想当于一个快递的包装盒,

box里面的内容是包装的商品,

如果box高度是0;就相当于包装盒里面没有商品,

border-width等于包装盒的厚度; 

那么那个快递是不是也占有一定的空间。

不知道你听明白了没有。。

收获园豆:20
Snper | 菜鸟二级 |园豆:229 | 2017-09-08 10:00

形容得很好,懂了懂了。之前从英文单词想,一直以为是指边框宽度。

yj_smallblack | 园豆:184 (初学一级) | 2017-09-09 09:54
其他回答(2)
0

border 也是盒子的一部分

by.Genesis | 园豆:2824 (老鸟四级) | 2017-09-08 09:36
0

border是盒子的边框  属于盒子的一部分

女孩,加油 | 园豆:1098 (小虾三级) | 2017-09-08 12:03
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册