走进 CSS

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

看完本篇博客你能收获

👉 了解 CSS 是什么
👉 学会 CSS 怎么用
👉 CSS的选择器
👉 如何用 CSS 美化网页

文章目录

01 CSS 是什么
02 CSS的发展史
03 CSS 快速入门
04 CSS的3种导入方式使用方式
05 选择器 👇
06 网页美化
07 盒子模型
08 浮动
09 定位
10 动画
>>> 开发技巧 <<<

01 CSS 是什么

👉 Cascading Style Sheet ( 层叠级联样式表 )

CSS可以干什么

美化网页
字体、颜色、边距、高度宽度、背景图片、网页定位

02 CSS的发展史

CSSCascading Style Sheets层叠样式表是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名并使用于Web和其他媒介如XML文档中。1996年12月W3C推出了CSS规范的第一个版本1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定到目前为止该标准还没有最终定稿。

👉	CSS 发展历程
CSS 1.0	1996年12月W3C推出了CSS规范的第一个版本
CSS 2.0	div 块+CSSHTML与CSS结构分离的思想网页变得简单方便SEO
CSS 2.1	浮动定位
CSS 3.0	圆角阴影、动画…浏览器兼容性

03 CSS 快速入门

一个文件在 HTML代码中插入 style标签写CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS快速入门</title>
    
    <!--规范 在head里<style>写CSS代码每一个声明最好使用分号结尾
    语法
            选择器{
                声明1
                声明2
                声明3
            }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
    
</head>
<body>

	<h1>标题</h1>

</body>
</html>

在这里插入图片描述

但实际开发中多把 HTML 和 CSS 分离

两个文件只需在HTML代码中使用 link 标签然后指向 CSS 文件

在这里插入图片描述效果也是一样的但更建议使用这种方式 HTML + CSS 分离

CSS的优势

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

04 CSS的3种导入方式使用方式

外部样式link 标签HTML文件+CSS文件
内部样式style 标签
行内样式在标签元素中加入一个 style 属性

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

<!--内部样式style标签-->
  <style>
    h1{
      color: blue;
    }
    /* 注释要这样写因为这部分是CSS代码 */
  </style>

<!--外部样式指向独立于html的style.css文件-->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!--优先级就近原则谁靠近元素的代码就显示谁的-->

<!--行内样式:在标签元素中加入一个style属性-->
<h1 style="color: red"></h1>  <!--不符合结构分离不建议使用-->

</body>
</html>

拓展外部样式有两种写法

链接式link 标签

<link rel="stylesheet" href="style.css">
导入式CSS 2.1 特有
<style>
       @import url("style.css");
</style>
link 和 import 之间的区别?

差别 1

本质的差别link 属于 XHTML 标签而 @import 完全是 CSS 提供的一种方式。

差别 2

加载顺序的差别当一个页面被加载的时候就是被浏览者浏览的时候) link 引用的 CSS 会同时被加载而 @import 引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS
的页面时开始会没有样式(就是闪烁)网速慢的时候还挺明显。

差别 3

兼容性的差别: @import 是 CSS2.1 提出的所以老的浏览器不支持@import 只有在 IE5 以上的才能识别而 link标签无此问题。

差别 4

使用 dom(document object model文档对象模型 )控制样式时的差别当使用 javascript 控制 dom
去改变样式的时候只能使用 link 标签因为@import 不是 dom 可以控制的。

05 选择器 👇

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

基本选择器

1. 标签选择器<style> </style>

选择一类标签

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

  <style>
    /* 标签选择器会选择到页面上所有的这个标签 */
    h1{
      color: orange;
      background: aquamarine;
      border-radius: 20px;
    }
    p{
      font-size:100px;
    }
  </style>

</head>
<body>

<h1>HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>
<p>OK</p>

</body>
</html>

在这里插入图片描述

2. 类选择器

选种所有 class 属性的标签可跨标签

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

  <style>
    /* 类选择器格式 .class的名称{} */
    .No1{
      color:blue;
    }
    .No2{
      color:green;
    }
    .No3{
      color:red;
    }
  </style>

</head>
<body>

<h1 class="No1">No.1</h1>
<h1 class="No2">No.2</h1>
<p class="No3">No.3</p>

</body>
</html>

可以不同类型的多个标签归类实现同一效果
在这里插入图片描述

3. id 选择器

id 全局唯一不可重复

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

  <style>
    /* id选择器:id必须唯一不可复用
      #id名称{}
      优先级不遵循就近原则
      id选择器>class选择器>标签选择器
     */
    #miao{
      color: pink;
    }
    #ban{
      color:purple;
    }
    #li{
      color: cyan;
    }
    h1{
      color:red;
    }
  </style>

</head>
<body>

<h1 id="miao">标题1</h1>
<h1 id="ban">标题2</h1>
<h1 id="li">标题3</h1>

</body>
</html>

显示优先级id > class > 标签

在这里插入图片描述

层次选择器

如果想实现如下层次图中的某个层次可以考虑以下选择器
在这里插入图片描述

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

  <style>
    /*后代选择器*/
    body p{
      background: yellow;
    }
    /*子选择器*/
    body>p{
      background: cyan;
    }
    /*相邻兄弟选择器*/
    .brother+p{
      background: cadetblue;
    }
    /*通用选择器当前选中元素的向下的所有兄弟元素*/
    .active~p{
      background: orange;
    }
  </style>

</head>
<body>

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

</body>
</html>

1. 后代选择器

在某个元素的后面祖爷爷爷爷爸爸儿子都有

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

在这里插入图片描述

2. 子选择器

一代( 只有儿子有 )

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

在这里插入图片描述

3. 相邻兄弟选择器

同辈都有对下不对上只对代码之下的有用

/*相邻兄弟选择器只有一个相邻向下*/
.brother + p{
  background: cadetblue;
}

在这里插入图片描述

4. 通用选择器

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

/*通用选择器当前选中元素的向下的所有兄弟元素*/
.active ~ p{
  background: orange;
}

在这里插入图片描述

结构伪类选择器

标签 + 冒号以构成伪类选择器

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

  <style>
    /*不用class和id选择器怎么实现*/
    /*ul第一个子元素*/
    ul li:first-child{
      background: green;
    }
    /*ul最后一个子元素*/
    ul li:last-child{
      background: yellow;
    }
    /*选中p1:定位到父元素选择当前第一个元素*/
    /*选中当前p元素的父级元素选中父级元素的第一个并且是当前元素才生效*/
    p:nth-child(1){
      background: blue;
    }
    /*选中父元素下的p元素的第二个*/
    p:nth-of-type(2){
      background: orange;
    }
    /*鼠标移到上面就变色*/
    ul:hover{
      background: red;
    }
  </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>

在这里插入图片描述

鼠标移到上面变色

属性选择器常用 ※

id 和 class 结合起来的选择器支持正则表达式日常开发中最常用

属性选择器(支持正则表达式)

    标签[属性名=属性值]{}
    
    = 绝对等于
    *= 包含这个元素 (通配符)
    ^= 开头等于
    $= 结尾等于

完整代码下文有解读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
  <style>
    .demo a{
      float:left;/*往左浮动*/
      display:block;/*以盒子显示*/
      height: 50px;/*长宽高一致*/
      width: 50px;/*正方形*/
      border-radius: 10px;/*圆角*/
      background:pink;/*背景颜色*/
      text-align: center;/*居中对齐*/
      color:purple;/*字体颜色*/
      text-decoration: none;/*去掉下划线*/
      margin-right: 10px;/*间距*/
      font:bold 20px/50px Arial;
      /*   粗体 字体大小/行高 字体*/
    }

    /*属性选择器(支持正则表达式)
    标签[属性名=属性值]{}
    = 绝对等于
    *= 包含这个元素 (通配符)
    ^= 开头等于
    $= 结尾等于
    */

    /*存在id属性的元素*/
    a[id]{}

    /*id等于first的元素*/
    a[id=first]{}

    /*class中有links的元素*/
    a[class*="links"]{}
    
    /*选中href中以https开头的元素*/
    a[href^="https"]{}
    
    /*选中href中以pdf结尾的元素*/
    a[href$=pdf]{}
    
  </style>
</head>
<body>

<p class="demo">

  <a href="https://www.baidu.com" class="links item first" target="_blank">1</a>
  <a href="https://www.csdn.net" class="links item active" id="first" 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.docx" class="links item">8</a>
  <a href="abc" class="links item last">9</a>

</p>

</body>
</html>

代码解读

构建数字块图

<style>
  .demo a{
    float:left;/*往左浮动*/
    display:block;/*以盒子显示*/
    height: 50px;/*长宽高一致*/
    width: 50px;/*正方形*/
    border-radius: 10px;/*圆角*/
    background:pink;/*背景颜色*/
    text-align: center;/*居中对齐*/
    color:purple;/*字体颜色*/
    text-decoration: none;/*去掉下划线*/
    margin-right: 10px;/*间距*/
    font:bold 20px/50px Arial;
    /*   粗体 字体大小/行高 字体*/
  }
</style>

效果如下
在这里插入图片描述

选中存在 id 属性的元素

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

在这里插入图片描述

选中 id 等于 first 的元素

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

在这里插入图片描述

选中 class 中有 links 的元素

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

在这里插入图片描述

选中href中以https开头的元素

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

在这里插入图片描述

选中href中以pdf结尾的元素

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

在这里插入图片描述

=   绝对等于
*=   包含这个元素 (通配符)
^=   开头等于
$=   结尾等于

06 网页美化

为什么要美化网页

有效传递页面信息
页面美观吸引用户
凸显页面主题
提高用户体验

👉 字体样式

font

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
<!--
    font-family:字体
    font-size:字体大小
    font-weight:字体粗细
    color:字体颜色
    -->
  <style>
    body{
        font-family: "Arial",宋体;/*可以设置两种字体针对英文和中文*/
        color:purple;
    }
    h1{
        font-size:40px;/*还有em(缩进)*/
    }
    .p1{
        font-weight:bolder;/*可以数字*/
    }
    p[id="123"]{
        font:oblique bolder 16px "Arial";
        /*    斜体    加粗   大小   字体 */
    }
  </style>
</head>
<body>
<h1>CSS是什么</h1>
<p class="p1">
CSSCascading Style Sheets层叠样式表是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名并使用于Web和其他媒介如XML文档中。</p>
<p>
1996年12月W3C推出了CSS规范的第一个版本1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定到目前为止该标准还没有最终定稿。
</p>
<p id="123">
W3C:World Wide Web Consortium
</p>
</body>
</html>

效果如下
在这里插入图片描述

span 标签重点要突出的字用 span 套起来

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

  <style>
    #title1{
      font-size:50px
    }
  </style>

</head>
<body>

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

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

  <style>
    h1{
        color:rgba(0,255,255,0.8);/* 颜色RGB和透明度% */
        text-align:center;/* 排版居中 */
    }
    .p1{
        text-indent:2em;/* 段落首行缩进 2字符 */
    }
    #eng{
        background: pink;
        height:66px;
        line-height:66px;/*行高(行高和块高一致就能上下居中)*/
    }
    /*下划线*/
    .p2{
        text-decoration: underline;
    }
    /*中划线*/
    .p3{
        text-decoration: line-through;
    }
    /*上划线*/
    .p4{
        text-decoration: overline;
    }
    /* a标签默认下划线 可以去掉 */
    a{
        text-decoration-line:none;
    }
  </style>

</head>
<body>

<h1>CSS是什么</h1>
<p class="p1">
CSSCascading Style Sheets层叠样式表是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名并使用于Web和其他媒介如XML文档中。</p>
<p>
1996年12月W3C推出了CSS规范的第一个版本1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定到目前为止该标准还没有最终定稿。
</p>
<p id="eng">
W3C:World Wide Web Consortium
</p>
<p class="p2">miaobanli</p>
<p class="p3">miaobanli</p>
<p class="p4">miaobanli</p>
<a href="https://www.csdn.net">超链接</a>

</body>
</html>

效果如下
在这里插入图片描述

文本阴影https://www.w3school.com.cn/css/css_text_shadow.asp
a{
	text-shadow:#3cc7f2 10px 10px 10px;
	/*  阴影颜色 水平偏移 垂直偏移 阴影半径 */
}

👉 超链接伪类悬浮效果

a:hover { }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>

    <style>
        /*默认的颜色*/
        a{
            text-decoration:none;
            color:black;
        }
        /*鼠标悬浮的颜色*/
        a:hover{
            color:orange;
        }
    </style>

</head>
<body>

<a href="">
    <img src="img.png" alt="">
</a>
<p>
    <a href="">CSDN</a>
</p>
<p>
    <a href="">苗半里</a>
</p>

</body>
</html>

鼠标悬浮未点击及鼠标点击未释放效果
在这里插入图片描述

👉 列表样式

初始样式
在这里插入图片描述
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href="style.css" rel="stylesheet" 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>

+ CSS:

#nav{
    width:230px;
    background: gray;
}
.title{
    font-size:18px;
    font-weight:bold;
    text-indent:1em;
    line-height:35px;
    background: indianred;
}
/* list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
 */
ul{
    background:gray ;
}
ul li{
    height:30px;
    list-style:none;
}
a{
    text-decoration:none;
    font-size:14px;
    color:black;
}
a:hover{
    color:orange;
    text-decoration: underline;
}

HTML + CSS 修改后

在这里插入图片描述

👉 背景图像及渐变

图像背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片背景</title>
    <style>
        div{
            width:500px;
            height:300px;
            border:5px solid cyan;
            /*边框  粗细 实线  颜色*/
            background-image:url("img.png");/*默认是全部平铺的*/
        }
        .div1{
            background-repeat: repeat-y;/*y轴平铺*/
        }
        .div2{
            background-repeat:repeat-x;/*x轴平铺*/
        }
        .div3{
            background-repeat:no-repeat;/*不平铺 就一个*/
        }
        .div4{
            background: pink url("img.png") 150px 60px no-repeat;
            /*          颜色     背景图片        定位     平铺方式 */
        }
        .div5{  /* 也可以这样操作 */
            background:mediumpurple;
            background-image: url("img.png");
            background-position:150px 60px;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>

在这里插入图片描述

渐变

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

在这里插入图片描述

👉 可以从这个网站 https://www.grabient.com里面调样式复制 CSS 代码

07 盒子模型

👉 什么是盒子模型

我们在查看网页源代码在一个页面点击检查时总能发现如下图这样一个"盒子"

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

盒子大小 = margin + border + padding + 内容宽度

👉 边框 border

边框的粗细
边框的样式
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      /*body总有一个默认的外边距*/
      margin:0;
    }
    #box{
      width:300px;
      border:1px solid purple;
      /*     粗细  样式  颜色 */
    }
    h2{
      font-size:16px;
      background-color:gray;
      line-height:30px;
      color:white;
      text-align:center;
    }
    form{
      background: pink;
    }
    div:nth-of-type(1)>input{
      border:3px solid gray;
    }
    div:nth-of-type(2) input{
      border:3px dashed gray;
    }
  </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&padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  外边距的妙用居中元素
前提条件块元素有固定的宽度-->
    <style>
        body{
            /*body总有一个默认的外边距*/
            margin:0;
        }
        #box{
            width:300px;
            border:1px solid purple;
            /*     粗细  样式  颜色 */

            /*外边距妙用居中*/
            margin:0 auto;
        }
        h2{
            font-size:16px;
            background-color:gray;
            line-height:30px;
            color:white;
            text-align:center;
            margin-top:0;
            margin-bottom:0;
            /*也可以这样
            margin:0 0 0 0 ;
                  上 右 下 左 (顺时针旋转)
            margin: 0  0 ;
                  上下 左右
            */
        }
        form{
            background: pink;
        }
        input{
            border:1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 5px;
        }
    </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>
  <style>
    div {
        width: 100px;
        height: 100px;
        border: 10px solid pink;
        border-radius: 50px 20px 10px 5px;
    }
      /*             左上 右上 右下 左下 (顺时针方向)*/
      /* border-radius: 50px 20px;
                     左上右下 右上左下 (两对角)
       border-radius:50px; 是个圆  */
      img{
        border-radius:77px;
        /*把图片变为圆形*/
      }
  </style>
</head>
<body>
<div></div>
<img src="img.png" alt="">
</body>
</html>

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

👉 阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width:100px;
      height:100px;
      border:10px solid purple;
      box-shadow:10px 10px 100px deeppink;
    }
    img{
      margin:100px;
      border-radius:30px;
      box-shadow:10px 10px 100px yellow;
    }
  </style>
</head>
<body>
<div></div>
<img src="img.png" alt="">
</body>
</html>

在这里插入图片描述

08 浮动

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /* display:
    block:块元素
    inline:行内元素
    inline-block:是块元素但是可以内联在一行内
    */
    div{
      width:100px;
      height:100px;
      border:1px solid purple;
      display:inline;
    }
    span{
      width:100px;
      height:100px;
      border:1px solid pink;
      display:inline-block;
    }
  </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

在这里插入图片描述

<style>
  /* display:
  block:块元素
  inline:行内元素
  inline-block:是块元素但是可以内联在一行内
  */
  div{
    width:100px;
    height:100px;
    border:1px solid purple;
    display:inline;
    float:right; /* 加了浮动 */
  }
  span{
    width:100px;
    height:100px;
    border:1px solid pink;
    display:inline-block;
    float:right;

  }
</style>

在这里插入图片描述

如果有父级边框塌陷问题比如设置了浮动以后只有浮动元素而原来的块元素收缩了可以增加 clear

clear : right ; 右侧不允许有浮动元素
clear : left ; 左侧不允许有浮动元素
clear : both ; 两侧不允许有浮动元素
clear : none ; 允许有浮动

解决方案

增加父级元素的高度不建议
增加一个空的 div 标签然后清除浮动
overflow 在父级元素被中增加一个 overflow 属性

overflow : hidden; 超出规定大小后就隐藏
overflow : scroll; 超出规定大小就有滚动条自动溢出
overflow : auto;

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

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

09 定位

👉 相对定位 relative

相对于自己原来的位置进行偏移
- position : relative
- top : -20px;
- left : 20px;
- bottom : -10px;
- right : 20px;
原来位置会被保留

<!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;
    }
    #first{
      background: yellow;
      border:1px solid #5f80bd;
      position:relative;/*相对定位上下左右*/
      top:-20px;
      left:20px;
      bottom:10px;/*离底部的距离*/
    }
    #second{
      background: lightblue;
      border:1px solid #3cac40;
    }
    #third{
      background:pink;
      border:1px solid #cc83ad;

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

原来是这样
在这里插入图片描述
相对位移后

👉 绝对定位 absolute

基于 XXX 定位上下左右位移
- position : absolute
- top : -20px;
- left : 20px;
- bottom : -10px;
- right : 20px;

没有父级元素定位时相对于浏览器定位
假设父级元素存在定位通常会相对父级元素进行位移
原来位置不会被保留

<style>
  div{
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height: 25px;
  }
  #father{
    border:1px solid #666;
  }
  #first{
    background: yellow;
    border:1px solid #5f80bd;
    position:absolute; /*绝对定位*/ 
    right:30px;
  }
  #second{
    background: lightblue;
    border:1px solid #3cac40;
  }
  #third{
    background:pink;
    border:1px solid #cc83ad;
  }
</style>

在这里插入图片描述

👉 固定定位 fixed

固定在网页的某个位置即使滚动条滚动也始终保持在原来的位置

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

绿色的块是绝对定位滚动条一滑就跟着跑了
粉色的是固定定位即使滚动条滑了也是固定在右下角不动的
在这里插入图片描述

👉 z - index

z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index 默认是 0

使用前提

1必须在定位元素position:relative/absolute/fixed/sticky上才有效

2 可以有负值

3不同父元素的子元素之间进行显示时会根据父级元素的z-index进行渲染.

在这里插入图片描述

z-index不起作用的几种情形

当前设置z-index元素的父元素 position:relative/absolute;
当前设置z-index元素为浮动元素。

示例文字及背景悬浮在图片之上
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width:410px;
            height:139px;
            padding:0;
            margin:0;
            overflow:hidden;
            font-size:12px;
            line-height:25px;
            border:1px #000 solid;
        }
        ul,li{
            padding:0;
            margin:0;
            list-style: none;
        }
        /*父级元素相对定位*/
        #content ul{
            position:relative;
        }
        .tipText,.tipBackground{
            position:absolute;
            width:410px;
            height:20px;
            top:119px;
        }
        .tipText{
            color:yellow;
            font-weight:bolder;
            text-align: center;
            z-index:3;
        }
        .tipBackground{
            background: white;
            opacity: 0.3;/*透明度*/
            /*也可以这样
            filter:Alpha(opacity=30);
            */
        }
    </style>
</head>
<body>
<div id="content">
    <ul>
        <li><img src="img.png" alt=""></li>
        <li class="tipText">大展宏兔</li>
        <li class="tipBackground"></li>
    </ul>
</div>
</body>
</html>