盒模型

内边距padding
padding为内填充:当设置了padding值后,容器的大小会被撑大
padding有四个方向:上 右 下 左(顺时针)
可以单独设置某个方向上的padding值:
padding-top
padding-right
padding-bottom
padding-left
复合样式:padding:top right bottom left
当padding的值为四个值时则分别表示上、右、下、左的值
当padding的值为三个值时表示上,左右的值相同,下
当padding的值为两个值时则表示上下,左右的值,两两相同
当padding的值为一个值时则表示四个方向都为同一个值
外边距margin(与padding相似的语法)
margin有四个方向:上 右 下 左(顺时针)
可以单独设置某个方向上的margin值:
margin-top
margin-right
margin-bottom
margin-left
复合样式:margin:top right bottom left
当margin的值为四个值时则分别表示上、右、下、左的值
当margin的值为三个值时表示上,左右的值相同,下
当margin的值为两个值时则表示上下,左右的值,两两相同
当margin的值为一个值时则表示四个方向都为同一个值
margin的问题:
1.margin-top传递问题(父子级包含的时候,子级的margin-top会传递给父级)
解决:父级加边框
2.div的上下边距重叠(当上面div设置了margin-bottom,下面的div设置了margin-top,理想情况是两div之间的距离为margin-bottom+margin-top,但实际上存在叠压问题)。
解决:用margin给其中一个div设置单独的样式,设置为预想的值(当有两个不同的值时,取最大值)
盒模型
盒子的大小:border+padding+width/height
高度:2border+2padding+margin+width
宽度:2border+2padding+margin+height

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,841评论 1 92
  • 时间:2016年5月17日 在昨天学习了边框和尺寸的情况下,今天我们主要学习的就是盒模型。盒模型是HTML中最重要...
    旭先生阅读 642评论 0 2
  • 请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。 如果您觉得这篇文章还...
    MR_LIXP阅读 3,453评论 4 23
  • 昨晚 12个小时前 失眠 心里有点疙瘩 起床 放歌 画点画 一个人的夜晚 —2016.8.11
    oldwhale阅读 254评论 0 3
  • 繁华的街市,拥挤的人群,一眼看到你。 感觉,你有点迷茫。 我不自量力,企图接近。你只是看了我一眼,却仿佛,看透我的...
    S南枝阅读 160评论 2 2