生活随笔
收集整理的這篇文章主要介紹了
盒子模型
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
盒子模型
注意：一般瀏覽器的body標(biāo)簽有margin：8px；
padding帶有背景顏色
標(biāo)準(zhǔn)盒模型
標(biāo)準(zhǔn)盒模型（W3C盒子模型），設(shè)置的width或height是對(duì) 實(shí)際內(nèi)容（content）的width或height進(jìn)行設(shè)置，內(nèi)容周圍的border和padding另外設(shè)置，即盒子模型的width（height）=設(shè)置的content的寬高+padding+border+margin
注：除內(nèi)容content外，其他為上下左右都有
怪異盒模型
怪異盒模型（IE盒子模型），設(shè)置的width或height是對(duì) 實(shí)際內(nèi)容（content）+內(nèi)邊距（padding）+邊框（border）之和的width和height進(jìn)行設(shè)置的，其盒模型的width（height）=設(shè)置的width（height）+外邊距margin
box-sizing的應(yīng)用
box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。（個(gè)人認(rèn)為可以理解為指定盒模型的類型，即上述兩種類型）
box-sizing值為content-box時(shí)：寬度和高度分別應(yīng)用到元素的內(nèi)容框，在寬度和高度之外繪制元素的內(nèi)邊距和邊框。（即 標(biāo)準(zhǔn)盒模型）
box-sizing值為border-box時(shí)：為元素設(shè)定的寬度和高度決定了元素的邊框盒，就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制，通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。（即 怪異盒模型）
box-sizing值為inherit時(shí)：規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。
width height
width和height定義的是盒子的大小更是可視內(nèi)容區(qū)的大小，所以padding和margin的定義都會(huì)撐大盒子，而在沒(méi)有被定義width和height的盒子就不會(huì)出現(xiàn)撐大的現(xiàn)象
陰影盒子
box
-shadow： 水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內(nèi)
/外陰影
<!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
>
當(dāng)多個(gè)帶邊線的盒子重疊
會(huì)出現(xiàn)邊線疊加，中間的邊線就會(huì)變成2px，我們需要margin-left：-1px；進(jìn)行修正
如果還要邊線再hover時(shí)改變顏色，但是因?yàn)橹丿B而沒(méi)法顯示所有邊，那么我們可以提高盒子的層級(jí)：z-index：1（默認(rèn)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;">暗裔戰(zhàn)士
</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
>法術(shù)天下
</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;">能量戰(zhàn)士
</p
><button
>遠(yuǎn)征野區(qū)
</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;">魂鎖典獄長(zhǎng)
</p
><p style
="font-size: 16px; color: gray;margin-top: 0;">控制輔助
</p
><button
>制死敵軍
</button
></div
></a
></div
></body
>
</html
>
總結(jié)
以上是生活随笔為你收集整理的盒子模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
