盒模型
盒模型基础属性
浏览器默认样式
浏览器对某些元素设置有默认样式，如 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即可实现水平居中
<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 为负数可以增加块状元素宽度。
<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;
}
运行结果 https://codepen.io/twhy/pen/zzrQMR
display
display 用于设置元素渲染框的类型。
-
none不显示元素。 -
block显示为块状元素。 -
inline显示为行内元素。 -
inline-block显示为行内块，创建一个 BFC。 -
table-cell显示行为与<td>一样。🌰 垂直居中 https://codepen.io/twhy/pen/rwejpZ -
flexflex 布局 -
gridgrid 布局 - ...
问题 block，inline，inline-block 元素的区别是什么？
<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
其他相关属性
outline
如果你看到被选中的 <a> <input> <button> 周围有一圈黄或蓝色的外框，就是 outline 了，可以通过设置 outline: 0 或 outline: none 去除。
overflow
overflow 用于控制内容溢出包含它的块状元素时的显示方式。
overflow-x 和 overflow-y 分别用于控制水平溢出和垂直溢出。
-
visible默认值显示溢出的内容 -
hidden内容被裁剪且不会出现滚动条 -
scroll内容被裁剪但出现滚动条 -
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。
