前端基础笔记

发布于:2025-02-10 ⋅ 阅读:(49) ⋅ 点赞:(0)

 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>

使用表格布局的弊端

  1. 资源消耗与下载延迟

    • 表格元素相较于其他HTML标签,往往占用更多的字节数。这会导致页面下载时间延长,进而增加服务器的流量负担。例如,一个复杂的表格布局可能包含大量的<table><tr><td>等标签以及相关的属性和嵌套结构,这些冗余的代码在传输过程中会占用更多的带宽,降低页面加载速度,影响用户体验。

  2. 渲染效率低下

    • 表格会干扰浏览器渲染引擎的正常渲染流程,从而延缓页面的生成速度。浏览器在解析和渲染表格时,需要花费更多的时间来计算表格的布局和尺寸,特别是对于包含大量数据和复杂结构的表格,这种延迟会更加明显,让用户等待时间变长,影响页面的交互性和响应性。

  3. 灵活性不足

    • 一旦表格的设计确定,后期通过CSS对其进行修改和调整的难度较大。表格布局的结构相对固定,其行、列和单元格之间的关系较为复杂,很难像使用Flexbox或Grid布局那样,通过简单的CSS属性修改就能实现布局的灵活变化。例如,若要改变表格中某个单元格的位置或尺寸,可能需要重新调整整个表格的结构,这在维护和更新页面时会带来诸多不便。

  4. 搜索引擎优化(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>

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


网站公告

今日签到

点亮在社区的每一天
去签到