CSS3学习笔记

最新推荐文章于 2023-04-12 11:21:15 发布

PaddyH

最新推荐文章于 2023-04-12 11:21:15 发布

阅读量275

点赞数 1

分类专栏：前端知识积累文章标签： css3 css html

本文链接：https://blog.csdn.net/baidu_33643757/article/details/120850860

版权

前端知识积累专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简介

HTML + CSS + Javascript
结构 + 表现 + 交互

如何学习

如何学习
CSS是什么？
CSS怎么用？
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变…）
盒子模型
浮动
定位
网页动画（特效）

什么是CSS及其发展史

什么是CSS

CSS (Cascading Style Sheet，层叠样式表)
CSS：表现层（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

在这里插入图片描述

发展史

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

CSS快速入门及优势

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS-First</title>
	<!-- CSS代码可以写在head里，但是不合规范 -->
	<!-- CSS应该和HTML、Javascript一样有一个独立的文件 -->
	<!-- 
		<style> 编写CSS代码，每一个声明使用分号结尾
		语法：
			选择器 {
				声明1 ; 
				声明2 ;
				声明3 ;
			}
	 -->
	<style>
		h1 {
			color: cadetblue;
		}
	</style>
</head>

<body>

<h1>#1 Title</h1>

</body>
</html>

分离CSS文件

在这里插入图片描述

h1 {
    color: cadetblue;
}

在HTML中引用CSS文件

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>CSS-First</title>
	<link rel="stylesheet" href="css/style.css">
</head>

<body>

<h1>#1 Title</h1>

</body>
</html>

CSS优势

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

四种CSS导入方式

CSS导入方式优先级：就近原则

CSS导入方式优先级：就近原则

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>CSS-First</title>
	<!-- CSS代码可以写在head里，但是不合规范 -->
	<!-- CSS应该和HTML、Javascript一样有一个独立的文件 -->
	<!-- 
		<style> 编写CSS代码，每一个声明使用分号结尾
		语法：
			选择器 {
				声明1 ; 
				声明2 ;
				声明3 ;
			}
	 -->
	<style>
		h1 {
			color: cadetblue;
		}
	</style>
</head>

<body>

<h1>#1 Title</h1>

</body>
</html>

外部样式表 — 写在独立的css文件内

在这里插入图片描述

h1 {
    color: cadetblue;
}

在HTML中引用CSS文件

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>CSS-First</title>
	<link rel="stylesheet" href="css/style.css">
</head>

<body>

<h1>#1 Title</h1>

</body>
</html>

外部链接的两种写法

链接式

<head>
	<meta charset="UTF-8">
	<title>CSS-First</title>
	<link rel="stylesheet" href="css/style.css">
</head>

导入式（CSS2.1特有的）

<head>
	<meta charset="UTF-8">
	<title>CSS-First</title>
	<style>
		@import url("css/style.css");
	</style>
</head>

行内样式

在标签元素内，编写一个style属性，编写样式即可（不推荐）

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

<h1 style="color:cadetblue">#1 Title</h1>

</body>
</html>

三种基本选择器

标签选择器 — 选择一类标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS-First</title>
	<style>
		h1 {
			color: rgb(13, 60, 61);
			background: rgba(177, 28, 28, 0.747);
			border-radius: 24px;
		}
		p {
			font-size: 20px;
		}
	</style>
</head>
<body>

<h1>#1 Title</h1>

<p>PPP</p>

</body>
</html>

类选择器 — 选择所有class属性一致的标签，可以跨标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS-First</title>
	<style>
		/* 类选择器的格式，.class的名称{} */
		/* 好处：可以多个标签归类，归属同一个class，可以复用 */
		.header1 {
			color :coral;
		}
	</style>
</head>
<body>

<h1>#1 Title</h1>

<h1 class="header1">#1 Title</h1>

<p>pp1</p>

<p class="header1">pp2</p>

</body>
</html>

ID选择器 — ID全局唯一

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS-First</title>
	<style>
		/* 
			ID选择器，ID必须保证全局唯一
			#ID {}
		*/
		#lala {
			color:cornflowerblue;
		}
	</style>
</head>
<body>

<h1 id="lala">#1 Title</h1>
<h1 >#1 Title</h1>
<h1 >#1 Title</h1>
<h1 >#1 Title</h1>

</body>
</html>

优先级：ID选择器>类选择器>标签选择器

层次选择器

后代选择器 — 祖爷爷，爷爷，爸爸，儿子

在某个元素后边

body p {
	background:darkorchid;
}

子选择器 — 只有一代

body>p {
	background:darkorchid;
}

相邻兄弟选择器 — 只有相邻的一个元素，向下的一个元素

.p2 + p {
	background:darkseagreen;
}

通用选择器 — 向下选择所有相邻弟弟的选择器

.p2 ~ p {
	background:darkseagreen;
}

结构伪类选择器

伪类：选择的条件

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>CSS-First</title>
	<style>
		ul li:first-child {
			background-color:darkslateblue;
		}
		ul li:last-child {
			background-color:deeppink;
		}
		a:hover {
			background: azure;
		}
	</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>

属性选择器

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
		.demo a {
			float:left;
			display:block;
			height: 50px;
			width:50px;
			border-radius: 10px;
			background:cadetblue;
			text-align: center;
			color:black;
			text-decoration: none;
			margin-right: 10px;
			font: bold 20px/50px Arial;
		}
		/* a[id] {
			background-color:blueviolet;
		} */
		/* = 完全匹配 */
		/* *= 包含 */
		/* a[id=first] {
			background-color:brown;
		} */
		/* ^= 以...为开头匹配 */
		/* $= 以...为结尾匹配 */
		a[href$=go] {
			background-color:burlywood;
		}
	</style>
</head>
<body>
<p class="demo">
	<a href="https://www.baidu.com" class="links item first" id="first">1</a>
	<a href="a.html" class="links item">2</a>
	<a href="b.css" class="links item">3</a>
	<a href="c.pdf" class="links item">4</a>
	<a href="e.cpp" class="links item">5</a>
	<a href="f.go" class="links item">6</a>
	<a href="r.ruby" class="links item">7</a>
	<a href="p.lua" class="links item">8</a>
	<a href="q.python" class="links item">9</a>
	<a href="w.java" class="links item last" id="last">10</a>
</p>
</body>
</html>

CSS的作用及字体样式

重点元素用span标签

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		.abc {
			color:aquamarine
		}
	</style>
</head>
<body>
	Hello<span class="abc">World</span>
</body>
</html>

字体样式

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
		body{
			/* 字体 */
			font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
		}
		h1{
			/* 字体大小 */
			font-size: 50px;
		}
		p{
			/* 字体粗细 */
			font-weight:normal;
		}
	</style>
</head>
<body>
    <h1>简介</h1>
	<p>
		Go（又称Golang）是Google开发的一种静态强类型、编译型、并发型，并具有垃圾回收功能的编程语言。
	</p>
	<p>
		罗伯特·格瑞史莫（Robert Griesemer），罗勃·派克（Rob Pike）及肯·汤普逊（Ken Thompson）于2007年9月开始设计Go，稍后Ian Lance Taylor、Russ Cox加入项目。Go是基于Inferno操作系统所开发的。Go于2009年11月正式宣布推出，成为开放源代码项目，并在Linux及Mac OS X平台上进行了实现，后来追加了Windows系统下的实现。在2016年，Go被软件评价公司TIOBE 选为“TIOBE 2016 年最佳语言”。 目前，Go每半年发布一个二级版本（即从a.x升级到a.y）。
	</p>
</body>
</html>

文本样式

颜色
对齐方式
首行缩进
行高
装饰

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
		body{
			/* 字体 */
			font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		}
		h1{
			/* 字体大小 */
			font-size: 50px;
			/* rgb(): red green blue */
			/* rgba(): red green blue 透明度 */
			color: rgba(100, 255, 255, 0.9);
			text-align:center;
		}
		p{
			/* 字体粗细 */
			font-weight:normal;
			/* 首行缩进 */
			text-indent: 2em;
		}
		.p1 {
			line-height: 2;
		}
		.p2 {
			line-height: 3;
			text-decoration:line-through;	
		}
	</style>
</head>
<body>
    <h1>简介</h1>
	<p class="p1">
		Go（又称Golang）是Google开发的一种静态强类型、编译型、并发型，并具有垃圾回收功能的编程语言。
	</p>
	<p class="p2">
		罗伯特·格瑞史莫（Robert Griesemer），罗勃·派克（Rob Pike）及肯·汤普逊（Ken Thompson）于2007年9月开始设计Go，稍后Ian Lance Taylor、Russ Cox加入项目。Go是基于Inferno操作系统所开发的。Go于2009年11月正式宣布推出，成为开放源代码项目，并在Linux及Mac OS X平台上进行了实现，后来追加了Windows系统下的实现。在2016年，Go被软件评价公司TIOBE 选为“TIOBE 2016 年最佳语言”。 目前，Go每半年发布一个二级版本（即从a.x升级到a.y）。
	</p>
</body>
</html>

文本阴影和超链接伪类

#nav {
    width: 250 ;
}
.title {
    font-size: 25px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: red;
}
ul {
    background:gray;
}
ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a {
    text-decoration: none;
    font-size: 15px;
    color:black;
}
a:hover {
    color:cadetblue;
    text-decoration: underline;
}

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		a {
			text-decoration:none;
			color:black;
		}
		/* 鼠标悬浮状态 */
		a:hover {
			color:cadetblue;
		}
		/* 鼠标按住状态 */
		a:active {
			color:coral;
		}
		#price {
			/* text-shadow: 阴影颜色 水平偏移半径 垂直偏移半径 阴影半径*/
			text-shadow: cadetblue 10px 10px 10px;
		}
	</style>
</head>
<body>
	<img src="https://img1.doubanio.com/view/subject/s/public/s33953927.jpg" alt="">
	<p>
		<a href="https://book.douban.com/subject/35542798/?icn=index-latestbook-subject">公共卫生史</a>
	</p>
	<p>作者：乔治·罗森</p>
	<p id="price">¥ 88</p>
</body>
</html>

列表样式练习

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav">
	<h2 class="title">全部商品分类</h2>
	<ul class="service-bd" role="menubar">
              
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="0" class="J_Cat a-all">
		  <a href="https://huodong.taobao.com/wow/a/act/tao/dailyact/2633/wupr?wh_pid=dailyAct-214753" data-cid="1" data-dataid="222887">女装</a> /
		  <a href="https://s.taobao.com/search?q=内衣" data-cid="1" data-dataid="222890">内衣</a>
		  
		  / <a href="https://s.taobao.com/search?q=家居" data-cid="1" data-dataid="222889">家居</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="1" class="J_Cat a-all">
		  <a href="https://huodong.taobao.com/wow/a/act/tao/dailyact/2772/wupr?wh_pid=dailyAct-216657" data-cid="1" data-dataid="222887">女鞋</a> /
		  <a href="https://s.taobao.com/search?q=%E7%94%B7%E9%9E%8B&amp;imgfile=&amp;commend=all&amp;ssid=s5-e&amp;search_type=item&amp;sourceId=tb.index&amp;spm=a21bo.2017.201856-taobao-item.1&amp;ie=utf8&amp;initiative_id=tbindexz_20170306" data-cid="1" data-dataid="222890">男鞋</a>
		  
		  / <a href="https://s.taobao.com/search?q=%E7%AE%B1%E5%8C%85&amp;imgfile=&amp;commend=all&amp;ssid=s5-e&amp;search_type=item&amp;sourceId=tb.index&amp;spm=a21bo.21814703.201856-taobao-item.1&amp;ie=utf8&amp;initiative_id=tbindexz_20170306" data-cid="1" data-dataid="222889">箱包</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="2" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?ie=utf8&amp;initiative_id=staobaoz_20210219&amp;stats_click=search_radio_all%3A1&amp;js=1&amp;imgfile=&amp;q=%E6%AF%8D%E5%A9%B4&amp;suggest=history_1&amp;_input_charset=utf-8&amp;wq=%E6%AF%8D%E5%A9%B4&amp;suggest_query=%E6%AF%8D%E5%A9%B4&amp;source=suggest" data-cid="1" data-dataid="222887">母婴</a> /
		  <a href="https://s.taobao.com/search?q=童装" data-cid="1" data-dataid="222890">童装</a>
		  
		  / <a href="https://s.taobao.com/search?q=玩具" data-cid="1" data-dataid="222889">玩具</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="3" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?q=男装" data-cid="1" data-dataid="222887">男装</a> /
		  <a href="https://s.taobao.com/search?q=运动户外" data-cid="1" data-dataid="222890">运动户外</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="4" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?q=%E7%BE%8E%E5%A6%86&amp;imgfile=&amp;js=1&amp;stats_click=search_radio_all%3A1&amp;initiative_id=staobaoz_20210126&amp;ie=utf8" data-cid="1" data-dataid="222887">美妆</a> /
		  <a href="https://s.taobao.com/search?q=彩妆" data-cid="1" data-dataid="222890">彩妆</a>
		  
		  / <a href="https://s.taobao.com/search?q=个护" data-cid="1" data-dataid="222889">个护</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="5" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?q=手机" data-cid="1" data-dataid="222887">手机</a> /
		  <a href="https://s.taobao.com/search?q=数码" data-cid="1" data-dataid="222890">数码</a>
		  
		  / <a href="https://s.taobao.com/search?q=办公" data-cid="1" data-dataid="222889">企业</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="6" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?q=大家电" data-cid="1" data-dataid="222887">大家电</a> /
		  <a href="https://s.taobao.com/search?q=生活电器" data-cid="1" data-dataid="222890">生活电器</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="7" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?q=零食" data-cid="1" data-dataid="222887">零食</a> /
		  <a href="https://s.taobao.com/search?q=生鲜" data-cid="1" data-dataid="222890">生鲜</a>
		  
		  / <a href="https://s.taobao.com/search?q=茶酒" data-cid="1" data-dataid="222889">茶酒</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="8" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?q=厨具" data-cid="1" data-dataid="222887">厨具</a> /
		  <a href="https://s.taobao.com/search?q=收纳" data-cid="1" data-dataid="222890">收纳</a>
		  
		  / <a href="https://s.taobao.com/search?q=清洁" data-cid="1" data-dataid="222889">清洁</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="9" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?q=家纺" data-cid="1" data-dataid="222887">家纺</a> /
		  <a href="https://s.taobao.com/search?q=家饰" data-cid="1" data-dataid="222890">家饰</a>
		  
		  / <a href="https://s.taobao.com/search?q=鲜花" data-cid="1" data-dataid="222889">鲜花</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="10" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?q=图书音像" data-cid="1" data-dataid="222887">图书音像</a> /
		  <a href="https://s.taobao.com/search?q=%E6%96%87%E5%85%B7&amp;imgfile=&amp;commend=all&amp;ssid=s5-e&amp;search_type=item&amp;sourceId=tb.index&amp;spm=a21bo.2017.201856-taobao-item.1&amp;ie=utf8&amp;initiative_id=tbindexz_20170306" data-cid="1" data-dataid="222890">文具</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="11" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?q=医药保健" data-cid="1" data-dataid="222887">医药保健</a> /
		  <a href="https://s.taobao.com/search?q=%E8%BF%9B%E5%8F%A3&amp;imgfile=&amp;js=1&amp;stats_click=search_radio_all%3A1&amp;initiative_id=staobaoz_20201113&amp;ie=utf8" data-cid="1" data-dataid="222890">进口</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="12" class="J_Cat a-all">
		  <a href="https://car.tmall.com/wow/car/act/carfp" data-cid="1" data-dataid="222887">汽车</a> /
		  <a href="https://huodong.taobao.com/wow/pm/default/pcgroup/c51a5b?disableNav=YES" data-cid="1" data-dataid="222890">二手车</a>
		  
		  / <a href="https://car.tmall.com/wow/car/act/carfp" data-cid="1" data-dataid="222889">用品</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="13" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?q=%E5%A4%A9%E7%8C%AB%E5%A5%BD%E6%88%BF&amp;imgfile=&amp;js=1&amp;stats_click=search_radio_all%3A1&amp;initiative_id=staobaoz_20200925&amp;ie=utf8" data-cid="1" data-dataid="222887">房产</a> /
		  <a href="https://s.taobao.com/search?q=装修" data-cid="1" data-dataid="222890">装修家具</a>
		  
		  / <a href="https://s.taobao.com/search?q=建材" data-cid="1" data-dataid="222889">建材</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
		<li data-closeper="" aria-label="查看更多" role="menuitem" aria-haspopup="true" data-groupid="14" class="J_Cat a-all">
		  <a href="https://s.taobao.com/search?q=手表" data-cid="1" data-dataid="222887">手表</a> /
		  <a href="https://s.taobao.com/search?q=眼镜" data-cid="1" data-dataid="222890">眼镜</a>
		  
		  / <a href="https://s.taobao.com/search?q=珠宝饰品" data-cid="1" data-dataid="222889">珠宝饰品</a>
		  
		  <i aria-hidden="true" class="tb-ifont service-arrow"></i>
		</li>
	  
	</ul>
</div>
</body>
</html>

背景图像应用及渐变

背景图像

#nav {
    width: 500 ;
}
.title {
    font-size: 25px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    /* 颜色 图片 图片大小 图片位置 平铺方式 */
    background: red url("../images/right.png") 0px 0px no-repeat;
}
ul {
    background:gray;
}
ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/right.png");
    background-position: 250px 2px;
    background-repeat: no-repeat;
}
a {
    text-decoration: none;
    font-size: 15px;
    color:black;
}
a:hover {
    color:cadetblue;
    text-decoration: underline;
}

渐变

Grabient

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 径向渐变 圆形渐变 */
		body {
			background-color: #D9AFD9;
			background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
		}
	</style>
</head>
<body>
hahaha	
</body>
</html>

盒子模型及边框使用

盒子模型

margin 外边距
border 边框
- 粗细
- 样式
- 颜色
padding 内边距

在这里插入图片描述

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body {
			/* body总有一个默认的外边距，默认为0 */
			/* margin:0;
			padding:5px; */
			background-color: #D9AFD9;
			background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
		}
		#app {
			width: 300px;
			border: 1px solid red;
			/* 外边距的妙用：居中 */
			margin: 0 auto;
			/* margin 0 0 0 0: 上 右 下 左 顺时针方向 */
		}
		form {
			background-color: bisque;
		}
		div:nth-of-type(1)>input {
			border: 3px solid black;
		}
	</style>
</head>
<body>
        <div id="app">
	        <h2>会员登录</h2>
	        <form action="#">
		        <div>
			        <span>用户名:</span>
			        <input type="text">
		        </div>
		        <div>
			        <span>密码:</span>
			        <input type="password">
		        </div>
		        <div>
			        <span>邮箱</span>
			        <input type="email">
		        </div>
	        </form>
        </div>
</body>
</html>

圆角边框及阴影和经验分享

圆角边框

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div {
			width: 50px;
			height: 50;
			border: 1px solid black;	
			/* 左上 右上 右下 左下 */
			border-radius: 50px 0px 0px 0px;
			/* border-radius: 100%; */
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

阴影

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div {
			width: 50px;
			height: 50;
			border: 1px solid black;	
			box-shadow: 1px 1px 100px yellow;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

Display和浮动

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div {
			width: 100px;
			height: 100px;
			border: 1px solid red;
			/* block 块元素 */
			/* inline 行内元素 */
			/* inline-block 既是行内元素又是块元素，可以内联，但是在一行内 */
			/* div和span可以通过display转换为块元素或行内元素 */
			display: inline-block;
		}
		span {
			width: 100px;
			height: 100px;
			border: 1px solid red;
			display: inline-block;
		}
		p {
			/* 浮动 */
			float: right;
			clear: both;
		}
	</style>
</head>
<body>
	<div>div块元素</div>
	<span>span行内元素</span>
	<div>
		<p>p1</p>
	</div>
	<div>
		<p>p2</p>
	</div>
	<div>
		<p>p3</p>
	</div>
</body>
</html>

overflow及父级边框塌陷问题

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

解决方案

增加父级元素的高度

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

增加一个空的div标签，清楚浮动

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

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

overflow，在父级元素中增加一个overflow: hidden;

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#content {
			width: 400px;
			height: 400px;
			overflow: scroll;	
		}
	</style>
</head>
<body>
<div id="content">
	<img src="./images/cx-5.jpg" alt="">
	<p>haha</p>
</div>
</body>
</html>

父级元素添加一个伪类: after

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

小结

浮动元素后面增加空div
简单，代码中尽量空div
设置父级元素的高度
简单，假设元素有了固定的高度，就会被限制
overflow
简单，下拉的一些场景避免使用
4 父级元素添加一个伪类: after
写法稍微复杂一点，但是没有副作用，推荐使用！

对比`display`和`float`

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

相对定位的使用和定位

相对定位

练习

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 相对定位：相对于自己原来位置的偏移 -->
	<style>
		body{
			padding: 20px;
		}
		div {
			margin: 10px;
			padding: 10px;
			width: 300px;
			height: 300px;
			font-size: 15px;
			line-height: 25px;
			border: 1px solid red;
			padding: 10px;
			margin: 0px auto;
		}
		a {
			width: 100px;
			height: 100px;
			text-align: center;
			text-decoration: none;
			font-size: 20px;
			color: white;
			background-color: deeppink;
			line-height: 100px;
			display: block;
		}
		a:hover {
			background-color: blue;
		}
		#second, #forth {
			position: relative;
			top: -100px;
			left: 200px;
		}
		#fifth{
			position: relative;
			top: -300px;
			left: 100px;
		}
	</style>
</head>
<body>
	<div id="father">
		<a id="first" href="#">1st</a>	
		<a id="second" href="#">2nd</a>
		<a id="third" href="#">3rd</a>
		<a id="forth" href="#">4th</a>
		<a id="fifth" href="#">5th</a>
	</div>
	</div>
</body>
</html>

绝对定位

定位：基于xxx定位，上下左右

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

固定定位

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</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) {
			width: 50px;
			height: 50px;
			background: yellowgreen;
			/* 固定定位 */
			position: fixed;
			right: 0;
			bottom: 0;
		}
	</style>
</head>
<body>
	<div>div1</div>
	<div>div2</div>
</body>
</html>

`z-index`

在这里插入图片描述

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#content {
			overflow: hidden;
			font-size:25px;
			line-height:25px;
			width: 1000px;
			border: 1px solid black;
		}
		#content ul{
			position:relative;
		}
		ul li {
			list-style: none;
		}
		.tipText, .tipBg {
			position:absolute;
			width:380px;
			height: 25px;
			top:50px;
		}
		.tipText {
			color: white;
			/* z轴层级：最低的0，最高无限 */
			z-index: 0;
		}
		.tipBg {
			background-color:grey;
			/* 背景透明度 */
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<div id="content">
		<ul>
			<li> <img src="./images/cx-5.jpg" alt=""> </li>
			<li class="tipText"> haha </li>
			<li class="tipBg"> hehe </li>
			<li>时间：1234</li>
			<li>地点：abcd</li>
		</ul>
	</div>
</body>
</html>