Css中的盒模型及盒模型寬度計(jì)算-創(chuàng)新互聯(lián)

CSS假定所有的HTML文檔元素都生成了一個(gè)描述該元素在HTML文檔布局中所占空間的矩形元素(element box），可以形象地將其看作是一個(gè)盒子。CSS圍繞這些盒子產(chǎn)生了一種“盒子模型”概念。

成都一家集口碑和實(shí)力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團(tuán)隊(duì)和靠譜的建站技術(shù)，十載企業(yè)及個(gè)人網(wǎng)站建設(shè)經(jīng)驗(yàn) ,為成都1000多家客戶提供網(wǎng)頁(yè)設(shè)計(jì)制作,網(wǎng)站開(kāi)發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營(yíng)銷型網(wǎng)站建設(shè)，成都品牌網(wǎng)站建設(shè)，同時(shí)也為不同行業(yè)的客戶提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機(jī)械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選創(chuàng)新互聯(lián)建站。

   盒模型，實(shí)際上就是把某些標(biāo)簽元素看成為一個(gè)箱子。箱子與其他箱子之間的距離，是箱子的最外圍，它不是一條邊線而是添加在邊框外面的空間。這個(gè)外邊距使元素盒子之間不必緊湊地連接在一起，是CSS布局的一個(gè)重要手段。用margin(外邊距)屬性來(lái)表示，margin-top，margin-right，margin-bottom，margin-left可以理解成箱子距離外面箱子的四個(gè)方向的距離。箱子自身的邊框厚度，就用border屬性來(lái)表示,一般可以設(shè)置其顏色，寬度，虛線實(shí)線等；箱子里裝的物體，就是content,本身有寬度(weight)，高度(height)；物體和箱子會(huì)有一定的距離，這個(gè)距離就是padding(內(nèi)邊距)，有padding-top,padding-left,padding-right,padding-bottom.這就是我簡(jiǎn)單理解的盒模型。

   在調(diào)試時(shí)，根據(jù)顏色就很好看出這幾部分到底是多少，到底位置在哪？用谷歌下的調(diào)試舉例：橘***的部分就是這個(gè)元素所設(shè)置的margin屬性值；如圖：這個(gè)圖就是：margin：20px auto;的結(jié)果：

***的部分就是這個(gè)元素所設(shè)置的Border屬性值如圖：

荷葉綠的部分就是這個(gè)元素的padding值，上下15px,左右25px如圖：

藍(lán)色代表就是物體本身的寬高。Weight:300px; height:300px;

 

   相應(yīng)的盒模型的寬度就等于margin-left+margin-right+border-left+border-right+padding-left+padding-right+width;高度也是對(duì)應(yīng)的加上內(nèi)外邊距與border。

 在新的css3中提出了box-sizing屬性。在使用box-sizing屬性值時(shí)，可以更好更方便的選擇在指定用width屬性，height屬性來(lái)分別指定寬度值，與高度值時(shí)，是否包含元素的內(nèi)外邊距及邊框的寬度高度。總的來(lái)說(shuō)，使用box-sizing屬性值，是為了用來(lái)控制元素的總寬高度。

這個(gè)屬性包含：

content-box，border-box；

 默認(rèn)為content-box，寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。盒模型的寬度，高度計(jì)算方法與上面一樣，

但是在設(shè)置為border-box時(shí)，元素設(shè)定的寬度和高度決定了元素的邊框盒。這個(gè)盒子的內(nèi)外邊距邊框都不會(huì)增加它的寬度。就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：Css中的盒模型及盒模型寬度計(jì)算-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://muchs.cn/article22/dpogjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、企業(yè)建站、網(wǎng)頁(yè)設(shè)計(jì)公司、微信公眾號(hào)、云服務(wù)器、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)