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 技术使用起来更安全,以下代码被应用于多数网站