一个网站要怎么做的,在线培训,网站的制作视频,美容网站开发1.一个盒子由content#xff08;文本内容)#xff0c;padding,border,margin组成。 2.盒子的大小指的是盒子的宽度和高度。一般由box-sizing属性来控制。
1#xff09;默认情况下, 也就是box-sizing: content-box时#xff0c;盒子的宽高计算公式如下#xff1a; 盒子宽…1.一个盒子由content文本内容)padding,border,margin组成。 2.盒子的大小指的是盒子的宽度和高度。一般由box-sizing属性来控制。
1默认情况下, 也就是box-sizing: content-box时盒子的宽高计算公式如下 盒子宽 heightpadding-leftpadding-rightborder-leftborder-rightmargin-leftmargin-right 盒子高 heightpadding-toppadding-bottomborder-topborder-bottommargin-topmargin-bottom 2当box-sizing:border-box时盒子的宽高计算公式如下 盒子宽 width 盒子高 height content-width (文本宽度) width-(padding-left)-(padding-right)-(border-left)-(border-right) content-height(文本高度) height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom) style.content1{background-color: yellow;width: 100px;height: 100px;margin: 10px;padding: 20px;border: 10px solid red;box-sizing: content-box;}.content2{background-color: yellow;width: 100px;height: 100px;margin: 10px;padding: 20px;border: 10px solid red;box-sizing: border-box;}.content3{background-color: yellow;width: 100px;height: 100px;margin:10px;}
/style
bodydiv classcontent1content-box/divdiv classcontent2border-box/divdiv classcontent3100px/div
/body3)当box-sizing:inherit: 规定应从父元素继承box-sizing属性的值。
