文章目录
display（显示）
内联元素
块级元素
行内块级元素
三者区别
position（定位）
position属性
static属性
relative属性
fixed属性
absolute属性
sticky属性
五个属性的实例讲解
overflow（溢出）
hidden
scroll
auto
overflow-x和overflow-y
float（浮动）
none
left
right
inherit
display（显示）
display属性指定由元素生成的框的类型,通常用到display对应值有block、none、inline这三个值。
下面我们来看看display的属性有哪些吧。
内联元素
比如：b、big、i、small、tt、abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var、a、bdo、br、img、map、object、q、script、span、sub、sup、button、input、label、select、textarea等。
内联元素特点：
和其他元素都在一行上；
宽高只与内容有关；
行内元素只能容纳文本或者其他行内元素。
块级元素
比如：address、article、aside、audio、blockquote、canvas、dd、div、dl、fieldset、figcaption、figure、footer、form、h1、header、hgroup、hr、noscript、ol、 output、p pre、 section 、table、 tfoot、ul、video等。
块级元素特点：
总是在新行上开始，占据一整行；
宽高，行高以及外边距和内边距都可控制；
若不设置宽则宽为浏览器宽度，与内容无关；
它可以容纳内联元素和其他块元素。
行内块级元素
三者区别
position（定位）
- static
- relative
- fixed
- absolute
- sticky
position属性
static属性
HTML 元素默认情况下的定位方式为 static（静态）。静态定位的元素不受 top、bottom、left 和 right 属性的影响。position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位.
relative属性
position: relative; 的元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
fixed属性
position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。固定定位的元素不会在页面中通常应放置的位置上留出空隙。
absolute属性
position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
注意：“被定位的”元素是其位置除 static 以外的任何元素。
sticky属性
粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 ，然后将其“粘贴”在适当的位置
五个属性的实例讲解
1.static
3.fixed
fixed就是根据当前窗口来定位的，当滑动页面时，不随页面下拉而变动。
5.sticky
css和html
hidden
如果使用 hidden 值，溢出会被裁剪，其余内容被隐藏。
scroll
如果将值设置为 scroll，溢出将被裁剪，并添加滚动条以便在框内滚动。请注意，这将在水平和垂直方向上添加一个滚动条。
auto
auto 值类似于 scroll，但是它仅在必要时添加滚动条.
overflow-x和overflow-y
overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出
overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的上/下边缘。
float（浮动）
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
none
left
right
inherit
