盒模型
盒模型基礎(chǔ)屬性
瀏覽器默認樣式
瀏覽器對某些元素設置有默認樣式霍殴，如 h1, ul, li 等鹊奖。
/* user agent stylesheet 即瀏覽器默認樣式 */
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
常見處理方式
- Normalize.css
- CSS Reset
- 簡單去除
* {
margin: 0;
padding: 0;
}
margin
水平居中
對于固定寬度的塊級元素澄峰，設置 margin-left: auto, margin-right: auto即可實現(xiàn)水平居中
<div class="container">
...
</div>
.container {
width: 960px; /* max-width: 960px; */
margin: auto;
}
外邊距合并
在正常流(Normal Flow)下，外邊距會進行合并葬毫。
- 相鄰元素邊距合并
<h1>好好學習</h1>
<h2>天天向上</h2>
h1 { margin: 20px 0; }
h2 { margin: 30px 0; }
- 父子元素合并范例
<header></header>
<main>
<h1>饑人谷</h1>
</main>
<footer></footer>
<style>
header, footer {
height: 30px;
background: blue;
}
main {
background: red;
}
</style>
- 自我合并
浮動元素和絕對定位元素的外邊距不會合并。
外邊距為負
設置 margin-left margin-right 為負數(shù)可以增加塊狀元素寬度活合。
<div class="T"></div>
.T {
width: 30px;
height: 210px;
margin: 50px auto;
background: orange;
}
.T::after {
content: '';
height: 30px;
margin: 0 -70px;
display: block;
background: limegreen;
}
運行結(jié)果 https://codepen.io/twhy/pen/zzrQMR
display
display 用于設置元素渲染框的類型胧谈。
-
none不顯示元素过椎。 -
block顯示為塊狀元素室梅。 -
inline顯示為行內(nèi)元素。 -
inline-block顯示為行內(nèi)塊疚宇，創(chuàng)建一個 BFC亡鼠。 -
table-cell顯示行為與<td>一樣。?? 垂直居中 https://codepen.io/twhy/pen/rwejpZ -
flexflex 布局 -
gridgrid 布局 - ...
問題 block敷待，inline间涵，inline-block 元素的區(qū)別是什么？
<details style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; display: block; font-size: 16px; color: rgb(51, 51, 51); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: 0.2px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255);"><summary style="box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; display: block; font-size: inherit;">參考答案</summary></details>
box-sizing
box-sizing 用于更改用于計算元素寬度和高度的默認的 CSS 盒模型榜揖。
box-sizing: content-box 默認值
.box {
width: 300px;
border: 10px;
}
渲染出來的盒子寬度為 320px
box-sizing: border-box
.box {
width: 300px;
border: 10px;
padding: 10px;
box-sizing: border-box;
}
渲染出來的盒子寬度為 300px
其他相關(guān)屬性
outline
如果你看到被選中的 <a> <input> <button> 周圍有一圈黃或藍色的外框勾哩，就是 outline 了，可以通過設置 outline: 0 或 outline: none 去除举哟。
overflow
overflow 用于控制內(nèi)容溢出包含它的塊狀元素時的顯示方式思劳。
overflow-x 和 overflow-y 分別用于控制水平溢出和垂直溢出。
-
visible默認值顯示溢出的內(nèi)容 -
hidden內(nèi)容被裁剪且不會出現(xiàn)滾動條 -
scroll內(nèi)容被裁剪但出現(xiàn)滾動條 -
auto由瀏覽器決定
inline-block 常見問題 ???
inline-block 之間空隙
?? inline-block 之間有空格妨猩、Tab潜叛、換行符。
?? 給父元素設置 font-size: 0，在 inline-block 元素上重新設置 font-size威兜。
inline-block 導致父元素增高若干像素
?? 給 inline-block 元素設置 vertical-align: top
.item {
vertical-align: top;
display: inline-block;
...
}
通用解決辦法 不要設置 inline-block销斟，使用 float 或 flex。
