CSS学习2

smile_pbb2024-03-14 6:02

自己在工作中总是有一些自动化开发的需求，总是以为自己是有前端基础的，但是一写页面，布局都布不好，真是搞笑，说起来还是基本功不扎实啊，这里在重新复习一下，然后记录一下文档。后边在写两个综合练习

一、伪类选择器

1.a标签的伪类

html 复制代码 
<html>
    <head>
        <style>
            /* 去除a标签文字的下划线 */
            a {
                text-decoration: none;
            }
            /* a标签没有点击时的默认样式 */
            a:link {
                color: black;
            }
            
            /* a标签点击后的样式 */
            a:visited {
                color: red;
            }

            /* a标签鼠标悬浮或者划过时的样式 */
            a:hover {
                color: blue;
            }

            /* a标签在鼠标点击时候的样式 */
            a:active {
                color: pink;
            }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com">百度</a>
        <br>
        <a href="https://www.jd.com">京东</a>
    </body>
</html>

1.1 伪类的顺序

a标签的书写顺序必须按照link、visted、hover、active的顺序书写，否则有些效果就会不生效。按照首字母顺序可以记忆为lvha

1.2 适用范围

link visted是a标签专属的伪类。只能适用于a标签。而hover、active不仅适用于a标签，还适用于其它元素。

举例：

html 复制代码 
<html>
    <head>
        <style>
           .box > div {
                width: 100px;
                height: 100px;
                background-color: red;
           }
           .box > div:hover {
                background-color: black;
           }
           .box > div:active {
                background-color: blue;
           }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
        </div>
    </body>
</html>

2.结构伪类

这个伪类结构呢，可以理解为 "正则匹配"。

匹配成功就选中该元素，并执行对应的样式

匹配失败，就什么也不会执行

2.1.first-child

注意：这里一定要理解first-child的含义：

first: 第一个元素

child:范围是 在父标签的子元素中寻找

整体含义就是 匹配子元素中的 "第一个元素" 是不是p

2.1.1 针对所有范围
c 复制代码 
p:first-child #表示 匹配所有子元素中第一个元素是不是p标签

错误理解：
	匹配所有子元素中的第一个p标签

实例：

html 复制代码 
<html>
    <head>
        <style>
           p:first-child{
            color: red;
           }

        </style>
    </head>
    <body>
        <!-- 这是body标签子元素中的第一个元素，并且是p标签。所以匹配成功 -->
        <p>body1</p>
        <h1>h1</h1>
        <p>p1</p>
        <div>
            <!-- 这是div子元素中的第一个元素，也是p标签，匹配成功 -->
            <p>d1</p>
            <p>d2</p>
            <p>d3</p>
            <p>d4</p>
            <p>d5</p>
            <p>d6</p>
        </div>

        <div>
            <!-- 这是div的第一个元素，但不是p -->
            <span>11</span>
            <p>22</p>
        </div>
        <div>
            <div>
                <!-- 这是div子元素中的第一个元素，也是p标签，匹配成功 -->
                <p>111</p>
                <p>222</p>
            </div>
        </div>
    </body>
</html>
2.1.2 限定范围
html 复制代码 
<html>
    <head>
        <style>
            /* 在class选择器为box的子代元素中 匹配第一个元素是不是p标签 */
           .box > p:first-child{
            color: red;
           }

        </style>
    </head>
    <body> 
        <p>body1</p>
        <h1>h1</h1>
        <p>p1</p>
        <!-- 设置class选择器 -->
        <div class="box">
            <p>d1</p>
            <p>d2</p>
            <p>d3</p>
            <p>d4</p>
            <p>d5</p>
            <p>d6</p>
        </div>

        <div>
            <span>11</span>
            <p>22</p>
        </div>
        <div>
            <div>
                <p>111</p>
                <p>222</p>
            </div>
        </div>
    </body>
</html>

2.2 last-child

匹配子元素中的最后一个元素是不是某个标签

html 复制代码 
<html>
    <head>
        <style>
        	/* 匹配所有子元素中的最后一个元素是不是p标签 */
           p:last-child{
            color: red;
           }

        </style>
    </head>
    <body> 
        <div class="box">
            <p>d1</p>
            <p>d2</p>
            <p>d3</p>
            <p>d4</p>
            <p>d5</p>
            <p>d6</p>
        </div>
    </body>
</html>

2.3 nth-child

匹配指定的元素是不是某个标签

html 复制代码 
<html>
    <head>
        <style>
           /* 匹配第三个元素是不是p标签 */
           p:nth-child(3){
            color: red;
           }

        </style>
    </head>
    <body> 
        <div class="box">
            <p>d1</p>
            <p>d2</p>
            <p>d3</p>
            <p>d4</p>
            <p>d5</p>
            <p>d6</p>
        </div>
    </body>
</html>

验证: 这里看到d2的字体变成了红色，这里再次验证了，这是匹配的第n个元素，而不是第n个p元素

html 复制代码 
<html>
    <head>
        <style>
          <!-- 在这里加上一个span标签 -->
           p:nth-child(3){
            color: red;
           }

        </style>
    </head>
    <body> 
        <div class="box">
            <span>span1</span>
            <p>d1</p>
            <p>d2</p>
            <p>d3</p>
            <p>d4</p>
            <p>d5</p>
            <p>d6</p>
        </div>
    </body>
</html>

2.4 nth-child(-n+数字)

匹配子元素中的前n个元素

3.结构伪类2

:first-of-type表示选择"相同类型元素"的第一个

:last-of-type 表示选择"相同类型元素"的最后一个

:nth-of-type(n)表示选择"相同类型元素"的第n个

3.1 first-of-type

html 复制代码 
<html>
    <head>
        <style>
           /* 匹配第三个元素是不是p标签 */
           p:first-of-type {
            color: red;
           }

        </style>
    </head>
    <body> 
        <div class="box">
            <!-- 在这里加上一个span标签 -->
            <span>span1</span>
            <span>span2</span>
            <p>d1</p>
            <span>span3</span>
            <p>d2</p>
            <span>span3</span>
            <p>d3</p>
        </div>
    </body>
</html>

3.2 last-of-type

html 复制代码 
<html>
    <head>
        <style>
           /* 匹配最后一个span元素 */
           span:last-of-type {
            color: red;
           }

        </style>
    </head>
    <body> 
        <div class="box">
            <span>span1</span>
            <span>span2</span>
           
            <p>d1</p>
            <span>span3</span>
            <p>d2</p>
             <!-- 此行变成了红色 -->
            <span>span4</span>
            <p>d3</p>
        </div>
    </body>
</html>

3.3 nth-of-type(n)

html 复制代码 
<html>
    <head>
        <style>
           /* 匹配最后三个span元素 */
           span:nth-of-type(3) {
            color: red;
           }

        </style>
    </head>
    <body> 
        <div class="box">
            <span>span1</span>
            <span>span2</span>
           
            <p>d1</p>
              <!-- 此行变成了红色 -->
            <span>span3</span>
            <p>d2</p>
            <span>span4</span>
            <p>d3</p>
        </div>
    </body>
</html>

4.伪元素选择器

伪元素在前端展示出来后是不能选中的。

::before和::after 必须要结合content属性结合使用

html 复制代码 
<html>
    <head>
        <style>
          /* 在所有p标签内容的前边加上￥符号 */
          p::before{
            content: "￥";
          }
          /* 在所有p标签内容的后边加上".00"字符串 */
          p::after{
            content: ".00";
          }

        </style>
    </head>
    <body> 
       <p>100</p>
       <p>200</p>
       <p>300</p>
    </body>
</html>

二、隐藏元素的方式

1.display

display:none参数可以设置元素隐藏。不但隐藏元素，也不占用任何位置，没有大小宽高

html 复制代码 
<html>
    <head>
        <style>
          .box1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            display: none;
            
          }
          .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
          }
        </style>
    </head>
    <body> 
       <div class="box1">1</div>
       <div class="box2">2</div>
    </body>
</html>

2.visibility

visibility 默认值是show,如果设置为hidden,会隐藏元素。虽然元素看不见了，但是还会占有原来的位置

html 复制代码 
<html>
    <head>
        <style>
          .box1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            visibility: hidden;
          }
          .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
          }
        </style>
    </head>
    <body> 
       <div class="box1">1</div>
       <div class="box2">2</div>
    </body>
</html>

三、布局技巧-垂直居中

1.文本居中

前边已经学过了，这里在复习一下。文本居中主要最常用的属性是

c 复制代码 
# 文本水平居中
text-align: center;

# 文本垂直居中
line-height: 200px;

2.图片居中

2.1 方式1: 背景形式

以背景图片的方式调整图片的位置

居中显示：

html 复制代码 
<html>
    <head>
        <style>
            * {
                margin: 0px;
                padding: 0px;

            }
            .outer {
                width: 500px;
                height: 500px;
                background-color: gray;
                background-image: url("./image/1.jpg");
                background-size: 300px 200px;
                background-repeat: no-repeat;
                background-position: center;
                              
            }
        </style>
    </head>
    <body> 
        <div class="outer">
        </div>
    
    </body>
</html>

当然还可以通过以下两个参数的值来调整图片的位置。当然使用这两个值的时候就不要使用 background-position: center参数了

c 复制代码 
background-position-x
background-position-y

2.2 方式2：行内元素形式

html 复制代码 
<html>
    <head>
        <style>
            * {
                margin: 0px;
                padding: 0px;

            }
            .outer {
                width: 500px;
                height: 500px;
                background-color: gray;
                /* 设置水平居中 */
                text-align: center;
                /* 设置垂直居中，但是不是真正意义上的垂直居中 */
                line-height: 500px;
                font-size: 0px;

            }
            img {
                width: 200px;
                height: 100px;
                /* 设置图片以父标签的中线对齐，这才是真正的中线对齐，这个和line-height配合使用 */
                vertical-align: middle;

            }
            
        </style>
    </head>
    <body> 
        <div class="outer">
            <!-- 这里的文字不显示，被font-size：0px隐藏了，但是这段文件必须存在，否则图片无法居中 -->
            <span>xxxx</span>
            <img src="./image/1.jpg" alt="">
        </div>
    
    </body>
</html>

3.文字图片混合居中

html 复制代码 
<html>
    <head>
        <style>
            * {
                margin: 0px;
                padding: 0px;

            }
            .outer {
                width: 300px;
                height: 300px;
                background-color: gray;
                text-align: center;
                line-height: 300px;
                /* 这里之所以这样设置，然后在单独设置span中的字体大小，是因为让图片的位置不因为字体的
                大小变化而影响图片的位置 */
                font-size: 0px;

            }
            img {
                width: 50px;
                height: 50px;
                vertical-align: middle;
                box-sizing: 5px;
                border-radius: 50%;
                position: relative;
                left: 20px;
            }
            span {
                font-size: 20px;
                vertical-align: middle;
            }
            
        </style>
    </head>
    <body> 
        <div class="outer">
            <span>机器猫:</span>
            <img src="./image/cat.jpg"  >
        </div>
    
    </body>
</html>

四、浮动

1.简介

最早先浮动是为了 文字环绕图片而设计的，现在还多用于布局。

2.文本浮动后的特点

1.脱离文档流，会漂浮起来，不会在独占一行，会和其他元素共用一行。

2.不管元素浮动前是什么元素，浮动后，默认宽高都是由内容撑开的（最小原则）而且可以设置宽高

3.漂浮的元素不会margin合并，也不会margin塌陷，能够完美的设置四个方向margin和padding

4.不会像行内块元素那样当作文本处理（没有行内块的空白问题）

5，如果浮动元素的下一个元素中有文字，那么浮动元素不会盖住文字

实例：

html 复制代码 
<html>
<head>
    <style>
        .outer {
            width: 500px;
            height: 600px;
            background-color: gray;           
        }
        .box {
            height: 100px;
        }
        .box1 {
            background-color: blue;
        }
        .box2 {
           background-color: red; 
           float: left;
        }
        .box3 {
            background-color: pink;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>

</body>
</html>

来张示意图：

3.解决浮动的影响

最主要的影响是就是元素浮动之后，后边的块元素会顶替原来元素的位置。解决办法就是，在受影响的元素上使用

clear: both

例子：

html 复制代码 
<html>
<head>
    <style>
        .outer {
            width: 500px;
            height: 600px;
            background-color: gray;           
        }
        .box {
            height: 100px;
        }
        .box1 {
            background-color: blue;
        }
        .box2 {
           background-color: red; 
           float: left;
    
        }
        .box3 {
            background-color: pink;
            /* 清除.box2浮动给box3带来的影响 */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>

</body>
</html>

4.浮动的使用原则

在一个父元素中有多个子元素，如果要使用浮动的话，尽量要么全浮动，要么全不浮动

5.优雅写法

使用clear:both属性的时候，需要找到浮动元素的下一个元素，也就是受影响的元素，加上这个属性。

如果我们不想编辑受影响的元素，并且子元素全部是浮动属性的话，可以使用以下写法

html 复制代码 
<html>
<head>
    <style>
        .outer {
            width: 500px;
            background-color: gray;     
            
        }
        /* 在所有子元素的最后一行加上一个隐藏的块元素，来清除浮动 */
        /* 但是这种写法必须是子元素全部浮动的场景，如果最后一个元素没有浮动，这种写法无效 */
        .outer::after {
            content: "";
            display: block;
            clear: both;
        }
        .box {
            height: 100px;
            width: 100px;
            float: left;
        }
        .box1 {
            background-color: blue;
        }
        .box2 {
           background-color: red; 
        }
      
        .box3 {
            background-color: pink;
        }
        .center {
            width: 800px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>
    <div class="center">
        中间
    </div>

</body>
</html>

5.浮动综合练习

示意图如下：

5.1 html代码

html 复制代码 
<html>
<head>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
   <div class="container">
        <!-- 头部 -->
        <div class="header clearfix">
            <div class="logo leftfix">logo</div>
            <div class="banner1 leftfix">banner1</div>
            <div class="banner2 leftfix">banner2</div>
        </div>
        
        <!-- 菜单 -->
        <div class="menu">
            菜单
        </div>

        <!-- 内容部分 -->
        <div class="content clearfix">
            <!-- 左半部分 -->
            <div class="left leftfix">
                <!-- 第一行 -->
                <div class="oneline clearfix">
                    <div class="item1 leftfix">栏目1</div>
                    <div class="item2 leftfix">栏目2</div>
                </div>
              
                <!-- 第二行4个小布局 -->
                <div class="twoline">
                    <div class="item3 leftfix">栏目3</div>
                    <div class="item4 leftfix">栏目4</div>
                    <div class="item5 leftfix">栏目5</div>
                    <div class="item6 leftfix">栏目6</div>
                </div>
               
            </div>
            
            <!-- 右半部分 -->
            <div class="right leftfix">
                <div class="item7">栏目7</div>
                <div class="item8">栏目8</div>
                <div class="item9">栏目9</div>
            </div>

        </div>

        <!-- 底部 -->
        <div class="footer">
            页脚
        </div>
   </div>
 
</body>
</html>

5.2 CSS代码

css 复制代码 
* {
    padding: 0;
    margin: 0;
}
/* 设置浮动和清除浮动属性，减少重复CSS代码 */
.leftfix {
    float: left;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 全局样式 */
.container {
    width: 960px;
    margin: 0 auto;
}

/* header中的样式 */
.logo,.banner1,.banner2 {
    height: 80px;
    line-height: 80px;
    background-color: #ccc;
    text-align: center;
}

.logo {
    width: 200px;
}
.banner1 {
    width: 540px;
    margin: 0 10px;
}
.banner2 {
    width: 200px;
}

/* 菜单样式 */
.menu {
    height: 30px;
    background-color: #ccc;
    margin-top: 10px;
    line-height: 30px;
    text-align: center;
}

/* 内容部分样式 */
.content {
    margin-top: 10px;
}
.item1,.item2 {
    height: 198px;
    width: 368px;
    line-height: 200px;
    text-align: center;
    margin-right: 10px;
    border: 1px solid black;
}
.twoline {
    margin-top: 10px;
}
.twoline > div {
    width: 178px;
    height: 198px;
    margin-right: 10px;
    line-height: 200px;
    text-align: center;
    border: 1px solid black;
}

.right > div {
    height: 128px;
    width: 198px;
    line-height: 130px;
    text-align: center;
    border: 1px solid black;
}
.item8 {
    margin: 10px 0;
}

.footer {
    width: 960px;
    height: 60px;
    margin-top: 10px;
    background-color: #eee;
    line-height: 60px;
    text-align: center;
}

小总结：

这里很多父元素并没有设置高度，是靠子元素内容撑起来的。这样会方便一些，如果高度固定，可能在子元素尺寸发生变化的时候，影响比较大

五、定位

1.相对定位

html 复制代码 
 position: relative;
 top:
 left:
 right:
 bottom:

特点：

1.元素会相对于自己原理的元素进行移动

2.相对定位不会脱离文档流，不会影响其它的文档的位置

3.定位的元素，层级会比其它元素高。但是层级高不是浮动。

4.应用场景：适合给元素微调，因为它不会影响其它元素的位置

2.绝对定位

html 复制代码 
position: absolute;
top:
left:
right:
bottom:

特点：

1.绝对定位会脱离文档流，和浮动一样，直接漂浮起来。后边的元素就会顶替它的位置。但是不一样的是，绝对定位不会像浮动那样，产生文字环绕效果。

2.如果绝对定位元素的父元素"没有定位"，它的参考对象就是浏览器左上角。

如果绝对定位元素的父元素"有定位",它的参考对象就是父元素的左上角。

3.相对和绝对配合使用

一般他们两个配置使用：叫做"子绝父相"，也就是父元素开启相对定义，子元素开启绝对定位。这样子元素的定位就是父元素了。

4.固定定位

特点：

1.固定定位也会脱离文档流

2.固定定位的参考点永远是"视口"

实例：

html 复制代码 
这个盒子就一直固定在视口的左上角
.box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: fixed;
            top: 0;
            left: 0;
}

5.定位块元素居中

方案1：通过计算

通过计算让块元素居中

html 复制代码 
<html>
<head>
    <style>
        .outer {
            width: 500px;
            height: 500px;
            background-color: pink;
            position: relative;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: gray;
            position: absolute;
            top: 150;
            left: 150;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">

        </div>
    </div>
</body>
</html>

方案2: 不用通过计算

这种方案的好处就是：无论父元素怎么变化，块元素都是居中。

html 复制代码 
<html>
<head>
    <style>
        .outer {
            width: 700px;
            height: 800px;
            background-color: pink;
            position: relative;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: gray;
            position: absolute;
             /* 这五个参数，在设置居中的时候缺一不可 */
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">

        </div>
    </div>
</body>
</html>

6.子充满父元素

当一个父元素的宽高无法确定时，或者二者有一个无法确定

并且子元素不设置宽高的情况，使子元素如果充满父元素。可以使用以下方案

html 复制代码 
<html>
<head>
    <style>
        .outer {
            height: 500px;
            background-color: pink;
            position: relative;
            
        }
        .inner {
            background-color: gray;
            position: absolute;
            /* 全部铺满父元素 */
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            内部块
        </div>
    </div>
</body>
</html>

六、布局注意事项

版心

在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这就是版心

版心的宽度一般在960-1200之间

版心是一个，也可以是多个。推荐使用多个版心，这样调整东西都比较方便

设置版心的最终目的就是为了尽可能的满足小的屏幕查看网站不出现横向滚动条

七、less

1.简介

less是一门CSS的预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更容易维护和扩展。less既可以运行在浏览器端，也可以运行在server端(nodejs)端

1.1 安装

在vscode中安装easy less插件

新建index.less文件，保存，自动会生成index.css文件

新建index.less文件，保存，自动会生成index.css文件

1.2.引入

引入的时候不需要引入less文件，还是引入css文件，编写代码是在less文件中

2.语法

2.1 变量

设置变量语法：

less 复制代码 
@变量名:值

实例：

css 复制代码 
@color:red;

.outer{
    width: 100px;
    height: 100px;
    background-color: @color;
}

2.2 less嵌套

在写CSS文件的时候，所有的CSS属性都是由上到下一次编写，没有层级关系。逻辑性很差，一旦内容很多之，不好找到对应的CSS属性。less就很好的解决了这个问题。

实例

less 复制代码 
.outer{
    width: 100px;
    height: 100px;
    background-color: green;

    .header {
        width: 50px;
        height: 50px;
        background-color: #fff;

        .itme {
            display: inline-block;
        }
    }
}

保存之后css文件的效果

css 复制代码 
.outer {
  width: 100px;
  height: 100px;
  background-color: green;
}
.outer .header {
  width: 50px;
  height: 50px;
  background-color: #fff;
}
.outer .header .itme {
  display: inline-block;
}

less的语法还是比价多的，这里不做详细介绍。主要是为了用到它的嵌套功能，逻辑性比较强。

相关推荐
Dragon Wu1 分钟前
前端框架 react 性能优化
前端·javascript·react.js·性能优化·前端框架·react
Gungnirss24 分钟前
前后端分离，后端拦截器无法获得前端请求的token
java·前端·token
五秒法则38 分钟前
从搭建uni-app+vue3工程开始
前端·vue.js·uni-app
风之舞_yjf44 分钟前
css基础(27)_行内、行内块元素之间的空白问题
前端·css
Kika写代码1 小时前
【基于轻量型架构的WEB开发】课程 第14章 SSM框架整合 Java EE企业级应用开发教程 Spring+SpringMVC+MyBatis
前端·架构·java-ee
WuMingf_1 小时前
CSS基础
前端·css
白水4651 小时前
基于官网的Vue-router安装（2024/11）
前端·vue.js·vue
白墨阳1 小时前
vue3:scss引用
前端·css·scss
小小优化师 anny1 小时前
纯CSS 写的一个树状触摸菜单
前端·css·css3
努力小贼1 小时前
Vue小项目（开发一个购物车）
前端·javascript·vue.js
热门推荐
01Docker 夺命连环 15 问02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04抖音的互联网架构05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07玄机平台应急响应—webshell查杀08使用MaxKB添加本地部署的Ollama大语言模型搭建智能聊天系统09RAG 实践- Ollama+RagFlow 部署本地知识库10国内外大模型汇总：Open AI大模型、Google大模型、Microsoft大模型、文心一言大模型、通义千问大模型、字节豆包大模型、智普清言大模型