盒子模型

盒子模型是指：外邊距（margin）+ border（邊框） + 內(nèi)邊距（padding）+ content（內(nèi)容）

可以把每一個容器，比如div，都看做是一個盒子模型

比如你給一個div設(shè)置寬高為500px，但實際你設(shè)置的只是content，之后你又設(shè)置了padding:10px;border:1px solid red;

這時div的寬高就會變?yōu)?44px（content 500px + padding 40px + border 4px）

相當(dāng)于一個元素的實際寬高是由：　padding + border + content 組成

1、沒有設(shè)置box-sizing:border-box屬性，寬高會加上padding和border的值，需要我們手動去計算，減去padding和border的值，并調(diào)整content的值，以免超過給定的寬高

比如下圖，我給父元素parent設(shè)置寬高為500px，背景色為黑色；然后給子元素設(shè)置寬高為478px，并設(shè)置內(nèi)邊距10px,紅色邊框1px，背景顏色為灰色

此時子元素的寬高為500px（content 478px + padding 40px + border 4px）所以就覆蓋了父元素的黑色背景，只能看到子元素的灰色背景

2、加了box-sizing:border-box屬性，padding和border的值就不會在影響元素的寬高，相當(dāng)于把padding和border的值都算在content里

盒子模型會自動根據(jù)padding和border的值來調(diào)整content的值，就不需要手動調(diào)整

標(biāo)準(zhǔn)盒子模型，一般瀏覽器也都默認(rèn)為標(biāo)準(zhǔn)盒子模型。即：box-sizing:content-box

怪異盒子模型，一般根據(jù)實際項目需要自行設(shè)置。即：box-sizing:border-box

CSS中代碼background:url(圖片) no-repeat right center的意思

最近在模仿一個網(wǎng)頁的時候，發(fā)現(xiàn)CSS代碼里有一行代碼：background:url(圖片) no-repeat right center不明白是什么意思，百度以后學(xué)習(xí)到了，在此記載知識點；

這一行代碼其實是背景圖定義形式的簡寫
完整形式是：

background-image:url(圖片);
background-repeat:no-repeat;
background-position:right center

right center是設(shè)置圖片的初始位置，right是在水平方向上貼容器或瀏覽器頁面的右側(cè)，center是在垂直方向上居中，這兩個的順序是先定義水平位置，再定義垂直位置

另外一個例子：

 background:url(../images/top_ico.png) no-repeat right 14px;

意思是背景圖片不重復(fù)，在水平方向靠近容器的右側(cè)，在垂直方向距離容器上方14px;

首先代碼是： ? #ban { margin:auto; width:500px; height:500px;border:2px dotted black;background:url(../image/hover_right.png); } 在不寫repeat與no-repeat的情況下，默認(rèn)的是平鋪。repeat平鋪的效果，就是一張圖，可以鋪滿整個屏幕。效果圖如下

?文章來源地址http://www.zghlxwxcb.cn/news/detail-779305.html

然后我在#ban { margin:auto; width:500px; height:500px;border:2px dotted black; background:url(../image/hover_right.png) ?no-repeat; /*不平鋪*/ }no-repeat是不平鋪，

效果圖如下：

?center這個值，大家基本上很少去用到，往往也會忽略掉這個center的利用價值。其次我再加一個屬性：background:url(../image/hover_right.png)?no-repeat??center;它就會居中與div的中心部分，效果圖如下：

?

到了這里，關(guān)于box-sizing:border-box的理解和作用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！