收藏
批改狀態(tài)：合格
老師批語：寫的很不錯 總結(jié)的也可以 盒子模型還是比較復雜的 沒事的時候要記得復習哦
1. 盒模型是布局的基礎(chǔ),頁面上的一切可見元素皆可看做盒子
2. 盒子默認都是塊級元素: 獨占一行,支持寬度設(shè)置
(根據(jù)盒子模型示意圖分析)
3. 盒子模型分為三個層級:
1. 內(nèi)容級: 寬高和背景三個屬性
(1): width
(2): height
(3): background-color (默認透明)
2. 元素級(可視范圍)
(1): 包括內(nèi)容級(width + height + background)
(2): 內(nèi)邊距: padding
(3): 邊框: border
3. 位置級:margin, 決定當前盒子與其它盒子之間的位置與關(guān)系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style>
.box1{
width:500px;
height:500px;
background-color:aquamarine;
margin: 0px auto;
}
.box2{
padding: 100px;
}
.box3{
width:300px;
height:300px;
background-color:lightblue;
border:2px solid red;
}
</style>
</head>
<body>
<!--
1. 盒模型是布局的基礎(chǔ),頁面上的一切可見元素皆可看做盒子
2. 盒子默認都是塊級元素: 獨占一行,支持寬度設(shè)置
(根據(jù)盒子模型示意圖分析)
3. 盒子模型分為三個層級:
1. 內(nèi)容級: 寬高和背景三個屬性
(1): width
(2): height
(3): background-color (默認透明)
2. 元素級(可視范圍)
(1): 包括內(nèi)容級(width + height + background)
(2): 內(nèi)邊距: padding
(3): 邊框: border
3. 位置級:margin, 決定當前盒子與其它盒子之間的位置與關(guān)系
-->
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
CSS盒子模型總結(jié)：
padding 內(nèi)邊距 上右下左
border 邊框 solid double dashed dotted
margin 外邊距 上右下左
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號