CSS--auto与width、height、margin

水平方向
  • 可以设置为auto的属性:width margin-left margin-right,也就是说,padding都不可以设置为auto

  • 假设padding为0的情况下:

  1. 三个确定值 + 零个auto,实际上margin-right是按照auto的规则来计算
  2. 两个确定值 + 一个auto,则三者的值宽度相加要等于父元素的width
  3. 一个确定值 + 两个auto 的情况要讨论:
    • width确定,margin-left\right为auto,则元素居中
    • 某一边距确定,width和另一边距为auto,则另一边距为0,width为最大使充满父元素
  4. 三个都为auto,则两个外边距都为0,width为最大使充满父元素【没有margin和width的显示声明时,就是这种情况】
注:只有margin可以为负,因此计算时可能为负值,是符合规范的行为,但其余padding border width不能为负
垂直方向
  • 可以设置为auto的属性:height margin-top margin-bottom
  1. height默认为auto
  2. margin-top\bottom设置为auto时,表示为0
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,713评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,773评论 0 1
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 8,645评论 0 5
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 6,345评论 1 4
  • 一、 从开公众号开始,我就告诉自己,最重要的是,多写关于当下灵感的文章。 其实,不是为了传递什么,只是为了督促自己...
    宋莹驿站阅读 2,047评论 0 0

友情链接更多精彩内容