盒子模型
1 盒子中的區域
#盒子的主要屬性：
width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。 height高度 ，css中Height指的是内容的高度，而不是盒子的高度。 padding 内边距 border 边框 margin 外边距
.box1{
width:100px;
height:100px;
padding:100px;
border:1px solid red;}
计算如下：1+100+100+100+1=302px.box2{
width:250px;
height:250px;
padding:25px;
border:1px solid red;}
计算如下：1+25+250+25+1=302px
上面代码中盒子的真实占有宽度计算公式：
真实占有宽度=左border+左padding+width+右padding+右border如果想保持一個盒子的真實佔有寬度不變，那麼加width就要減padding ，加padding就要減width.
2.認識padding
padding的區域有背景顏色，在css2.1中背景顏色一定和內容區域的相同。
padding是4個方向的，所以我們能夠分別描述4個方向的padding.
第一種：小屬性，也就是複合屬性。
padding-top:30px; 上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左
第二種：綜合屬性。
空格隔開，上右下左。
padding:30px 20px 40px 100px;
可以用小屬性層疊大屬性(不能把小屬性寫在大屬性前面)：
padding:20px;padding-left:30px;
題目一：
p{
width:200px;
height:200px;
padding-left:10px;
padding-right:20px;
padding:40px 50px 60px;
padding-bottom:30px;
border:1px solid #000;
}答案:padding -left:10px；和padding-right:20px；沒用，因為後面的padding大屬性，層疊掉了他們。
有些標籤預設有padding.例如ul.所以說，我們做站的時候，會清除這個預設的padding.
3.border 邊框
邊框三要素：粗細、線型、顏色。
所有的線型：
none 定义无边框。 hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。 常用的有：solid 、dashed、 dotted
border屬性能夠被拆開，有兩大種拆開的方式：
#第一種：依要素
border-width:10px; 边框宽度border-style:solid; 线型border-color:red; 颜色等价于：border:10px solid red;
如果某一個小要素後面是空格隔開的多個值，那麼就是上右下左的順序：
border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;
第二種：按方向
第一種拆法：
border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;等价于：border:10px solid red
第二種拆法：就是把每個方向的，每個要素拆開：
border-top-width:10px;border-top-style:solid;border-top-color:red;border-right-width:10px;border-right-style:solid;border-right-color:red;border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;border-left-width:10px;border-left-style:solid;border-left-color:red;等价于：border:10px solid red;
可以用邊框做三角形。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
p{
width: 0px;
height: 0px;
border: 30px solid white;
border-top-color: pink;
transition:all 1s ease 0s;
}
p:hover{
transform: rotate(180deg);
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>4.標準文件流程
4.1區塊級元素和行內元素
從宏觀上講，web頁面和Ps等設計軟體有本質的趨避：
web頁面的製作，從上往下。而設計軟體，想往哪裡畫東西，都可以畫。
標準流的微觀性質：
（1）空白折疊現象。
（2）高矮不齊，底邊對齊。
（3）自動換行，一行寫不完，換行寫。
區塊級元素和行內元素
（1）標籤分為兩種等級：區塊級元素和行內元素。
（2）區塊級元素：
霸占一行，不能与其他任何元素并列。 能接受宽高。 如果不设置宽度，那么宽度将默认变为父亲的100%。
（3）行內元素：
可以与其他行内元素并排。 不能设置宽高。默认的宽度，就是文字的宽度。
（4）標籤分為：文字層級、容器級。
文本级：p、span、a、b、i、u、em 容器级：p 、h系列 、li 、dt 、dd
基本上所有的文字層級標籤，都是行內元素。除了p,是塊級元素。
所有的容器級標籤，都是區塊級元素。
4.2區塊級元素與行內元素的相互轉換
區塊級元素可以設定為行內元素。行內元素可以設定為區塊級元素。
display用來改變元素的行內、區塊級性質。
display:inline; 这个标签将会变为行内元素。 display:block; 这个标签将会变为块级元素。
css中一共有三種手段，使一個元素脫離標準文檔流。
（1）浮動
（2）絕對定位
（3）固定定位
5.浮動：是CSS裡面佈局用的最多的屬性。
5.1浮動的元素脫標
5.2浮動的元素互相貼靠
如果有足夠的空間，會靠著二哥。如果沒有足夠的空間，會靠著一哥。如果沒有足夠的空間靠著一哥，自己去貼左牆。
float:left/right;
5.3浮動的元素有「字圍」效果
以上是css盒模型簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章！
Wufoo ZapierApr 13, 2025 am 11:02 AMWufoo一直在集成方面非常出色。他們與特定應用程序（例如廣告系列顯示器，MailChimp和Typekit）進行集成，但他們也
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
SublimeText3 Linux新版
SublimeText3 Linux最新版
Dreamweaver Mac版
視覺化網頁開發工具
禪工作室 13.0.1
強大的PHP整合開發環境
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
