知识点1~3-CSDN博客

本文链接：https://blog.csdn.net/zsq520520_/article/details/136587202

一.css单位

在 CSS 中，常用的长度单位包括：

像素（px）：最常见的长度单位，在网页设计中使用广泛。1px 等于屏幕上的一个像素。
百分比（%）：相对于父元素的长度。比如设置宽度为50%，表示元素的宽度是父元素宽度的一半。
视窗宽度单位（vw）：相对于视口（浏览器窗口）宽度的单位，1vw 等于视口宽度的 1%。
视窗高度单位（vh）：相对于视口（浏览器窗口）高度的单位，1vh 等于视口高度的 1%。
相对长度单位（em、rem）：
- em：相对于元素自身的字体大小。例如，如果一个元素的字体大小是16px，设置其宽度为2em，则宽度将会是32px。
- rem：相对于根元素（html）的字体大小。这种单位较为常用，特别是在响应式设计中使用较多。
字符宽度单位（ch）：等于“0”字符的宽度。通常用于根据字符的数量来设置宽度。
固定值单位（cm、mm、in、pt、pc）：这些单位表示具体的物理尺寸，如厘米（cm）、毫米（mm）、英寸（in）、点（pt）和派卡（pc）。在网页设计中不太常用，更多用于打印样式表等场景。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .text1 {
            font-size: 30px;
        }

        body{
            font-size: 60px;
        }

        .text2 {
            font-size: 3em;
        }

        #id {
            font-size: 42px;
        }

        .text3 {
            font-size: 3em;
        }

    </style>
</head>
<body>
    <!-- 
        px:绝对单位。
        em:相对单位。基准点为父节点字体的大小。
        rpx:是微信小程序中css的尺寸单位。
            1rpx等于屏幕宽度的1/375
     -->

     <p class="text1">我是绝对单位</p>
     <p class="tetx2">我是相对单位</p>

     <div id="box">
        <p class="text3">111</p>
     </div>
</body>
</html>

代码含义

HTML 结构：
- <!DOCTYPE html>：声明文档类型为 HTML。
- <html lang="en">：指定页面语言为英语。
- <head>：包含了一些元信息，如字符集、视口设置和页面标题等。
- <body>：包含页面的实陃内容。
CSS 样式：
- .text1、.text2、.text3：三个不同类名的样式定义。
  - .text1：字体大小为 30px。
  - .text2：字体大小为 3em。em是相对于父元素字体大小的相对单位。
  - .text3：字体大小为 3em。
- body：设定全局字体大小为 60px。这会影响整个页面中未指定字体大小的元素。
- #id：ID 选择器规则，用于选取具有特定 ID 的元素。
  - font-size: 42px;：设置ID为 "id" 的元素字体大小为 42px。
注释：
- px 是绝对单位，表示像素。
- em 是相对单位，在这里是相对于父节点字体大小。
- rpx 是微信小程序中的css尺寸单位，1rpx 等于屏幕宽度的1/375。
页面内容：
- <p class="text1">我是绝对单位</p>：一个段落元素使用了类名 text1，字体大小为 30px，使用了绝对单位。
- <p class="text2">我是相对单位</p>：另一个段落元素使用了类名 text2，字体大小为 3em，相对于父节点字体大小。
- <div id="box">：一个具有 ID 为 "box" 的 div 元素。
  - <p class="text3">111</p>：在该 div 内部的段落元素使用了类名 text3，字体大小为 3em，相对于父节点字体大小。

代码运行效果图

二.flex布局

Flex 布局是 CSS3 中引入的一种用于设计弹性和响应式布局的技术，它使得对容器内的子元素进行灵活布局变得更加简单和高效。通过使用 Flex 布局，可以轻松实现水平、垂直居中、等高布局等各种复杂布局。

以下是 Flex 布局的一些关键概念和属性：

容器属性：
- display：设置容器为 Flex 布局，通过设置为 "flex" 或 "inline-flex" 来启用 Flex 布局。
- flex-direction：指定主轴的方向，可以是 row（水平）、row-reverse、column（垂直）、column-reverse。
- flex-wrap：定义如何换行，可以是 nowrap（不换行）、wrap（换行）、wrap-reverse。
- justify-content：定义子元素在主轴上的对齐方式，如 flex-start、flex-end、center、space-between、space-around等。
- align-items：定义子元素在交叉轴上的对齐方式，如 flex-start、flex-end、center、baseline、stretch。
- align-content：多根轴线的对齐方式，仅在有多根轴线时生效
项目属性：
- order：定义项目的排列顺序，数值越小，排列越靠前。
- flex-grow：定义项目的放大比例，默认为 0，即不放大。
- flex-shrink：定义项目的缩小比例，默认为 1。
- flex-basis：定义项目占据主轴空间之前的大小。
- flex：flex-grow、flex-shrink、flex-basis 的简写。
- align-self：单独定义某个项目在交叉轴上的对齐方式。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demoOne {
            width: 800px;
            height: 800px;
            border: 2px solid red;

            /* 设置弹性盒子布局，将块级元素转化为行内元素 */
            display: flex;

            justify-content: center;
            /* justify-content: 用于设置项目在主轴上的对齐方式; */

            /* justify-content: flex-start ; */
            /* flex-start:默认值，表示项目对齐到主轴起点，项目间不留空隙 */

            /* justify-content: flex-end; */
            /* flex-end：项目对齐到主轴终点，项目间不留空隙 */

            /* justify-content: center; */
            /* center：项目在主轴上居中对齐排列，项目间不留空隙，主轴上第一个项目利主轴起点的距离等于最后一个项目离主轴终点的距离 */

            /* justify-content: space-around; */
            /* space-around：每个项目之间的距离相等，第一个项目离主轴起点和最后一个项目离终点的距离为中间项目距离的一般 */

            /* justify-content: space-between; */
            /* space-between:两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等 */

            align-items: center;
            /* align-items属性*/
            /* align-items属性用于设置项目在交叉轴上的对齐方式。 */
            /*center:项目在交叉轴的中间位置对齐。*/
            /* flex-start:项目顶部与交叉轴起点对齐, */
            /* flex-end:项目底部与交叉轴终点对齐。 */
            /* baseline:项目的第一行文字的基线对齐。  */
            
            /* align-items: center; */
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: baseline; */

            flex-direction: column;
        }
        .boxOne {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .boxTwo {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .boxThree {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="demoOne">
        <div class="boxOne">1</div>
        <div class="boxTwo">2</div>
        <div class="boxThree">3</div>
    </div>
</body>
</html>

代码含义

HTML 结构：
- <!DOCTYPE html>：声明文档类型为 HTML。
- <html lang="en">：指定页面语言为英语。
- <head>：包含了一些元信息，如字符集、视口设置和页面标题等。
- <body>：包含页面的实际内容。
CSS 样式：
- .demoOne：一个具有弹性盒子布局的容器，宽高为 800px，边框为红色，使用 display: flex; 将其设置为弹性盒子。
  - justify-content: center;：在主轴上居中对齐容器内的项目。
  - align-items: center;：在交叉轴上居中对齐容器内的项目。
  - flex-direction: column;：指定项目在容器中的排列方向为垂直方向。
- .boxOne, .boxTwo, .boxThree：三个不同颜色的盒子，分别代表数字 1、2、3。
  - .boxOne：宽高为 100px，背景色为蓝色。
  - .boxTwo：宽高为 200px，背景色为绿色。
  - .boxThree：宽高为 300px，背景色为橙色。
注释中的对齐方式说明：
- justify-content 属性用于设置项目在主轴上的对齐方式。
- align-items 属性用于设置项目在交叉轴上的对齐方式。
- 各种对齐方式的示例包括：flex-start、flex-end、center、space-around、space-between、baseline。

代码运行效果图

三.元素定位

元素的定位是指控制元素在页面中的位置和布局方式。常见的元素定位方式包括：

相对定位（Relative Positioning）：
- 通过设置 position: relative; 可以使元素相对于其原始位置进行定位。
- 使用 top, right, bottom, left 属性可以调整元素相对于原始位置的偏移量。
绝对定位（Absolute Positioning）：
- 通过设置 position: absolute;，元素会相对于其最近的已定位（非 static）父元素进行定位。
- 如果没有已定位的父元素，则相对于 <html> 元素进行定位。
- 使用 top, right, bottom, left 属性可以确定元素的位置。
固定定位（Fixed Positioning）：
- 通过设置 position: fixed;，元素会相对于浏览器窗口进行定位，即元素会固定在页面上某个位置不随滚动条滚动而变化。
- 使用 top, right, bottom, left 属性可以确定元素固定在页面上的位置

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 1000px;
        }
        .fix {
            width: 200%;
            height: 200px;
            background-color: aqua;
            position: fixed;
            bottom: 0px;
        }

        /* 相对定位 */
        .rel-father {
            width: 300px;
            height: 300px;
            background-color: red;
            border: 5px solid black;
            margin: 50px auto;
        }
        .rel-child01,.rel-child02,.rel-child03 {
            width: 100px;
            height: 50px;
            background-color: yellow;
            border: 2px solid black;
            margin: 10px 0px;

        }
        .rel-child01 {
            position: relative;
            top: -10px;
            
        }
        .rel-child02 {
            position: relative;
            left: 198px;
            bottom: 74px;
          
        }
        .rel-child03 {
            position: relative;
            top: 108px;
            

        }

        /* 绝对定位 */
        .abs-father {
            width: 300px;
            height: 300px;
            background-color: blue;
            border: 5px solid black;
            position: relative;
        }
        .abs-child01 {
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
            top: 0px;
            /* left: 10px; */
        }
        .abs-child02 {
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
            top: 0px;
            right: 0px;
        }
        .abs-child03 {
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
            bottom: 0px;
            /* left: 20px; */
        }
    </style>
    
</head>
<body>
    <!-- 通过定位属性position可以实现元素的精准定位。

        fixed:固定定位。
        relative:相对定位，相对于其原文档流的位置进行定位。
        absolute:绝对定位，相对于上一个已经定位的父元素进行定位。
        static:静态定位。(默认定位方式)
    
    -->
     
    <!-- 固定定位 -->
    <div class="fix"></div>

    <!-- 相对定位 -->
    <div class="rel-father">
        <div class="rel-child01">child01</div>
        <div class="rel-child02">child02</div>
        <div class="rel-child03">child03</div>
    </div>


    <!-- 绝对定位 -->
    <div class="abs-father">
        <div class="abs-child01">child01</div>
        <div class="abs-child02">child02</div>
        <div class="abs-child03">child03</div>
    </div>

</body>
</html>

代码含义

固定定位部分：
- <div class="fix"></div>：一个具有固定定位的 div 元素，宽度为页面宽度的 200%，高度为 200px，背景颜色为 aqua，位于页面底部（bottom: 0px;）固定不动。
相对定位部分：
- .rel-father：一个具有相对定位的父级容器，宽度为 300px，高度为 300px，背景颜色为红色，带有黑色边框，居中显示。
- .rel-child01, .rel-child02, .rel-child03：三个子元素，宽度为 100px，高度为 50px，背景颜色为黄色，带有黑色边框，之间有一定的间距。
  - .rel-child01：相对定位，向上偏移 10px。
  - .rel-child02：相对定位，向左偏移 198px，向下偏移 74px。
  - .rel-child03：相对定位，向上偏移 108px。
绝对定位部分：
- .abs-father：一个具有相对定位的父级容器，宽度为 300px，高度为 300px，背景颜色为蓝色，带有黑色边框。
- .abs-child01, .abs-child02, .abs-child03：三个绝对定位的子元素，宽高均为 100px，背景颜色为棕色。
  - .abs-child01：绝对定位在父元素的左上角。
  - .abs-child02：绝对定位在父元素的右上角。
  - .abs-child03：绝对定位在父元素的左下角。