4、盒子模型

padding

  • padding是在width、height的基础上将盒子进行放大。使用box-sizing:border-box,可以禁止padding放大盒子。
  • 所有的inline和block都可以使用padding,但inline无法使用box-sizing控制元素大小。

margin

  • 所有的inline、block都可以使用margin,但margin: 0 auto;居中只适用块级元素。
  • 常见浏览器 body默认margin值
    1.ie8为: 16px 8px;
    2.ie7为: 16px 11px;
    3.其他浏览器为 8px;
  • margin为负数时,负数的部分会和其他盒子重叠,不会产生间距。

盒子居中的方法

  • 如果子盒子的宽高无要求,可设置父盒子的padding、box-sizing、子盒子宽高100%来实现。如下:
    image.png
  • 如果子盒子是固定宽高,可设置父盒子display:flex; align-items:center; 子盒子 margin: 0 auto;来实现。如下:


    image.png
  • margin: 0 auto; 上下0 左右居中。

  • margin: 10px auto 50px; 上10 左右居中 下50。

  • margin: 10px auto 0; 上10 左右居中 下无。

  • inline和inline-box无法使用 margin: 0 auto;

  • margin padding使用百分比时,百分比铆钉的是父级元素的宽度。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容