Rumah > Artikel > hujung hadapan web > css3中关于box-sizing的图文代码详解

css3中关于box-sizing的图文代码详解

黄舟asal: 2017-08-04 13:38:111951semak imbas

1.通读了下w3cschool上的简介：CSS3 box-sizing 属性_w3cschool。

2.看简介理解的不够深刻，偶属于刚看完转眼就能忘记的人。出于对自己的不放心，还是老老实实把例子拿到线下看看：

<!DOCTYPE html><html><head>
   <meta charset="utf-8">
   <title></title>
   <style>
      .container      {
         width:30em;
         border:1em solid;
      }
      .box      {
         box-sizing:border-box;
         -moz-box-sizing:border-box; /* Firefox */
         width:50%;
         border:1em solid red;
         float:left;
      }
   </style></head><body><p class="container">
   <p class="box">这个 p 占据了左边的一半。.</p>
   <p class="box" style="border:1em solid #888;">这个 p 占据了右边的一半。</p></p></body></html>

用火狐浏览器的firebug看看布局，更改box-sizing的属性为content-box（或者说去掉box-sizing，默认box-sizing:content-box）后，如下图所示。

对比后发现：

当类名为.container的父元素的box-sizing没有设置，即为默认值content-box时或者box-sizing:border-box时，分以下两种情况：

（最外层的父元素）

1）当两个子元素的box-sizing:border-box时，width为208px，算上设置的border-left-width与border-right-width（都是16px）才是240px，即为父元素width的一半，如下图所示（左边为布局图，右边为页面实际效果）：（即为父元素width+border-left-width+border-right-width的一半）

2）当两个子元素的box-sizing:content-box时，width为240px，padding与margin均被排除在外，如下图所示（左边为布局图，右边为页面实际效果）：

3.当给一个元素设置box-sizing:border-box时，实际就是令其 width = padding-left + padding-right + border-left-width + border-right-width，但是不包含margin-left与margin-right。

好了，总算明白些了。

Atas ialah kandungan terperinci css3中关于box-sizing的图文代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：关于css取消a标签在移动端上点击时背景颜色的实例分析Artikel seterusnya：CSS3的特性查询（ @supports） css网页制作

Artikel berkaitan

Lihat lagi