浅谈块级元素的水平格式化细节

  1. 内边距不能为负值,而外边距可以为负(测试极限)无极限,设置为负的内边距都会默认改为0
  2. 盒子的width值并不会随着增加的padding margin而改变,它并不是可见的值,往往在内容区左右添加边距,会隐式的增加width值。
  3. 水平格式化的七个属性:margin-left、border-left、width、border-right、margin-right,这些属性的值加起来正好是包含块也就是父盒子的width,所谓元素框与父元素的width相同。
  4. width、margin-left、margin-right 可以设置为auto 其他几个不可以。1.三个中有auto,则相对父盒子width尽可能铺满,外边距为0。2.width为auto,一个外边距为auto,另一个固定,则设置为auto的外边距减为0。3.若都设置固定值(称为格式化属性过分受限),则强制使margin-right为auto,作为从左向右读的语言(英语),会把右侧margin-right忽略掉
  5. 由此而来的居中,显示设置width值,外边距自动,盒子在父元素中居中,而text-align:center则只能用于块级元素的内联内容

  6. 外边距可以为负值,这项设定是有意义的,元素7个属性的总和不能比其包容块的width更大,但是都是固定值,且超过了父元素的width,那么会发生什么?
      • 左边margin正常,右侧margin又被和谐了

转载于:https://www.cnblogs.com/zming-hua/p/6596588.html

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值