DIV+CSS學習筆記總結篇：盒子模型和塊元素、行元素與溢位
2022-01-26由 網際網路IT先鋒 發表于 畜牧業
盒模型由什麼組成
第十三章 盒子模型
盒子模型：
盒子模型就是一個有高度和寬度的矩形區域
所有html標籤都是盒子模型
div標籤自定義盒子模型
所有的標籤都是盒子模型
class和id的主要差別是：class用於元素組（類似的元素，或者可以理解為某一類元素），而id用於標識單獨的唯一的元素。
盒子模型的組成
盒子模型組成部分：
自身內容： width、height 寬高
內邊距： padding
盒子邊框： border 邊框線
與其他盒子距離： margin 外邊距
內容+內邊距+邊框+外邊距=面積
border 邊框
常見寫法 border：1px solid #f00；
單獨屬性：
border-width：
border-style：
dotted 點狀虛線
dashed（虛線）
solid（實線）
double（雙實線）
border-color （顏色）
padding 內邊距
值：畫素/釐米等長度單位、百分比
padding：10px； 上下左右
padding：10px 10px； 上下 左右
padding：10px 10px 10px； 上 左右 下
padding：10px 10px 10px 10px； 上 右 下 左（設定4個點——>順時針方向）
單獨屬性：
- `padding-top：` - `padding-right：` - `padding-bottom：` -` padding-left：`
當設定內邊距的時候會把盒子撐大，為了保持盒子原來的大小，應該高度和寬度進行減小，根據width和height減小
margin 外邊距
值：與padding相同
單獨屬性：與padding相同
外邊距合併：兩個盒子同時設定了外邊距，會進行一個外邊距合併
第十四章 塊元素、行元素與溢位
基本概念
塊級元素：預設情況下獨佔一行的元素，可控制寬高、上下邊距；
行內元素：預設情況下一行可以擺放多個的元素，不可控制寬高和上下邊距
行塊轉換
display：none； 不顯示
display：block； 變成塊級元素
display：inline； 變成行級元素
display：inline-block； 以塊級元素樣式展示，以行級元素樣式排列
溢位
overflow：hidden； 溢位隱藏
overflow：scroll； 內容會被修剪，瀏覽器會顯示捲軸
overflow：auto； 如果內容被修剪，則產生捲軸
文字不換行：white-space：nowrap；
長單詞換行：word-wrap：break-word；
常見塊元素和行內元素
塊元素（block element）
address - 地址
center - 舉中對齊塊
div - 常用塊級容易
dl - 定義列表
form - 互動表單 （只能用來容納其它塊元素）
h標籤
hr - 水平分隔線
ol - 無需列表
ul-有序列表
p - 段落
pre - 格式化文字
內聯元素：
a - 錨點
b - 粗體（不推薦）
br - 換行
code - 計算機程式碼（在引用原始碼的時候需要）
em - 強調
i - 斜體
img - 圖片（特殊的內聯元素，同時是內聯替換元素，替換元素可以設定寬高）
當圖片和DIV在一起時，圖片周圍會出現margin現象，即元素不重合貼在一起，為了解決這個問題，設定img的css為{margin：0；display：block；border：0px}
input - 輸入框
label - 表格標籤
select - 專案選擇
strong - 粗體強調
textarea - 多行文字輸入框
u - 下劃線
var - 定義變數
替換元素有如下：（和img一樣的設定方法）
、、