知识点总结

  

常见的CSS单位：

1. px (pixels)：像素单位，是相对于屏幕上的单个像素点的长度单位。

2. % (percentage)：百分比单位，相对于父元素的特定属性的值进行计算。例如，width: 50% 表示元素宽度为父元素宽度的50%。

3. em：相对于父元素的字体大小的单位。1em 等于父元素的字体大小。

4. rem：相对于根元素（html元素）的字体大小的单位。1rem 等于根元素的字体大小。

5. vw (viewport width)：相对于视窗宽度的百分比单位。1vw 等于视窗宽度的1%。

6. vh (viewport height)：相对于视窗高度的百分比单位。1vh 等于视窗高度的1%。

7. vmin：相对于视窗宽度和高度中较小值的百分比单位。

8. vmax：相对于视窗宽度和高度中较大值的百分比单位。

9. pt (points)：打印单位，相对于 1/72 英寸。

这些单位可以在CSS属性中使用，如宽高、边距、字体大小、定位等。根据需要选择适当的单位以实现所需效果。

fiex布局：

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

/* flex-direction属性

               flex-direction属性用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向。*/

            /*row:默认值，主轴为从左到右的水平方向。

              row-reverse:主轴为从右到左的水平方向。

              column:主轴为从上到下的垂直方向。

              column-reverse:主轴为从下到上的垂直方向。 */

            /* flex-direction: row; */

            /* flex-direction: row-reverse; */

            /* flex-direction::column; */

            /* flex-direction: column-reverse; */

           

            /* justify-content属性

               justify-content属性用于设置项目在主轴方向上的对齐方式，能够分配项目之间及其周围多余的空间。 */

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

               flex-end:项目对齐到主轴终点，项目间不留空隙。

               center:项目在主轴上居中排列，项目间不留空隙。

               主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。

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

               space-around:每个项目之间的距离相等，

               第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。 */

               /* justify-content: flex-start;  */

               /* justify-content: flex-end; */

               /* justify-content: center; */

               /* justify-content: space-between; */

               /* justify-content:space-around; */

代码：

<style>

        .demoOne {

            width: 800px;

            height: 800px;

            border: 2px solid blue;

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

            display: flex;

        }

        .boxOne {

            width: 100px;

            height: 100px;

            background-color:  red;

        }

        .boxTwo {

            width: 200px;

            height: 200px;

            background-color: aqua;

        }

        .boxThree {

            width: 300px;

            height: 300px;

            background-color: orchid;

        }

         </style>

效果图：

元素定位：

 static:静态定位，(默认定位方式)

1、效果
在盒子模型中，可以用定位的手段达到修改边界的效果，更准确来说，可以达到在父子类元素、浏览器中随意定位的效果

2、特点
不同于修改边界、浮动，定位手段仅仅影响当前元素，而不会排挤其它元素

3、开启方式
（1）在元素中打开position，默认值为static，没有定位效果，而其他值才有定位效果

（2）坐标修改值有top、right、bottom、left，通常对位元素只用其一，例如left和right，因为二维坐标轴只需要两个坐标就够了

一、相对定位（relative）

1、特点
（1）开启后不设置偏移量所有元素不会发生改变

（2）不会超出文档流

（3）不会影响元素性质（块元素、行内元素仍保持属性）

（4）层级会升高（会覆盖以前的元素）

2、定位原理
（1）概念

-相对元素（需要移动的元素）

-参照物（理解中的坐标原点）

（2）定位标准

-相对原文档流中原本的坐标进行移动（通常默认为原定元素的左上角）

二、绝对定位（absolute）
1、特点
（1）超脱文档流

（2）如果不设置偏移量，则不设置偏移量的“元素位置”不会发生改变（意思就是，在绝对定位中，位置是不会变化的，但其它元素会受影响，上面是原因）

（3）层级提升

（4）元素性质会被改变（因为超脱了文本流）

2、定位标准

绝对定位元素是根据其“包含块”进行定位的

3、包含块（containing block）
（1）常规情况

-离当前元素最近的祖先块元素

（2）绝对定位情况

-离当前绝对定位元素最近的开启定位的祖先元素

-如果最近的都没有开启定位，则以根元素作为定位标准

（3）根元素（html，初始包含块）

三、固定定位(fixed)

1、特点

（1）唯一不同的是，固定定位永远参照于浏览器的视口定位

（2）固定定位元素不会跟随网页滚动条滚动，多用于弹窗广告

（3）但因为版本兼容性问题，不常用

2、定位标准

是一种特殊的绝对定位，定位标准与绝对定位差不多

代码：

 body{

            height: 2000px;

        }

        /* 固定定位 */

        .fix{

            width: 100%;

            height: 100px;

            background-color: bisque;

            position: fixed;

            bottom: 0px;

        }

<div class="fix"></div>

 /* 相对定位 */

        .rel-father {

            width: 300px;

            height: 300px;

            background-color: bisque;

            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;

            left: -3px;

            top: -10px;

        }

        .rel-child02 {

            position: relative;

            right: -198px;

            top: -74px;

        }

        .rel-child03{

            position: relative;

            bottom: -111px;

            left: 0px;

        }

<div class="rel-father">

        <div class="rel-child01">child01</div>

        <div class="rel-child02">child02</div>

        <div class="rel-child03">child03</div>

    </div>

/* 绝对定位 */

        .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;

        }

        .abs-child02 {

             width: 100px;

            height: 100px;

            background-color: brown;

            position: absolute;

            bottom: 200px;

            right: 0px;

           

        }

        .abs-child03 {

            width: 100px;

            height: 100px;

            background-color: brown;

            position: absolute;

            top: 200px;

            right: 200px;

           

        }

<!-- 绝对定位 -->

    <div class="abs-father">

        <div class="abs-child01">01</div>

        <div class="abs-child02">02</div>

        <div class="abs-child03">03</div>

效果图:

伪元素选择器 :

所谓"伪元素"，就是在dom结构中本来是不存在的，但是通过css创建出来的元素

::before ::after   用于向指定元素的前面或后面加入特定的内容。

 <style>

        /* 表示选中单数行的P标签 */

        p:nth-of-type(odd) ::before{

            content:"甲:" ;

        }

        /*表示选中双数行的p元素 */

        p:nth-of-type(even)::before {

            content:"乙:";

        }

    </style>

元素的浮动: 

 CSS中有一个float属性，默认值是none，  如果将float属性设置为felt或right，元素就会向其父元素的右侧或左侧靠近

代码:

   <style>

        body {

            margin: 15px;

        }

        .father {

            background-color: aqua;

            border: 1px solid black;

            padding: 5px;

        }

        .father div {

            padding: 10px;

            margin: 15px;

            border: 1px solid black;

            background-color: pink;

        }

        .father p{

            background-color: beige;

            border: 1px solid black;

        }

        .son1 {

            float: left;

        }

        .son2 {

            float: left;

        }

        .son3 {

            float: left;

        }

    </style>

</head>

<body>

     <div class="father">

        <div class="son1">Box-1</div>

        <div class="son2">Box-2</div>

        <div class="son3">Box-3</div>

        <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

     </div>

效果图: