两个吃奶一个添下面视频_人妻第一页香蕉网_欧美xxxx少妇_妺妺窝人体色www婷婷

編程教程

　　 編程問答　 ACM與藍橋杯競賽入門　 C語言教程　 C++教程　 數(shù)據(jù)結(jié)構(gòu)教程　 Python教程　 JAVA教程　 編譯器教程　 C語言函數(shù)庫　 更多教程

CSS盒子模型

73402 閱讀 0 評論

在使用CSS進行網(wǎng)頁布局時，我們一定離不開的一個東西————盒子模型。盒子模型，顧名思義，盒子就是用來裝東西的，它裝的東西就是HTML元素的內(nèi)容。或者說，每一個可見的 HTML 元素都是一個盒子，下面所說的盒子都等同于 HTML 元素。這里盒子與盒子模型中的盒子又有點不同，這里的盒子是二維的。

盒子模型

盒子的組成

盒子模型是網(wǎng)頁設計中經(jīng)常用到的一種思維模型，由四個部分構(gòu)成，從內(nèi)到外分別為內(nèi)容區(qū)（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin），CSS 為這四個部分提供了一系列相關(guān)屬性，通過對這些屬性的設置可以豐富盒子的表現(xiàn)效果。

盒子的大小

盒子的大小指的是盒子的寬度和高度。大多數(shù)初學者容易將寬度和高度誤解為width和height屬性，然而默認情況下width和height屬性只是設置content（內(nèi)容）部分的寬和高。盒子真正的寬和高按下面公式計算：

盒子的寬度 = 內(nèi)容寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距

盒子的高度 = 內(nèi)容高度 + 上填充 + 下填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距

用帶屬性的公式表示：

盒子的寬度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

盒子的組成

1. 內(nèi)容區(qū)（content）

內(nèi)容區(qū)是整個盒子模型的中心，其中存放了盒子的主要內(nèi)容，這些內(nèi)容可以是文本、圖像等資源。內(nèi)容區(qū)有 width、height、overflow 三個屬性，其中 width 和 height 屬性用來指定盒子內(nèi)容區(qū)域的寬度和高度，當內(nèi)容信息過多，超出內(nèi)容區(qū)所設置的范圍時，則可以使用 overflow 屬性設置溢出內(nèi)容的處理方式，overflow 屬性有四個可選值：

（1）hidden：表示隱藏溢出的部分；

（2）visible：表示顯示溢出的部分（溢出的部分將顯示在盒子外部）；

（3）scroll：表示為內(nèi)容區(qū)添加一個滾動條，您可以通過滑動這個滾動條來查看內(nèi)容區(qū)的全部內(nèi)容；

（4）auto：表示由瀏覽器決定如何處理溢出部分。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">盒子模型</div>
    </div>
</body>
</html>

運行結(jié)果：（通過瀏覽器的調(diào)試工具查看的，可以快捷鍵F12來打開，或者在頁面中點擊鼠標右鍵，在彈出的菜單中選擇“檢查”選項即可。）

內(nèi)容區(qū)（content）


2. 內(nèi)邊距（padding）

內(nèi)邊距是內(nèi)容區(qū)和邊框之間的空間，您可以通過 padding-top、padding-right、padding-bottom、padding-left 以及它們的簡寫屬性 padding 來設置內(nèi)容區(qū)各個方向上與邊框之間的距離。在為盒子模型設置背景屬性時，背景屬性可以覆蓋到內(nèi)邊距區(qū)域。

屬性內(nèi)容
padding在一個聲明中設置所有填充屬性
padding-top設置元素的頂部填充
padding-bottom設置元素的底填充
padding-left設置元素的左填充
padding-right設置元素的右填充

舉例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title></title>
        <style>
            .a{
                border: 1px solid #3C3C3C;
                width: 300px;
                height: 160px;
                margin: auto;
	    }
			h2{
                background-color:#0000FF;
                width: 300px;
                height: 50px;
                color: #FFFFFF;
                line-height: 50px;
                font-size: 20px;
                margin-top: 0px;
                margin-bottom: 0px;
			}
			form{
                width: 300px;
                height: 110px;
                background-color: #00FFFF;
			}
    </style>
    </head>
    <body>
                <div class="a">
                <h2>會員登錄</h2>
        <form action="#">
    <div>
                <strong class="name">姓名：</strong>
                <input type="text"/>
        </div>
    <div>
                <strong class="name">郵箱：</strong>
                <input type="text"/>
        </div>
    <div>
                <strong class="name">電話：</strong>
                <input type="text"/>
        </div>
    </form>
    </div>
</body>
</html>

運行結(jié)果：

內(nèi)邊距（padding）


3. 邊框（border）

邊框是環(huán)繞內(nèi)容區(qū)和內(nèi)邊距的邊界，您可以使用 border-style、border-width 和 border-color 以及它們的簡寫屬性 border 來設置邊框的樣式。其中 border-style 屬性為邊框中最主要的屬性，如果沒有設置該屬性的話，其它的邊框?qū)傩砸矔缓雎浴?/p>

舉例：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
        <style>
			.a{
            border: 1px solid #3C3C3C;
            width: 300px;
            height: 180px;
            }
            h2{
            background-color:#0000FF;
            width: 300px;
            height: 50px;
            color: #FFFFFF;
            line-height: 50px;
            font-size: 20px;
            }
            form{
                background-color: #00FFFF;
		width: 300px;
		height: 80px;
		}
		div:nth-of-type(1) input{
		border: 2px solid red;
		}
		div:nth-of-type(2) input{
		border: 3px dotted blue;
        }
		div:nth-of-type(3) input{
		border: 2px dashed green;
        }
		</style>
</head>
<body>
		<div class="a">
		<h2>會員登錄</h2>
		<form action="#">
		<div>
		<strong class="name">姓名：</strong>
		<input type="text"/>
				</div>
				<div>
					<strong class="name">郵箱：</strong>
					<input type="text"/>
				</div>
				<div>
					<strong class="name">電話：</strong>
					<input type="text"/>
				</div>
			</form>
		</div>
</body>
</html>

運行結(jié)果：

邊框（border）

4. 外邊距（margin）



margin在一個聲明中設置所有外邊距屬性
margin-top設置元素的上外邊距
margin-bottom設置元素的下外邊距
margin-left設置元素的左外邊距
margin-right設置元素的右外邊距

舉例：

<!DOCTYPE html>
<html>
<head>
    meta charset="utf-8">
    <title></title>
    <style>
        .a{
        border: 1px solid #3C3C3C;
	width: 300px;
	height: 180px;
	margin: auto;
	}
			h2{
				background-color:#0000FF;
				width: 300px;
				height: 50px;
				color: #FFFFFF;
				line-height: 50px;
				font-size: 20px;
				margin-top: 0px;
				margin-bottom: 0px;
			}
			form{
				border: 1px solid red;
				width: 300px;
				height: 110px;
				background-color: #00FFFF;
				
			}
			</style>
		</head>
		<body>
			<div class="a">
				<h2>會員登錄</h2>
				<form action="#">
					<div>
					 	<strong class="name">姓名：</strong>
						<input type="text"/>
        </div>
    <div>
            <strong class="name">郵箱：</strong>
            <input type="text"/>
        </div>
    <div>
    <strong class="name">電話：</strong>
    <input type="text"/>
    </div>
    </form>
    </div>
</body>
</html>

運行結(jié)果：

外邊距（margin）

舉例：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測試看看效果</title>
</head>
<style>
    #box1 {
        width: 400px;
        height: 400px;
        background-color: white;
        /* 設置上下 左右的內(nèi)邊距 */
        padding: 50px 50px;
        border: 5px dashed rgb(18, 18, 19);
        margin: 0 auto;
        margin-top: 5px;
        /* margin-left: 200px;
        margin-right: 200px;
        margin-bottom: 5px; */
        text-align: center;
    }
    
    #box2 {
        width: 350px;
        height: 350px;
        background-color: white;
        /* 設置上下 左右的內(nèi)邊距 */
        padding: 20px 20px;
        border: 5px solid gray;
        margin: 0 auto;
        margin-top: 10px;
        /* margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px; */
        text-align: center;
    }
    
    #box3 {
        width: 300px;
        height: 300px;
        background-color: rgb(146, 6, 6);
        /* 設置上下 左右的內(nèi)邊距 */
        border: 5px solid rgb(146, 6, 6);
        margin: 0 auto;
        /* padding: 5px 5px; */
        margin-top: 20px;
        /* margin-left: 45px;
        margin-right: 45px;
        margin-bottom: 45px; */
        text-align: center;
    }
    
    #box4 {
        width: 240px;
        height: 240px;
        background-color: rgb(146, 6, 6);
        /* 設置上下 左右的內(nèi)邊距 */
        /* padding: 5px 5px; */
        border: 2px dashed white;
        margin: 0 auto;
        margin-top: 33px;
        /* margin-left: 33px;
        margin-right: 33px;
        margin-bottom: 33px; */
        /* 和padding效果一樣 */
        text-align: center;
    }
    
    #box5 {
        width: 215px;
        height: 215px;
        background-color: rgb(146, 6, 6);
        /* 設置上下 左右的內(nèi)邊距 */
        border: 2px dashed white;
        margin: 0 auto;
        /* padding: 2px 2px; */
        margin-top: 12.5px;
        /* margin-left: 12.5px;
        margin-right: 12.5px;
        margin-bottom: 12.5px; */
        /* 和padding效果一樣 */
        text-align: center;
    }
    
    #box6 {
        width: 100px;
        height: 100px;
        background-color: white;
        /* 設置上下 左右的內(nèi)邊距 */
        border: 5px solid black;
        margin: 0 auto;
        /* padding: 20px 20px; */
        margin-top: 54.5px;
        /* margin-left: 54.5px;
        margin-right: 54.5px;
        margin-bottom: 54.5px; */
        /* 和padding效果一樣 */
        text-align: center;
    }
</style>
<body>
        <div id="box1">
        <div id="box2">
        <div id="box3">
        <div id="box4">
    <div id="box5">
       <div id="box6"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

運行結(jié)果：

測試結(jié)果

點贊(0)

C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍橋杯競賽優(yōu)秀選手錄制的視頻教程，并配有習題和答疑，點擊了解：

一點編程也不會寫的：零基礎C語言學練課程

解決困擾你多年的C語言疑難雜癥特性的C語言進階課程

從零到寫出一個爬蟲的Python編程課程

只會語法寫不出代碼？手把手帶你寫100個編程真題的編程百練課程

信息學奧賽或C++選手的 必學C++課程

藍橋杯ACM、信息學奧賽的必學課程：算法競賽課入門課程

手把手講解近五年真題的藍橋杯輔導課程

Dotcpp在線編譯　 　　　 （登錄可減少運行等待時間）