盒子模型
今年过年不收礼,收礼就收五仁月饼!!!
下面咱们就来讲一讲盒子模型。
最近快过端午节了,收到了两盒月饼,但是,一盒里面只有一块,我突然灵感就来了,这不是盒子模型吗!!!???
里面的月饼就是内容,月饼和盒子的上下左右地距离就是内边距,然后两盒月饼的距离就是外边距,不仅如此,盒子的厚度也是可以调节的!
盒子模型包括四个属性:边界、边框、填充、内容
边界-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