跟Joy姐学前端 css-day04

盒模型

早就耳闻盒模型的大名,今日一见,果然如此

content 内容区 width height 决定内容区的大小

padding 内边距 1个值 上右下左 2个值 上下 左右 3个值 上 左右 下 4个值 上 右 下 左

border 边框

margin 外边距 会影响盒子的位置 不会影响盒子可见框的大小 值可以为负值

上面情况指的是 标准盒模型 box-sizing:content-box (默认值) 可见框的大小 = content(width) + padding + border

还有一种情况是 怪异盒模型 box-sizing: border-box(怪异模式) 可见框的大小 = border+padding+content = width

小结:盒子模型的前提是box-sizing,主要跟这几个样式名有关:width、padding、border、margin

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值