盒子模型


盒子模型


今年过年不收礼,收礼就收五仁月饼!!!

 

下面咱们就来讲一讲盒子模型。

 

最近快过端午节了,收到了两盒月饼,但是,一盒里面只有一块,我突然灵感就来了,这不是盒子模型吗!!!???

 

里面的月饼就是内容,月饼和盒子的上下左右地距离就是内边距,然后两盒月饼的距离就是外边距,不仅如此,盒子的厚度也是可以调节的!

 

盒子模型包括四个属性:边界、边框、填充、内容

边界-Margin: 盒子之间有一定的距离防撞

边框-Border:月饼盒

填充-Padding:月饼和月饼盒中间的空气

内容-Content:五仁月饼


Border:

1、border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:#888;//前面的井号不要忘掉。
3、border-width(边框宽度)中的宽度也可以设置为:
thin | medium | thick(但不是很常用),最常还是用象素(px)。


Margin和Padding都可以分别设置上下左右的边距,top,bottom,left,right

盒子模型


举个例子

盒子模型


相关文章:

猜你喜欢
  • 2022-12-23
  • 2021-11-05
相关资源
相似解决方案