css盒子模型

在这里插入图片描述
在这里插入图片描述
盒子模型:
就相当于一个盒子实际是为页面元素加上边框,盒子主要分为三块盒子内空间,盒子的厚度,盒子外的空间,都有分别的设置。
设置背景图像的位置:
1、通常用的是像素px,直接设置图片左上角在元素中的坐标。
2、使用预定义的关键字:指定背景图像在元素中的对齐方式。
水平值:left,center,right
垂直值:top,center,bottom
两个关键字的顺序任意,若只有一个数值则另一个默认center
3、使用百分比:按背景图像和元素的指定点对齐。
盒子的宽与高:
盒子的总宽度=width+左右内边距之和+左右边距宽度之和+左右外边距之和。
盒子的总高度=height+上下内边距之和+上下边距宽度之和+上下外边距之和。
块元素:
通常每个块元素都会独自占据一整行或多整行。
行内元素:
行内元素不是在新的一行开始,同时,也不强迫其他的元素在新的一行显示可以和他前后的其他行内元素在一行中显示
4、块元素垂直外边距合并下面的上边距和上面的下边距不是相加而是取较大者为间距
5、嵌套块元素垂直外边距的合并,在父块没有上内边距的情况下,父元素的上边距与子元素的上边距取较大者。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值