盒模型

盒模型基础属性

浏览器默认样式

浏览器对某些元素设置有默认样式，如 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即可实现水平居中


    
       ...
    
复制代码

.container {  width: 960px; /* max-width: 960px; */  margin: auto;}复制代码

外边距合并

在**正常流(Normal Flow)**下，外边距会进行合并。

相邻元素边距合并

好好学习
天天向上
复制代码

h1 { margin: 20px 0; }h2 { margin: 30px 0; }复制代码

父子元素合并

自我合并

浮动元素和绝对定位元素的外边距不会合并。

外边距为负

设置 margin-left margin-right 为负数可以增加块状元素宽度。


    
复制代码

.T {  width: 30px;  height: 210px;  margin: 50px auto;  background: orange;}.T::after {  content: '';  height: 30px;  margin: 0 -70px;  display: block;  background: limegreen;}复制代码

运行结果

display

用于设置元素渲染框的类型。

none 不显示元素。

block 显示为块状元素。

inline 显示为行内元素。

inline-block 显示为行内块，创建一个 BFC。

table-cell 显示行为与 <td> 一样。? 垂直居中

flex flex 布局

grid grid 布局

问题 block，inline，inline-block 元素的区别是什么？

参考答案

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: 0 或 outline: none 去除。

overflow

用于控制内容溢出包含它的块状元素时的显示方式。和分别用于控制水平溢出和垂直溢出。

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。