前端基础之HTML+CSS（四）

前言

本章续上一章节继续对CSS的知识点进行总结。

---

元素显示类型

HTML元素可以分为三类：块元素、行内元素和行内块元素。它们在页面中的显示方式和特点如下：

元素类型	显示特点	示例
块元素	占据一行，独占父容器的宽度，默认情况下会换行显示	<div>, <p>, <h1>, <ul>, <li>, <table>
行内元素	不会独占一行，仅占据内容所需的宽度，不会换行显示	<span>, <a>, <strong>, <em>, <img>, <input>
行内块元素	不会独占一行，但可以设置宽高，不会换行显示	<img>, <input>, <button>, <select>, <textarea>

• 块元素：块级元素会在页面中以块的形式展现，它会独占一行，默认情况下宽度会填满父容器的宽度。如果没有设置宽度，块级元素的宽度会自动延伸至父容器的宽度。常用于布局和分割页面的结构。
• 行内元素：行内元素不会独占一行，它只会占据内容所需的宽度。行内元素可以与其他行内元素位于同一行，并在一行内显示。不能设置宽高，不会产生换行。常用于标记文本的一部分，如加粗、斜体等。
• 行内块元素：行内块元素结合了块元素和行内元素的特点。它不会独占一行，但可以设置宽度和高度，并且在一行内显示。常用于显示图像、按钮、输入框等元素，可以设置宽高，但不会产生换行。

span行内元素 只能设置左右边距,不能设置上下边距

通过display属性进行元素类型之间的转换：

display: block：把元素转换成块；display: inline：把元素转换成行内；display: inline-block：把元素转换成行内块；display: none：隐藏等

浮动

CSS定位机制包括：标准流，浮动，定位

先了解一下文档流的概念，所谓文档流，就是指文档中可以显示的对象在排列是所占的位置。

浮动就是使我们的元素脱离正常文档流，按照指定方向发生移动，直到碰到它的父元素边界或另一个浮动元素的边（浮动是让元素水平方向移动，不能上下移动）

浮动属性

float: left ：左浮动；float: right：右浮动；float: none：不浮动（默认样式）

浮动特性

1. 元素加完浮动后脱离正常文档流。
2. 会提高元素层级。
3. 使块级元素（例如：div）由内容撑开，如果浮动元素宽度之和超过父元素的宽度，会自动折行。
4. 使行级元素可以设置宽高。
5. 元素浮动不占位，会导致父盒元素高度为0。（高度塌陷，下文会介绍解决方法）

清浮动方式

1. 给浮动元素父盒子设置固定高

   优点：简单直接解决问题；

   缺点：此方法不够灵活，适用于高度固定的布局。

2. 给浮动元素父盒子添加一个overflow属性，属性值可以是 hidden/scroll/auto让浮动元素计算高度；

   优点：代码整洁；

   缺点：可能会导致内容显示不完全。

3. 在浮动元素后与浮动元素呈现并列关系的位置加上一个空div，在空的div上加属性：clear: both;

   优点：通俗易懂，书写方便；

   缺点：代码繁多。

4. （推荐方法）给浮动元素的父盒加类名，clearfix，并在.clearfix中添加样式

<style>
.clearfix::after {
    clear: both;
    display: block;
    content: "";
}
</style>

<div class="box clearfix">
    
</div>

清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。

伪元素

伪元素并不是HTML中实际存在的元素，而是可以用CSS来创建的虚拟元素。

伪元素以双冒号::作为前缀，但为了保持向后兼容性，单冒号:也是有效的。在现代CSS中，推荐使用双冒号(::)作为伪元素的前缀。

常见的伪元素有以下几种：

1. ::before：在选定元素的内容之前插入一个伪元素。
2. ::after：在选定元素的内容之后插入一个伪元素。
3. ::first-line：选择选定元素的第一行文本。
4. ::first-letter：选择选定元素的第一个字母或字。
5. ::selection：选择用户选择的文本部分。

使用伪元素的常见场景包括但不限于以下情况：

1. 创建图标或装饰性内容：你可以使用::before或::after伪元素来插入图标或其它装饰性的内容，而无需修改HTML结构。
2. 创建特殊效果：通过伪元素可以实现一些特殊效果，如在段落的首行应用特定样式或创建元素的下划线效果。
3. 插入内容：可以用伪元素插入一些额外的文本或内容，例如用于标记元素的状态或添加提示文字。

示例：

/* before与content属性一起使用，定义在对象后的内容 */
p::before {
  content: "\201C"; /* 使用 Unicode 字符 */
  font-size: 20px;
}

/* after与content属性一起使用，定义在对象后的内容 */
p::after {
  content: url("icon.png"); /* 使用图片作为内容 */
}

/* 设置首行文字的样式 */
p::first-line {
  font-weight: bold;
  color: blue;
}

注意：伪元素虽然能够在文档中添加内容，但它们并不会影响文档结构，仅在CSS渲染时生效。

定位

书写语法	说明	文档流	偏移位置(top left right bottom)时候的参照物
position: static;	默认值	默认	默认
position: absolute;	绝对定位	脱离	没有父元素/父元素未定位，参照物是浏览器窗口第一屏；有父元素且父元素定位时，参照物是父元素
position: relative;	相对定位	不脱离	自己的初始位置
position: fixed;	固定定位	脱离	浏览器当前窗口
position: sticky;	粘性定位	吸顶效果	相对于其在正常文档流中的位置和父元素的滚动框

层叠顺序：z-index未设置时最后写的对象优先显示在上层，设置后值越大层越靠上。

固定定位（position: fixed）和粘性定位（position: sticky）在定位方式和行为上有一些区别：

1. 定位方式：
   • 固定定位：元素相对于视口进行定位，也就是相对于浏览器窗口。它的定位基准是视口的左上角。
   • 粘性定位：元素相对于其在正常文档流中的位置和父元素的滚动框进行定位。当元素在屏幕中可见时，表现得像相对定位，当元素即将要被滚动出视口时，会"粘附"在父元素内部的指定位置。
2. 行为：
   • 固定定位：元素的位置是固定的，不随页面的滚动而改变，始终保持在视口的固定位置。不受页面滚动影响，类似于悬浮效果。在移动端开发中，固定定位常用于创建固定在屏幕顶部或底部的导航栏或工具栏。
   • 粘性定位：元素在屏幕中可见时，表现得像相对定位，根据设定的偏移值进行定位。当元素即将要被滚动出视口时，会"粘附"在父元素内部的指定位置，并保持在那个位置，直到父元素滚动到不可见区域。这使得元素在特定的滚动位置时可以固定在屏幕上，常用于创建吸顶菜单或顶部通知栏。

结论：固定定位用于将元素固定在视口中的某个位置，不受页面滚动影响，适合创建悬浮效果。而粘性定位则用于在特定的滚动位置时将元素固定在屏幕上，常用于实现吸顶菜单或顶部通知栏等效果。

行内元素转为块元素方法

1. display: block;
2. position: absolute;
3. float:left;

水平垂直居中方法

.box {
    margin: 0 auto;
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

浮动与定位

1. 定义：
   • 浮动（float）：浮动是一种布局技术，通过将元素从正常的文档流中脱离，并根据指定的方向浮动在其他内容周围。主要用于实现多列布局、图文混排等效果。
   • 定位（position）：定位是一种定位技术，通过设置元素的定位属性，使其相对于特定的定位父元素或视口进行定位。主要有相对定位、绝对定位、固定定位和粘性定位等。
2. 影响文档流：
   • 浮动（半脱离）：浮动的元素会脱离正常的文档流，影响其他元素的布局，导致父元素高度塌陷和布局问题。周围的元素会环绕浮动元素。
   • 定位（全脱离）：定位的元素不会影响文档流，其他元素仍按照正常的文档流进行布局。定位元素的位置会根据其定位属性和偏移值进行调整。
3. 高度塌陷：
   • 浮动：浮动元素会导致父元素的高度塌陷，父元素无法正确包裹浮动元素。
   • 定位：定位元素不会导致父元素的高度塌陷，父元素的高度由其他非定位元素决定。
4. 文字环绕效果：
   • 浮动：通过浮动可以实现文字环绕图片等效果，使文字围绕在浮动元素周围。
   • 定位：定位一般不用于文字环绕效果，它更适用于特定位置和特殊布局的实现。
5. 适用场景：
   • 浮动：适合用于简单的多列布局、图文混排等，已经逐渐被Flexbox和Grid等更强大的布局技术取代。
   • 定位：适合实现更复杂和特殊的布局效果，如吸顶菜单、悬浮元素、定位弹窗等。

calc()函数的使用

calc()函数是CSS中的一个计算函数，它允许你在CSS样式中进行简单的数学计算，以便动态地设置元素的属性值。calc()函数非常有用，特别是在需要根据其他值计算属性值时，可以简化代码并提高可维护性。

calc()函数的基本语法如下：

calc(expression)

其中，expression是要计算的表达式，可以包含长度单位、百分比、数值、运算符和括号。

下面是一些示例，说明calc()函数的使用：

.element {
  width: calc(50%); /* 宽度为父容器宽度的一半 */
}

.element {
  width: 100px;
  height: calc(2 * 100px); /* 高度为宽度的两倍 */
}

.element {
  padding: calc(10px + 5px); /* 上下左右内边距都为15px */
}

.element {
  width: calc(100% - 20px); /* 宽度为父容器宽度减去20px */
}

.element {
  width: calc(50% - (20px + 5%)); /* 宽度为父容器宽度减去20px和5%的和 */
}

需要注意的是，calc()函数支持加法（+）、减法（-）、乘法（*）和除法（/）运算符。表达式中的运算符前后需要有空格，并且不能直接嵌套calc()函数，但可以嵌套括号。

精灵图

原理

CSS Spites的原理（图片整合技术）（CSS精灵）/雪碧图

将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术。

优势

1. 通过图片整合来减少对服务器的请求次数，从而提高页面加载速度；
2. 通过整合图片来减小图片的体积。