前端基础笔记

CSS篇

CSS盒模型
content，padding，border，margin
盒模型类型
标准盒模型：margin+ border+padding +content
IE盒模型: margin + content 使用box-sizing:border-box
控制盒模型模式:box-sizing：content-box

CSS选择器的优先级：
继承性，层叠性，优先级：写CSS写样式时，给同一个元素添加多个样式，谁的权重高就显示谁的样式
标签选择器，
！important > 行内样式style =“” > id > 类class > 标签label > 全局选择器*

隐藏元素的方法：
display:none，元素在页面上消失，不占据空间
opacity:0，设置了元素的透明度，透明度为0，占据空间位置
visibility:hidden 让元素消失，占据空间位置

px和rem的区别是什么
px是像素，绝对单位长度
rem相对单位长度，相对于html根节点的font-size的值改变
1rem = 16px;

重绘和重排的区别？
重排：布局引擎会根据所有样式计算盒模型在页面上的位置和大小。
重绘：对样式进行修改，没有修改位置，大小，浏览器根据盒模型的特性进行绘制
浏览器的渲染机制
html生成dom树，css生成样式树，dom树和样式树结合渲染（绘制）进行display显示
DOM修改大小位置后就会重排，例如增加div，影响了布局
对DOM的样式增加了属性，没有增加新的dom，不用计算元素的几何属性，就会进行重绘。

让元素垂直水平居中的的方式
定位+margin width 和 height 写为父元素的一半，margin：auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Positioning and Margin Auto Centering Example</title>
    <style>
        /* 父元素样式 */
        .parent {
            /* 设置父元素的尺寸 */
            width: 100%; /* 可以根据需要设置具体宽度 */
            height: 500px; /* 示例高度 */
            /* 设置背景颜色以便观察 */
            background-color: #f0f0f0;
            /* 设置定位属性 */
            position: relative; /* 可以是relative或absolute等，取决于具体布局需求 */
        }

        /* 子元素样式 */
        .child {
            /* 子元素的宽度和高度设置为父元素的一半，这里仅为示例 */
            width: 50%; /* 父元素宽度的一半 */
            height: 250px; /* 父元素高度的一半，仅为示例 */
            /* 设置背景颜色以便观察 */
            background-color: red;
            /* 设置定位属性 */
            position: absolute;
            /* 设置外边距为自动，实现居中 */
            margin: auto;
            /* 设置子元素的定位位置 */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <!-- 父元素 -->
    <div class="parent">
        <!-- 子元素 -->
        <div class="child"></div>
    </div>
</body>
</html>

定位+transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform Translate Example</title>
    <style>
        /* 设置body的样式，让整个页面没有默认的外边距和内边距 */
        body {
            margin: 0;
            padding: 0;
            /* 设置body的高度为100vh，即视口高度的100%，这样可以方便我们观察居中效果 */
            height: 100vh;
            /* 设置背景颜色为浅灰色，以便更好地看到居中的方块 */
            background-color: #f0f0f0;
            /* 设置body为相对定位，这样它的子元素可以基于它进行绝对定位 */
            position: relative;
        }

        /* 设置方块的样式 */
        .box {
            /* 设置方块的宽度和高度 */
            width: 100px;
            height: 100px;
            /* 设置方块的背景颜色为红色 */
            background-color: red;
            /* 设置方块为绝对定位 */
            position: absolute;
            /* 将方块的左上角定位到距离body顶部50%、左侧50%的位置 */
            top: 50%;
            left: 50%;
            /* 通过transform属性将方块向左平移自身宽度的一半，向上平移自身高度的一半，实现居中 */
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <!-- 创建一个方块元素 -->
    <div class="box"></div>
</body>
</html>

flex布局实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Centering Example</title>
    <style>
        /* 设置body的样式，让整个页面没有默认的外边距和内边距 */
        body {
            margin: 0;
            padding: 0;
            /* 设置body的高度为100vh，即视口高度的100%，这样可以方便我们观察居中效果 */
            height: 100vh;
            /* 设置背景颜色为浅灰色，以便更好地看到居中的方块 */
            background-color: #f0f0f0;
            /* 使用flex布局 */
            display: flex;
            /* 使子元素在交叉轴（垂直方向）上居中 */
            align-items: center;
            /* 使子元素在主轴（水平方向）上居中 */
            justify-content: center;
        }

        /* 设置方块的样式 */
        .box {
            /* 设置方块的宽度和高度 */
            width: 100px;
            height: 100px;
            /* 设置方块的背景颜色为红色 */
            background-color: rgba(71, 11, 210, 0.82);
        }
    </style>
</head>
<body>
    <!-- 创建一个方块元素 -->
    <div class="box"></div>
</body>
</html>

grid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Centering Example</title>
    <style>
        /* 父元素样式 */
        .container {
            /* 设置容器的高度，这里设置为视口高度的100%，以便观察居中效果 */
            height: 100vh;
            /* 设置背景颜色以便观察 */
            background-color: #f0f0f0;
            /* 使用grid布局 */
            display: grid;
            /* 设置网格的行和列，这里使用fr单位表示分数，1fr表示占据可用空间的1份 */
            grid-template-rows: 1fr;
            grid-template-columns: 1fr;
            /* 使子元素在网格中居中 */
            place-items: center;
        }

        /* 子元素样式 */
        .item {
            /* 设置子元素的宽度和高度 */
            width: 200px;
            height: 200px;
            /* 设置背景颜色以便观察 */
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 网格容器 -->
    <div class="container">
        <!-- 网格项 -->
        <div class="item"></div>
    </div>
</body>
</html>

table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Layout Centering Example</title>
    <style>
        /* 表格样式 */
        .table-layout {
            /* 设置表格的宽度和高度，这里设置为100%和视口高度的100%，以便观察居中效果 */
            width: 100%;
            height: 100vh;
            /* 设置表格的布局方式为表格布局 */
            display: table;
            /* 设置背景颜色以便观察 */
            background-color: #f0f0f0;
        }

        /* 表格行样式 */
        .table-row {
            /* 设置表格行的布局方式为表格行 */
            display: table-row;
        }

        /* 表格单元格样式 */
        .table-cell {
            /* 设置表格单元格的布局方式为表格单元格 */
            display: table-cell;
            /* 使内容在单元格中垂直居中 */
            vertical-align: middle;
            /* 使内容在单元格中水平居中 */
            text-align: center;
        }

        /* 子元素样式 */
        .centered-item {
            /* 设置子元素的宽度和高度 */
            width: 200px;
            height: 200px;
            /* 设置背景颜色以便观察 */
            background-color: red;
            /* 使子元素在单元格中居中显示 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- 表格布局容器 -->
    <div class="table-layout">
        <!-- 表格行 -->
        <div class="table-row">
            <!-- 表格单元格 -->
            <div class="table-cell">
                <!-- 需要居中的元素 -->
                <div class="centered-item"></div>
            </div>
        </div>
    </div>
</body>
</html>

使用表格布局的弊端

资源消耗与下载延迟
- 表格元素相较于其他HTML标签，往往占用更多的字节数。这会导致页面下载时间延长，进而增加服务器的流量负担。例如，一个复杂的表格布局可能包含大量的<table>、<tr>、<td>等标签以及相关的属性和嵌套结构，这些冗余的代码在传输过程中会占用更多的带宽，降低页面加载速度，影响用户体验。
渲染效率低下
- 表格会干扰浏览器渲染引擎的正常渲染流程，从而延缓页面的生成速度。浏览器在解析和渲染表格时，需要花费更多的时间来计算表格的布局和尺寸，特别是对于包含大量数据和复杂结构的表格，这种延迟会更加明显，让用户等待时间变长，影响页面的交互性和响应性。
灵活性不足
- 一旦表格的设计确定，后期通过CSS对其进行修改和调整的难度较大。表格布局的结构相对固定，其行、列和单元格之间的关系较为复杂，很难像使用Flexbox或Grid布局那样，通过简单的CSS属性修改就能实现布局的灵活变化。例如，若要改变表格中某个单元格的位置或尺寸，可能需要重新调整整个表格的结构，这在维护和更新页面时会带来诸多不便。
搜索引擎优化（SEO）受限
- 表格布局不利于搜索引擎抓取页面信息，可能会对网站的排名产生负面影响。搜索引擎通常更倾向于抓取结构清晰、语义明确的HTML内容。而表格布局往往包含大量的非语义化标签和复杂的嵌套结构，这会干扰搜索引擎对页面内容的理解和索引。例如，搜索引擎可能难以准确识别表格中哪些内容是重要的标题、哪些是关键的数据等，从而降低页面在搜索结果中的相关性和排名。

推荐使用flex或grid布局，简单高效

css属性哪些可以继承？
CSS特性：继承性，层叠性，优先级

line-height,font,visibility:hidden,list-style可以被继承

在CSS中，padding（内边距）属性是不会被继承的。同样，盒模型的其他组成部分，如margin（外边距）、border（边框）和width/height（宽度/高度）等属性也不会被继承。这些属性都是应用于元素自身的，不会自动传递给子元素。

举例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Inheritance Example with Visibility</title>
    <style>
        /* 父元素样式 */
        .parent {
            line-height: 2; /* 设置行高 */
            font: 16px Arial, sans-serif; /* 设置字体大小和字体系列 */
            visibility: visible; /* 设置可见 */
            list-style: square inside; /* 设置列表样式 */
            border-spacing: 10px; /* 对于表格，设置边框间距 */
            /* 为了更好地展示，给父元素添加一些背景颜色和内边距 */
            background-color: #f0f0f0;
            padding: 20px;
        }

        /* 子元素样式 */
        .child {
            /* 子元素会继承父元素的行高和字体样式 */
            /* 这里可以添加一些自己的样式 */
            color: blue; /* 设置文本颜色 */
        }

        /* 表格样式 */
        table {
            border-collapse: separate; /* 与border-spacing配合使用 */
            border-spacing: 10px; /* 设置表格边框间距 */
        }

        /* 列表样式 */
        ul {
            /* 列表样式会继承，但这里可以覆盖 */
            list-style: disc outside; /* 修改列表样式 */
        }
    </style>
</head>
<body>
    <div class="parent">
        这是父元素文本。<br>
        <span class="child">这是子元素文本，会继承父元素的行高和字体。</span>
        <ul>
            <li>列表项1，会继承父元素的列表样式，但这里被覆盖了。</li>
            <li>列表项2。</li>
        </ul>
        <!-- 表格边框间距设置在<table>标签上 -->
        <table>
            <tr>
                <td>表格单元格1</td>
                <td>表格单元格2</td>
            </tr>
        </table>
    </div>
</body>
</html>

什么是继承性？
父元素设置一些样式，子元素可以拿来使用，被动的生效