您现在正在浏览:首页 > 文章资讯 > 我的日志

CSS 盒模型

作者:admin时间:2017-06-08来源:cms阅读:72
<p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;">Amaze UI 定义的一些基础样式。</p><h2 style="box-sizing: border-box; margin: 2em 0px 1.6rem; font-size: 1.25em; counter-increment: header2 1; counter-reset: header3 0; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;">CSS 盒模型<a href="http://amazeui.org/css/base#css-he-mo-xing" title="Heading anchor" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; color: rgb(204, 204, 204); float: right;"></a></h2><p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;">曾几何时,IE 6 及更低版本的<span style="box-sizing: border-box; font-weight: 700;"><em style="box-sizing: border-box;">非标准</em></span>盒模型被喷得体无完肤。IE 原来的盒模型真的不好么?最终,时间给了另外一个答案。 W3C 终认识到所谓标准盒模型在实际使用中的复杂性,于是在 CSS3 中增加&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">box-sizing</code>&nbsp;这一属性,允许用户自定义盒模型。</p><blockquote style="box-sizing: border-box; margin: 1.6rem 0px; padding-top: 5px; padding-bottom: 5px; padding-left: 15px; border-left: 4px solid rgb(221, 221, 221); font-family: Georgia, &quot;Times New Roman&quot;, Times, Kai, &quot;Kaiti SC&quot;, KaiTi, BiauKai, FontAwesome, serif; color: rgb(51, 51, 51); font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;"><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1.6rem; text-indent: 2em; text-align: left;"><span style="box-sizing: border-box; font-weight: 700;">You tell me I&#39;m wrong, Then you better prove you&#39;re right.</span></p><p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 0px; text-indent: 2em; text-align: left;"><small>King of Pop – Scream</small></p></blockquote><p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;">这就是 W3C 的证明。</p><p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;">扯远了,Amaze UI 将所有元素的盒模型设置为&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">border-box</code>。这下好了,妈妈再也不用担心你没计算好&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">padding</code>、<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">border</code>&nbsp;而使布局破相了。咱来写样式,不是来学算术。</p><p style="text-indent: 2em; text-align: left;"><span style="box-sizing: border-box; display: inline-block; padding: 3px 8px; border-bottom-left-radius: 2px; border-top-right-radius: 2px;">&nbsp;Copy</span></p><pre class="" style="box-sizing: border-box; white-space: pre-wrap; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; margin-top: 1rem; margin-bottom: 1rem; padding: 1rem; line-height: 1.6; word-break: break-all; word-wrap: break-word; color: rgb(85, 85, 85); border: 1px solid rgb(222, 222, 222); border-radius: 0px;">&nbsp;*, &nbsp;*:before, &nbsp;*:after&nbsp;{&nbsp;&nbsp;&nbsp;-moz-box-sizing:&nbsp;border-box;&nbsp;&nbsp;&nbsp;-webkit-box-sizing:&nbsp;border-box;&nbsp;&nbsp;&nbsp;box-sizing:&nbsp;border-box; &nbsp;}</pre><p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;"><br/></p><p style="text-align: center;"><img src="/upload/image/20170608/1496916366289302.png" alt="Box sizing"/></p><p><br/></p><p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;">参考链接:</p><ul style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; padding-left: 2em; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p style="text-indent: 2em; text-align: left;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" target="_blank" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; color: rgb(14, 144, 210);">https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing</a></p></li><li><p style="text-indent: 2em; text-align: left;"><a href="http://www.paulirish.com/2012/box-sizing-border-box-ftw/" target="_blank" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; color: rgb(14, 144, 210);">http://www.paulirish.com/2012/box-sizing-border-box-ftw/</a></p></li><li><p style="text-indent: 2em; text-align: left;"><a href="http://css-tricks.com/box-sizing/" target="_blank" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; color: rgb(14, 144, 210);">Box Sizing</a></p></li></ul><h2 style="box-sizing: border-box; margin: 2em 0px 1.6rem; font-size: 1.25em; counter-increment: header2 1; counter-reset: header3 0; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;">字号及单位<a href="http://amazeui.org/css/base#zi-hao-ji-dan-wei" title="Heading anchor" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; color: rgb(204, 204, 204); float: right;"></a></h2><p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;">Amaze UI 将浏览器的基准字号设置为&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">62.5%</code>,也就是&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">10px</code>,现在&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">1rem = 10px</code>&nbsp;—— 为了计算方便。然后在&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">body</code>&nbsp;上应用了&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">font-size: 1.6rem;</code>,将页面字号设置为&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">16px</code>。</p><p style="text-indent: 2em; text-align: left;"><span style="box-sizing: border-box; display: inline-block; padding: 3px 8px; border-bottom-left-radius: 2px; border-top-right-radius: 2px;">&nbsp;Copy</span></p><pre class="" style="box-sizing: border-box; white-space: pre-wrap; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; margin-top: 1rem; margin-bottom: 1rem; padding: 1rem; line-height: 1.6; word-break: break-all; word-wrap: break-word; color: rgb(85, 85, 85); border: 1px solid rgb(222, 222, 222); border-radius: 0px;">html&nbsp;{&nbsp;&nbsp;font-size:&nbsp;62.5%; }body&nbsp;{&nbsp;&nbsp;font-size:&nbsp;1.6rem;&nbsp;/*&nbsp;=16px&nbsp;*/}</pre><p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;">与&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">em</code>&nbsp;根据上下文变化不同,<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">rem</code>&nbsp;只跟基准设置关联,只要修改基准字号,所有使用&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">rem</code>&nbsp;作为单位的设置都会相应改变。</p><p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;">当然,并非所有所有浏览器的默认字号都是&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">16px</code>,所以在不同的浏览器上会有细微差异。</p><p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;">另外,一些需要根据字号做相应变化的场景也使用了&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">em</code>,需要像素级别精确的场景也使用了&nbsp;<code style="box-sizing: border-box; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, FontAwesome, monospace; font-size: 1.3rem; padding: 2px 4px; color: rgb(199, 37, 78); background-color: rgb(248, 248, 248); white-space: nowrap; border-radius: 0px;">px</code>。</p><p style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); text-indent: 2em; text-align: left;"><span style="box-sizing: border-box; font-weight: 700;">参考资源:</span></p><ul style="box-sizing: border-box; margin-top: 1.6rem; margin-bottom: 1.6rem; padding-left: 2em; color: rgb(51, 51, 51); font-family: &quot;Segoe UI&quot;, &quot;Lucida Grande&quot;, Helvetica, Arial, &quot;Microsoft YaHei&quot;, FreeSans, Arimo, &quot;Droid Sans&quot;, &quot;wenquanyi micro hei&quot;, &quot;Hiragino Sans GB&quot;, &quot;Hiragino Sans GB W3&quot;, FontAwesome, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);" class=" list-paddingleft-2"><li><p style="text-indent: 2em; text-align: left;"><a href="http://snook.ca/archives/html_and_css/font-size-with-rem" target="_blank" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; color: rgb(14, 144, 210);">FONT SIZING WITH REM</a></p></li><li><p style="text-indent: 2em; text-align: left;"><a href="http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/" target="_blank" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; color: rgb(14, 144, 210);">Type study: Sizing the legible letter</a></p></li><li><p style="text-indent: 2em; text-align: left;"><a href="https://offroadcode.com/prototypes/rem-calculator/" target="_blank" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; color: rgb(14, 144, 210);">The rem checker</a></p></li><li><p style="text-indent: 2em; text-align: left;"><a href="http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/" target="_blank" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; color: rgb(14, 144, 210);">Mixins for Rem Font Sizing</a></p></li><li><p style="text-indent: 2em; text-align: left;"><a href="http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/" target="_blank" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; color: rgb(14, 144, 210);"></a>234342345325345</p></li></ul>
  • 站长资讯刊登此文只为传递信息,并不表示赞同或者反对作者观点。
  • 如果此内容给您造成了负面影响或者损失,本站不承担任何责任。
  • 如果内容涉及版权问题,请及时与我们取得联系。
100

相关文章