盒子模型

xiaoxiao2025-08-09  22

一、盒子的组成: 1.网页内容:位于最中间,网页的主要显示内容 2.边框(border):位于内边距外面。 3.内边距(paddind):位于内容与边框之间的空隙 4.外边距(margin):边框与外面元素的空隙 二、边框: 1.颜色color:black,red 2.大小:1px 3.类型:实线solid,虚线dashed,点线dotted 4.上边框设置:border-top:1px solid black 5.下边框设置:border-bottom:1px solid black 6.左边框设置:border-left:1px solid black 7.右边框设置:border-right:1px dashed black 三、margin: 外边距: margin-top:上外边距 margin:15px,表示当前元素的四格外边距都是15px margin:15px 20px 10px 15px:表示上边距15px,右边距20px,下边距10px,左边距15px 四、padding: 内边距: padding-bottom:下内边距 padding:10px,表示4个内边距都是10px; padding:15px 20px 10px 10px,表示上内边距15px,右内边距20px,下内边距10px,左内边距10px; 五、border-radius:表示边框的圆角。eg:border-radius:10px 圆形:border-radius:50% 50%; 六、一个盒子的总宽度=左外边距+左边框+左内边距+内容+右内边距+右边框+右外边距 七、盒子的总高度=上外边距+上边框+上内边距+内容的高度+下内边距+下边框+下外边距

转载请注明原文地址: https://www.6miu.com/read-5034552.html

最新回复(0)