HTML/CSS 中级

Display

块级元素（block element）

包括：<div> , <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>

<div> (Division): 是一个块级容器，通常用于组织和包装HTML文档中的其他元素，以便应用样式或脚本。
<h1> 到 <h6> (Heading): 是标题标签，分别表示主标题到六级子标题。
<p> (Paragraph): 标签定义了一个段落。
<form> 标签用于创建HTML表单，用于收集用户输入。
<header> 标签通常用于表示文档或页面的页眉部分。
<footer> 标签通常用于表示文档或页面的页脚部分。
<section> 标签用于定义文档中的一个区域或部分，具有相对独立的主题或内容。

行内元素（inline element）

包括：<span>, <a>, <img>

使用

可以使用display: block; 或者 display: inline; 来切换块级元素和行内元素。

将行内元素切换成块内元素会换行。

可以使用visibility: hidden;来隐藏，用此方式隐藏的元素仍会占用空间，还会空白。
可以使用display: none;来隐藏，用此方式隐藏的元素不会占用空间。

max-width

可以使用width和max-width来指定宽度，区别在于：
使用width宽度大于浏览器宽度时，会出现滚动条。
使用max-width宽度，大于浏览器时，会根据浏览器的大小来变小，不会出现滚动条。

定位：position

static

HTML 元素默认情况下的定位方式为 static（静态）。静态定位的元素不受 top、bottom、left 和 right 属性的影响。

relative

position: relative;的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

fixed

position: fixed;的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。固定定位的元素不会在页面中通常应放置的位置上留出空隙。

absolute

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

sticky

position: sticky; 的元素根据用户的滚动位置进行定位。粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。
注意：Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的实例）。您还必须至少指定 top、right、bottom 或 left 之一，以便粘性定位起作用。
例：使用top=0使其粘在顶部。

z-index

使用z-index=-1使图片在文字后，同理使用z-index=1使图片在文字前，配合absolute使用。

Overflow

overflow 属性可设置以下值：

• visible - 默认。溢出没有被剪裁。内容在元素框外渲染
• hidden - 溢出被剪裁，其余内容将不可见
• scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
• auto - 与 scroll 类似，但仅在必要时添加滚动条

同时，使用overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出。

Float 和 Clear

float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。使用float实现类似图文混排的功能。
float 属性可以设置以下值之一：

• left - 元素浮动到其容器的左侧
• right - 元素浮动在其容器的右侧
• none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
• inherit - 元素继承其父级的 float 值

使用clear来清除float。
clear在此外额外可设置以下值之一：

• both -同时清除两侧浮动。
• .clearfix overflow: auto;- 如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外，然后我们可以向包含元素添加 overflow: auto;，来解决此问题
• .clearfix::after - 只要您能够控制外边距和内边距（否则您可能会看到滚动条）overflow: auto clearfix 就会很好地工作。但是，新的现代 clearfix hack 技术使用起来更安全，以下代码被应用于多数网站