【CSS布局.1】盒子模型

來源:互聯網
上載者:User

 

例子:

.box {
width: 200px;
border: 10px solid #99c;
padding: 15px;
margin: 20px;
}

<p class="box"> 內容</p>

正如你能看到的,一個盒子由四個獨立部分組成,最外面的是邊界(margin)總是透明的第二部分是邊框(border),邊框可以有不同的樣式。第三部分是補丁(padding),補丁用來定義內容地區與邊框(border)之間的空白。第四部分是內容地區。

背景(Background)就是在邊框以內的地區,包括補丁(padding)和內容地區。

當你使用CSS定義你的盒子的width和height時,你定義的並不是內容地區、補丁、邊框和邊界所佔的總地區。實際上你定義的是內容地區的width和height

為了計算盒子所佔的地區必須加上padding、border和margin。所以,

盒子的總長度為;

左margin +左 border + 左padding+ width +右padding +右 border + 右margin

即上面盒子的總長度為:20px+10px+15px+200px+15px+10px+20px=390px.這意味著上面盒子佔390px的水平空間。

盒子的總高度為:

上margin +上border + 上padding+ height +下padding + 下border + 下margin

即上面盒子的總高度為:20px+10px+15px+200px+15px+10px+20px=390px.這意味著上面盒子佔390px的垂直空間。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.