码迷,mamicode.com
首页 > 其他好文 > 详细

盒模型

时间:2018-06-23 17:08:54      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:情况下   解决   就是   add   AC   左右   切割   lin   尺寸   

盒子的组成

  margin:外边距,与其他盒子的距离

  border:边框(默认值3px)

  padding:内边距与内容之间的可选距离

  背景颜色的渲染区域从border开始

  content:内容的宽和高

padding

  可以设置4个方向的值  top,right,bottom,left

  取两个值:上下,左右

  取三个值:上,左右,下

  负值无效果,0可以不写PX

  ontline:用于布局,不占像素,轮廓,同时设置4边值(测试)

子盒子

  边框盒:border,padding,content

    背景色的渲染区域就是从边框盒开始

    调试时只显示边框盒的尺寸

    background-clip:border-box  指定背景的渲染区域

  填充盒  padding-box  由padding,content组成

    溢出隐藏从下方padding切割

    默认情况下,宽高是对内容盒的设定

    IE盒模型的宽高=内容盒

    box-sizing:设置元素宽高的渲染尺寸  content;默认值  border-box:边框盒

    可用于解决页面横向鬼东条的问题

  

  

   

盒模型

标签:情况下   解决   就是   add   AC   左右   切割   lin   尺寸   

原文地址:https://www.cnblogs.com/m5397/p/9217397.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!