盒子模型

本文深入解析CSS盒子模型,包括外边距(margin)、内边距(padding)、边框(border)及边框样式(border-style)的运用。通过调整这些属性,可以精确控制网页元素的布局与外观。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述
什么是盒子模型?
个人理解为当需要调整文本位置时,这时候文本和块边框,块与块之间就会形成一个盒子模型,根据盒子模型的位置调整规则来调整文本的位置。

1.外边距
margin:根据后缀的不同可以调整上,右,下,左边框(此顺序为不定义margin后缀时的边框对应顺序)。
块居中对齐:
margin:0px auto;
使用此程式前提为,移动对象为块元素且固定宽度。
2.内边距(padding)
块中文本相对于块边框的距离。

3.边框(border):可以定义后缀属性来调整上下左右边框,并且可以定义颜色(color)
4.边框样式(border-style)
boeder-style:ridio 脊线框
groove 槽线框
none 无线框
hidden 隐藏线框
dotted 圆点线框
dashed 破折线线框
solid 实线线框
double 双线框
inset 使元素有内嵌效果
outset 使元素有凸效果

2020年5月12日

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值