日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

CSS--怪异盒子模型

發布時間：2023/12/20 51 豆豆
生活随笔 收集整理的這篇文章主要介紹了 CSS--怪异盒子模型 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS–怪異盒子模型

怪異盒子模型

  • 標準盒子寬度計算方法（擴張主義）
    • border-left-width+width+padding-left+padding-right+border-right-width
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>div {width: 100px;height: 100px;border-left: 8px solid red;border-right: 3px solid red;padding-left: 20px;padding-right: 20px;margin-left:100px;margin-right: 20px;background-color: #368;} </style> </head> <body><div></div> </body> </html> }
  • 怪異盒子模型（壓縮主義）
    • 當內邊距和邊框寬度相加 < 內容 width 的時候，總寬度 就是 width 的值，會壓縮content內容區域
    • 當內邊距和邊框寬度相加 > 內容 width 的時候，總寬度為 內邊距+邊框 內容content區域為0
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>div {box-sizing:border-box;width: 100px;height: 100px;border-left: 8px solid red;border-right: 3px solid red;padding-left: 20px;padding-right: 20px;margin-left:100px;margin-right: 20px;background-color: #368;} </style> </head> <body><div></div> </body> </html>}
  • 兩種盒子模型的區別
    • 用途：正常盒子模型主要用于pc端。怪異盒子模型主要用于手機端
    • 原理：正常盒子模型大小是由內而外的，由內部決定外部大小；而怪異盒子模型是由外而內的。
    • box-sizing:border-box開啟怪異盒子模型；
      常規盒子模型：box-sizing:content-box

怪異盒子模型的應用

  • 當父盒子無邊框時，子盒子增加 margin 會造成外邊距穿透
    • 解決方法：給父盒子設置padding: 10px 0;
  • 實現子元素水平居中方法：
    • 子元素設置margin: 10px atuo;（當子元素多時，該方法耗費計算力，每個子元素都要計算）
    • 父元素設置padding: 0 10px;（該方法需要重新更改父盒子 width 大小）
    • 調用怪異盒子模型，父元素設置padding: 0 10px;，此時不需要更改父盒子 width 大小,但是不能設置內容寬度，此時 width 是總寬度
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="keywords" content="tset"><mata name="descriptions" conten="This is a website for a test"><!-- <meta http-quiv="Page-Enter" content="revealTrans(reveal)"> --><title>test</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.box {box-sizing: border-box;width: 400px;margin: 30px auto;padding: 10px 10px;/* border: 1px solid red; */background-color: #368;}.wrap {width: 380px;height: 40px;margin: 10px 0;line-height: 40px;text-align: center;font-size: 18px;border: 1px solid black;background-color: green;}</style> </head> <body><div class="box"><ul><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li><li class="wrap">我是列表哈哈哈哈哈哈哈哈哈哈</li></ul></div> </body> </html>

  • 正常盒子和怪異盒子的記憶方法
    border=皮 padding=肉 content=骨骼
    • 正常盒子：肉增加，皮有彈性，會撐大，總體增大
    • 怪異盒子：皮緊繃，定死，肉增加，會往里壓縮骨骼
  • 怪異盒子解決的一個問題：

    正常盒子下，當增加內邊距時，如果想保證盒子和之前一樣大，需要手動重新計算 width ，怪異盒子模型則省略該步

  • 為什么會采用怪異盒子模型

    因為父盒子無邊框時子元素增加 margin 會造成外邊距穿透，此時需要給父盒子添加 padding ，添加 padding 會增大父盒子，需要手動重新計算父盒子 width ，因此利用怪異盒子模型省略重新計算 width 這一步。

總結

以上是生活随笔為你收集整理的CSS--怪异盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。