1.CSS样式 - display - 用来设置元素的显示类型 - 可选值： none 元素不会在页面显示，并且不会占据页面的位置 block 元素作为块元素显示 inline 元素作为内联元素显示 inline-block 元素作为行内块元素显示 - visibility - 用来设置元素的显示状态 - 可选值： visible 默认值，元素在页面中可见 hidden 元素在页面中隐藏，但是会占据页面的位置 - overflow - 设置元素如何处理溢出的内容 - 可选值： visible 默认值，溢出的内容会在父元素以外的位置显示 hidden 溢出的内容会被裁剪不会显示 scroll 会为父元素添加水平和垂直双方向的滚动条以完整的查看内容 auto 会根据需要自动添加滚动条 2.文档流 - 文档流指的是网页中的一个位置，文档流可以说是网页的基础， 我们所创建的元素默认情况下都在文档流中。 - 元素在文档流中的特点： 块元素 1.块元素在文档流中自上向下垂直排列 2.块元素在文档流中默认宽度是父元素的100%，默认高度被内容（子元素）撑开 内联元素 1.内联元素在文档流中自左向右水平排列， 如果一行不足以容纳所有的元素，则另起一行继续自左向右水平排列 2.内联元素在文档流中高度和宽度都被内容撑开 3.浮动 - 使用float来设置元素的浮动 - 可选值： none 默认值，元素不浮动，在文档流中 left 元素向左浮动 right 元素向右浮动 - 浮动的特点： 1.当元素设置浮动以后，元素会向页面的左上或右上浮动 2.当浮动元素遇到父元素的边框后，会停止移动。 3.当浮动元素遇到其他浮动元素时，也会停止移动。 4.如果浮动元素上是一个没有浮动的块元素，浮动元素不会超过他 5.浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐 6.浮动元素不会覆盖文字，文字会环绕在浮动元素的周围 7.浮动元素会完全脱离文档流 - 元素脱离文档流以后的特点： 内联元素 - 内联元素脱离文档流以后会变成块元素 块元素 - 脱离文档流以后，块元素就不会独占一行了 - 脱离文档流以后，块元素的宽和高都被内容撑开 - 高度塌陷 - 默认情况下父元素的高度被子元素撑开， 如果这时子元素开启了浮动，则会脱离文档流，导致无法撑起父元素的高度， 造成父元素的高度塌陷，将页面的布局打乱。 - 解决方式： - 可以通过开启父元素BFC来处理高度塌陷问题。 - BFC - Block Formatting Context 块级格式化环境 - 默认情况下BFC是关闭的，当开启元素的BFC以后，元素会具有如下的特性： 1.元素不会被浮动元素所覆盖 2.子元素的垂直外边距不会传递给父元素 3.元素可以包含浮动的子元素 - 开启BFC的方式： 1.设置元素的浮动 2.设置元素的display为inline-block 3.设置元素的绝对定位 4.设置元素的overflow为hidden ***** 4.定位 - 定位是一种更高级的布局方式，比浮动更加的灵活，通过定位可以将元素摆放到页面中的任意位置 - 定位一共分成三种：相对定位 绝对定位 固定定位 - 通过position属性来设置元素的定位： 可选值：static 默认值 元素没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 - 相对定位： - 当元素的position属性设置为relative时，则开启了元素的相对定位 - 相对定位的特点： 1.当给元素开启相对定位而不设置偏移量时，元素的位置不会发生任何变化 2.相对定位的元素是相对于元素自身在文档流中的位置进行定位的 3.相对定位的元素不会脱离文档流 4.相对定位不会改变元素的性质，块还是块 内联还是内联 5.相对定位会提升元素的层级 - 偏移量（offset） - 当元素开启了定位以后，可以通过四个偏移量来设置元素的位置 top 元素距离定位元素的上边的偏移量 bottom 元素距离定位元素底部的偏移量 left 元素距离定位元素左侧的偏移量 right 元素距离定位元素的右侧的偏移量 - 一般偏移量只需要使用两个，一个水平方向一个垂直方向就可以为一个元素定位 top left top right bottom left bottom right - 层级（z-index） - 当元素开启了定位以后，会提升层级，我们也可以通过z-index来为定位元素来设置层级 - z-index需要一个正整数作为参数，值越大层级越高，层级越高越优先显示，层级一样显示靠后的 - 父元素永远都不会盖住子元素
来源：https://www.cnblogs.com/liuyi13535496566/p/11902186.html