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

搜索
博主信息
博文 11
粉絲 0
評論 0
訪問量 17181
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
了解CSS盒模型和margin:auto元素對其方式
Blueprint
原創(chuàng)
1041人瀏覽過

盒模型的構(gòu)成

通過對生活中的盒子和網(wǎng)頁中單個(gè)模塊內(nèi)部結(jié)構(gòu)的分析，可以發(fā)現(xiàn)它們的結(jié)構(gòu)是非常相似的。

由內(nèi)到外分別是：外邊距、邊框、內(nèi)邊距、內(nèi)容區(qū)。

盒模型是用來布局網(wǎng)頁的重要容器。

網(wǎng)頁頁面中的元素都可以看成是一個(gè)盒子，占據(jù)一定的頁面空間

涉及屬性

屬性 含義
margin 外邊距
border 邊框
padding 內(nèi)邊距（內(nèi)填充）
width 寬度
height 高度
box-sizing 自定義盒模型寬和高的規(guī)范
backgroumd-clip 背景的延伸

盒模型的大小計(jì)算

原始樣式：

  1.       <body>
  2.         <div class="box">box
  3.           <div class="box1">box1</div>
  4.         </div>
  5.         <div class="box2">box2</div>
  6.         <div class="box3">box3</div>
  7.       </body>
  9.       <style>
  10.         div.box {
  11.           padding-top: 0;
  12.           width: 400px;
  13.           height: 400px;
  14.           background-color: #00f000;
  15.         }
  17.         .box1 {
  18.           width: 200px;
  19.           height: 200px;
  20.           margin-top: px;
  21.           background-color: lightblue;
  22.         }
  24.         .box2 {
  25.           padding: 100px;
  26.           margin: 100px;
  28.           width: 400px;
  29.           border: 20px solid green;
  30.           height: 400px;
  31.           background-color: lightcoral;
  32.           box-sizing: border-box;
  33.         }
  34.         .box3 {
  35.           padding: 100px;
  36.           margin: 100px;
  38.           width: 400px;
  39.           border: 5px solid green;
  40.           height: 400px;
  41.           background-color: lightcoral;
  42.           background-clip: content-box;
  43.           box-sizing: border-box;
  44.         }
  45.       </style>


修改box1的margin-top值

  1.       <body>
  2.         <div class="box">box
  3.           <div class="box1">box1</div>
  4.         </div>
  5.         <div class="box2">box2</div>
  6.         <div class="box3">box3</div>
  7.       </body>
  9.       <style>
  10.         div.box {
  11.           padding-top: 0;
  12.           width: 400px;
  13.           height: 400px;
  14.           background-color: #00f000;
  15.         }
  17.         .box1 {
  18.           width: 200px;
  19.           height: 200px;
  20.           margin-top: 100px;
  21.           background-color: lightblue;
  22.         }
  24.         .box2 {
  25.           padding: 100px;
  26.           margin: 100px;
  28.           width: 400px;
  29.           border: 20px solid green;
  30.           height: 400px;
  31.           background-color: lightcoral;
  32.           box-sizing: border-box;
  33.         }
  34.         .box3 {
  35.           padding: 100px;
  36.           margin: 100px;
  38.           width: 400px;
  39.           border: 5px solid green;
  40.           height: 400px;
  41.           background-color: lightcoral;
  42.           background-clip: content-box;
  43.           box-sizing: border-box;
  44.         }
  45.       </style>

修改box的padding為box3的padding

  1.  <body>
  2.    <div class="box">
  3.      <div class="box1"></div>
  4.    </div>
  5.    <div class="box2"></div>
  6.    <div class="box3"></div>
  7.  </body>
  8.  <style>
  9.    div.box {
  10.      padding-top: 0;
  11.        padding：100px;
  12.      width: 400px;
  13.      height: 400px;
  14.      background-color: #00f000;
  15.    }
  16.    .box1 {
  17.      width: 200px;
  18.      height: 200px;
  19.      margin-top: px;
  20.      background-color: lightblue;
  21.    }
  22.    .box2 {
  23.      padding: 100px;
  24.      margin: 100px;
  25.      width: 400px;
  26.      border: 20px solid green;
  27.      height: 400px;
  28.      background-color: lightcoral;
  29.      box-sizing: border-box;
  30.    }
  31.    .box3 {
  32.      padding: 100px;
  33.      margin: 100px;
  34.      width: 400px;
  35.      border: 5px solid green;
  36.      height: 400px;
  37.      background-color: lightcoral;
  38.      background-clip: content-box;
  39.      box-sizing: border-box;
  40.    }
  41. </style>

大小計(jì)算方式：

圖片文字有些錯(cuò)誤

  1. box-sizing;content-box;
  2.  width(盒子視口)=border+padding+width（自定義）
  3.  height(盒子視口)=border+padding+height（自定義）
  5. width(盒子)=border+padding+width（自定義）+margin
  6. height(盒子)=border+padding+height（自定義）+margin
  8.  box-sizing: border-box;
  9.  width(盒子視口)=width(自定義)
  10.   height(盒子視口)=height(自定義)
  12.   width(盒子)=width(自定義)+margin
  13.   height(盒子)=height(自定義)+margin
  • 在設(shè)置box-sizing屬性值為content-box時(shí)，盒模型的寬高為padding+border+content+margin，改變padding，盒子的實(shí)際大小會一起變動，對布局不友好。
  • box-sizing屬性值為border-box時(shí)，變動padding時(shí)，盒子本身的大小并不會變動

留意

  • 兩個(gè)盒子嵌套時(shí)，上外邊距會合并，以大的邊距基準(zhǔn)
    • 可以給外盒子加邊框或者上padding-top（影響頁面布局）
    • 外盒子添加overflow：hidden
  • 兩個(gè)垂直盒子的外邊距會重合，以大的邊距為準(zhǔn)
    • 盡量將盒子會重合的邊距添加給一個(gè)盒子

margin:auto實(shí)現(xiàn)元素的居中

margin-left:auto;與margin-right:auto;可以輕易的設(shè)置水平居中。
因?yàn)樵诖怪狈较蛏?，塊級元素不會自動擴(kuò)充，它的外部尺寸沒有自動充滿父元素，也沒有剩余空間可說。所以margin-top:auto;與margin-bottom:auto 無法使其垂直居中。
可以簡寫margin:auto；

解決方法：
添加定位屬性

  1. <style>
  2.  .box {
  3.    width: 400px;
  4.    height: 450px;
  5.    background-color: #ccc;
  6.   /*簡寫margin屬性*/
  7.   margin: auto;
  8.  /*添加定位屬性*/
  9.  position: absolute;
  10.    left: 0;
  11.    right: 0;
  12.    top: 0;
  13.    bottom: 0;
  14.  } 
  15. </style>

總結(jié)：

了解了盒模型的構(gòu)成和屬性
外邊距的特殊用法（使塊級元素居中）

批改老師：WJWJ

批改狀態(tài)：合格

老師批語：整體看上去寫的很不錯(cuò)，繼續(xù)加油！
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)