CSS学习2

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

一、伪类选择器

1.a标签的伪类

<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>
    <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 针对所有范围

p:first-child #表示 匹配所有子元素中第一个元素是不是p标签

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

实例：

<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>
    <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>
    <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>
    <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>
    <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>
    <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>
    <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>
    <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>
    <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>
    <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>
    <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.文本居中

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

# 文本水平居中
text-align: center;

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

2.图片居中

2.1 方式1: 背景形式

以背景图片的方式调整图片的位置
居中显示：

<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参数了

background-position-x
background-position-y

2.2 方式2：行内元素形式

<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>
    <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>
<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>
<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>
<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>
<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代码

* {
    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.相对定位

 position: relative;
 top:
 left:
 right:
 bottom:

特点：
1.元素会相对于自己原理的元素进行移动
2.相对定位不会脱离文档流，不会影响其它的文档的位置
3.定位的元素，层级会比其它元素高。但是层级高不是浮动。
4.应用场景：适合给元素微调，因为它不会影响其它元素的位置

2.绝对定位

position: absolute;
top:
left:
right:
bottom:

特点：
1.绝对定位会脱离文档流，和浮动一样，直接漂浮起来。后边的元素就会顶替它的位置。但是不一样的是，绝对定位不会像浮动那样，产生文字环绕效果。
2.如果绝对定位元素的父元素"没有定位"，它的参考对象就是浏览器左上角。
如果绝对定位元素的父元素"有定位",它的参考对象就是父元素的左上角。

3.相对和绝对配合使用

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

4.固定定位

特点：

1.固定定位也会脱离文档流
2.固定定位的参考点永远是"视口"

实例：

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

5.定位块元素居中

方案1：通过计算

通过计算让块元素居中

<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>
<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>
<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 变量

设置变量语法：

@变量名:值

实例：

@color:red;

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

2.2 less嵌套

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

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

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

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

保存之后css文件的效果

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