block#

div 默认是一个 ```block“ 属性

block会默认自己占据独立的一行，并会占满父类的整个宽度

可以设置宽高，内外边距会推开其他元素。

以下是默认 display: block 属性的元素

2. inline

行内元素，不会独占一行，

宽高(width&height)设置会忽略，这是因为它的大小是依据内容(content)决定

内外边距(margin)只会在水平推开别的元素

这是为您补充的几个HTML标签及其作用：

以下是默认 display: inline 属性的元素

inline-block#

inline-block 是 CSS 中 display 属性的一个值，它结合了行内元素和块级元素的特性。

inline-block 是 CSS 中 display 属性的一个值，它结合了行内元素和块级元素的特性。

1
.element {
2
  display: inline-block;
3
  width: 150px;      /* 可以设置宽度 */
4
  height: 100px;     /* 可以设置高度 */
5
  margin: 10px;      /* 四周外边距都生效 */
6
  padding: 20px;     /* 四周内边距都生效 */
7
}

flex#

给父元素，定义属性后，父属性就是一个 flex 容器(flex container)，它的子元素则叫(flex item)

如下图 main axis 为主轴，而cross axis为交叉轴，默认主轴从左到右，交叉轴从上到下

容器属性（父元素）

项目属性（子元素）

grid#

CSS 定位#

1
.box {
2
  position: relative;
3
  top: 10px;
4
  left: 20px;
5
}

1
.container {
2
  position: relative;
3
}
4
.child {
5
  position: absolute;
6
  top: 0;
7
  right: 0;
8
}

1
.header {
2
  position: fixed;
3
  top: 0;
4
  left: 0;
5
  width: 100%;
6
}

1
.section-title {
2
  position: sticky;
3
  top: 0;
4
}

em和rem#

em，rem是允许浏览器控制字体大小的单位, px会写死

css重置#

1
html {
2
  box-sizing: border-box;
3
}
4
*,
5
*::before,
6
*::after {
7
  box-sizing: inherit;
8
  margin: 0;
9
}

盒子尺寸控制#

1
box-sizing: content-box;
2
/* content-box为默认值， 它的计算方式为: border+padding+width/height */
3
box-sizing: border-box;
4
/*  border-box则是 width和height定义从边框border开始计算 */
5
/* 其中的 content大小会依据 padding border 自动向内收缩计算 */