盒模型盒模型（boxmodel）是CSS中的一个重要概念，是元素大小的表示方式。需要记住的是：“网页设计中的每个元素都是一个矩形框”。如图：一些提示和想法：默认背景颜色/背景图像延伸到边框的边缘。可以使用background-clip属性更改此行为如果内容框变得比示例输出窗口大，它将溢出窗口，并且将出现滚动条以允许您滚动窗口以查看框的其余部分。您可以使用overflow属性控制溢出—另请参阅下面的溢出部分。盒子高度不遵守百分比长度；框高度始终采用框内容的高度，除非设置了特定的绝对高度（例如像素或ems）。这比页面上每个框的高度默认为视口高度的100%更方便。边框忽略百分比宽度设置也是如此。您应该已经注意到，框的总宽度是其宽度、padding-right、padding-left、border-right和border-left属性的总和。在某些情况下它很烦人（例如，如果你想要一个总宽度为50%的框，边框和填充以像素表示怎么办？）为了避免此类问题，可以使用属性box-sizing调整框模型。使用值border-box，它将盒子模型更改为这个新的：应用于的盒子：`box-sizing:border-box`summarybackground-clip盒子的高度不遵循百分比高度，但是内容的高度，除非不能使用固定高度的边框percentageweirdboxmodelbox-sizingCSSbox-sizing属性用于更改用于计算元素宽度和高度的默认CSS盒模型。content-box（默认）布局宽度Width:Width=width+padding-left+padding-right+border-left+border-right布局高度Height:Height=height+padding-top+padding-bottom+border-top+border-bottompadding-boxlayoutwidthWidth:Width=width(包括padding-left+padding-right)+border-top+border-bottom布局高度Height:Height=height(包括padding-top+padding-bottom)+border-top+border-bottomborder-box布局宽度Width:Width=width(包括padding-left+padding-right+border-left+border-right)layoutheightHeight:height=height(包括padding-top+padding-bottom+border-top+border-bottom)box-sizing使用场景submitbtn在form中的box-sizing为box-contentbydefault如果你想添加padding或border而不让子box溢出父divhttp://www.jianshu.com/p/3375...background-clipborder-box背景被裁剪到borderboxpadding-box背景被裁剪到填充框。内容框背景被裁剪到内容框。
