CSS3入门

最新推荐文章于 2023-07-14 18:08:32 发布
最新推荐文章于 2023-07-14 18:08:32 发布
阅读量130 收藏
点赞数
分类专栏： CSS 文章标签： java 开发语言 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50860184/article/details/123286882
版权

CSS3入门

CSS3入门

CSS

什么是CSS

  • HTML + CSS +JavaScriptlai
    • 结构 + 表现 + 交互
  • CSS选择器（重点 + 难点）
  • 美化网页（文字，阴影，超链接，列表，渐变…）
  • 盒子模型
  • 浮动
  • 定位
  • 网页动画（特效）
    • 菜鸟教程

简介与发展史

Cascading Style Sheet 层叠级联样式表

CSS：表现层（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

在这里插入图片描述

快速入门

  • style

  • 练习格式

在这里插入图片描述

  • 基本入门

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--规范 <style> 可以编写css的代码，每一个声明最好使用分号结尾
  语法：
  选择器{
    声明1；
    声明2；
    声明3；
  }

-->
    <style>
      h1{
        color : red;
      }
    </style>


</head>
<body>




<h1>我是标题</h1>



</body>
</html>

  • 建议使用这种规范——分离

在这里插入图片描述

  • 优势

    • 内容与表现分离
    • 网页结构变现统一，可以实现复用
    • 样式十分的丰富
    • 建议使用独立于html的css文件
    • 利用SEO，容易被搜索引擎收录

CSS的导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>

<!--内部样式-->
    <style>
        h1{
          color: green;
        }
    </style>

<!--外部样式-->
  <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--优先级：就近原则-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>

</body>
</html>

/*外部样式*/
h1{
    color: blue;
}

  • 拓展：外部样式两种写法

    • 链接式

      <!--外部样式-->
  <link rel="stylesheet" href="css/style.css">

    • 导入式：（CSS 2.1特有）

      <!--导入式：先展现结构再渲染-->
    <style>
        @import url("css/style.css");
    </style>

    • 区别

      • 语法结构不同
        • 是 html 标签，只能放入 html源代码中
        • improt 可以看作 css样式，引入css样式功能

选择器

  • 作用：选择页面上的某一个或者某一类元素

基本选择器

  • 标签选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style>
        /*标签选择器，会选择到页面上所有的这个标签*/
        h1{
            color: red;
            blackground: #3cbda6;
            border-radius: 24px;
        }

        p{
            font-size: 80px;
        }
    </style>

</head>
<body>

<h1>学CSS</h1>
<h1>学CSS</h1>
<p>听网课</p>

</body>
</html>

  • 类选择器 class

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>

    <style>
        /*类选择器格式    .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用

        */
        .zy{
            color: blue;
        }
        .zxx{
            color: green;
        }
    </style>

</head>
<body>

<h1 class="zy">标题1</h1>
<h1 class="zxx">标题2</h1>
<h1 class="zy">标题3</h1>

<p class="zy">zy</p>

</body>
</html>

  • Id选择器

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Id选择器</title>

    <style>
      /*id选择器：id必须保证全局唯一
        #id名称{}
       */
      #zy{
        color: yellow;
      }
      .style1{
          color: blue;
      }
      h1{
          color: green;
      }
    </style>


</head>
<body>

<h1 id="zy" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

  • 优先级：不遵循就近原则

    • id选择器 > class选择器 > 标签选择器

层次选择器

  • 后代选择器：在某个元素的后面后面的所有

    /*后代选择器*/
        body p{
          background: red;

  • 子选择器：只有当前选择的元素的下一代

    /*子选择器*/
        body>p{
            background: blue;
        }

  • 相邻兄弟选择器：同级向下相邻的兄弟元素，只有一个

    /*相邻兄弟选择器：只有一个*/
        .active + p{
            background: yellow;
        }

  • 通用选择器：当前选中元素的向下的所有兄弟元素

    /*通用兄弟选择器*/
        .active ~ p{
            background: #3cbda6;
        }

结构伪类选择器

  • 伪类：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--避免使用 class，id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
          background: red;
        }

        /*ul的最后一个子元素*/
        ul li:last-child{
          background: blue;
        }

        /*(了解即可)选中p1，定位到父元素，选择当前的第一元素，(按顺序)
        选择当前p元素的父亲元素，选中父级元素的第一个,并且是当前元素
        */
        p:nth-child(1){
          background: yellow;
        }

        /*(了解即可)选中父元素下的p元素的第二个，(按类型)*/
        p:nth-of-type(2){
            background: green;
        }

    </style>
</head>
<body>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
  </ul>

</body>
</html>

在这里插入图片描述

属性选择器（常用）

  • = 绝对等于

  • *= 包含这个元素

  • ^= 以这个元素开头

  • $= 以这个元素结尾

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;/*去下划线*/
            margin-right: 5px;/*外边距，向右偏移5px*/
            font: bold 20px/50px Arial;

        }
        /*选中存在id属性的元素   a[]{}*/
        a[id]{
            background: yellow;
        }

        /*选中id为first的属性*/
        a[id=first]{
            background: green;
        }

        /*选中 class 中有links的元素
        =   绝对等于
        *=  指包含这个元素
        ^=  以这个元素开头
        $=  以这个元素结尾
        */
        a[class*="links"]{
            background: red;
        }

        /*选中 href 中以http开头的元素*/
        a[href^=http]{
            background: aqua;
        }

        /*选中 href 中以pdf结尾的元素*/
        a[href$=pdf]{
            background: brown;
        }




    </style>

</head>
<body>

<p class="demo">
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="" class="links item active" target="_blank" title="test">2</a>
  <a href="image/123.html" class="links item">3</a>
  <a href="image/123.png" class="links item">4</a>
  <a href="image/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/abc.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.doc" class="links item last">10</a>
</p>



</body>
</html>

美化网页元素

为什么要美化网页

  • 有效传递信息

  • 美化网页，吸引用户

  • 凸显页面的主题

  • 提高用户体验

  • span标签：重点突出的字，使用span标签

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #title1{
        font-size: 50px;
      }
    </style>


</head>
<body>

欢迎学习 <span id="title1">CSS</span>

</body>
</html>

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <!--
      font-family:  字体
      font-size:    字体大小
      font-weigth:  字体粗细
      color:        字体颜色
  -->
  <style>
      body{
        font-family: "Arial Black",楷体;
        color: #a13d30;
      }
      h1{
        font-size: 50px;
      }
      .p1{
        font-weight: bold;
      }
  </style>

</head>
<body>

<h1>故事介绍</h1>

<p class="p1">
  这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p>
  在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

<p>
    I have searched a thousand years,
  　 And I have cried a thousand tears.
  　 I found everything I need,
  　 You are everything to me.
</p>



</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
<!--写在一个font里面即可-->
  <style>
    p{
      font: oblique lighter 12px "楷体";
    }
  </style>
</head>
<body>

<p>
  在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

</body>
</html>

文本样式

  • 颜色 color rgb rgba

  • 文本对齐方式 text-align = center

  • 首行缩进 text-indent: 2em

  • 行高 line-height

  • 装饰 text-decoration

  • 文本图片水平对齐 vertical-align: middle

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

<!--
颜色：
  单词
  RBG 0~F
  RGBA  A   透明度 0~1
text-align：   排版  居中
text-indent: 2em;   段落首行缩进
hight       块高
line-hight  行高

行高和块的高度一致
-->
  <style>
      h1{
        color: red;
        text-align: center;
      }
      .p1{
        text-indent: 2em;
      }
      .p3{
        background: #0000FF;
        height: 300px;
        line-height: 300px;
      }

      /*下划线*/
      .l1{
        text-decoration: underline;
      }
      /*中划线*/
      .l2{
        text-decoration: line-through;
      }
      /*上划线*/
      .l3{
        text-decoration: overline;
      }
      /*a标签自带下划线，若想去除，设置为none*/
      a{
        text-decoration: none;
      }
      /*水平对齐  参照物   要a，b两个*/
      img,span{
        vertical-align: middle;
      }

  </style>

</head>
<body>

<a href="">123</a>

<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>

<p>
  <img src="images/头像.png" alt="">
  <span>zy头像</span>
</p>

<h1>故事介绍</h1>

<p class="p1">
  这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p class="p3">
  在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

<p>
  I have searched a thousand years,
  　 And I have cried a thousand tears.
  　 I found everything I need,
  　 You are everything to me.
</p>



</body>
</html>

阴影

  • 水平偏移向右为正

  • 垂直偏移向下为正

    /*text-shadow:  阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #shadow{
          text-shadow: blue 10px 10px 10px;
        }

超链接伪类

  • 正常情况下

    • a , a:hover
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*没有访问到的颜色*/
        a:link{
          color: brown;
        }

        /*已经访问过的颜色*/
         a:visited{
          color: red;
         }
        /*默认的状态*/
        a{
          text-decoration: none;

        }
        /*鼠标悬浮的状态*/
        a:hover{
          color: orange;
          font-size: 25px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
          color: green;
        }
        /*text-shadow:  阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #shadow{
          text-shadow: blue 10px 10px 10px;
        }


    </style>

</head>
<body>

<a href="">
    <img src="images/头像.png" alt="">
</a>
<p>
    <a href="#">zy头像</a>
</p>
<p>
    <a href="">来源：zy</a>
</p>
<p id="shadow">
    zyzyzzy
</p>

</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个人护肤</a></li>
        <li><a href="#">礼物箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>


</body>
</html>

#nav{
    width: 300px;
    background: #a0a0a0;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/* ul li*/
/*
list-style:
none    去掉远原点
circle  空心圆
decimal 数字
square  正方形
 */

ul{
    background: #a0a0a0;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover{
    color: orange;
    text-decoration: underline;
}

背景

  • 背景颜色
  • 背景图片
    • background-image
    • background-repeat
    • background-position
    • background
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
      div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("images/头像.png");
        /*默认是全部平铺的*/
      }
      .div1{
        background-repeat: repeat-x;
      }
      .div2{
        background-repeat: repeat-y;
      }
      .div3{
        background-repeat: no-repeat;
      }
  </style>

</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

background-image: url("../../6.背景/images/头像.png");
background-repeat: no-repeat;
background-position: 245px 2px;

/*颜色，图片，图片位置，平铺方式*/
background: red url("../../6.背景/images/头像.png") 270px 10px no-repeat;

渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--径向渐变，圆形渐变-->
  <style>
    body{
      background: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
    }
  </style>
</head>
<body>

</body>
</html>

盒子模型

在这里插入图片描述

  • 什么是盒子
    • margin：外边距
    • padding：内边距
    • border：边框

边框

  • 边框的粗细

  • 边框的样式

  • 边框的颜色

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*border 粗细，样式，颜色*/
    #box{
      width: 300px;
      border: 1px solid red;
    }
    h2{
      font-size: 16px;
      background-color: powderblue;
      line-height: 30px;
      margin: 0;
    }
    form{
      background: #3cbda6;
    }
    div:nth-child(1) input{
      border: 3px solid black;
    }
    div:nth-child(2) input{
      border: 3px dashed yellow;
    }
    div:nth-child(3) input{
      border: 2px solid green;
    }

  </style>
</head>
<body>

<div id="box">
  <h2>会员登陆</h2>
  <form action="#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="text">
    </div>
    <div>
      <span>验证码：</span>
      <input type="text">
    </div>
  </form>  
  
  
</div>

</body>
</html>

内外边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<!--外边距的使用：居中元素 margin: 0 auto ;-->
  <style>
    /*border 粗细，样式，颜色*/
    #box{
      width: 300px;
      border: 1px solid red;
      margin: 0 auto ;
    }
    /*
    margin: 0;  上下左右都为0
    margin: 0 1px;  上下为0，左右为1
    margin: 0 1px 2px;  上为0，左右为1px，下为2px
    margin: 0 1px 2px 3px; 上为0，右为1pz，下为2px，左为3px  (顺时针)
     */
    h2{
      font-size: 16px;
      background-color: powderblue;
      line-height: 30px;
      margin: 0;
    }
    form{
      background: #3cbda6;
    }
    input{
      border: 1px solid ;
    }
  </style>
</head>
<body>

<div id="box">
  <h2>会员登陆</h2>
  <form action="#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="text">
    </div>
    <div>
      <span>验证码：</span>
      <input type="text">
    </div>
  </form>


</div>

</body>
</html>
  • 盒子计算方式
    • margin + border + padding + 内容宽度

圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--左上  右上  右下  左下  顺时针方向-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px 20px 10px 5px;
        }
    </style>
</head>
<body>

<h2></h2>

<div>

</div>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--圆圈： 圆角 = 半径 半圆同理-->
  <style>
    div{
      width: 100px;
      height: 50px;
      margin: 30px;
      background: red;
      border-radius: 50px 50px 0px 0px;
    }
    img{
        border-radius: 160px;
    }
  </style>

</head>
<body>

<div></div>

<img src="images/头像.png" alt="">

</body>
</html>

阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    img{
      margin: 0 auto;
      border-radius: 160px;
      box-shadow: 10px 10px 100px yellow;
    }

  </style>

</head>
<body>

<div style="width: 500px;height: 1000px; margin: 0 auto;">
  <div style="text-align: center">
    <img src="images/头像.png" alt="" >
  </div>
</div>


</body>
</html>

浮动

标准文档流

  • 块级元素：独占一行

    h1~h6	p	div		列表...

  • 行内元素：不独占一行

    span	a	img		strong...

display

  • 也是实现一种实现行内元素排列的一种方式，但是我们很多情况都是用float
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
block 块元素
line  行内元素
inline-block  是块元素，但是可以内联，在同一行
none
-->
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
  </style>

</head>
<body>

<div>div块元素</div>

<span>span行内元素</span>


</body>
</html>

float

  • 左右浮动 float

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>

<div id="picture">
  <div class="p01"><img src="images/1.png" alt=""></div>
  <div class="p02"><img src="images/头像.png" alt=""></div>
  <div class="p03"><img src="images/照片.jpg" alt=""></div>
  <div class="p04">
    浮动的盒子可以想做浮动，可以向右浮动，直到它的外摆能源碰到包含框或另一个盒子为止
  </div>
</div>

</body>
</html>

    div{
    margin: 10px;
    padding: 5px;
}
#picture{
    border: 1px #000 solid;
}
.p01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: right;
}
.p02{
    border: 1px #00F dashed;
    display: inline-block;
    float: right;
}
.p03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;

}
.p04{
    border: 1px #666 dashed;
    display: inline-block;
    float: right;
}

父级边框塌陷问题

  • clear
/*clear
right   右侧不允许有浮动元素
left    左侧不允许有浮动元素
both    两侧不允许有浮动元素
none
*/

  • 解决方案

    • 增加父级元素的高度

      #picture{
    border: 1px #000 solid;
    height: 800px;
}

    • 增加一个空的di标签，清除浮动

      <div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

    • overflow

      在父级元素中增加一个	overflow：hidden

      #picture{
    border: 1px #000 solid;
    overflow: hidden;
}

    • 父类添加一个伪类

      #picture:after{
    content: '';
    display: block;
    clear: both;
}

    • 浮动元素后面增加空div

      • 简单，但代码中尽量避免空的div

    • 设置父类元素高度

      • 简单，但元素如果有个固定的高度，就会被限制

    • overflow

      • 简单，但下拉的一些场景避免使用

    • 父类添加一个伪类：after (推荐)

      • 写法稍微复杂一点，但没有副作用，推荐使用

对比

  • display
    • 方向不可控制
  • float
    • 浮动起来会脱离标准文档流，需要解决父级边框塌陷问题

定位

相对定位

  • 相对定位：position：relative
  • 相对于原来的位置，进行指定的偏移，相对定位时，它任然在标准文档流中，原来的位置会被保留
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<!--相对定位
相对于自己原来的位置进行偏移
-->
  <style>
    body{
      padding: 20px;
    }
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
      border: 1px  solid #666;
      padding: 0;
    }
    #first{
      background-color: #a13d30;
      border: 1px  dashed #b27530;
      position: relative;/*相对定位 上下左右*/
      top: -20px;/*距离上方减20，负值向上*/
      left: 20px;/*距离左方减20，负值向右*/
    }
    #second{
      background-color: #255099;
      border: 1px  dashed #255066;
    }
    #third{
      background-color: #1c6699;
      border: 1px  solid #1c6615;
      position: relative;
      bottom: 10px;/*距离下方加10，正值向上*/
      right: 10px;/*距离右方加10，正值向左*/

    }
  </style>
</head>
<body>

<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>

</body>
</html>

绝对定位

  • 相对于父级或浏览器的位置，进行指定的偏移，绝对定位时，它不在标准文档流中，原来的位置不会被保留

    • 没有父级元素定位的前提下，相对于浏览器定位
    • 若父级元素存在定位，我们通常会相对于父级元素进行偏移
    • 在父级元素范围内移动
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px  solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px  dashed #b27530;
        }
        #second{
            background-color: #255099;
            border: 1px  dashed #255066;
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: #1c6699;
            border: 1px  solid #1c6615;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{
      height: 1000px;
    }
    div:nth-child(1){/*绝对定位，相对于浏览器*/
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    div:nth-child(2){/*fixed 固定定位*/
      width: 50px;
      height: 50px;
      background: yellow;
      position: fixed;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

z-index以及背景透明度

  • 图层

    • z-index

  • 背景透明度

    • opacity
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/头像.png" alt=""></li>
        <li class="tipText">zyzyzzy</li>
        <li class="tipBg"></li>
        <li>时间2022-3-4</li>
        <li>地球</li>
    </ul>
</div>

</body>
</html>

    #content{
    width: 320px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;

}
.tipText,.tipBg{
    position: absolute;
    width: 320px;
    height: 25px;
    top: 290px;
}
.tipText{
    /*z-index: 999;*/
    color: white;
}
.tipBg{
    background: #000;
    opacity: 0.5;
}

笔记

CSS3入门.md网盘链接
提取码: iuds

点击跳转狂神说
视频详解CSS3

Zy丶zzZ_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS】CSS字体样式【CSS基础知识详解】
@花无缺
11-08 1万+
文字是网页界面上最常见的元素，而文字的字体、大小和文字样式等都可以通过CSS来设置。在 CSS 中，有五个通用字型： 衬线字体（Serif） 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感 特点：文字笔画粗细不均匀，并且首尾有笔锋装饰 场景：报刊书籍中应用广泛 常见该系列字体：宋体、Times New Roman 无衬线字体（Sans-serif）字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。 特点：文字笔画粗细均匀
【CSS】CSS 总结 ② ( CSS 字体文本样式 - 大小 / 字体 / 粗细 / 斜体 / 颜色 / 对齐 | CSS 标签显示模式 - 块级元素 / 行内元素 / 行内块元素 ) ★
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-06 2294
一、CSS 字体文本样式 1、CSS 字体设置 2、CSS 字体设置综合写法 3、CSS 文本样式 二、CSS 标签显示模式 1、块级元素 2、行内元素 3、行内块元素 4、块级元素 / 行内元素 / 行内块元素 相互转换
7、前端开发：CSS知识总结——字体样式
不迁怒，不贰过。小知识，大智慧。
08-16 4542
字体设置也是网页设计中的重要组成部分，合适的字体不仅会使页面更加美观，也可以提升用户体验。CSS 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。...
CSS字体的单位
wyt20040310的博客
10-10 392
相对单位，它是只相对于根标签（html）的字体大小而设置，也是1rem=1个html的font-size。相对单位，它是相对于其父元素内字体大小而设置的，也就是1em=父元素1个font-size，实际上是屏幕上的一个个小点，100px，100个小点，这个点，正常情况我们是看不到，html的默认字体大小是16px，有些浏览器有最小的字体大小，一般是10-12px。如果父元素没有字体大小，它就会继承祖先元素的字体大小，如果祖先元素没有设置，也是我们最常用的长度单位，它是固定单位。
CSS入门教程——字体
老梁的专栏
09-28 524
一文读懂 CSS 字体用法
HTML5+CSS3入门基础知识
12-29
HTML5+CSS3入门基础知识 HTML5 是下一代的 HTML 标准，旨在提高网页的可读性、可访问性和可维护性。CSS3 是最新的样式表语言标准，旨在提高网页的视觉效果和用户体验。本节课程将介绍 HTML5 和 CSS3 的基础知识，...
CCS+CSS3入门
09-26
CSS设计指南（第3版）(CSS入门)+图解CSS3核心技术与案例实战(CSS3入门)
CSS3入门课堂随堂笔记.zip
01-23
CSS3入门课堂笔记，希望对大家有所帮助，有所收获！！
CSS font-family 各字体一览表
热门推荐
吃不胖的程序猿历程
08-04 2万+
windows常见内置中文字体 字体中文名 字体英文名宋体                      SimSun（浏览器默认）黑体                      SimHei微软雅黑               Microsoft Yahei微软正黑体            Microsoft JhengHei楷体              ...
CSS样式代码大全
03-06
CSS 样式代码 集合大部分html属性 一目了然
常用CSS样式大全（超全面）
zy1992As的博客
02-28 1万+
14||字体||{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}5||垂直对齐||{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
css字体样式属性大全（内附实例）
weixin_45135068的博客
07-31 3571
目录 font-size：字号大小 font-family：字体 font-weight：字体粗细 font-style：字体风格 综合设置字体样式 font-size：字号大小 font-size 属性用于设置字体字号，该属性的值可以使用相对长度单位，也可以使用绝对单位长度，其中，相对单位比较常用，推荐使用像素单位px，绝对单位使用较少 可选参数值： xx-small|x-small|small|medium|large|x-large|xx-large|smaller|la
css样式
切躁切勇,伏枥藏锋
11-04 3862
字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: b...
CSS字体中英文名称对照表：如宋体对应SimSun
隔壁老王的博客
01-30 1968
　　在CSS文件中，我们常看到有些字体名称变成了乱码，这是由于编写者将中文字体的名字直接写成了中文，并且再上传或者拷贝复制的时候无意间变成了乱码。为了避免这种状况出现，在CSS文件中使用中文字体时，最好使用中文字体的英文名称，我们常用中文字体的英文名称对照表如下： Windows、Mac OS和Office自带的字体中英文对照表： 中文名 英文名 Unicode Unicode 2 ...
css字体样式代码大全_CSS属性设置 -- 字体样式
weixin_39742392的博客
11-29 9371
Ⅰ 字体样式font-weight: -- 文字粗细normalⅡ 文字风格font-style: -- 文字风格normalⅢ 字体大小一般是12px或13px或14px注意：1、通过font-size设置文字大小一定要带单位，即一定要写px2、如果设置成inherit表示继承父元素的字体大小值。<style> Ⅳ 文字字体font-famil...
css字体样式
pong_dong的博客
07-14 114
竖直方向的margin有塌陷的现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准。文本转换属性是用来指定在一个文本中的大写和小写字母。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。Padding（内边距） - 清除内容周围的区域。Border（边框） -边框周围的填充和内容。边框是受到盒子的背景颜色影响。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。Content（内容） - 盒子的内容，显示文本和图像。
常用css样式大全
m0_73442777的博客
06-17 184
本文将为你呈现一个全面的CSS常用样式大全，涵盖了各种常见的样式需求，包括文本样式、背景样式、盒模型样式、浮动与定位样式、动画效果和响应式布局等。你将学习如何使用CSS属性和选择器来设置字体样式、颜色、边框、阴影、过渡和变换等。
CSS字体、文本属性
qq_52301431的博客
03-24 2968
一、CSS字体属性 1、font-size：字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。 其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。 font-size:smaller; x-small; xx-small; small; large; larger; x-large; xx-large; 相对长度单位 说明（就是相对于电脑的屏幕分辨率） em 相对于当前对...
HTML CSS JS 入门
05-24
- CSS入门教程：https://www.w3school.com.cn/css/index.asp - MDN CSS文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS 3. JS: - JS入门教程：https://www.w3school.com.cn/js/index.asp - MDN JS文档：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值