生活随笔
收集整理的這篇文章主要介紹了
盒子模型
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
盒子模型
注意：一般瀏覽器的body標簽有margin：8px；
padding帶有背景顏色
標準盒模型
標準盒模型（W3C盒子模型），設置的width或height是對 實際內容（content）的width或height進行設置，內容周圍的border和padding另外設置，即盒子模型的width（height）=設置的content的寬高+padding+border+margin
注：除內容content外，其他為上下左右都有
怪異盒模型
怪異盒模型（IE盒子模型），設置的width或height是對 實際內容（content）+內邊距（padding）+邊框（border）之和的width和height進行設置的，其盒模型的width（height）=設置的width（height）+外邊距margin
box-sizing的應用
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。（個人認為可以理解為指定盒模型的類型，即上述兩種類型）
box-sizing值為content-box時：寬度和高度分別應用到元素的內容框，在寬度和高度之外繪制元素的內邊距和邊框。（即 標準盒模型）
box-sizing值為border-box時：為元素設定的寬度和高度決定了元素的邊框盒，就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制，通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。（即 怪異盒模型）
box-sizing值為inherit時：規定應從父元素繼承 box-sizing 屬性的值。
width height
width和height定義的是盒子的大小更是可視內容區的大小，所以padding和margin的定義都會撐大盒子，而在沒有被定義width和height的盒子就不會出現撐大的現象
陰影盒子
box
-shadow： 水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內
/外陰影
<!DOCTYPE html
>
<html lang
="en">
<head
><meta charset
="UTF-8"><title
>Document
</title
><style type
="text/css">div
{width
: 200px
;height
: 300px
;}div
:hover
{box
-shadow
: 0 15px
30px
rgba(0,0,0,0.1) }</style
>
</head
>
<body
><div
></div
>
</body
>
</html
>
當多個帶邊線的盒子重疊
會出現邊線疊加，中間的邊線就會變成2px，我們需要margin-left：-1px；進行修正
如果還要邊線再hover時改變顏色，但是因為重疊而沒法顯示所有邊，那么我們可以提高盒子的層級：z-index：1（默認0）；或者position：relative
<!DOCTYPE html
>
<html
>
<head
><title
></title
><style type
="text/css">.main
{width
: 1250px
;margin
: 0 auto
;}a
{text
-decoration
: none
;color
: black
;}.main a
{border
:1px solid #eee9e9
;display
: block
;width
: 238px
;height
: 201px
;background
-color
: white
;float
: left
;margin
-left
: -1px
;}.main a
:hover
{box
-shadow
: 0 15px
30px
rgba(0,0,0,0.1);margin
: 2px
;border
:1px solid #f40
;z
-index
: 1;}img
{margin
: 16px
; display
: block
;width
: 108px
;height
: 120px
;}p
{margin
-top
: 16px
;text
-align
: left
;font
-size
: 20px
;}button
{border
-radius
: 20px
;border
:1px solid #ff4040
;background
-color
: white
;font
-size
: 14px
;color
: #ff4040
;}</style
>
</head
>
<body
><div
class="main"><a href
=""><div style
="float: left; font-size: 16px;" class="left"><p style
="padding-left: 16px;">上單
</p
><img src
="images/up.png"></div
><div style
="margin-top: 70px;" class="right"><p style
="font-size: 18px; margin:0;">暗裔劍魔
</p
><p style
="font-size: 16px; color: gray;margin-top: 0;">暗裔戰士
</p
><button
>天神下凡
</button
></div
></a
><a href
=""><div style
="float: left; font-size: 16px;" class="left"><p style
="padding-left: 16px;">中路
</p
><img src
="images/zhong.png"></div
><div style
="margin-top: 70px;" class="right"><p style
="font-size: 18px; margin:0;">流浪法師
</p
><p style
="font-size: 16px; color: gray;margin-top: 0;">符文法王
</p
><button
>法術天下
</button
></div
></a
><a href
=""><div style
="float: left; font-size: 16px;" class="left"><p style
="padding-left: 16px;">打野
</p
><img src
="images/daye.png"></div
><div style
="margin-top: 70px;" class="right"><p style
="font-size: 18px; margin:0;">盲僧
</p
><p style
="font-size: 16px; color: gray;margin-top: 0;">能量戰士
</p
><button
>遠征野區
</button
></div
></a
><a href
=""><div style
="float: left; font-size: 16px;" class="left"><p style
="padding-left: 16px;">下路
</p
><img src
="images/adc.png"></div
><div style
="margin-top: 70px;" class="right"><p style
="font-size: 18px; margin:0;">皮城女警
</p
><p style
="font-size: 16px; color: gray;margin-top: 0;">神眼狙擊
</p
><button
>狙擊天下
</button
></div
></a
><a href
=""><div style
="float: left; font-size: 16px;" class="left"><p style
="padding-left: 16px;">輔助
</p
><img src
="images/fuzhu.png"></div
><div style
="margin-top: 70px;" class="right"><p style
="font-size: 18px; margin:0;">魂鎖典獄長
</p
><p style
="font-size: 16px; color: gray;margin-top: 0;">控制輔助
</p
><button
>制死敵軍
</button
></div
></a
></div
></body
>
</html
>
總結
以上是生活随笔為你收集整理的盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
