CSS温习回顾篇

最新推荐文章于 2024-08-03 22:01:17 发布

Hui-1018

最新推荐文章于 2024-08-03 22:01:17 发布

阅读量228

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/King0217/article/details/112614452

版权

文章目录

前言
一、css基础篇
二、高级篇
总结

前言

小菜鸡的css学习之路…

一、css基础篇

1. 选择器

通用选择器（*）
标签选择器
类选择器
属性选择器
id选择器
并集选择器（逗号分隔）
后代选择器（空格分隔；直接后代使用>）
兄弟选择器（+ 或 ~）

<div class="container">
    <div>我是div</div>

    <div id="box">box -id </div>

    <div class="box1"> box -clss </div>

    <div shuxing="attr"> box -attr </div>

    <span>我是span</span>
    <div>
        <span>span 非直接后代 </span>
    </div>

</div>

通用选择器:

* {
        /*通用选择器 页面所有的元素字体颜色都是蓝色*/
        color: blue;
    }

在这里插入图片描述

标签选择器

    div{
        color: blue;
    }
    span{
        color: red;
    }

在这里插入图片描述

类选择器

    .box1 {
        color: blue;
    }

在这里插入图片描述

属性选择器

    div[shuxing] {color:blue;}

    /*
    还可以用下面方式
    只希望shuxing = attr 的div为蓝色*/

    div[shuxing='attr']{
        color: blue;
    }

在这里插入图片描述

id选择器

    #box{
        color: blue;
    }

在这里插入图片描述

并集选择器 ）各个选择器通过逗号连接而成的

    #box, .box1, div[shuxing], h1 {
        color: blue;
    }

在这里插入图片描述

后代选择器 使用空格隔开，指包含的所有元素

    .container span{
        color: blue;
    }

在这里插入图片描述

直接后代选择器 使用符号 ‘ > ’，指包含的第一层

    .container>span{
        color: blue;
    }

兄弟选择器 选择紧接在某个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

    div+span{
        color: blue;
    }

在这里插入图片描述

1.1 优先级

选择器权值：

* ：0
标签：1
类：10
属性：10
伪类/伪元素：10
id：100
important：1000

优先级原则：
选择器权值加到一起大的优先；权值相同，后定义的优先。

一般优先级：
important > 内联 > id > 类|伪类|伪元素|属性 > 标签 > * > 继承

如下，权值越大，优先级越高。所以字体颜色为：plum

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="index.js"></script>
</head>
<body>
<div class="container">
    <!--权值 -->
    <div id="box" class="box1">测试优先级</div>
</div>

</body>
<style>
    *{
        /*权值：0*/
        color: darkgrey;
    }
    div{
        /*权值1*/
        color: #29920d ;
    }
    .box1{
        /*权值：100*/
        color: #5b5b5b;
    }
    #box{
        /*权值：10*/
        color: chartreuse;
    }

    div{
       /* 权值：1+1000 = 1001*/
       color: plum !important;
    }
</style>

</html>

效果：

在这里插入图片描述

2. 布局

布局与html标签类型有密不可分的关系，所以我们先熟悉下基本标签类型和特点。

2.1 标签类型

块级标签：

div p ul li form h1…h6 hr table
特点：自己独占一行，就像一个段落，可以随时改变宽度或高度

行内元素：

span a big br em label
特点：：又叫内联标签，不会自己独占一行，顺序一直往后排。设置宽高无效

行内块级元素：

input、img
特点：可以在一行，能设置宽高（结合块级和行内元素的优点）

热身练习：

1. 行内元素水平垂直居中：

<div class="container">
    <span> 我是行内元素span </span>
</div>

.container {
        width: 300px;
        height: 300px;
        background: blue;
        text-align: center;/*行内元素水平居中*/
        line-height: 300px; /*行内元素垂直居中，行高===width*/
    }
    span {
        background: #29920d;
        padding: 2px;
    }

效果：
在这里插入图片描述

2. 块级元素水平垂直居中：
块级元素水平居中使用margin：0 auto；垂直居中就需要使用相对布局（口诀：子绝父相）。所以这里水平垂直居中就使用相对布局

<div class="container">
    <div class="box"></div>
</div>

.container {
        width: 300px;
        height: 300px;
        background: blue;
        position: relative;
    }

    .box {
        width: 100px;
        height: 100px;
        background: #29920d;
        margin: 0 auto; /*块级元素水平居中，使用了定位，这个样式就可以删掉了*/
        vertical-align: bottom;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /*减去自身宽高，向左上平移自身一半 ,
        也可以使用 top: calc(50% - 50px);left: calc(50% - 50px); */
    }

效果：
在这里插入图片描述

3. 行内块级元素水平垂直居中：

<div class="container">
    <img src="./timg.jpg" alt="">
</div>

    .container {
        width: 300px;
        height: 300px;
        background: blue;
        /*水平居中*/
        text-align: center;
        /*table-cell 和 middle 设置垂直居中*/
        display: table-cell;
        vertical-align: middle;
    }

    img {
        width: 100px;
        height: 100px;
    }

效果：
在这里插入图片描述

2.2 盒模型模式

标准盒模型: box-sizing:content-box (默认)
怪异盒模型: box-sizing:border-box

<div class="container">
    <div class="box"></div>
    <div class="box box-sizing"></div>
</div>

.box {
        width: 50px;
        height: 50px;
        padding: 5px;
        background: #29920d;
        border: 5px solid #000;
        margin: 10px;
    }

    .box-sizing {
        box-sizing: border-box;
    }

效果如下：

标准盒模型：盒子内容大小就是所给宽高，pading，boder，margin，都是往外扩充。实际空间大小大于50*50.
如图：50+5+5+10 = 70。

怪异盒模型：盒子内容大小小于所给宽高，外加pading boder margin，刚好等于50*50.。如图：30+5+5+10=50.

在这里插入图片描述

2.3 定位

相对定位relative

特点：

设置相对定位relative，如果不设置偏移量元素不会发生任何改变。
相对定位元素相对于自身在文档流中的位置来定位
相对定位不会脱离文档流
.相对定位不会改变元素性质，如：块级还是块级，内联还是内联
相对定位元素会提升一个层级

绝对定位 absolute：

特点：

设置绝对定位absolute，如果不设置偏移量元素不会发生改变。
绝对定位的元素是相对于他最近的开启了定位的祖先元素进行定位，如果都没开启定位，则相对于浏览器窗口进行定位。
绝对定位的元素完全脱了文档流
绝对定位会改变元素的性质，内联变块级元素，块的高度和宽度都被内容撑开，并且不独占一行。
绝对定位会使元素提升一个层级。

固定定位：

特点：

固定定位是一种特殊的绝对定位，特点大部分和绝对定位一样。
相对于浏览器窗口进行定位，并且不会随着滚动条滚动而滚动。

练习：

相对定位和绝对定位练习：

<div class="container">
    <div class="box1">box1

        <div class="box5">box5</div>
    </div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
</div>

body {
        margin: 80px;
        background: darkmagenta;
    }

    .box1 {
        width: 50px;
        height: 50px;
        background: #29920d;
        position: relative;
        top: 20px;
        left: 20px;
    }

    .box2 {
        width: 50px;
        height: 50px;
        background: #5b5b5b;
        /*这里box2祖先元素没有定位元素，所以相对body定位*/
        position: absolute;
        top: 30px;
        left: 30px;
    }

    .box3 {
        width: 50px;
        height: 50px;
        background: blue;
    }

    .box4 {
        width: 50px;
        height: 50px;
        background: chartreuse;
    }

    .box5 {
        width: 50px;
        height: 50px;
        background: darkorchid;
        /*这里box2祖先元素box1有定位元素 ，所以相对于box1绝对定位*/
        position: absolute;
        top: 30px;
        left: 30px;
    }

效果：
在这里插入图片描述

固定定位练习：

<div class="container">
    <div class="box1">box1

    </div>
    <div class="box5">我的位置是固定的相对于浏览器窗口</div>
</div>

    .box1{
        height: 2000px;
        background: darkorchid;
    }

    .box5 {
        width: 60px;
        height: 200px;
        background: red;
        position: fixed;
        right: 60px;
        bottom: 80px;
    }

效果：
在这里插入图片描述

二、高级篇

1. 字体图标

这里讲述使用iconfont，生成字体图标，下载本地使用或者在线引用

首先登陆 iconfont，点击资源管理 - 我的项目 - 新建项目。

在这里插入图片描述

新建页面如下，填写好信息后，点击新建：
在这里插入图片描述

然后进入图标库，添加喜欢的图标到购物车

在这里插入图片描述

从购物车添加至项目，自动跳转至我的项目
在我的项目中，生成在线链接或者下载资源到本地
在线引用演示： 类名icon-arrow-double-left，可以在生成的样式中找到。

效果：
本地下载引用：下载后拷贝资源到项目，结构如下：

在这里插入图片描述
iconfont.css如下：

效果：
在这里插入图片描述

至此，字体图标引用方法讲述完毕，非常简单。

2. 伸缩布局（flex）

flex-direction
控制主轴方向，取值：row(默认) | row-reverse | column | column-reverse
justify-content
主轴排列方式，取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
align-items
纵轴排列方式，取值：flex-start | flex-end | center | baseline | stretch(默认)
flex-wrap
用于控制项目是否换行，nowrap表示不换行，取值：nowrap(默认) | wrap | wrap-reverse
flex
flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写。
用法：平分空间，等比缩小直接使用 flex：1 即可

3. 圣杯布局

三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不变，即使页面宽度变小，也不影响我们的浏览。可以给中间栏加一个最小宽度。

特点：中间栏为两边腾开位置。

预览效果：

在这里插入图片描述
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
<style>

    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .container {
        min-width: 400px;
        height: 200px;
        background: blue;
        /*预留左右位置*/
        padding: 0 200px;
    }

    .main {
        background: green;
        width: 100%;
        height: 200px;
        float: left;
    }

    .left, .right {
        background: red;
        width: 200px;
        height: 300px;
        float: left;
    }

    .left {
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .right {
        margin-left: -200px;
        position: relative;
        right: -200px;
    }

</style>

</html>

4. 双飞翼布局

与圣杯布局相比HTML的结构不一样，在中间栏多了一个内容栏，设置内容栏的margin，为两边腾开位置。左右栏不需要使用定位。

特点：两边栏不占中间栏区域

效果：
在这里插入图片描述
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="main">
<!--        差异点：多了一层div-->
        <div class="main-content">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
<style>

    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .container {
        min-width: 400px;
        height: 200px;
        background: blue;
    }

    .main {
        background: green;
        width: 100%;
        height: 200px;
        float: left;
    }
    /*和圣杯布局的不同点*/
    .main-content {
        margin: 0 200px;
    }

    .left, .right {
        background: red;
        width: 200px;
        height: 300px;
        float: left;
    }

    .left {
      /*此处不需要使用定位*/
        margin-left: -100%;
    }

    .right {
        margin-left: -200px;
    }

</style>

</html>

5. 动画

基础动画：移动缩放旋转倾斜
注：transition 过渡动画要作用于什么标签。就写在改标签的样式中。

在这里插入图片描述

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--css 动画 -->
<div class="container">

    <div class="move"> 移动</div>
    <div class="zoom"> 缩放</div>
    <div class="rotate"> 旋转</div>
    <div class="skew"> 倾斜</div>


</div>
</body>
<style>
    .container {
        display: flex;
        margin: 100px;
    }

    .container div {
        width: 80px;
        height: 80px;
        margin-right: 200px;
        text-align: center;
        line-height: 80px;
    }

    .container div:nth-child(1) {
        background: #df5000;
    }

    .container div:nth-child(2) {
        background: #0077aa;
    }

    .container div:nth-child(3) {
        background: #b3d4fc;
    }

    .container div:nth-child(4) {
        background: yellow;
    }


    /*移动*/
    .move {
        /*过渡动画 可以简写 也可以同时设置4个属性*/
        /*transition: property duration timing-function delay;*/
        /*transition-property	规定设置过渡效果的 CSS 属性的名称。*/
        /*transition-duration	规定完成过渡效果需要多少秒或毫秒。*/
        /*transition-timing-function	规定速度效果的速度曲线。*/
        /*transition-delay	定义过渡效果何时开始。*/
        transition: all 500ms linear;
    }

    .move:active {
        transform: translate(100px, 100px);
    }

    /*缩放*/
    .zoom {
        transition: all 500ms linear;
    }

    .zoom:active {
        transform: scale(1.5);
    }

    /*旋转*/
    .rotate {
        transition: all 500ms linear;
        /*选转原点，此处设置在右下角*/
        transform-origin: right bottom;
    }

    .rotate:active {
        /*
        rotateX:沿x轴选转
        rotateY:沿Y轴选转
        */
        transform: rotate(360deg);
    }


    /*倾斜*/
    .skew {
        transition: all 500ms linear;
    }

    .skew:active {
        transform: skewX(45deg);
    }


</style>

</html>

自定义动画
数字跑马灯效果

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--css 动画 -->
<nav>
    <ul>
        <li><span>1</span></li>
        <li><span>2</span></li>
        <li><span>3</span></li>
        <li><span>4</span></li>
        <li><span>5</span></li>
        <li><span>6</span></li>
        <li><span>7</span></li>
        <li><span>8</span></li>

        <li><span>1</span></li>
        <li><span>2</span></li>
        <li><span>3</span></li>
        <li><span>4</span></li>
        <li><span>5</span></li>
        <li><span>6</span></li>
        <li><span>7</span></li>
        <li><span>8</span></li>

    </ul>

</nav>


</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    li{
        list-style: none;
        float: left;
        width: 80px;
        text-align: center;
    }


    li:nth-child(1) {
        background: #df5000;
    }

    li:nth-child(2) {
        background: blue;
    }

    li:nth-child(3) {
        background: yellow;
    }

    li:nth-child(4) {
        background: #dadada;
    }

    li:nth-child(5) {
        background: #929292;
    }

    li:nth-child(6) {
        background: #DD4A68;
    }

    li:nth-child(7) {
        background: #333333;
    }

    li:nth-child(8) {
        background: #ee9900;
    }
    li:nth-child(9) {
        background: #df5000;
    }

    li:nth-child(10) {
        background: blue;
    }

    li:nth-child(11) {
        background: yellow;
    }

    li:nth-child(12) {
        background: #dadada;
    }

    li:nth-child(13) {
        background: #929292;
    }

    li:nth-child(14) {
        background: #DD4A68;
    }

    li:nth-child(15) {
        background: #333333;
    }

    li:nth-child(16) {
        background: #ee9900;
    }

    nav{
        width: 800px;
        overflow: hidden;
        margin: 100px;
    }
    nav li{
        width: 100px;
        overflow: hidden;

    }

    nav ul{
        width: 200%;
        animation: moving 5s linear infinite;
    }

    @keyframes moving {
        from {
            transform: translateX(0px)
        }
        to {
            transform: translateX(-800px);
        }
    }
</style>

</html>

6. 媒体介质

@media 规则允许在相同样式表为不同媒体设置不同的样式。

效果演示：
在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="page">
    我是文本内容
</div>
</body>
<style>
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        font-size: 10px;
    }

    .page {
        width: 100%;
        height: 100%;
        line-height: 200px;
        background: blue;
        text-align: center;
        font-size: 1.8rem;
        color: white;

    }


    /**
     屏幕宽度大于1000px
     */
    @media screen and (min-width: 1000px) {
        .page {
            background: green;
            font-size: 2.2rem;
        }

    }

    /**
     屏幕宽度 800px-1000px
     */
    @media screen and (min-width: 800px) and  (max-width: 1000px) {
        .page {
            background: red;
            font-size: 2.0rem;
        }

    }
    /**
     屏幕宽度 600px-800px
     */
    @media screen and (min-width: 600px) and  (max-width: 800px) {
        .page {
            background: #0086b3;
            font-size: 1.8rem;
        }
    }

    /**
     屏幕宽度 小于600
     */
    @media screen and (max-width: 600px) {
        .page {
            background: gray;
            font-size: 1.6rem;
        }
    }
</style>

</html>

总结

每天记录一点，从小小菜鸟变小菜鸟！！！

Hui-1018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS温习回顾篇

文章目录前言一、css基础篇选择器优先级二、高级篇1.引入库2.读入数据总结前言小菜鸡的css学习之路…一、css基础篇选择器通用选择器（*）标签选择器类选择器属性选择器id选择器复合选择器群组选择器（逗号分隔）后代选择器（空格分隔；直接后代使用>）兄弟选择器（+ 或 ~）优先级选择器权值：* ：0标签：1类：10属性：10伪类/伪元素：10id：100important：1000优先级原则：选择器权值加到一起大的优先；权值相同，后
复制链接

扫一扫