HTML&&CSS基础知识要点

HTML&&CSS基础知识要点

Margin 塌陷问题如何解决?BFC 是什么? 怎么触发?

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
    width: 100px;
    height: 100px;
    background-color: red;
}
#box1 {
    margin-bottom: 200px;
}
#box2 {
    margin-top: 100px;
}
</style>
</head>
<body>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
</body>
</html>

**margin塌陷问题：**上面例子两个 div 的间隔为200px，取 margin 重叠部分的更大值（这是正常情况，符合 CSS 的外边距合并规则），如果希望间隔 300px，可为每个 div 触发 BFC。
**BFC定义：**全称叫块级格式化上下文 （Block Formatting Context），一个独立的渲染区域，有自己的渲染规则，与外部元素不会互相影响。
BFC触发方式：
设置了 float 属性（值不为 none）
设置了 position 属性为 absolute 或 fixed
设置了 display 属性为 inline-block
设置了 overflow 属性（值不为 visible）

如何隐藏一个元素

display: none
opacity:0
visibility: hidden
clip-path: circle(0)
position:absolute;
top:-999px;

overflow 不同值的区别

三栏布局是一种常见的网页布局方式，通常包括一个固定宽度的左侧栏、一个固定宽度的右侧栏以及一个自适应宽度的主要内容区域。

Flex 布局、Grid 布局、浮动布局、绝对定位布局

calc()方法

calc() 是 CSS 中的一个函数，用于动态计算样式属性的值。calc() 主要用于解决以下问题：
**响应式布局：**calc() 可以根据不同的屏幕尺寸和视口大小，动态调整元素的尺寸或间距，以实现响应式布局。这有助于确保页面在不同设备上的显示效果良好。
**动态尺寸调整：**calc() 可用于根据其他元素的尺寸或动态内容的大小来计算元素的尺寸。这在构建复杂的布局时非常有用。
**优化代码：**calc() 可减少不必要的 CSS 代码和样式属性的硬编码，以实现更灵活、可维护和自适应的布局。

css
1
property: calc(expression);

其中 expression 是一个包含数值、运算符和单位的表达式。您可以在 calc() 中执行各种数学运算，例如加法、减法、乘法和除法。
以下是一些示例，展示了 calc() 如何用于解决不同问题：

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 自适应宽度 */
    .container {
      width: calc(100% - 200px); /* 宽度是父元素宽度减去 200 像素 */
      background-color: lightblue;
      height: 100px;
    }

    /* 响应式间距 */
    .box {
      margin: calc(1rem + 5%); /* 间距基于字体大小和视口宽度 */
      background-color: lightgreen;
      height: 80px;
    }

    /* 动态尺寸 */
    .dynamic {
      width: calc(50% - 20px); /* 宽度是父元素宽度的 50% 减去 20 像素 */
      height: calc(2 * 3em); /* 高度是字体大小的 6 倍 */
      background-color: lightcoral;
    }
  </style>
</head>

<body>
  <div class="container">
    这是自适应宽度的容器
  </div>
  <div class="box">
    这是有响应式间距的盒子
  </div>
  <div class="dynamic">
    这是有动态尺寸的元素
  </div>
</body>

</html>

实现 一个固定长宽div 在屏幕上垂直水平居中

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        .centered-div {
            width: 200px; /* 设置固定宽度 */
            height: 100px; /* 设置固定高度 */
            background-color: #f0f0f0;
            position: absolute;
            top: 50%; /* 上边距设置为屏幕高度的一半 */
            left: 50%; /* 左边距设置为屏幕宽度的一半 */
            transform: translate(-50%, -50%); /* 使用 transform 属性将 div 居中 */
            text-align: center; /* 文本水平居中 */
            line-height: 100px; /* 文本垂直居中 */
        }
    </style>
</head>

<body>
    <div class="centered-div">
        <p>This is a centered div.</p>
    </div>
</body>

问题：渐进增强（progressive enhancement）和优雅降级（graceful degradation）

“渐进增强”（progressive enhancement）和 “优雅降级”（graceful degradation）都是前端开发中的策略，旨在处理不同浏览器和设备的兼容性问题。有助于确保您的网站在各种环境中能够提供尽可能良好的用户体验。

渐进增强（progressive enhancement）：
渐进增强的理念是从基本的、核心的功能开始，然后逐渐增强用户体验。
首先为所有用户提供基本的功能和内容，确保网站在所有浏览器和设备上都可以访问和使用。
随着浏览器能力的提升，逐步添加更高级和更复杂的功能和效果，以提供更富有吸引力的用户体验。
渐进增强强调的是从用户需求和核心功能出发，然后根据能力来增强功能和效果。
考虑一个按钮样式的示例：

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 基本样式：无样式的按钮 */
button {
    padding: 10px 20px;
    border: none;
    background-color: transparent;
    color: #333;
}

/* 增强样式：添加背景颜色和鼠标悬停效果 */
.button-enhanced {
    background-color: #e07bff;
    color: #fff;
    cursor: pointer;
}

在这个示例中，按钮具有基本样式，即使在不支持 CSS3 的旧浏览器中也可以正常工作。然后，在现代浏览器中，使用增强样式来提供更好的外观和交互效果。

优雅降级（graceful degradation）：
优雅降级的理念是首先构建功能丰富的版本，然后在较低能力的浏览器上提供一种相对简化的版本。
先构建适用于现代浏览器的版本，包括高级功能和效果。
针对不支持这些功能的旧浏览器，提供一个更基本、但仍然可访问的版本，以确保核心功能仍然可用。
优雅降级强调的是在功能丰富的版本的基础上创建简化版本，以适应旧浏览器或不支持某些功能的情况。
考虑一个多媒体播放器的示例：

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* 高级样式:包括大型播放按钮和控件 */
.player {
    /* 这里可以添加高级样式的 CSS 规则，例如大型播放按钮和复杂控件样式 */
    width: 500px;
    height: 300px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
}

/* 简化样式:隐藏高级控件，仅显示基本播放器 */
.player-simple {
    /* 仅包括基本样式的 CSS 规则，例如只显示简单的播放区域 */
    width: 300px;
    height: 200px;
    background-color: #eaeaea;
    border: 1px solid #999;
}

/* 优雅降级:高级浏览器使用高级样式，不支持高级样式的浏览器使用简化样式 */
/* 这里假设使用媒体查询来模拟不同浏览器能力，可根据实际情况修改 */
@media screen and (min-width: 600px) {
    /* 高级浏览器或大屏幕设备使用高级样式 */
    .player {
        display: block;
    }
    .player-simple {
        display: none;
    }
}

@media screen and (max-width: 599px) {
    /* 不支持高级样式的浏览器或小屏幕设备使用简化样式 */
    .player {
        display: none;
    }
    .player-simple {
        display: block;
    }
}
}

在这个示例中，高级浏览器使用包括大型播放按钮和更多控件的高级样式。但在不支持这些样式的浏览器中，简化样式将隐藏高级控件，仅显示基本的播放器控件。

CSS 盒子模型

用于排列和定位网页上的元素的基本概念。它定义了每个HTML元素周围的一个矩形区域（或盒子），这个盒子包括内容、内边距、边框和外边距。CSS盒子模型有以下四个主要部分：
**内容（Content）：**这是盒子的内部部分，包含元素的实际内容，例如文本、图像或其他媒体。内容的大小可以通过设置宽度（width）和高度（height）属性来控制。
**内边距（Padding）：**内边距是内容和边框之间的空白区域。可以使用padding属性来设置内边距的大小。内边距的大小影响了内容与盒子边界之间的距离。
**边框（Border）：**边框位于内边距的外部，围绕着内容和内边距。边框的样式、颜色和宽度可以通过border属性进行设置。
**外边距（Margin）：**外边距是盒子与其相邻元素之间的空白区域。外边距的大小可以通过margin属性来设置。外边距影响了盒子与其他元素之间的距离。

HTML5 的特性

**语义元素：**HTML5引入了一些新的语义元素，以更好地描述网页的结构，提高可读性和可访问性。
**多媒体支持：**HTML5提供了内置的多媒体支持，，使音频和视频的嵌入更加简单，而无需使用第三方插件（如Flash）。
**Canvas：**引入了元素，允许通过JavaScript创建和操作图形，用于绘制图表、游戏和应用程序。
**本地存储：**HTML5引入了Web Storage和IndexedDB，允许在客户端存储数据，以提高离线应用程序的性能。
**新表单元素：**HTML5引入了新的表单元素等，使表单更具交互性和用户友好性。
**Web Workers：**HTML5引入了Web Workers，允许在后台运行JavaScript，以提高Web应用程序的响应性，而不会阻塞用户界面。
**WebSocket：**HTML5引入了WebSocket，一种用于实时通信的协议，可用于创建实时聊天和多人游戏等。
**地理位置：**HTML5允许网页访问用户的地理位置信息，以便创建地理位置相关的应用程序，如地图和位置服务。
**SVG：**HTML5支持可缩放矢量图形（SVG），允许创建矢量图形和图表，以便在不同分辨率的屏幕上显示。
**拖放：**HTML5引入了拖放API，允许在网页中实现拖放操作，使用户界面更直观。
**离线应用程序：**HTML5引入了应用程序缓存，使Web应用程序能够在离线时继续工作。
**新事件API：**HTML5引入了新的事件API，如addEventListener，使事件处理更加灵活和强大。

CSS3 的特性

**圆角边框：**通过border-radius属性，可创建圆角边框，包括圆形、椭圆和自定义形状。
**阴影和发光效果）：**使用box-shadow和text-shadow属性，可以为元素添加阴影和发光效果。
**渐变背景：**通过linear-gradient和radial-gradient属性，可以创建渐变背景，包括线性和径向渐变。
**多列布局：**通过column-count和column-width等属性，可以创建多列布局，类似于报纸的排版。
**变换：**使用transform属性，可以对元素进行旋转、缩放、倾斜和平移等变换。
**过渡：**通过transition属性，可以创建元素状态之间的平滑过渡效果，例如鼠标悬停时的渐变效果。
**动画：**使用@keyframes规则和animation属性，可创建CSS动画，使元素可实现复杂的运动和效果。
**2D和3D转换：**CSS3支持2D和3D转换，可以实现元素在平面和三维空间的旋转、缩放和倾斜。
**字体嵌入：**通过@font-face规则，可以在网页上嵌入自定义字体，以提供更多的字体选择。
**透明度：**使用opacity属性，可以控制元素的透明度，使元素可以半透明或完全不透明。
**栅格布局：**通过display: grid属性，可以创建更复杂的网格布局，用于定位和对齐元素。
**自定义属性：**使用CSS变量（var()）来定义和重用自定义属性，以简化样式表的管理。
**用户界面控件：**CSS3引入了样式化的用户界面控件，如滚动条、复选框和单选框的自定义样式。
**响应式设计：**通过媒体查询和弹性布局，CSS3支持响应式设计，以适应不同的屏幕尺寸和设备。

CSS中选择器的优先级，权重计算方式

**!important规则:**如果有!important 声明，那么该规则具有最高的优先级。

**特定性:**特定性值的大小来排序，特定性值较大的规则具有更高的优先级，权重计算方式如
内联样式:每个内联样式规则的特定性为1000。
ID选择器:每个ID选择器的特定性为100。
类选择器、属性选择器和伪类选择器:每个类选择器、属性选择器和伪类选择器的特定性为10。
元素选择器和伪元素选择器:每个元素选择器和伪元素选择器的特定性为1

案例:
#header:特定性值为100(1个ID选择器)
.menu-item:特定性值为10(1个类选择器)

​ ul li:特定性值为2(2个元素选择器)。
**覆盖规则:**如果两个规则具有相同的特定性，后面定义的规则将覆盖先前定义的规则，因此后定义的规则具有更高的优先级。

HTML5 input 元素 type 属性

**text:**用于接受单行文本输入。
**password:**用于密码输入，输入的字符会被掩盖

**radio:**用于单选按钮，用户可以在一组选项中选择一个

**checkbox:**用于复选框，用户可以选择多个选项。

**number:**用于输入数字，可以包括上下箭头来增减数值。

**range:**用于输入范围，例如滑动条。
**date:**用于日期输入。
**time:**用于时间输入。
**file:**用于文件上传。
**color:**用于颜色选择器
**hidden:**用于存储数据，但不会在页面中显示。
**submit:**用于提交表单。
**reset:**用于重置表单。
**button:**用于创建自定义按钮。

CSS 中属性的继承性

可继承的属性（Inherited Properties）：

​ **color：**控制文本颜色。
​ **font：**包括font-family、font-size、font-style、font-weight等属性。
​ **line-height：**控制行高。
​ **text-align：**控制文本对齐方式。
​ **text-indent：**控制首行缩进。
​ **text-transform：**控制文本转换为大写、小写或首字母大写。
​ **visibility：**控制元素的可见性。

不可继承的属性（Non-inherited Properties）：
**border：**包括border-width、border-style、border-color等属性。
**margin：**包括margin-top、margin-right、margin-bottom、margin-left。
**padding：**包括padding-top、padding-right、padding-bottom、padding-left。
**background：**包括background-color、background-image、background-repeat等属性。
**width：**控制元素的宽度。
**height：**控制元素的高度。
**position：**控制元素的定位方式（例如，relative、absolute、fixed）。
**top、right、bottom、left：**控制元素的位置。
**display：**控制元素的显示方式（例如，block、inline、none）。
**float：**控制元素的浮动方式。

画一条 0.5px 的线

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
    <style type="text/css">
      .thin-line {
            height: 1px; /* 设置线的高度为1像素 */
            background: #000; /* 设置线的颜色 */
            transform: scaleY(0.5); /* 使用scale缩放高度为0.5，模拟较细的线 */
            transform-origin: 0 0; /* 设置变换的原点为左上角，确保线的位置正确 */
            margin: 9px; /* 可以根据需要调整上下外边距，以控制线的位置 */
        }
    </style>
</head>
<body>
    <div class="thin-line"></div>
</body>
</html>

position 的值

static（静态定位）：
默认值。
元素按照文档流正常排列，不受其他定位属性影响。
top、right、bottom、left属性不起作用。
relative（相对定位）：
元素相对于其正常位置定位。
可以使用top、right、bottom、left属性来调整元素的位置。
相对定位不会脱离文档流，其他元素仍然占据原来的位置。
absolute（绝对定位）：
元素相对于最近的已定位祖先元素定位，如果没有已定位的祖先元
使用top、right、bottom、left属性来精确控制位置。
绝对定位会脱离文档流，不再占据原来的位置。
fixed（固定定位）：
元素相对于视口定位，不随页面滚动而移动。
使用top、right、bottom、left属性来控制位置。
固定定位脱离文档流，不占据原来的位置。
sticky（粘性定位）：
元素在跨越特定阈值前表现为相对定位，之后表现为固定定位。
通常用于创建“粘性”导航栏或侧边栏。
使用top、right、bottom、left属性来控制位置。

什么是浮动，浮动会引起什么问题，有何解决方案?

浮动(float)是CSS中的一种布局属性，用于控制元素在其父元素中的位置，使元素可以浮动到其父元素的左侧或右侧。浮动通常用于实现文本环绕图片、创建多列布局等效果。

导致问题:
高度塌陷(Collapsing):浮动元素会导致其父元素的高度塌陷，使父元素无法自动适应浮动元素的高度。
元素重叠(Overlapping):浮动元素可能会重叠在一起，导致布局混乱。

解决方案:
清除浮动(Clearing Floats):在包含浮动元素的父元素之后，可以使用 clear 属性来清除浮动。

css
1
2
3
4
5
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

​ 使用布局技巧:为了防止高度塌陷，可以使用现代CSS布局技巧，如Flexbox和Grid，来替代浮动布局。
​ 使用 display:inline-block:将需要浮动的元素设置为 display:inline-block，可以模拟浮动效果，但不会导致高度塌陷，因为 inline-block 元素会受到文本行的影响。
​ 使用 position:absolute:在某些情况下，position:absolute 也可以替代浮动，但需要搭配适当的定位属性来控制元素的位置。

​ 使用 overflow:hidden:在包含浮动元素的父元素上添加 overflow:hidden 可以清除浮动，但可能会剪切内容，因此需谨慎使用。

line-height 和 height 的区别

line-height(行高)
height 控制元素 content 高度

​ 它用于指定行内元素的文本行的垂直间距，可以影响文本的垂直居中和行距等

​ line-height 通常用于文本元素，如段落、标题等，以调整文本在行内框中的垂直位置

height(高度)
height 控制元素的整体高度，不仅包括文本内容，还包括内边距和边框。。
它用于指定块级元素的高度，可以确保元素的高度与其他元素一致。
height 通常用于块级元素，如等，以设置元素的具体高度,

总结: line-height 用于控制文本行的垂直间距，而 height 用于控制整个元素的高度，包括文本内容、内边距和边框。它们在不同的上下文中有不同的用途，根据布局需求选择合适的属性来控制高度。

设置一个元素的背景颜色会填充的区域。

​ **内容区域:**背景颜色会填充元素的内容区域，即文本和内联元素所在的区域。

​ **内边距区域:**如果元素具有内边距(通过 padding 属性设置)，背景颜色也会填充内边距区域。
​ **边框区域:**如果元素具有边框(通过 border 属性设置)，且背景颜色为 transparent，也会填充边框区域。

背景颜色不会填充元素的外边距区域。外边距是元素与其他元素之间的间距，背景颜色通常不会扩展到外边距。
这意味着背景颜色将覆盖元素的内容、内边距和边框，但不会覆盖外边距。这是CSS中背景颜色的标准行为。