《逆戰班》前端學習記錄
盒模型屬性
所有html元素都可以看作盒子，在css中，盒模型是用來在設計和布局時使用。
css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：外邊距，邊框，內邊距，和實際內容
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素，如下圖就是乙個盒模型
各部分說明：
margin：外邊距，清除邊框外的區域，外邊距是透明的
border：邊框 ， 圍繞在內邊距和內容外的邊框
padding：內邊距，清除內容周圍的區域，內邊距是透明的
content：內容，指盒子的內容，用於顯示文字和影象
元素的高度與寬度
當指定乙個css元素的寬度和高度時，我們設定的僅是內容區域的寬度和高度。要知道完全大小的元素還必須新增外邊距，邊框和內邊距。
所以元素的總寬度與總高度的計算公式如下：
元素的總寬度=寬度+左外邊距+右外邊距+左邊框+右邊框+左內邊距+右內邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+上外邊距+下外邊距+上邊框+下邊框+上內邊距+下內邊距
當元素是塊狀元素且不設定寬高時的盒模型屬性分析
（1）當元素是塊狀元素且不設定寬高時，例如：div，此時元素的寬=父元素的寬，元素的高=內容的高，如下圖
因為我的顯示器解析度為2k（2544x1080），所以瀏覽器的寬為2544px，div寬度=body寬度=瀏覽器寬度，而元素的高則等於字型的行高
（2）如果給div加乙個20px的padding值，此時元素的內容寬變為2504px，這是因為沒有給div設定寬度，div的預設總寬為父元素的寬度，此時div會自動縮減內容部分的寬度使總寬度保持為父元素的寬度，如果給div設定寬度後元素的寬度將會遵循計算公式：寬度+左外邊距+右外邊距+左邊框+右邊框+左內邊距+右內邊距。
（3）當給div設定浮動後元素會脫離文件流，div的寬度不再繼承父元素的寬度，會自適應內容的寬度，此時元素的長寬=自身content的長寬
（4）給box1取消浮動的同時外套乙個塊狀元素box2後，可以發現box2的寬為2544px、高為21px。
按照之前的規律可知，box2繼承了父元素body的寬2544px，高為內容box1的高度21px。
（5）如果給box1設定浮動，此時我們發現box2的寬度繼續繼承了父元素所以保持不變，但是高度變為0了，這是因為子元素box1設定了浮動後脫離了文件流，box2已經沒有內容將高度撐開導致高度塌陷。
（6）如果給box1取消浮動又給box2設定浮動，可以發現box1和box2的寬高都變成48pxx21px，其中box1是自動適應了內容的最小寬度，而box1是繼承了box2的寬度。
不定寬塊狀元素居中
為什麼選擇方法一加入table標籤?是利用table標籤的長度自適應性 即不定義其長度也不預設父元素body的長度 table其長度根據其內文字長度決定 因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。第一步 為需要設定的居中的元素外面加入乙個 table ...
HTML哪些是塊狀元素，哪些是內聯元素
塊狀元素 內聯元素 address 位址 blockquote 塊引用 center 居中對齊 dir 目錄列表 div 常用塊級容易，也是css layout的主要標籤 dl 定義列表 fieldset form控制組 form 互動表單 h1 大標題 h2 副標題 h3 3級標題 h4 4級標題...
CSS水平居中 不定寬塊狀元素方法
第一種方法 為什麼選擇方法一加入table標籤?是利用table標籤的長度自適應性 即不定義其長度也不預設父元素body的長度 table其長度根據其內文字長度決定 因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中。第一步 為需要設定的居中的元素外面加入乙個 ...