边距

padding-内边距

控制盒子与内容之间的间距

// 复合写法
/* 上下左右各 5px */
padding: 5px；
/* 上下 px 左右 10px */
padding: 5px 10px；
/* 上 5px 左右 7px 下 10px */
padding: 5px 7px 10px；
/* 上 5px 右 10px 下 6px 左 7px */
padding: 5px 10px 6px 7px；

padding不会撑大盒子的情况

• 当没有指定 height 时 top 和 bottom 不会撑高
• 当没有指定 width 时 left 和 right 不会撑宽
• 100% 也会撑大

margin-外边距

控制盒子与盒子之间的间距 参数同 padding 相同

使盒子水平居中的方式

• 设置宽度
• 盒子左右外边距为 auto

margin: 0px auto;

嵌套块元素垂直外边距坍塌

对于嵌套关系的块元素，同时拥有上外边距，此时父元素会塌陷大的外边距值（外边距合并的一种）

解决方法：

• 为父元素定于上边框 或者上内边距
• 为父元素添加 overflow: hidden;

浮动、固定、绝对定位的盒子（脱标的盒子）不会有塌陷问题

浮动

浮动会让元素脱离标准流，会压住下面的盒子，但是不会压住文字和图片（浮动最开始的目的就是文字环绕效果）

定位

绝对定位&固定定位会压住标准流盒子所有内容

静态定位

 	position: static;
# 正常文档流

相对定位

	position: relative;

#不脱标，以自身位置进行偏移
# 一般作为绝对定位的容器块
# 使用margin: auto 还是能实现水平居中

绝对定位

	position: absolute;

# 脱标，以有定位的父元素进行偏移
# 可以跟其他元素重叠
# 一般子绝父相
# 水平居中需要往左偏移50% 再设置左外边距为负宽度的一半

固定定位

    position: fixed;
# 脱标，以浏览器可视区域进行偏移
# 一般用于需要固定在屏幕上某块区域不变的元素

粘性定位

    position: sticky;
# 不脱标，以浏览器可视区域进行偏移
# 相对定位和固定定位的结合
# top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。例如top：0，没到顶部时是相对定位，到了顶部就是固定定位

重叠元素

z-index: 1;
# 指定重叠元素的顺序（默认是auto，按照元素书写顺序来重叠）

元素显示隐藏

display 元素显示模式

display: none;
# 隐藏元素，不占有位置

visibility 元素可见性

visibility: visible;
# visible 可见 	hidden 不可见
# 占有原位置

overflow 溢出处理

当一个元素的内容太大而无法适应块格式化上下文时候该做什么

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

三角形

width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: coral;

使用边框即可实现

vertical-align

用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

例如图片文字对齐 vertical-align: middle;

box-sizing 盒子模型

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。