CSS3详解

1 学习目标
2 CSS的定义
- 2.1 CSS快速入门
- 1.2 CSS的三种导入方式
2 选择器（重点+难点）
3 美化网页元素
4 盒子模型
5 浮动
5.1 标准文件流
6 定位
7 动画
8 总结

1 学习目标

会使用行内样式、内部样式表和外部样式表三种方式为HTML5文档添加CSS样式
会使用CSS3的基本选择器设置字体大小和颜色
会使用复合选择器为特定的网页元素添加CSS样式
会使用CSS3高级选择器为网页元素添加CSS样式

2 CSS的定义

定义：Cascading Style Sheel 层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，背景图片，网页定位，网页浮动…
发展史：

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

2.1 CSS快速入门

在这里插入图片描述

创建文件规范格式

lesson01
- 1.我的第一个css程序
  - CSS文件
    - style.css
  - 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>

</head>
<body>
<h1>我是标题</h1>
</body>
</html>

单独建立CSS：

 /*建议单独建立css文件
	这样即美观，也有助于查找，修改，复用
        */
h1{
        color: red;
        }

css的优势：

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

1.2 CSS的三种导入方式

行内样式
使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1> 
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

使用style属性设置CSS样式仅对当前的HTML标签起作为，并且是写在HTML标签中的
这种方式不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用。

内部样式
CSS代码写在<head>的 <style>标签中

<style> h1{
      
      color: green; } </style>

优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
引出外部样式表

外部样式
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式

（1）链接式：
在这里插入图片描述

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

（2）导入式：
@import 是CSS2.1 特有的

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

链接式与导入式的区别:
1.<link/>标签是属于XHTML范畴的，@import是属于CSS2.1中特有的。
2. 使用<link/>链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页当中，然后再进行编
译显示，所以这种情况下显示出来的网页与用户预期的效果一样，即使网速再慢也一样的效果。
3. 使用@import导入的CSS文件，客户端在浏览网页时是先将HTML结构呈现出来，再把外部CSS文件
加载到网页当中，当然最终的效果也与使用<link/> 链接文件效果一样，只是当网速较慢时会
先显示没有CSS统一布局的HTML网页，这样就会给用户很不好的感觉。这个也是现在目前大多少
网站采用链接外部样式表的主要原因。
4. 由于@import是属于CSS2.1中特有的，因此对于不兼容CSS2.1的浏览器来说就是无效的。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式    -->
    <style>
        h1{
      
      
        color:green;
        }
    </style>
    <!--外部样式    -->
    <link rel="stylesheet" href="CSS/style.css">

</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我是标题</h1>
</body>
</html>

优先级

就近原则,谁离元素最近
因此文字的颜色是行内样式>内部样式>外部样式

2 选择器（重点+难点）

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

2.1 基本选择器

2.1.1 标签选择器

HTML标签作为标签选择器的名称<h1>…<h6>、<p>、<img/>
选择一类标签 标签{ }
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /* 标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
      
      
        color: red;
        background: #3cbda6;
        border-radius: 24px;
        }
        p{
      
      
        font-size: 60px;
        }
    </style>
</head>
<body>
<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>

2.1.2 类选择器 class

在这里插入图片描述
一些特殊的实现效果，单纯使用标签选择器不能实现，从而引出类选择器
选择所有class 属性一致的标签，可以跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
    /*类选择器的格式 .class的名字{}
        好处，可以多个标题归类，是同一个class，可以复用
    */
        .T1{
      
      
        color:red;
        }
        .T2{
      
      
        color:yellow;
        }
    </style>
</head>
<body>
<h1 class="T1">标题1</h1>
<h1 class="T2">标题2</h1>
<h1 class="T1">标题3</h1>

<p class="T2">P标签</p>
</body>
</html>

2.1.3 id选择器

全局唯一！ #id名字{}
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style>
    /*id选择器 ：id必须保证全局唯一！
    #id名字{}
    优先级：
    不遵循就近原则，固定的
    id选择器 > class选择器 > 标签选择器
    */
        h1{
      
      
        color:red;
        }
        .c2{
      
      
        color:blue;
        }
        #i3{
      
      
        color:green
        }
    </style>
</head>
<body>
<h1 class="c2" id="i3">标题1</h1>
<h1 class="c2">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级:
id选择器 > class选择器 > 标签选择器
不遵循就近原则，固定的

2.2 层次选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
body p{
      
       background: red; }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

2.2.1 后代选择器

在某个元素的后面

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

body下所有子元素都变红
在这里插入图片描述

2.2.2 子选择器

一代，只指儿子

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

在这里插入图片描述

2.2.3 相邻兄弟选择器

同辈，只有一个，相邻（向下）

/*相邻兄弟选择器*/
.active + p{
background:green;
}

在这里插入图片描述

2.2.4 通用兄弟选择器

同辈，向下所有，选中元素的向下所有兄弟元素

/*通用兄弟选择器*/
.active~p{
color:orange;
}

在这里插入图片描述

2.3 结构-伪类选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
ul li:first-child{
      
       background: red;}
ul li:last-child{
      
       background: green;}
p:nth-child(1){
      
       background: yellow;}
p:nth-of-type(2){
      
       background: blue;}
    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p4</p>
<ul>
    <li>p4</li>
    <li>p5</li>
    <li>p6</li>
</ul>
</body>
</html>

伪类-条

ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

在这里插入图片描述
小结

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
- E F:nth-child(n)在父级里从一个元素开始查找，不分类型
- E F:nth-of-type(n)在父级里先看类型，再看位置

hover 鼠标悬停鼠标移动到该位置变颜色

a:hover{background:black}

2.4 属性选择器（重要）

在这里插入图片描述

<!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:#2700ff;
      text-align: center;
      color: #b3d4fc;
      text-decoration: none;
      margin-right: 5px;
      font: bold 20px/50px Arial;
    }
  </style>
</head>
<body>
<p class=demo>
  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="http://www.baidu.com" target="_blank" title="test">2</a>
  <a href="http://www.baidu.com" class="links item first">3</a>
  <a href="http://www.baidu.com" class="links item first">4</a>
  <a href="http://www.baidu.com" class="links item first">5</a>
  <a href="http://www.baidu.com" class="links item first">6</a>
  <a href="http://www.baidu.com" class="links item first">7</a>
  <a href="http://www.baidu.com" class="links item first">8</a>
  <a href="http://www.baidu.com" class="links item first">9</a>
  <a href="http://www.baidu.com" class="links item first">10</a>
</p>
</body>
</html>

1）id+class 结合

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

在这里插入图片描述

2）= 绝对等于

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

在这里插入图片描述
3）*= 包含这个元素

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

在这里插入图片描述

4）^= 以这个开头

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

在这里插入图片描述

$= 以这个结尾

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

在这里插入图片描述

2.5 小结

在这里插入图片描述

3 美化网页元素

3.1 为什么要美化网页

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

<p>今天天气<span style="color: #2700ff">真不错</span></p>

在这里插入图片描述

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

3.2 字体样式

font-family：字体可以同时设定英文和汉字两个字体
font-size:字体的大小，px像素（Pixel），em相对长度尺寸
font-weight：字体粗细
color:字体颜色
可是直接使用font值，字体粗细，大小，行高，字体
font:bold 20px/50px Arial;

<style>	
	body{
      
      
    	font-family:"Arial Blacnk",楷体;
        color:blue;
	}
	h1{
      
      
    	font-size:50px;
	}
	.p1{
      
      
    	font-weight:bolder
	}
</style>

3.3 文本样式

1.颜色：color rgb rgba
2.文本对齐的方式：text-align:center
3.首行缩进：text-indent
4.行高：line-height 单行文字上下居中！line-height = height
5.装饰：text-decoration
6.文本图片水平对齐：vertical-align:middle
颜色

/*
颜色：
单词
RGB: #0~F（6位）
RGBA：	A（0~1）代表透明度
*/
<style>
	h1{
        color:rgba(0,255,255,0.5);
}
</styyle>

text-align:排版，居中，居右，居左left（默认）
text-indent:首行缩进

<style>
	h1{
      
      
        text-align:center;
        text-indent:2em;
}
</style>

line-height:行高，行高和块的高度一致时，就可以上下居中

文本图片水平对齐

    <style>
    img,span{
      
      
    vertical-align:middle;
    }
    </style>
<body>
<p>
    <img src="a.png" alt="">
    <span>AAAAAAAAAAAAA</span>
</p>
</body>

text-decoration:装饰

<style>
	h1{
      
      /* 下划线，中划线，上划线*/
        text-decoration:underline;
        text-decoration:line-through;
        text-decoration:overline;
        /*a标签，超链接去下划线*/
        text-decoration:none;
}
</style>

3.4 超链接伪类

在这里插入图片描述

a , a:hover:主要使用

<style>
/*默认的颜色*/
	a{
      
      
    	text-decoration:none;	/*取消下划线*/
    	color:black;
	}
	/*鼠标悬停的状态（重点）*/
	a:hover{
      
      
        color:orange;
        font-size:50px;		/*悬浮变大*/
	}
	/*鼠标按住未释放的状态*/
	a:active{
      
      
    	color:green;    
	}
	/*阴影 ：阴影颜色，水平偏移（右+），垂直偏移（下+），阴影半径*/
	#1i{
      
      
        text-shadow:#blue 10px -5px 2px;
	}
</style>

3.5 列表

在这里插入图片描述

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

3.6、背景

背景颜色
背景图片

<style>
div{
      
      
    width:1000px;	/*宽度*/
    height:700px;	/*高度*/
    border:1px solid red;	/*边框，角弧度，边线（实线），颜色*/
    background-image:url("images/tx.jpg");
    /*导入图片，默认是全部平铺的 repeat*/
    .div1{
      
      
        /*平铺x轴*/
        background-repeat:repeat-x;
    }.div2{
      
      
        /*平铺y轴*/
        background-repeat:repeat-y;
    }.div3{
      
      
        /*不平铺*/
        background-repeat:no-repeat;
    }
}
</style>

练习:

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

style

    width:230px;
    background:yellow;
}
.title{
    font-size:20px;
    text-indent:1em;
    line-height:30px;
    background:red;
    /*颜色，图片，图片位置，平铺方式*/
    background:red url("../images/d.gif") 250px 10px no-repeat;
}
ul{
background:yellow;
}
ul li{
    list-style:none;
    text-indent:1em;
    line-height:30px;
    background-image:url("../images/r.gif");
    background-repeat:no-repeat;
    background-position:210px 2px;
}
a{
color:black;
font-size:14px;
text-decoration:none;
}
a:hover{
    color:orange;
    text-decoration:underline;
}

style

#nav{
    width:230px;
    background:yellow;
}
.title{
    font-size:20px;
    text-indent:1em;
    line-height:30px;
    background:red;
    /*颜色，图片，图片位置，平铺方式*/
    background:red url("../images/d.gif") 250px 10px no-repeat;
}
ul{
background:yellow;
}
ul li{
    list-style:none;
    text-indent:1em;
    line-height:30px;
    background-image:url("../images/r.gif");
    background-repeat:no-repeat;
    background-position:210px 2px;
}
a{
color:black;
font-size:14px;
text-decoration:none;
}
a:hover{
    color:orange;
    text-decoration:underline;
}

3.7 渐变

Grabient.com
逐渐改变颜色，主要分两种

径向渐变
圆形渐变

background-color:#FFFFFF;
background-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%)

4 盒子模型

4.1、什么是盒子模型

在这里插入图片描述

4.2 边框

在这里插入图片描述

border：4px solid red;

边框的粗细 thin/medium/thick/像素值
边框的样式 none/hidden/dotted/dashed/solid/double
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子模型</title>
  <style>
    /*body 总有一个默认的外边距，gin:0*/
    h2,body{
      
      
      margin:0;   /*外边距，四个方向全部为0*/
      padding:0;  /*内边距，四个方向全部为0*/
      text-decoration:none;   /*下划线*/
    }
    #box{
      
         /*宽，高*/
      width:300px;

      /*边框：粗细，实虚线，颜色*/
      border:4px solid red;
    }
    h2{
      
      
      font-size:22px;
      background:orange;
      color:white;
      line-height:70px;

    }
    form{
      
      
      background:orange;
    }
    /*大div下的小div，第一个input类型*/
    div div:nth-of-type(1) input{
      
      
      border:3px solid black;
    }
    div div:nth-of-type(2) input{
      
      
      border:3px dashed green;
    }
    div div:nth-of-type(3) input{
      
      
      border:3px solid black;
    }
  </style>
</head>
<body>
<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div class="y1">
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="text">
    </div>
    <div>
      <span>邮件：</span>
      <input type="text">
    </div>
  </form>
</div>
</body>
</html>

在这里插入图片描述

4.3 内外边距

外边距的妙用：居中元素
margin:0 auto; ：上下为0，左右相等，居中对齐
margin:0; ：所有边距为零
margin:0 1;：上下和左右
margin:0 1 2 3; ：上右下左

margin 属性的方向是由顺时针旋转，margin、border、padding一样

盒子尺寸技术方式
在这里插入图片描述

你这个元素到底多大？
应该是：margin + border + padding + 内容宽度
不要因为制作 margin 最后导致原尺寸元素放不下

4.4 圆角边框

border-radius: 20px 10px 50px 30px;
在这里插入图片描述

div{
    width:100px;
    height:100px;
    border:10px solid red;
    /* 左上 右上 右下 左下 ，顺时针方向*/
    border-radius:55px 55px 55px 55px
    /*两个元素时为：左上右下，右下左上*/
}

border-radius制作特殊图形：圆形
利用border-radius属性制作圆形的两个要点:

元素的宽度和高度必须相同
圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

div{
width: 100px; 
height: 100px; 
border: 4px solid red; 
border-radius: 50%; 
}

4.5 盒子阴影

在这里插入图片描述

<html>
<head lang="en">
<meta charset="UTF-8">
<title>阴影的使用</title>
<style>
  div{
      
      
    width:100px;
    height:100px;
    border:10px solid red;
    /*右 下 模糊度 颜色*/
    box-shadow:10px 10px 80px yellow;
  }
</style>
</head>
<body>
<div>123qwe</div>
</body>
</html>

在这里插入图片描述

5 浮动

5.1 标准文件流

标准的文件流是自上而下，没有左右，类似于手机界面
块级元素：独占一行

h1~h6 p div 列表…

行内元素：不独占一行

span a img strong…

行内元素可以被包含在块级元素中，反之，则不可以~

5.2 display

display属性
在这里插入图片描述

<html>
<head lang="en">
<meta charset="UTF-8">
<title>阴影的使用</title>
<style>
  div{
      
      
    width:100px;
    height:100px;
    border:1px solid red;
  }
  span{
      
      
    width:100px;
    height:100px;
    border:1px solid red;
  }
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

在这里插入图片描述

修改块行状态

  div{
    width:100px;
    height:100px;
    border:1px solid red;
    display: inline-block;
  }
  span{
    width:100px;
    height:100px;
    border:1px solid red;
    display: inline-block;
  }

在这里插入图片描述
这个也是一种实现行内元素排列的方式，但是我们很多情况都是用 float

5.3 float

左右浮动 float
将图片浮起，移动。但是浮起的图片会挤开其他元素块，同时会跟随网页移动！！
float:left;
float:right;

5.4 父级边框塌陷的问题

5.4.1 防止浮动移动

在这里插入图片描述

.layer04 {
 clear:both; #清除两侧浮动 
 }
 .layer04 { 
 clear:left; #清除左侧浮动 
 }
 .layer04 { 
 clear:right; #清除右侧浮动 
 }

5.4.2 防止父级边框塌陷的四种方法

clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？
1、增加父级元素的高度

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

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

/*新建一个div*/
<div class="clear"></div>	
.clear{
	clear:both;
	margin:0;
	padding:0;
}

3、父级添加overflow属性（溢出处理）
在这里插入图片描述
hidden属性值，这个值在网页中经常使用，通常与< div>宽度结合使用设置< div>自动扩展高度，或者隐藏超出的内容

4、在父类添加一个伪类：after 推荐

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

5.5 display对比float

display:inline-block
- 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
- 位置方向不可控制，会解析空格
- IE 6、IE 7上不支持
float
- 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
- float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

6 定位

6.1 相对定位

在这里插入图片描述

相对定位：
static：默认值，没有定位
relative：相对定位
相对于原来的位置，进行指定的偏移(+距离增加，-距离缩短)
相对定位的话，它任然在标准文档流中，原来的位置会被保留
在这里插入图片描述
相对自身原来位置进行偏移，偏移设置：top、left、right、bottom
top:-20px;
left:50px;
bottom:10px;
right:20px;

练习：方块定位
自己编写：style

老师编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
      
      
            width:300px;
            height:300px;
            padding:10px;
            border:2px solid red;
        }
        a{
      
      
            width:100px;
            height:100px;
            text-decoration:none;
            background:pink;
            line-height:100px;
            text-align:center;
            color:white;
            display:block;
        }
        a:hover{
      
      
            background:blue;
        }
        .l2,.l4{
      
      
            position:relative;
            left:200px;
            top:-100px;
        }
        .l5{
      
      
            position:relative;
            left:100px;
            top:-300px;
        }
    </style>
</head>
<body>
<div id="box">

    <div class="l1"><a href="">链接1</a></div>
    <div class="l2"><a href="">链接2</a></div>
    <div class="l3"><a href="">链接3</a></div>
    <div class="l4"><a href="">链接4</a></div>
    <div class="l5"><a href="">链接5</a></div>
</div>
</body>
</html>

主要区别：

老师使用了display修改了a标签元素
宽width，高height，内边距padding，边框border，取消下划线text-decoration，背景颜色background，字体位置高度line-height，字体位置宽度text-align，字体颜色color，相对移动位置position:relative，左边left，顶部top，改变标签元素状态display
我使用了div块+a标签
宽width，高height，内边距padding，边框border，取消下划线text-decoration，背景颜色background，字体位置高度line-height，字体位置宽度text-align，字体颜色color，相对移动位置position:relative，左边left，顶部top

我的编写多使用了一个div块，产生了更多行代码，并且更分散，更杂乱。不如使用display更加简洁

6.2 绝对定位

position:absolute
定位：基于xxx定位，上下左右
相对定位后，它原有的位置还存在，边框不会缩小
绝对定位后，它原有的位置不在存在，边框会缩小

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

#father{
        border:1px solid #666;
		position:relative;	 /*确定父级相对定位*/
        }
        #first{
        background-color:yellow;
        border:1px dashed red;
        position:absolute; 	/*绝对定位偏移*/
        top:-20px;   
        left:50px;  
        }

6.3 固定定位 fixed

fixed属性值
偏移设置： left、right、top、bottom
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

<!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:red;
        position:absolute;
        right:0;
        bottom:0;
        }
        div:nth-of-type(2){
      
       /*fixed，固定定位*/
        width:50px;
        height:50px;
        background:yellow;
        position:fixed;
        right:0;
        bottom:0;
        }
    </style>
</head>
<body>
<div>d1</div>
<div>d2</div>
</body>
</html>

6.4　定位小结

相对定位

相对定位的特性
- 相对于自己的初始位置来定位
- 元素位置发生偏移后，它原来的位置会被保留下来
- 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
- 相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

绝对定位

绝对定位的特性
- 绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
- 元素位置发生偏移后，原来的位置不会被保留
- 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
- 设置绝对定位的元素脱离文档流
绝对定位的使用场景
- 一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

固定定位

固定定位的特性
- 相对浏览器窗口来定位
- 偏移量不会随滚动条的移动而移动
固定定位的使用场景
- 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

6.5　z-index

图层 z-index：默认是0，最高无限~999
只有存在于相对定位和绝对定位的时，只有浮起来才会有层级概念
在这里插入图片描述
网页元素透明度

/*父级元素相对定位*/
#content ul{
    position:relative;
}
/*子级元素绝对定位*/
.tipText,.tipBg{
    position:absolute;
    width:380px;
    height:25px;
    top:216px
}
/*抬高定位层*/
.tipText{
    z-index:999;
}
.tipBg{
    bcakground:black;
    opacity:0.5/*背景透明度*/
    filter:alpha(opacity=50)	/*ie8之前版本的背景透明度*/
}

背景透明度 opacity:0.5；

7 动画

菜鸟教程

源码之家

除非你是专业动画，不如尽量搜索以及成型的代码，不要重复种树

8 总结

在这里插入图片描述

CSS3详解

CSS3详解

1 学习目标

2 CSS的定义

2.1 CSS快速入门

1.2 CSS的三种导入方式

2 选择器（重点+难点）

2.1 基本选择器

2.1.1 标签选择器

2.1.2 类选择器 class

2.1.3 id选择器

2.2 层次选择器

2.2.1 后代选择器

2.2.2 子选择器

2.2.3 相邻兄弟选择器

2.2.4 通用兄弟选择器

2.3 结构-伪类选择器

2.4 属性选择器（重要）

2.5 小结

3 美化网页元素

3.1 为什么要美化网页

3.2 字体样式

3.3 文本样式

3.4 超链接伪类

3.5 列表

3.6、背景

3.7 渐变

4 盒子模型

4.1、什么是盒子模型

4.2 边框

4.3 内外边距

4.4 圆角边框

4.5 盒子阴影

5 浮动

5.1 标准文件流

5.2 display

5.3 float

5.4 父级边框塌陷的问题

5.4.1 防止浮动移动

5.4.2 防止父级边框塌陷的四种方法

5.5 display对比float

6 定位

6.1 相对定位

6.2 绝对定位

6.3 固定定位 fixed

6.4 定位小结

6.5 z-index

7 动画

8 总结

猜你喜欢

6.4　定位小结

6.5　z-index