CSS 盒子模型

標籤：定義   lower   背景   邊框   top   使用   common   設定   通過   

1.CSS 盒子模型概述

盒子的組成包括： margin(外邊距);border(邊框);padding(內邊距);content(內容)

本文框的最內部分是實際的內容，直接包圍內容的是內邊距。

內邊距呈現了元素的背景。

內邊距的邊緣是邊框。

邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。

 

2.CSS 盒子模型內邊距

內邊據在本文（content）外，邊框（border）內。控制該地區最簡單的屬性是 padding 屬性。padding 屬性定義元素邊框與元素內容之間的空白地區。

CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負值。

h1 {padding: 10px;}

h1 {padding: 10px 0.25em 2ex 20%;}

設定某一邊的那邊據，我們也只可以辦到的,只需通過以下四個屬性：

• padding-top
• padding-right
• padding-bottom
• padding-left

 

3.CSS 盒子模型邊框

元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。 設定 border 屬性可以規定元素邊框的樣式、寬度和顏色。

 border 屬性我們可以設定寬度,樣式,以及顏色

td {border-style: solid; border-width: 15px 5px 15px 5px;}

 border-style: dashed;  border-top-width: 15px;  border-right-width: 5px;  border-bottom-width: 15px;  border-left-width: 5px;

4.CSS 盒子模型外邊距

argin-top

margin-right

margin-bottom

margin-left

p {margin: 0.5em 1em 0.5em 1em;}

h1 {margin: 0.25em 1em 0.5em;}  /* 等價於 0.25em 1em 0.5em 1em */h2 {margin: 0.5em 1em;} /* 等價於 0.5em 1em 0.5em 1em */p {margin: 1px;}        /* 等價於 1px 1px 1px 1px */

<div class="wb">    <div class="bk">        <div class="nj">            <div class="zw">                shiyanlou            </div>        </div>    </div></div>

.wb{    margin: 100px;}.bk{    border-style: groove;}.nj{    padding: 10px;}.zw{    background-color: cornflowerblue;}

並之前與合并之後的差別:

 

 

5.CSS 盒子模型應用

 

 

<div class="top">    <div class="topcenter"><h1>topcenter</h1></div></div>

.top{    background-color: steelblue;    width: 100%;    height: 70px;    text-align: left;}.topcenter{    margin: 0px auto;/*左右自適應,上下為 0*/    width: 75%;    height: 70px;/*與 top 一樣*/    background-color: cadetblue;    text-align: center;}

<div class="middle">    <div class="middle1"><br/><h2>middle1</h2></div>    <br/>    <div class="middle2"><br/><h2>middle2</h2></div></div>

.middle{    width: 75%;    height: 700px;    margin: 8px auto;    background-color: gray;}.middle1{    width: 100%;    height: 30%;    background-color: cadetblue;    margin: 0px;    text-align: center;}.middle2{    width: 100%;    height: 10%;    margin: 10px 0px;    background-color: darkgreen;    text-align: center;}

<div class="bottom"></div>.bottom{    margin: 0px auto;    height: 50px;    background-color: darkslategrey;    width: 75%;}

 

CSS 盒子模型