文章目录

总结

在这里插入图片描述

1.什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
在这里插入图片描述

2.CSS发展史

CSS1.0
CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS3.0 圆角，阴影，动画…浏览器兼容性~

CSS的优势:
1、内容和表现分离
2、网页结构变现统一，可以实现复用
3、样式十分的丰富
4、建议使用独立于HTML的CSS文件
5、利用SEO，容易被搜索引擎收录！

3.快速入门

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>

在这里插入图片描述
index.html

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

<!-- 规范，<style>可以编写CSS的代码,每个声明最好使用分号结尾
     语法:
        选择器{
                声明1;
                声明2;
                声明3;
        }
  -->
<!--    <style>-->
<!--        h1{-->
<!--        color:red-->
<!--        }-->
<!--    </style>-->

  <link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1>我是标题</h1>

</body>
</html>

style.css

h1{  
 color:red 
 }

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

  <link rel="stylesheet" href="css/style.css">
  <!-- 内部样式   -->
  <style>
    h1{
      color:green;
    }
  </style>
</head>
<body>

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

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



</body>
</html>

拓展:外部样式两种写法
链接式：

<!-- 链接式-->
<link rel="stylesheet" href="css/style.css">

导入式
是CSS2.1

<!--  导入式-->
  <style>
    @import url("css/style.css");
  </style>

4.选择器

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

4.1基本选择器

1、标签选择器：选择一类标签标签{}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是标题</title>
  <style>
/*标签选择器，会选择到页面上所有的这个标签的元素 */
    h1{
      color:red;
      background: #b3d4fc;
      border-radius: 33px;
    }
  </style>
</head>
<body>

  <h1>晴天</h1>
  <h1>雨天</h1>
<p>都不如有你的那天</p>


</body>
</html>

2、类选择器 Class ：选择所有class 属性一致的标签，跨标签， .类名{}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是标题</title>

  <style>
    /*类选择器的格式  .class的名称{}
    好处，可以多个标签归类，是同一个class，可以复用*/
    .guan01{
      color:red;
      background: #b3d4fc;
      border-radius: 33px;
    }
    .guan02{
      color: blue;
      background: #b3d4fc;
      border-radius: 33px;
    }
  </style>
</head>
<body>

<h1 class="guan01">晴天</h1>
<h1 class="guan02">雨天</h1>
<p class="guan01">都不如有你的那天</p>



</body>
</html>

3、ID 选择器:全局唯一！ #id名{}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是标题</title>

  <style>
    /*类选择器的格式  .class的名称{}
    好处，可以多个标签归类，是同一个class，可以复用*/
    #guan01{
      color:red;
      background: #b3d4fc;
      border-radius: 33px;
    }
    .guan02{
      color: blue;
      background: #b3d4fc;
      border-radius: 33px;
    }
  </style>
</head>
<body>

<h1 id="guan01">晴天</h1>
<h1 class="guan02">雨天</h1>
<p class="guan02">都不如有你的那天</p>



</body>
</html>

优先级:id >class>标签

4.2 层次选择器

1、后代选择器:在某个元素后面祖爷爷爷爷爸爸我

  /*后代选择器*/
   body p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }

在这里插入图片描述
2、子选择器：一代，儿子

body>p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }

在这里插入图片描述

3、相邻兄弟选择器

.guan01 + p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }

在这里插入图片描述

4、通用选择器

 .guan01~p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
   /* p{
      background: aqua;
    }*/

   /*后代选择器*/
 /*  body p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }

*/
   /*子选择器*/
  /* body>p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }

   */
   /*相邻兄弟选择器:只选择一个，相邻（向下）*/
   /*.guan01 + p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }
   */
   /* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
   .guan01~p{
     color: blue;
     background: #b3d4fc;
     border-radius: 33px;
   }



  </style>
</head>
<body>

    <p>p1</p>
    <p class="guan01">p2</p>
    <p>p3</p>
    <ul>
      <li>
        <p>p4</p>
      </li>
      <li>
        <p>p5</p>
      </li>
      <li>
        <p>p6</p>
      </li>


    </ul>

<p >p7 </p>
<p>p8</p>
<p>p9</p>

</body>
</html>

4.2 层次选择器

在这里插入图片描述

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

      background: red;
      border-radius: 33px;
    }
    ul li:last-child{
      
      background: yellow;
      border-radius: 33px;
    }
    /*
    选中p1:定位到父元素，选择当前的第一个元素
    选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！顺序
    */
    p:nth-child(1){

      background: green;
      border-radius: 33px;
    }
    /*选中父元素下的p元素的第二个类型*/
    p:nth-of-type(2){

      background: blue;
      border-radius: 33px;
    }


  </style>
</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>li1</li>
  <li>li2</li>



</ul>

<p >p7 </p>
<p>p8</p>
<p>p9</p>

</body>
</html>

4.3 属性选择器

 a[id]{
    background:yellow;
    }

在这里插入图片描述

a[id=first]{
        background: lawngreen;
    }

在这里插入图片描述

a[class*="links"] {
      background: deepskyblue;
    }

在这里插入图片描述

a[href^="http"] {
      background: deepskyblue;
    }

在这里插入图片描述

a[href$="doc"] {
      background: deepskyblue;
    }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我是...</title>
  <style>
    .demo a{
      float: left;
      display: block;
      height: 66px;
      width: 66px;
      border-radius: 9px;
      background: aqua;
      text-align: center;
      color: red;
      text-decoration: none;
      font: bold 20px/50px Arial;
    }
    /*属性名， 属性名=属性值（正则）
     = 绝对等于
     *= 包含这个元素
     ^= 以这个开头
     $= 以这个结尾
*/
   /* 存在id属性的元素 a[]{}*/
   /* a[id]{
    background:yellow;
    }


    */


    /*id=first的元素*/
   /* a[id=first]{
        background: lawngreen;
    }

    /*class 中有links的元素*/
   /*a[class*="links"] {
      background: deepskyblue;
    }

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

     */


    /*选中href中以jpg、npg、doc结尾的元素*/
    a[href$="doc"] {
      background: deepskyblue;
    }
  </style>
</head>
<body>

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

</p>

</body>
</html>

在这里插入图片描述

5.美化网页元素

5.1为什么要美化网页

1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验
span标签：重点要突出的字，使用span套起来

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

welcome to my <span id="test01">world！</span>
</body>
</html>

在这里插入图片描述

5.2 字体样式

<style>
    /*font-family:字体
      font-size: 字体大小
      font-weight:字体粗细
      color:  字体颜色
    */
    body{
      font-family: 楷体;
    }
    h1{
      font-size: 66px;
    }
    .test01{
      font-weight: bold;
    }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>斗破苍穹</title>
  <style>
    /*font-family:字体
      font-size: 字体大小
      font-weight:字体粗细
      color:  字体颜色
    */
    body{
      font-family: 楷体;
    }
    h1{
      font-size: 66px;
    }
    .test01{
      font-weight: bold;
    }

  </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="test01">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气。
  心潮澎湃，无限幻想，迎风挥击千层浪，少年不败热血！</p>
<p>等级制度：斗之气，斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗尊巅峰，半圣，斗圣，斗帝。</p>
<p>远古八族：萧族、古族、魂族、药族、雷族、炎族、石族、灵族。</p>
<p>灵魂境界：凡境→灵境→天境→帝境，每境又分初期→中期→后期→巅峰→大圆满。</p>
<p>灵境者可炼制8品丹药，天境者可炼制9品丹药，帝境者可炼制帝品丹药</p>
  <p>丹药品级分为十品：一品→二品→三品→四品→五品→六品→七品→八品→九品→帝品</p>
<p>斗技等级制度:天阶斗技，地阶斗技，玄阶斗技，黄阶斗技（注：顺序有所不同</p>）

</body>
</html>

5.3 文本样式

1、颜色 color、rgb、rgba
2、文本对齐的方式 text-align = center

 h1{
          color:rgba(0,255,255,0.9);
          text-align: center;
        }

在这里插入图片描述
3、首行缩进 text-indent: 2em

.test01{
          text-indent: 2em;
        }

在这里插入图片描述

4、行高 line-height：单行文字上下居中！ line-height = height

 .test02{
          background: aqua;
          height: 66px;
          line-height: 66px;
        }

在这里插入图片描述

5、装饰 text-decoration：

/*下划线*/
        .p1{
          text-decoration: underline;
        }
        /*中划线*/
        .p2{
          text-decoration: line-through;
        }
        /*上划线*/
        .p3{
          text-decoration: overline;
        }

在这里插入图片描述

6、文本图片水平对齐： vertial-align：middle

/*水平对齐 ~ 参照物 ， a ，b*/
        img,span{
          vertical-align: middle;
        }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>斗破苍穹</title>
<!--
    颜色:
    单词
    RGB   0~F
    RGBA  A:0~1
    text-align: center;  排版,居中
    text-indent: 2em;  段落首行缩进
    行高和块的高度一致，就可以上下居中
-->
  <style>
        h1{
          color:rgba(0,255,255,0.9);
          text-align: center;
        }
        .test01{
          text-indent: 2em;
        }
        .test02{
          background: aqua;
          height: 66px;
          line-height: 66px;
        }
        /*下划线*/
        .p1{
          text-decoration: underline;
        }
        /*中划线*/
        .p2{
          text-decoration: line-through;
        }
        /*上划线*/
        .p3{
          text-decoration: overline;
        }
        /*水平对齐 ~ 参照物 ， a ，b*/
        img,span{
          vertical-align: middle;
        }
  </style>
</head>
<body>

<p class="p1">1111111111111</p>
<p class="p2">2222222222222</p>
<p class="p3">3333333333333</p>
<p>
  <img src="/resource/image/guan02.jpg" alt="美杜莎女神" >
  <span>11111111111111111</span>
</p>




<h1>故事介绍</h1>
<p class="test01">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气。
  心潮澎湃，无限幻想，迎风挥击千层浪，少年不败热血！</p>
<p>等级制度：斗之气，斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗尊巅峰，半圣，斗圣，斗帝。</p>
<p class="test02">远古八族：萧族、古族、魂族、药族、雷族、炎族、石族、灵族。</p>
<p class="test02">灵魂境界：凡境→灵境→天境→帝境，每境又分初期→中期→后期→巅峰→大圆满。</p>
<p class="test02">灵境者可炼制8品丹药，天境者可炼制9品丹药，帝境者可炼制帝品丹药</p>
<p class="test02">丹药品级分为十品：一品→二品→三品→四品→五品→六品→七品→八品→九品→帝品</p>
<p class="test02">斗技等级制度:天阶斗技，地阶斗技，玄阶斗技，黄阶斗技（注：顺序有所不同</p>）
</body>
</html>

5.4 阴影

/*text-shadow:阴影颜色,水平偏移，垂直偏移，阴影半径*/
    #price{
      text-shadow: lawngreen 9px -1px 1px;
    }

在这里插入图片描述

5.5 超链接伪类

/*默认的颜色*/
    a{
      text-decoration: none;
      color: black;
    }
    /*鼠标悬浮的状态(重点记住)*/
    a:hover{
      color: red;
    }
    /*鼠标按住未释放的状态*/
    a:active{
      color: green;
      font-size: 33px;
    }
    /**/
    a:visited{
      color: aquamarine;
    }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>码出高效:Java开发手册</title>
  <style>
    /*默认的颜色*/
    a{
      text-decoration: none;
      color: black;
    }
    /*鼠标悬浮的状态(重点记住)*/
    a:hover{
      color: red;
    }
    /*鼠标按住未释放的状态*/
    a:active{
      color: green;
      font-size: 33px;
    }
    /**/
    /*a:visited{
      color: aquamarine;
    }

     */
    /*text-shadow:阴影颜色,水平偏移，垂直偏移，阴影半径*/
    /*#price{
      text-shadow: lawngreen 9px -1px 1px;
    }

     */
  </style>
</head>
<body>

<a href="#">
  <img src="images/guan03.jpg" alt="">
</a>
<p>
  <a href="#">码出高效:Java开发手册</a>
</p>
<p>
  <a href="">作者:孤尽</a>
</p>
<p id="price">
      ￥69
</p>
</body>
</html>

5.6 练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="/lensson02/5.列表样式练习/style.css"/>
</head>
<body>
<div id="nav">
<h1 class="title">全部商品分类</h1>
      <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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</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: 250px;
}
.title{
      font-size: 18px;  /*字体*/
      font-weight: bold;  /*粗体*/
      text-indent: 2em;   /*缩进*/
      line-height: 28px;   /*行高*/
      background: red;
}

/*ul li
  list-style: none 去掉原点
  circle 空心圆
  decimal   数字
  square    正方形
*/
ul{
  background: #cccccc;
}
ul li{
  height: 30px;
  list-style: none;
  text-indent: 2em;   /*缩进*/
}
a{
  text-decoration: none;
  color: black;
  font-size: 15px;
}
a:hover{
  color: red;
  text-decoration: underline;
}

5.7 背景

 background-image: url("images/guan02.jpg");/*默认是全部平铺*/

在这里插入图片描述

.div1{
          background-repeat: repeat-x; /*水平平铺*/
        }

在这里插入图片描述

.div2{
          background-repeat: repeat-y;/*垂直平铺*/
        }
        .div3{
          background-repeat: no-repeat;/*不平铺*/
        }

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
        div{
          width: 5000px;
          height: 500px;
          border: 1px solid red;
          background-image: url("images/guan02.jpg");/*默认是全部平铺*/
        }
       /* .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>

5.8 渐变

渐变颜色网站：https://www.grabient.com/

推荐原因：可以直接使用生成好的渐变色的css代码
在这里插入图片描述

6.盒子模型

6.1 什么是盒子模型？

在这里插入图片描述 margin : 外边距
padding : 内边距
border : 边框

6.2 边框

1、边框的粗细
2、边框的样式
3、边框的颜色
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子模型</title>
  <style>
/*
body总有一个默认的外边距margin: 0,常见操作
 */
   /* h1,ul,li,a,body{
      margin: 0;
    }

    */
    /*border: 粗细，样式，颜色*/
    #box{
      width: 300px;
      border: 1px solid #97D9E1;
    }
    h2{
      font-size: 16px;
      background: #97D9E1;
      line-height: 15px;
      
    }
    form{
      background: #97D9E1;

    }
    div:nth-of-type(1) input{
      border: 3px solid limegreen; /*solid 实线*/
    }
    div:nth-of-type(2) input{
      border: 3px dashed red; /*solid 虚线*/
    }
    div:nth-of-type(3) input{
      border: 2px dashed blue; /*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>

6.3 内外边距

在这里插入图片描述

盒子的计算方式:这个元素有多大？
在这里插入图片描述
margin + border + padding + 内容宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>外边距</title>
  <style>
    /*
    body总有一个默认的外边距margin: 0,常见操作
     */
    /* h1,ul,li,a,body{
       margin: 0;
     }

     */
    /*border: 粗细，样式，颜色*/
    /*外边距的妙用: 居中元素*/
    #box{
      width: 300px;
      border: 1px solid white;
      background: aqua;
     margin: 0 auto; /*上下 左右 */
    }
    /*
    顺时针旋转
    margin:0
    margin:0 1px
    margin:0 1px 2px 3px
    */
    h2{
      font-size: 16px;

      background: aqua;

      line-height: 15px;
      color: red;

      margin:0 1px 2px 3px;
    }
    form{
      background: aqua;

    }
    input{
      border: 1px solid  aqua ;
    }
    div:nth-of-type(1){
      padding: 10px 2px;
    }

  </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>

6.4 圆角边框

在这里插入代码片

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圆形</title>
  <style>
    /*
          左上  右上 右下 左下 ,顺时针方向
           圆圈: 圆角 = 半径！
     */
    /*半圆
    div{
      width: 66px;
      height: 33px;
      margin: 33px;
      background: red;
      border-radius: 33px 33px 0px 0px;
    }
     */
    div{
      width: 33px;
      height: 66px;
      margin: 33px;
      background: red;
      border-radius: 33px  0px 0px 33px;
    }
    img{
      border-radius: 480px;
    }

  </style>
</head>
<body>
<div></div>
<img src="images/guan01.jpg" alt="">
</body>
</html>

6.5 阴影

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>阴影</title>
  <style>
    img{
      border-radius: 480px;

      box-shadow: 10px 10px 250px #97D9E1;
    }

  </style>
</head>
<body>
<div style="width: 1500px;display: block;text-align: center">

        <img src="images/guan01.jpg" alt="">

</div>

</body>
</html>

6.6 display

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<!--
 block 块元素
 inline 行内元素
 inline-block  是块元素，但是可以内联，在一行！
 none  没有，消失
 -->
  <style>
    div{
      width: 99px;
      height: 99px;
      border: 1px solid red;
      display: block;
    }
    span{
      width: 99px;
      height: 99px;
      border: 1px solid red;
      display:  inline;
    }
  </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

1、这个也是一种实现行内元素的排列的方式，但是我们很多情况都是用float

6.7 float

1、左右浮动 float

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<!--
 block 块元素
 inline 行内元素
 inline-block  是块元素，但是可以内联，在一行！
 none  没有，消失
 -->
  <style>
    div{
      width: 99px;
      height: 99px;
      border: 1px solid red;
      display: block;
    }
   #father{
     border: 1px solid black;
   }
   .layer01{
     border: 1px dashed red;
     display: inline-block;
     float: right;
   }
    .layer02{
      border: 1px dashed green;
      display: inline-block;
      float: right;
    }
    .layer03{
      border: 1px dashed blue;
      display: inline-block;
      float: left;
    }
    .layer04{
      border: 1px dashed orange;
      display: inline-block;
      font-size: 16px;
      line-height: 24px;
    }
  </style>
</head>
<body>
<div id="father">
  <div class="layer01"><img src="images/guan01.jpg" alt=""></div>
  <div class="layer02"><img src="images/guan02.jpg" alt=""></div>
  <div class="layer03"><img src="images/guan03.jpg" alt=""></div>
  <div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到</div>
</div>


</body>
</html>

display 与 float 对比
1.display的方向不可控制
2.float 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

6.8 父级边框塌陷的问题

解决方案：
1、增加父级元素的高度

#father{
     height: 1000px;
     border: 1px solid black;
     overflow: scroll;
   }

2、增加一个空的div标签，清除浮动

.clear{
      clear: both;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<div id="father">
  <div class="layer01"><img src="images/guan01.jpg" alt=""></div>
  <div class="layer02"><img src="images/guan02.jpg" alt=""></div>
  <div class="layer03"><img src="images/guan03.jpg" alt=""></div>
  <div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到</div>
    <div class="clear"></div>
</div>

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

/*
      overflow: hidden;隐藏
      overflow: scroll;滚动
      overflow: auto;
     */
   #father{
     border: 1px solid black;
     overflow: scroll;
   }

在这里插入图片描述
4、父类增加一个伪类: after

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

小结：
1、浮动元素后面增加空div
简单，代码中尽量避免空div
2、设置父元素的高度
3、overflow
简单，下拉的一些场景避免使用
4、父类添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，推荐使用

7.定位

7.1 相对定位

相对定位：position：relative；
相对于原来位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>相对定位</title>
  <style>
            /*
            相对定位:相对于自己原来的位置进行偏移~
            */
          div{
            margin: 10px;
            padding: 6px;
            font-size: 12px;
            line-height: 25px;
          }
          #father{
            border: 1px solid black;
            padding: 0;
          }
          #first{
            background-color: #97D9E1;
            border: 1px dashed blue;
            position: relative;/*相对定位，上下左右*/
            top: -30px;
          }
          #second{
            border: 1px dashed blue;
            background-color: #97D9E1;
          }
          #third{
            border: 1px dashed blue;
            background-color: #97D9E1;
            position: relative;
            bottom: -20px;
            right: 10px;
          }
  </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>
  <style>
          #box{
            width: 250px;
            height: 250px;
            padding: 10px;
            border: 2px solid red;
          }
          a{
            width: 80px;
            height: 80px;
            text-decoration: none;
            background-color: hotpink;
            line-height: 90px;
            text-align: center;
            color: black;
            display: block;
          }
          a:hover{
            background: hotpink;
          }
          .a2, .a4{
            position: relative;
            left: 170px;
            bottom: 80px;
          }
          .a5{
            position: relative;
            left: 85px;
            bottom: 240px;
          }
  </style>
</head>
<body>
<div id="box">
  <a class="a1"  href="#">链接1</a>
  <a class="a2"  href="#">链接2</a>
  <a class="a3"  href="#">链接3</a>
  <a class="a4"  href="#">链接4</a>
  <a class="a5"  href="#">链接5</a>
</div>

</body>
</html>

7.2 绝对定位

position: absolute;
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移~
3、在父级元素范围内移动
相对于父级或者浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绝对定位</title>
  <style>
    /*
    相对定位:相对于自己原来的位置进行偏移~
    */
    div{
      margin: 10px;
      padding: 6px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
      border: 1px solid black;
      padding: 0;

    }
    #first{
      background-color: #97D9E1;
      border: 1px dashed blue;

      top: -30px;
    }
    #second{
      border: 1px dashed blue;
      background-color: #97D9E1;
      position: absolute;/*绝对定位，上下左右*/
      left: -30px;
    }
    #third{
      border: 1px dashed blue;
      background-color: #97D9E1;

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

</div>

</body>
</html>

7.3 固定定位

在这里插入图片描述

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

</body>
</html>

7.4 z-index

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
        #content{
          padding: 0px;
          margin: 0px;
          overflow: hidden;
          font-size: 15px;
          line-height: 20px;
          border: 1px solid black;
        }
        ul,li{
          padding: 0px;
          margin: 0px;
          list-style: none;
        }
        /*父级元素相对定位*/
        #content ul{
          position: relative;
        }
        .idom, .bg{
          position: absolute;
          width: 380px;
          height: 25px;
          top: 1300px;
        }
        .idom{
          color: white;
          /*z-index:0*/
        }
        .bg{
          background: black;
          opacity: 0.5;/*背景透明度*/
        }
  </style>
</head>
<body>
<div id="content">
      <ul>
            <li><img src="images/guan02.jpg" alt=""></li>
            <li class="idom">斗破苍穹之迦南学院篇</li>
            <li class="bg"></li>
            <li>2022年8月14日01:28:43</li>

      </ul>
</div>

</body>
</html>

总结

本篇笔记是基于B站up主：遇见狂神说的笔记进行学习，感兴趣的可以去B站进行学习。网站地址：https://space.bilibili.com/95256449，以上就是今天要讲的内容，本文仅简单了解CSS3基础知识。好了今天的内容就到这里了，下一篇再见

【CSS3入门指北】基础篇

文章目录

1.什么是CSS

2.CSS发展史

3.快速入门

4.选择器

4.1基本选择器

4.2 层次选择器

4.2 层次选择器

4.3 属性选择器

5.美化网页元素

5.1为什么要美化网页

5.2 字体样式

5.3 文本样式

5.4 阴影

5.5 超链接伪类

5.6 练习

5.7 背景

5.8 渐变

6.盒子模型

6.1 什么是盒子模型？

6.2 边框

6.3 内外边距

6.4 圆角边框

6.5 阴影

6.6 display

6.7 float

6.8 父级边框塌陷的问题

7.定位

7.1 相对定位

7.2 绝对定位

7.3 固定定位

7.4 z-index

总结

网站公告

今日签到

热门文章

最新发布