目录
目录
盒模型
盒模型基础属性
浏览器默认样式
浏览器对某些元素设置有默认样式，如 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; }
常见处理方式
- 简单去除
* { 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。flexflex 布局gridgrid 布局- ...
问题 block，inline，inline-block 元素的区别是什么？
解答
- block 元素独占一行，宽度沾满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。block 元素可以包含其他 block 元素和 inline 元素，比较特别的是
<p>只能包含 inline 元素。 - inline 元素不换行，宽度由其内容决定。设置 width, height 无效。如 span em strong 等。设置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效，垂直方向的 padding(padding-top, padding-bottom)，margin(margin-top, margin-bottom) 无效。
- inline-block 元素不换行，设置 width, height, padding, margin 属性有效。由于 inline-block 元素会产生新的 BFC，因此可以包含浮动。
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。
