CSS布局--盒子模型的初步思考

还是之前的九宫格练习,今天完善它的时候想把九宫格(div里面的div)居中,先是按搜索到的方案使用margin:0 auto,不起作用。思考了一下,其实根本没必要用margin。

用这个例子来理解一下盒子模型。在div里面,不论是文字还是图片还是div,所有元素都被包含于content里面,元素从左往右,从上往下依次排列,没有元素默认状态下就在content里面居中。要在content里居中,要用到position(定位),这个下次再继续研究。这次我们采用padding来解决。

元素居中并不意味着一定要在content里面居中,只要看起来居中即可。譬如,如果元素位于content的左上,那么我们令content往右下移位适当距离,就可以让元素在文档中居中。所以我们给padding-left和padding-top设置合适的值就可以解决居中问题了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,825评论 1 92
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 3,183评论 0 59
  • 以下文章是我在网上收集的内容,为了记录自己的学习以及为了以后不到处找而记录下来,如果对你有用,请感谢写这些文章的前...
    DCbryant阅读 954评论 0 2
  • 你知道吗? 后来的我, 不想那么主动了 因为心里会慌。 那时的自己不知道,原来遇见你,自己也可以变的那么主动。 你...
    简小取阅读 242评论 3 3
  • 如果是这种采光的装修,那真是和大自然浑然天成了 赞爆了! 如果能够装修成这种风格,那样就和生活到大自然一样,那种感...
    装修大师阅读 199评论 0 1