HTML/CSS 中级

2024-01-04  本文已影响0人  夜雨聲煩_

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 属性可设置以下值：

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

Float 和 Clear

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

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

上一篇下一篇

猜你喜欢

热点阅读