一、元素特性

• 元素通常分为三大类：

块元素
行内元素
行内块元素

但是，很多时候我们在布局时会人为的改变元素的特性！CSS通过display属性，可以进行元素特性的转换

与display:none类似，visibility:hidden也能将元素隐藏，区别在于前者直接使元素消失，不再占据文档流中的位置，会影响周围元素的布局，后者只会让元素隐藏，但仍占据位置，不会影响其他元素布局。

二、元素浮动

• 元素可以设置float属性，让一个元素脱离文档流，想起父元素的左侧和右侧移动：

1. 元素一旦设置浮动后，将会脱离文档流，不再占据文档流中的位置，以至于后续的正常元素会自动向上移动填满空隙。
2. 元素浮动后，会向父元素的左侧或右侧移动，直到接触父元素的边框或另一个浮动元素的边框。
3. 浮动元素默认情况下不会从父元素中脱离。
4. 如果浮动元素前面是一个没有浮动的正常块元素，则浮动元素会停止上移。
5. 如果浮动元素后面是一个没有浮动的正常块元素，则块元素会自动上移。

• 在正常CSS布局中，一般不会给父元素设置具体高度，而是由子元素以及内容将其撑开，实现父元素的高度问题。浮动元素无法撑开父元素，从而造成父元素的高度塌陷。
  解决方式：1.给父元素设置具体高度（不建议）
  2.给父元素开启一个BFC模式（BFC：不会影响上下文的局部块）
  3.给父元素开启浮动（开启BFC）
  4.给父元素开启overflow：hidden（也是开启BFC，影响较小，较为推荐）
  5.display：table

三、元素溢出

当父元素尺寸无法容纳子元素的内容时，子元素就会溢出。

可通过CSS的overflow属性设置元素溢出效果

scroll：

hidden：

• 外边距折叠：本质就是在共享一个外边距，只有垂直方向上才会发生外边距折叠，水平方向不会发生。
  
  解决方式：1.给父元素加一个边框（不推荐）
  2.给父元素加一个内边距（不推荐）
  3.给父元素开启BFC

四、元素定位

• 定位是一种更高级的布局手段，通过定位可以将元素摆放到页面的任意位置。
  通过position为元素设置定位

• 相对定位
  1.不设置偏移量，元素是不会发生任何的位置变化
  2.参照元素自身在文档流中的位置进行定位
  3.提升元素的层级关系
  4.不会脱离文档流，元素的特性不会被改变
• 绝对定位
  1.不设置偏移量，元素是不会发生任何的位置变化
  2.相对于最近的开启了定位的包含块来定位
  3.元素会脱离文档流，不再占据页面的实际位置
  4.改变元素的性质，不再区分块元素、行内元素、行内块元素。
  5.提高元素的层级
  6.一般会为子元素设置绝对定位，为它的父元素设置相对定位（子绝父相）
• 固定定位
  1.本质上也是一种绝对定位
  2.相对于浏览器视口来进行定位
  3.不会随着浏览器滚动条的滚动而移动位置
• 粘滞定位
  1.默认与相对定位特点给相同
  2.当元素移动超过某个特定位置时，将其固定，变为固定定位
  3.当元素回到变为固定定位之前的位置时会变回相对定位

五、元素背景