亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

盒模型常用屬性演示

盒模型分為border-box和content-box.content-box為默認盒模型。實際使用場景我還沒有很多接觸。所以引用CSDN的經(jīng)驗來講述一下。
border-box和content-box最直觀的區(qū)別和解釋【不理解包賠】

我更喜歡用border-box，因為border-box更靈活一點，舉個例子，我在業(yè)務(wù)中遇到一個問題，我的商品詳情頁的一個盒子是高度自適應的，為146px，但是在ie8瀏覽器上顯示為146.8px，如何解決，如果對盒子設(shè)置height:146px;則會出現(xiàn)被撐高的情況，因為box-sizing默認為content-box，你給元素設(shè)置寬高，只是給元素內(nèi)容設(shè)置寬高，你元素的總高度是heigtht + border + padding所以就會出現(xiàn)撐高，解決方法就是給當前的盒子設(shè)置box-sizing: border-box這樣你設(shè)置高度為146px時，會默然將元素內(nèi)容的高度進行相應減少來保證整體高度為146px，這個最大的好處就是你這個盒子有好幾個，而且有不同的padding和border值，解決這個的最好的方法就是給盒子設(shè)置border-box。

下面演示一下盒模型常用屬性。

html代碼：

  <div class="box1">
   <h3>border-box盒模型演示(chrome)</h3>
   border-width:300px*300px=273+10+10+2+5;<br />
   content:273px*281px; <br />
   padding:5px 10px 10px 10px;(上右下左) <br />
   border:2px 2px 2px 5px;(上右下左)
   <br />
   margin:10px 5px 10px 5px;(上右下左)
   <br />
 </div>
 <div class="box2">
   <h3>默認盒模型演示(content-box)(chrome)</h3>
   border-width:300px*300px+30+30+5+5=370px;<br />
   content:300px*300px; <br />
   padding:30px;(上右下左) <br />
   border:5px;(上右下左)
   <br />
   margin:20px;(上右下左)
   <br />
 </div>
 <div class="box3">content-box盒模型演示</div>
 <div class="box4">默認盒模型演示padding無樣式</div>
</body>

css代碼：

 .box1 {
     /* border-box的width,height等于border+padding+ content width/height */
     box-sizing: border-box;
     width: 300px;
     height: 300px;
     /* 內(nèi)邊距padding和外邊距margin都是上右下左定義，在只有3個和兩個數(shù)字的情況下，第二個都是左右相同的數(shù)值 */
     /* padding不能設(shè)置樣式，是透明的，但是會和content一樣的背景,可以通過background-clip裁剪 */
     padding: 5px 10px 10px;
     /* background-clip: content-box; */
     background-clip: border-box;
     /* margin在任何情況下都不計入width和height */
     /* margin在可以為負值，在相鄰元素中會折疊，這需要后續(xù)課程的講解 */
     margin: 10px 5px;
     /* border是border-left，-right,-top，-bottom的復合屬性,這些屬性又是width,style,color的復合屬性 */
     border: 2px solid red;
     border-left: 5px dashed green;
     border-right-style: dotted;
     /* outline不屬于盒模型 */
     outline: 1px;
     background-color: ivory;
   }
   .box2 {
     width: 300px;
     height: 300px;
     background-color: lightblue;
     padding: 30px;
     margin: 20px;
     border: 5px solid red;
   }
   .box3 {
     box-sizing: content-box;
     width: 300px;
     height: 300px;
     background-color: lightgreen;
     padding: 30px;
     margin: 20px;
     border: 5px solid red;
   }
   .box4 {
     font-size: 2em;
     width: 300px;
     height: 300px;
     background-color: lightpink;
     background-clip: content-box;
     padding: 30px;
     margin: 20px;
     border: 5px solid red;
   }

效果(chrome瀏覽器)：
border-box:

content-box:

content-box的padding無樣式

em的意義和案例
em和rem是響應式布局的常用單位，這里先介紹em。
em以當前元素的font-size字號為基準，1em就是當前字號。這樣可以在不同的屏幕大小里面保持相同的布局。

• 案例

  html代碼：

  <h1>em演示</h1>
  <div class="box1">小盒子</div>
  <div class="box2">中盒子</div>
  <div class="box3">大盒子</div>

  css代碼：

  :root {
    font-size: 10px;
  }
  .box1 {
    font-size: 1em;
    box-sizing: border-box;
    width: 20em;
    height: 15em;
    background-color: lightpink;
  }
  .box2 {
    font-size: 2em;
    box-sizing: border-box;
    width: 20em;
    height: 15em;
    background-color: lightseagreen;
  }
  .box3 {
    font-size: 30px;
    box-sizing: border-box;
    width: 20em;
    height: 15em;
    background-color: lightgoldenrodyellow;
  }
  .box1:hover {
    font-size: 2em;
    background-color: lightgreen;
    transition: 2s;
  }

  效果：
  初始：
  
  鼠標懸停后：