Html、Css入门解析(复习专用)

其他 2021-01-26 08:57:00 阅读次数: 0

设计网页的基本步骤

确定核心页面
确定每一行
确定每一行中的浮动情况
先写结构再写模式、先写html再写css

Html

超文本标记语言（超过文本，还有图片等格式）
标签：单标签、双标签、框架标签

注释

<!-- 代码千万行，注释第一行。 -->

特殊字符


代码		显示结果		描述
&lt;		<	小于号或显示标记（less than）
&gt;		>	大于号或显示标记（great than）
&amp;		&	可用于显示其它特殊字符
&quot;		“	引号
&reg;		®	已注册
&copy;		©	版权
&trade;		™	商标
&ensp;			半个空白位
&emsp;			一个空白位
&nbsp;			不断行的空白

路径

相对路径

相对当前文件的路径

/ 进入下一级目录
…/ 进入上一级目录(两个点)
./ 本目录（一个点）

绝对路径

文件在计算机上的完整路径（X盘等），更换电脑时，可能会出现问题（由于底层路径不一致）

框架标签

!DOCTYPE html> 声明为HTML5 文档（告诉计算机，这个文档是HTML5的小弟）
<html> 元素是HTML页面的根元素
<html lang="en"> 告诉浏览器这是是哪种语言的网站，不影响内容。 zh-CN 是中文网站
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

单标签

br标签（强制换行）

标签的特性：来自break的缩写，顾名思义，强制打断，跳入下一行。

<br/>

img标签（图片）

src 图片的url（必须属性）
alt 图片加载失败时展示的文字
title 鼠标放在图片上展示的文字
height、width 图片的高宽（两者只修改其一不会改变图片的高宽比）
border 图片的边框 
<img src="img/qianFuXin6981t010a2b73d9705e036b.jpg" alt="加载失败" title="me" width="800" border="15" />

input标签（输入标签）

type 介绍
text 文本
password 密码
radio 单选框（name需要相同，用value区分）
checkbox 多选框（name需要相同，用value区分）
button 按钮
file 上传文件
submit 提交
reset 重制 
<form action="" method="post">
			
			userName:<input type="text" value="userName" name="userNameInput" maxlength="10">
			<br>
			
			password:<input type="password" name="passwordInput" />
			<br>
			<label for="man">男：</label><input type="radio" name="sexInput" id="man" value="男" />
			<br>
			女：<input type="radio" name="sexInput" id="" value="女" checked="checked"/>
			<br />
			吃饭：<input type="checkbox" name="hobbyInput" id="" value="吃饭" />
			睡觉：<input type="checkbox" name="hobbyInput" id="" value="睡觉" />
			打豆豆：<input type="checkbox" name="hobbyInput" id="" value="打豆豆" checked="checked" />
			<br>
			<input type="button" name="" id="" value="按钮" />
			<br>
			上传文件：<input type="file" name="" id="" value="" /><br>
			<input type="submit" id="" name="" value="立即提交" />
			<input type="reset" value="数据初始化" />
		</form>

双标签

h系列标签（标题）

标签的特性：独占一行、文字大、字体粗

<h1>我是标题1</h1>
<h2>我是标题2</h2>
....
<h6>我是标题6</h6>

p标签（段落）

标签的特性：段落标签之后的文字另起一行，标签内的文字随着浏览器的宽度而自动换行

<p>我是段落</p>

文字修饰标签（加粗、斜体、下划线、删除线）

<strong>加粗</strong>
<del>删除线</del>
<em>倾斜</em>
<ins>下划线</ins>

div标签（盒子）

标签的特性：默认一个div占一行

<div>我是div</div>

span标签（盒子）

标签的特性：默认多个span占一行

<span>我是span</span>

a标签（超链接标签）

a 来自anchor的缩写
标签的特性：载体可以是文字、图片、表格等

href 超链接的地址
target 打开方式（默认_self 可设为_blank）
download 点击链接下载URL的内容
  • 如果href为#代表href为空
  • 如果href为.zip等压缩文件结尾则等价于文件下载
  • 如果href为#X（X为某个标签的id）则跳转到那个标签（例如返回首部、跳转到尾部）

table标签（表格标签）

PS：表格里放表单 可以布局

align 表格的位置
border 边框
cellspacing 单元格之间的距离
cellpadding 文字与边框的距离
width 宽度
height 高度

子标签：
thead、tbody 表格的头和身体
th 表格数据的第一列（加粗 居中的效果）
tr 某一行表格
td 某个单元格

合并单元格（记得删除后者的单元格）:
rowspan:上下拼接单元格
colspan：左右拼接单元格

<table align="center" border="1" cellspacing="0" cellpadding="10">
			<thead>
				<th></th>
				<th></th>
				<th></th>
			</thead>
			<tbody>
				<tr>
					<td rowspan="2"></td>
					<td colspan="2"></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>

ul标签（无序列表标签）

ul 来自 unordered list缩写
ul内部只能存放li
li内部可以放任何东西

<h1>无序标签</h1>
		<ul>
			<li><img src="img/123.jpg" alt="加载失败" title="me" width="800" border="15" /></li>
			<li>1</li>
			<li>1</li>
		</ul>

ol标签（有序列表标签）

ol 来自ordered list缩写
ol内部只能存放li
li内部可以放任何东西

<h1>有序标签</h1>
		<ol>
			<li>1</li>
			<li>2</li>
		</ol>

dl标签（自定义标签）

dl来自 define list的缩写
dl内部只能放dt、dd
dt是大哥、dd是小弟，两者都能放任何东西

<h1>自定义标签</h1>
		<dl>
			<dt>大哥</dt>
			<dd>小弟</dd>
		</dl>

form标签（表单标签）

表单控件：input、select、textarea、lable

<form action="" method="">
			action：跳转地址
			method：post方式还是get方式
			表单内部存放表单控件
			input在上面的单标签区域
			selected、textarea、lable在下面双标签区域
</form>

select标签（下拉框标签）

性别:<select name="">
				<option value="boy" selected="selected">男</option>
				<option value="girl">女</option>`在这里插入代码片`
			</select>

textarea标签（文本域标签）

input标签的text类型和textarea标签有什么区别？
textarea可以分行，输入空间更灵活。

label标签（辅助标签）

有些时候单选框太小，选择不太容易，所以用label去选择单选框等控件，点击label等价于点击单选框。
用id去确认控件的身份

<label for="man">男：</label><input type="radio" name="sexInput" id="man" value="男" />

区域标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<!-- 头部标签 -->
		<header></header>
		<!-- 导航标签 -->
		<nav></nav>
		<!-- 内容标签 -->
		<article></article>
		<!-- 定义文档某个区域 -->
		<section></section>
		<!-- 侧边栏标签 -->
		<aside></aside>
		<!-- 尾部标签 -->
		<footer></footer>
	</body>
</html>

视频标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<!-- autoplay="autoplay 自动播放
		 controls="controls" 播放控件
		 loop="loop" 循环播放
		poster="img/123.png 加载视频等待的画面 
		 muted="muted" 静音播放
		 -->
		<video src="1.mp4" autoplay="autoplay" controls="controls" width="800px" height="800px" loop="loop" poster="img/123.png"
		 muted="muted"></video>
	</body>
</html>

音频标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<audio src="1.mp3" autoplay="autoplay" controls="controls">
			当前浏览器不支持audio
		</audio>
	</body>
</html>

input增强表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<!-- 点击提交表单后自动检查数据格式 -->
		<form action="">
			<!-- required="required" 不能为空 -->
			<!-- placeholder="123" 提示信息 -->
			<!-- autofocus="autofocus" 自动把鼠标光标放到该输入框 -->
			<!-- autocomplete="off" 对于表单提交完成的值自动记录 -->
			<input type="email" name="" id="" value="" required="required" placeholder="123" autofocus="autofocus" autocomplete="off" />
			<input type="url" name="" id="" value="" />
			<input type="number" name="" id="" value="" />
			<input type="tel" name="" id="" value="" />
			<input type="search" name="" id="" value="" />
			<input type="color" name="" id="" value="" />
			<input type="submit" value="提交" />
			<!-- multiple="multiple" 上传多个文件 -->
			<input type="file" name="" id="" value="" multiple="multiple" />
		</form>
	</body>
</html>

Emmet

输入代码的缩写即可生成完整代码，提高编写速度。

html输入标签名加对应操作
div	
<div></div>

div*2	
<div></div> <div></div>

ul>li
<ul>
<li></li>
</ul>

a+div
<a href=""></a>
<div></div>

.demo
<div class="demo"></div>

#demo
<div id="demo"></div>

a#demo
<a href="" id="demo"></a>

#demo$*5
<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>
<div id="demo4"></div>
<div id="demo5"></div>

#demo{i am demo}
<div id="demo">i am demo</div>

css输入缩写

h20
height: 20px;

w20
width: 20px;

tac
text-align: center;
			}

Css

css又叫网页美容师，专注样式。
html专注结构、css专注样式，两者各谋其政、互不干扰。

CSS的三种引入方式

行内样式表

在某个标签上书写、控制一个标签

<a style="color: antiquewhite;">red40px</a>

内部样式表

在style标签内部书写、控制一个页面

<style type="text/css">

			* {
     
     
				/* 文本位置 */
				text-align: left;	
				/* 上划线 */
				text-decoration: overline;
				/* 下划线 */
				text-decoration: underline;
				/* 删除线 */
				text-decoration: line-through;
				/* 缩进两个文字大小的距离 */
				text-indent: 2em;
				/* 行间距 */
				line-height: 30px;
				/* 文字颜色 */
				color: #0000FF;
			}
		</style>

外部样式表

在后缀为css的文件内部书写、控制多个页面

引入代码

<link rel="stylesheet" type="text/css" href="mycss.css"/>

css的工作流程：找到选择器、然后对选择器做某些样式操作。
简单来说，找对人、做对事。

  • 基础选择器
    1、标签选择器
    2、类选择器
    3、id选择器
    4、通用选择器
  • 复合选择器
    1、后代选择器
    2、子选择器
    3、并集选择器
    4、伪类选择器

标签选择器

顾名思义，这个标签就是html中的基础标签。
优点：定义一个样式可以修改所有标签样式。
缺点：优点也是缺点，全部标签都要改，不能针对某个标签
比如：外国人吃西餐（外国人是标签、吃西餐是样式），使用了这句代码，所有外国人都要吃西餐，是不是太霸道了？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器  顾名思义  是html基础标签 */
			/* 类选择器  顾名思义   某类xx的集合  他们有什么共同的特种  他们都喜欢打篮球  他们都喜欢打羽毛球  当然了  一个标签可以使用多类  类之间用空格分离
			类的定义  一定要功能单一  不要复杂  后期可以组合使用
			id的定义  只为某个人使用  独一无二  只能给一个人使用    后者使用无效
			统配选择器  全部标签都会应用该样式
			*/
			h1 {
     
     
				color: green;
			}
			p {
     
     
				color: red;
			}
			div {
     
     
				color: purple;
			}
			
		</style>
	</head>
	<body>
		<h1>原谅绿</h1>
		<p>爆裂红</p>
		<div >
			基佬紫
		</div>
	</body>
</html>

类选择器

定义一个类（表示对现实生活中一类具有共同特征的事物的抽象）
爱打篮球的人是一类、爱打羽毛球的人是一类。一个人可以同时喜欢打篮球和打羽毛球。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器  顾名思义  是html基础标签 */
			/* 类选择器  顾名思义   某类xx的集合  他们有什么共同的特种  他们都喜欢打篮球  他们都喜欢打羽毛球  当然了  一个标签可以使用多类  类之间用空格分离
			类的定义  一定要功能单一  不要复杂  后期可以组合使用
			id的定义  只为某个人使用  独一无二  只能给一个人使用    后者使用无效
			统配选择器  全部标签都会应用该样式
			*/
			.red {
     
     
				color: red;
			}
			.size35 {
     
     
				font-size: 35px;
			}
			
		</style>
	</head>
	<body>
		<h1 class="red">爆裂红</h1>
		<p class="red size35">爆裂红35</p>
	</body>
</html>

id选择器

id是独一无二的，只能使用一次，类似人的身份证
class可以重复被使用，类似人的爱好。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器  顾名思义  是html基础标签 */
			/* 类选择器  顾名思义   某类xx的集合  他们有什么共同的特种  他们都喜欢打篮球  他们都喜欢打羽毛球  当然了  一个标签可以使用多类  类之间用空格分离
			类的定义  一定要功能单一  不要复杂  后期可以组合使用
			id的定义  只为某个人使用  独一无二  只能给一个人使用    后者使用无效
			统配选择器  全部标签都会应用该样式
			*/
			#QFX {
     
     
				color: blue;
				font-size: 33px;
			}
			
		</style>
	</head>
	<body>
	<p id="QFX">钱甫新的样式</p>

	</body>
</html>

通配选择器

所有的标签都适用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器  顾名思义  是html基础标签 */
			/* 类选择器  顾名思义   某类xx的集合  他们有什么共同的特种  他们都喜欢打篮球  他们都喜欢打羽毛球  当然了  一个标签可以使用多类  类之间用空格分离
			类的定义  一定要功能单一  不要复杂  后期可以组合使用
			id的定义  只为某个人使用  独一无二  只能给一个人使用    后者使用无效
			统配选择器  全部标签都会应用该样式
			*/
		   
			* {
     
     
				color: red;
				font-size: 40px;
			}
			
		</style>
	</head>
	<body>
	<p>red40px</p>
	<a >red40px</a>
	</body>
</html>

后代选择器

例如一：我想让中国安徽合肥蜀山区的房子变成红色
改变的只是蜀山区房子的颜色，而中国安徽合肥只是位了定位蜀山区，不会发生任何改变。
例如二：我想让中国安徽的房子变成红色
只要是房子，无论是合肥、宿州、合肥蜀山区、都会变成红色（只要属于安徽），都会变成红色。

PS:语法注意
1、书写代码时"中国安徽合肥蜀山区"用空格隔开
2、这里的中国安徽合肥蜀山区可以是任意的基础选择器（可参考前面的基础选择器列表）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li {
     
     
				color: red;
			}
			ul li a {
     
     
				color: yellow;
			}
			
			ol li {
     
     
				color: blue;
			}
			
			ol li {
     
     
				color: blue;
			}
			
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css"/>
	</head>
	<body>
		<ol>
			<li>ol下面的li是红色</li>
		</ol>
	<ul>
		<li>ul下面的li是蓝色</li>
		<li><a>ul下面的li下面的a是黄色</a></li>
	</ul>
	</body>
</html>

子选择器

例如一：我想让我的儿子做医生
你的儿子会做医生，但是你不能决定你的孙子、曾孙子。换句话说，你只能影响你儿子的选择，你儿子的后代你无法影响。

PS：语法注意
父亲和儿子之间应该用>隔开
例如 div>a

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div>a {
     
     
				color: red;

			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div>
			<a href="">我是div的的儿子</a>
			<p>
				<a href="">我是div的孙子 我不变色</a>
			</p>
		</div>
	</body>
</html>

并集选择器

例如一：我想让我的裤子和衬衫都是红色
裤子和衬衫的需求一样，我就没必要写两遍，用并集选择器只需要写一遍就好了。
PS：语法注意
衬衫和裤子用英文逗号隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a,
			div {
     
     
				color: red;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<a href="">我是红色的 a</a>
		<div>我是红色的div</div>
	</body>
</html>

伪类选择器

a标签的伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			应该按照LVHA的顺序(link visited hover active)  不要颠倒顺序
			a:link{
     
     
				/* 原本的颜色 */
				color:red;	
			}
			/* 鼠标点击后的颜色 */
			a:visited{
     
     
				color:blue;
			}
			/* 鼠标放上去的颜色 */
			a:hover{
     
     
				color:yellow;
			}
			/* 点击鼠标后没放开的颜色 */
			a:active{
     
     
				color:orange;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<a href="">我是a 我有四种形态</a>
	</body>
</html>

input标签的伪类选择器

当鼠标点击input时 会产生一些操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input:focus{
     
     
				/* 边框的颜色  字体的颜色*/
				color: #0000FF;		
				
				/* 输入框的颜色 */
				background: white;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<input type="" name="" id="" value="qwqw" />
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 是input标签且value值存在时 才能使用下方样式 */
			input[value] {
     
     
				color: red;
			}

			/* 是input标签且type等于password 才能使用下方样式 */
			input[type="password"] {
     
     
				color: green;
			}

			/* 是div标签且class的值是q开头的 
			^换成$就是结尾
			^换成*就是包含
			*/
			div[class^="q"] {
     
     
				color: aquamarine;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<input type="text" name="" id="" value="" />
		<input type="password" name="" id="" />
		<div class="q1">1</div>
		<div class="q2">2</div>
		<div class="q3">3</div>
		<div class="q4">4</div>
		<div class="q5">5</div>
	</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 第一个孩子使用下面样式 */
			ul li:first-child {
     
     
				background-color: #0000FF;
			}

			/* 最后一个孩子使用下面样式 */
			ul li:last-child {
     
     
				background-color: #0000FF;
			}

			/* 第3（n）个孩子使用下面样式 */
			ul li:nth-child(3) {
     
     
				background-color: #0000FF;
			}

			/* 奇数孩子使用下面样式 */
			ul li:nth-child(odd) {
     
     
				background-color: red
			}

			/* 偶数孩子使用下面样式 */
			ul li:nth-child(even) {
     
     
				background-color: #0000FF;
			}

			/* 
			n从0开始（只能是n 不能是a等其他字母）  满足n公式的使用以下样式
			2n 偶数
			2n+1 奇数
			5n 5 10 15...
			n+5 从第五个开始
			-n+5 前五个 
			*/
			ul li:nth-child(2n) {
     
     
				background-color: black;
			}
			
			
			/* first-of-type和first-child的区别 */
			/* first-child把所有的元素一视同仁 从1从头开始编号 然后找到对应的元素和前面的类型相比,相同则改变,不同则不变
			 例如  这里的p编号是1  但是不满足前面的div条件  所以不改变
			 
			 first-of-type先看前面类型 再进行编号  满足条件的才可以加入编号队列 	然后再找对应的数字  改变其格式
			 
			 */
			
			section div:first-child{
     
     
				color: #0000FF;
			}
			/* 寻找标签为div 的第一个div */
			section div:first-of-type{
     
     
				color: #0000FF;
			}
			
			/* 寻找标签为div 的第三个div */
			section div:first-of-type(:;){
     
     
				color: #0000FF;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
		<section>
			<p>p</p>
			<div>div</div>
		</section>
	</body>
</html>

伪元素选择器

伪元素是行内元素，但文档中找不到，所以叫伪元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				background-color: gray;
				color: white;
				height: 200px;
				width: 200px;
			}
			/* 在div的内部加入内容且在div内容前面加入你想要的内容
			 必须有content属性
			 */
			div::before{
     
     
				content: '前面';
			}
			/* 在div的内部加入内容且在div内容后面加入你想要的内容 
			必须有content属性
			*/
			div::after{
     
     
				content: '后面';
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div id="">
			div
		</div>
	</body>
</html>

解决padding、border撑开父盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
     
     
				padding: 0;
				margin: 0;
				box-sizing:border-box;
			}

			.outside {
     
     
				height: 200px;
				width: 200px;
				border: 10px solid red;
				padding: 20px;
				/* 如果父盒子有border、pading且存在子代,默认撑开（变大）父盒子的长度(再苦不能苦孩子)
				如果设置box-sizing: border-box; 父盒子长度不变（严父） */
				box-sizing: border-box;
			}

			.inside {
     
     
				height: 100px;
				width: 100px;
				border: 10px solid blue;

			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div class="outside">
			<div class="inside"></div>
		</div>
	</body>
</html>

图片模糊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
     
     
				/* blur数值越大越模糊 */
				filter: blur(3px);
			}

			/* 鼠标经过变清晰 移开变模糊 */
			img:hover {
     
     
				filter: blur(0);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<img src="Screenshot_20200820-220348_TFT.jpg">
	</body>
</html>

父盒子永远比子盒子大xxpx

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.big {
     
     
				height: 200px;
				width: 200px;
				border: 1px solid #0000FF;
			}

			/* 子盒子永远都比父盒子小30px  公式计算 */
			.small {
     
     
				height: calc(100% - 30px);
				width: calc(100% - 30px);
				border: 1px solid red;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div class="big">
			<div class="small"></div>
		</div>
	</body>
</html>

过渡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				width: 200px;
				height: 200px;
				background-color: gray;
				/* 四个参数:变化的属性(多个属性用逗号分割 多个用all也可以) 花费时间 运动曲线 何时开始 */
				transition: width, height .5s ease .5s;
			}

			div:hover {
     
     
				width: 400px;
				height: 400px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div></div>
	</body>
</html>

进度条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.big {
     
     
				width: 200px;
				height: 50px;
				border: 1px solid red;
				/* 圆角边框 */
				border-radius: 15px;
				padding: 5px;
			}

			.small {
     
     
				width: 100px;
				height: 100%;
				background-color: red;
				/* 过渡效果 */
				transition: width 1s ease .2s;
			}

			.big .small:hover {
     
     
				width: 80%;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div class="big">
			<div class="small"></div>
		</div>
	</body>
</html>

2D转换

盒子移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				height: 200px;
				width: 200px;
				background-color: red;
				/* 
			translate不会改变其他模块的位置（自身位置改变不会改变布局）
			将位置向右200px 向下200px
			 百分号的参照物不是父盒子 而是自身
			 对行内元素无效
			 */
				transform: translate(200px, 200px);
				transform: translate(50%, 50%);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div></div>
	</body>
</html>

小盒子在大盒子内部水平垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				/* 子绝父相 */
				position: absolute;
				height: 500px;
				width: 500px;
				background-color: red;

			}

			p {
     
     
				/* 子绝父相 */
				position: absolute;
				top: 50%;
				left: 50%;
				height: 200px;
				width: 200px;
				background-color: blue;
				/* 左移上移自身的50% */
				transform: translate(-50%, -50%);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div>
			<p></p>
		</div>
	</body>
</html>

盒子旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p {
     
     
				height: 200px;
				width: 200px;
				background-color: blue;
				transition: all 1s;
			}

			p:hover {
     
     
				transform: rotate(360deg);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<p></p>
	</body>
</html>

不按照中心轴旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p {
     
     
				height: 200px;
				width: 200px;
				background-color: blue;
				/* 选择左下角作为旋转角 */
				transform-origin: left bottom;
				transition: all 1s;
			}

			p:hover {
     
     
				transform: rotate(360deg);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<p></p>
	</body>
</html>

输入框的旋转小三角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				position: relative;
				width: 249px;
				height: 35px;
				border: 1px solid black;
			}

			div::after {
     
     
				content: "";
				position: absolute;
				top: 10px;
				right: 15px;
				width: 10px;
				height: 10px;
				/* 正方形只留两条边并且旋转就可以出现三角 */
				border-right: 1px solid #000;
				border-bottom: 1px solid #000;
				transform: rotate(45deg);
				/* 过渡效果 节奏变慢 */
				transition: all .7s;
			}

			/* 鼠标经过多旋转225度 */
			div:hover::after {
     
     
				transform: rotate(225deg);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div></div>
	</body>
</html>

盒子放大和缩小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p {
     
     
				height: 50px;
				width: 50px;
				background-color: blue;
			}

			p:hover {
     
     
				[]
				/* 宽度变为0.5倍 高度变为2倍 */
				transform: scale(.5, 2);
				/* 等比例缩放  宽高都增高2倍 */
				/* scala不会影响其他盒子(不影响布局) transform: scale(2); */
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<p></p>
		123
	</body>
</html>

综合写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p {
     
     
				height: 50px;
				width: 50px;
				background-color: blue;
				transition: all .5s;
			}

			p:hover {
     
     
				/* 这个顺序不建议改变,改变顺序可能会影响功能 */
				transform: translate(100px, 100px) rotate(180deg) scale(2, 2);

			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<p></p>
		123
	</body>
</html>

动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* move是动画名称 */
			@keyframes move{
     
     
				/* 0%是进度 以此类推 */
				0%{
     
     
					transform: translate(0px,0px);
				}
				
				25%{
     
     
					transform: translate(1000px,0px);
				}
				50%{
     
     
					transform: translate(1000px,500px);
				}
				75%{
     
     
					transform: translate(0px,500px);
				}
				100%{
     
     
					transform: translate(0px,0px);
				}
			}
			div {
     
     
				width: 200px;
				height: 200px;
				background-color: #0000FF;
				/* 动画名称 */
				animation-name: move;
				/* 动画持续时间 */
				animation-duration: .2s;
				/* 运动曲线 */
				animation-timing-function: ease;
				/* 动画开始的延迟时间,默认为0 */
				animation-delay: 1;
				/* 动画的执行次数  如果为infinite  代表无限循环 */
				animation-iteration-count: 10;
				/* 如果为alternate结束后反方向播放 */
				animation-direction: alternate;	
				/* 如果为forwards,动画结束后不回到起始位置 */
				animation-fill-mode: backwards;
				/* 如果为pased,动画暂停 */
				animation-play-state: running;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>

3D转换

3D移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
     
     
				/* 如果添加透视效果，那么透视属性写在对应的父盒子里 */
				/* 透视越大  物体看起来越小 */
				perspective: 1000px;
			}

			div {
     
     
				width: 200px;
				height: 200px;
				background-color: black;
				
				/* xyz的三个参数值 */
				/* z的值越大  物体看起来越大 */
				transform: translate3d(100px, 100px, 10px);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div></div>
	</body>
</html>

3D旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
     
     
				/* 加入透视效果 */
				perspective: 200px;
			}

			div {
     
     
				width: 200px;
				height: 200px;
				background-color: pink;
				/* 过渡效果 */
				transition: all 1s;
			}

			div:hover {
     
     
				/* 按照x轴旋转  值为正 向屏幕里旋转  值为负 向屏幕外旋转*/
				/* transform: rotateX(180deg); */
				/* 按照y轴旋转  值为正  从左向右翻  值为负  从右往左翻*/
				transform: rotateY(180deg);
				/* 按照z轴旋转  值为正 顺时针  值为负  逆时针*/
				/* transform: rotateZ(180deg); */
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div>旋转</div>
	</body>
</html>

子元素开启三维立体环境

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
     
     
				/* 透视的效果 */
				perspective: 500px;
			}

			.box {
     
     
				width: 500px;
				height: 500px;
				margin: 500px auto;
				/* 子元素开启三维立体环境 */
				transform-style: preserve-3d;
			}

			.box:hover {
     
     
				/* 按照y轴旋转 */
				transform: rotateY(60deg);
			}

			.box .one {
     
     
				position: absolute;
				width: 200px;
				height: 200px;
				background-color: pink;
			}

			.box .two {
     
     
				width: 200px;
				height: 200px;
				background-color: red;
				/* 按照x轴旋转 */
				transform: rotateX(45deg);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>

		<div class="box">
			<div class="one">123</div>
			<div class="two">123</div>
		</div>
	</body>
</html>

字体属性

font-size

字体大小

font-style

斜体与否
可以让em、i标签不斜体

font-weight

加粗与否
可以让标题不加粗

font-family

字体类型（微软雅黑等）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

			* {
     
     
				/* 字体大小 标题字体大小需要单独指定*/
				font-size: 40px;
				/* 加粗与否 */
				/* 400是normal  标题也可去除加粗 
				   700是bold 让其他标签加粗 */
				font-weight: 400;
				/* 斜体与否  设置为normal的时候 可以让倾斜的字体不倾斜  例如em、i标签 */
				font-style: italic;
				/* 多种字体格式按以下格式添加 */
				font-family: "microsoft yahei", "microsoft sans serif";

				/* 字体复合属性 一行代码替换上述代码  必须保留font-size和font-family
				font: font-style font-weight font-size/line-height font-family; */
			}
		</style>
	</head>
	<body>
		<h1>我虽然是标题 但是我不加粗</h1>
		<p>red40px</p>
		<a>red40px</a>
	</body>
</html>

文本属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
     
     
				/* 文本位置 */
				text-align: left;	
				/* 上划线 */
				text-decoration: overline;
				/* 下划线 */
				text-decoration: underline;
				/* 删除线 */
				text-decoration: line-through;
				/* 缩进两个文字大小的距离 */
				text-indent: 2em;
				/* 行间距 */
				line-height: 30px;
				/* 文字颜色 */
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<h1>我虽然是标题 但是我不加粗</h1>
		<p>red40px</p>
		<a>red40px</a>
	</body>
</html>

背景

背景颜色

/* background-color: red; */

背景图片

/* background-image: url(img/123.jpg); */

背景平铺

background-repeat: no-repeat;
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

背景位置

/* 图片的位置   x  y
可以是top、left位置名词
也可以是px 单位名词
也可以是top+px混合名词
*/
background-position: center top;

背景固定

/* 图片固定 */
background-attachment: fixed;

五合一综合写法

顺序不可改变
背景颜色、背景地址、背景平铺、背景固定、背景位置

背景透明

/* 四个参数  前三个是rgb  第四个是透明度 1为不透明 */
background: rgba(0,0,0,0.4);

css的块元素和行元素

块元素

  • 自己独占一行
  • 高度、宽度、内外边距皆可调
  • 默认宽度是上级容器的百分百
  • 里面可以放行内活着块级元素（h、p（文字类块级元素）不能放div（块级元素））

行内元素

  • 一行可以显示多个
  • 直接设置宽度、高度无效
  • 默认宽度是本身内容宽度
  • 只能放文本、行内元素（a里面不能放a，a里面可以放块级元素（div））

行内块元素

有行内元素的特征，也有块元素的特征。

  • 一行可以放多个（行内元素特点）
  • 默认宽度是本身的宽度（行内元素特点）
  • 宽度、高度、内外边距都可以控制（块元素特点）
    行内元素和块元素的转换
    display:block 转换成块元素
    display:inline 转换成行内元素
    display:inline-block 转换成行内块元素

CSS三大特性

层叠性

同一选择器样式冲突：就近原则
同一选择器样式不冲突：重叠原则

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
			color: red;	
			font-size: 55px;
			}
			div {
     
     
				color: gray;
				font-weight: 800;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<div>猜猜我是什么颜色 我的字体大小呢？ 我有没有加粗</div>
	</body>
</html>

继承性

可以继承父亲的哪些样式：text-、line、color-（三个关键字开头都可以继承）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				color: #0000FF;
				text-align: center;
				/* 这里的2是指继承者文字大小的2倍 */
				line-height: 2;
				font-size: 20px;
			}
			p {
     
     
				font-size: 30px;
				}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<div>
		<p>我是div的儿子  猜猜我是什么颜色</p>
	</div>
	</body>
</html>

优先级

数字越大、优先级越高。

  1. 继承、*
  2. 元素选择器
  3. 类选择器、伪类选择器
  4. ID选择器
  5. 行内style样式
  6. !import重要的
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				color: #0000FF !important;
			}
			#red {
     
     
				color: red;
			}
			.green {
     
     
				color: green;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<div>
		<div id="red" class="green" style="color: chartreuse;">
			猜猜我的颜色 然后就知道优先级了
		</div>
	</div>
	</body>
</html>

复合选择器 对应权重相加即可

盒子模型

border

添加边框会增大盒子的宽高
边框有四个（上下左右 不声明就默认对四个进行修改）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				width: 200px;
				height: 200px;
				/* 边框的颜色 */
				border-color: red;
				/* 边框的格式  solid  实线 dashed 虚线 dotted  点线*/
				border-style: solid;
				/* 边框的宽度 */
				border-width: 20px;
			}
			#red {
     
     
			
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<div>
		
	</div>
	</body>
</html>

复合写法：border: 1px solid red;

margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 清除所有元素的内外边距 */
			* {
     
     
					padding: 0;
					margin: 0;
			}
			.bigDiv {
     
     
				width: 200px;
				height: 400px;
				background-color: #0000FF;
				/* 父亲容器设置边框可以分开父子容器 */
				/* border: 1px solid transparent; */
				/* 设置这个也可以把父子容器分开 */
				overflow: hidden;
			}
			.smallDiv {
     
     
				width: 100px;
				height: 200px;
				background-color: rosybrown;
				margin-top: 20px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<div  class="bigDiv">
		<div class="smallDiv">
		</div>
	</div>
	</body>
</html>

复合写法和padding一样

padding

添加内边距会增大盒子的宽高
如果没有指定宽度（默认与父亲的宽度一样），添加padding、盒子不会被撑开。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				width: 200px;
				height: 200px;
				/* 内边距 */
				padding-left: 20px;
				background-color: pink;
			}
			#red {
     
     
			
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<div>
		123
	</div>
	</body>
</html>

复合写法：
padding:5px 上下左右都是5px
padding:2px 10px 上下5px 左右10px
padding:5px 10px 20px 上5px 左右10px 下20px
padding:5px 10px 15px 20px 上5 右10 下15 左20

圆角边框

div盒子模型变成圆角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
     
     
				height: 100px;
				width: 100px;
				/* 圆形矩形是height的50% */
				/* 圆形是50% */
				/* 复合写法和padding magin 一样  上右下左 */
				border-radius:50%;
				
				background: red;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<div >
		123
	</div>
	</body>
</html>

盒子阴影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
     
     
				height: 100px;
				width: 100px;
				border-radius:50%;
				background: red;
				/* 水平阴影的位置  
				   垂直阴影的位置  
				   模糊距离（模糊程度，越大越模糊） 
				   阴影尺寸 
				   颜色  
				   外部阴影还是内部阴影(默认外部阴影) 不可以写outset(写了就失效  外部阴影默认就好) */
				box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3);
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<div >
		123
	</div>
	</body>
</html>

文字阴影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				/* 文字阴影 */
				
				/* 水平阴影的位置  
				垂直阴影的位置  
				模糊距离（模糊程度，越大越模糊） 
				颜色 */ 
				text-shadow: 10px 10px 10px red;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<div >
		123
	</div>
	</body>
</html>

布局的三种方式

三种布局方式
1、普通流
2、浮动流
3、定位流
多个块级元素纵向排列用标准流、多个块级元素横向排列用浮动流。

浮动

浮动的设计初衷是为了文字环绕（图片）

浮动的经典应用：让多个块级元素一行显示

特点:脱离普通流的控制、不再保留原先的位置（后者顶替原来的位置）。

加了浮动：相当于行内块属性，一行显示多个，可以设置高度。
float只能影响后面的标准流

清除浮动

为什么要清除浮动？
当父盒子的高度不确定时（子盒子数量是一个浮动值），就没法给父盒子一个准确的高度。
这时候就需要清除父盒子的高度。

1、额外标签法

最后一浮动元素的后面加一个空标签（style为clear:box）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father {
     
     
				width: 1000px;
				border: 1px solid blue;
			}

			.son {
     
     
				float: left;
				width: 200px;
				height: 200px;
				background-color: black;
			}

			.daughter {
     
     
				float: left;
				width: 200px;
				height: 200px;
				background-color: pink;
			}

			.uncle {
     
     
				width: 300px;
				height: 200px;
				background-color: red;
			}

			/* 清除浮动 */
			.clear {
     
     
				clear: both;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div class="father">
			<div class="son">1123</div>
			<div class="daughter">123</div>
			<!-- 清除浮动的标签 -->
			<div class="clear"></div>
		</div>
		<div class="uncle">456</div>
	</body>
</html>

2、父亲添加overflow:hidden（子不教父之过）

缺点：无法显示溢出部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.father{
     
     
				<!-- 清除浮动的属性 -->
				overflow: hidden;
				width: 1000px;
				border: 1px solid blue;
			}
			.son{
     
     
				float: left;
				width: 200px;
				height: 200px;
				background-color: black;
			}
			
			.daughter{
     
     
				float: left;
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			.uncle{
     
     
				width: 300px;
				height: 200px;
				background-color: red;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
	<div class="father">
		<div class="son">1123</div>
		<div class="daughter">123</div>
	</div>
	<div class="uncle">456</div>
	</body>
</html>

3、after伪类是额外标签法的升级版（高级写法）

百度、淘宝、网易等公司使用该方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 清除盒子浮动 */
			.clearfix::after {
     
     
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}

			/* 兼容IE6 7 */
			.clearfix {
     
     
				*zoom: 1;
			}

			.father {
     
     
				width: 1000px;
				border: 1px solid blue;
			}

			.son {
     
     
				float: left;
				width: 200px;
				height: 200px;
				background-color: black;
			}

			.daughter {
     
     
				float: left;
				width: 200px;
				height: 200px;
				background-color: pink;
			}

			.uncle {
     
     
				width: 300px;
				height: 200px;
				background-color: red;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div class="father clearfix">
			<div class="son">1123</div>
			<div class="daughter">123</div>
		</div>
		<div class="uncle">456</div>
	</body>
</html>

4、双伪元素清除法（前后都加空标签）

腾讯小米等公司使用该方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 前后加表格 */
			.clearfix::before,
			.clearfix::after {
     
     
				content: "";
				display: table;
			}
			/* 后面的表格清除浮动 */
			.clearfix::after {
     
     
				clear: both;
			}
			/* 兼容IE6 7 */
			.clearfix {
     
     
				*zoom: 1;
			}

			.father {
     
     
				width: 1000px;
				border: 1px solid blue;
			}

			.son {
     
     
				float: left;
				width: 200px;
				height: 200px;
				background-color: black;
			}

			.daughter {
     
     
				float: left;
				width: 200px;
				height: 200px;
				background-color: pink;
			}

			.uncle {
     
     
				width: 300px;
				height: 200px;
				background-color: red;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div class="father clearfix">
			<div class="son">1123</div>
			<div class="daughter">123</div>
		</div>
		<div class="uncle">456</div>
	</body>
</html>

CSS代码的书写顺序

  1. 布局
    float等属性
  2. 自身
    width等属性
  3. 文本
    text、font等属性
  4. 其他
    阴影等属性

定位

一般的布局方法：子绝父相

应用场景：某些组件需要固定显示

定位=定位模式+边偏移

四种模式

  • 静态定位
  • 相对定位
  • 绝对定位
  • 固定定位

边偏移：top、bottom、left、right
行内元素+绝对定位或固定定位，可以设置高度、宽度
块内元素+绝对定位或固定定位，不设置高度、宽度，内容大小就是行内元素的大小。

静态定位

position:static

和标准流的作用差不多

相对定位

position:relative

相对自己原来的位置的定位

不会被覆盖

绝对定位

position:absolute

相对于祖先元素位置的定位
如果没有祖先元素（或者祖先没有定位），那就认浏览器为父
如果有多个祖先，优先以最近一级且有定位的祖先的位置为准
比如：父亲没有定位，但是爷爷有定位。那就以爷爷为准。

会被覆盖

固定定位

position:fixed

会被覆盖

根据浏览器的可视区域定位
浏览器的可视区域随着浏览器的窗口大小而变化

粘性定位

固定位置，不会被覆盖，加了top、left等属性才可以使用。

top:0
position:sticky

z-index(盒子优先级)

z-index:10

数字越大，优先级越高，高优先级压住低优先级的盒子。
只有定位的盒子才有这个属性，浮动和标准流没有这个属性。

模块的显示和隐藏

display

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
     
     
				/* 把div不显示（隐藏）  且不占有原来的位置 none换为block则显示*/
				display: none;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div>看不见我  看不见我</div>
		<p>我上面的div不见了</p>
	</body>
</html>

visibility

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
     
     
				/* div不显示(隐藏) 但是保留自己的位置 hiden替换为visible可显示*/
				visibility: hidden;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div>看不见我  看不见我</div>
		<p>我上面的div不见了</p>
	</body>
</html>

overflow

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				width: 200px;
				height: 20px;
				background-color: red;
				/* 对于溢出的部分自动隐藏不显示 
				visible 正常显示
				auto	如果溢出 添加滚动条  否则不做改变
				scroll  溢出与否  都添加滚动条
				定位的盒子慎用
				*/
				overflow: auto;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div>我是一个钉子户我是一个钉子户我是一个钉子户</div>
	</body>
</html>

精灵图

设计的初衷是为了减少服务器接受、发送请求的次数，提高页面加载速度。
许多张小图片拼装成一张大图片发送，本来是n次请求，现在是1次请求。
缺点:放大和缩小是图片失真、制作完毕更改比较复杂

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/*这里的坐标和平常的坐标是相反的*/
			div {
     
     
				background: url(Screenshot_20200820-220348_TFT.jpg) no-repeat -400px -200px ;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div>我是一个钉子户我是一个钉子户我是一个钉子户</div>
	</body>
</html>

字体图标

解决了精灵图的缺点（图片放大缩小失真、更改麻烦）

字体图标虽然展示的是图标，本质是字体（字体更改就很容易）

字体图标来源：iconmoon、iconfont

三角形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				/* 高度 宽度设为0 */
				height: 0;
				width: 0;
				/* 全部设为透明 */
				border: 50px solid transparent;
				/* 需要哪边  就把那边重新涂色 */
				border-left: 50px solid pink;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div></div>
	</body>
</html>

鼠标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				/* 鼠标的五中显示格式 */
				cursor: pointer;
				cursor: default;
				cursor: move;
				cursor: text;
				cursor: not-allowed;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div>123</div>
	</body>
</html>

轮廓线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input,textarea{
     
     
				/* 点击输入框的时候 不会显示轮廓线的默认颜色 */
				outline: none;
			}

			textarea {
     
     
				/* 设置下面的属性后  textarea就不能随意拖拽 */
				resize: none;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<input type="" name="" id="" value="" />
		<textarea rows="" cols="">

		</textarea>
	</body>
</html>

vertical-alingn（文字和图片垂直居中）

行内块元素或者是块级元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
     
     
				/* 
				middle 让图片旁边的文字和图片中间对齐 
				baseline  
				top
				bottom
				*/
				vertical-align: middle;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		123<img src="Screenshot_20200820-220348_TFT.jpg" >123
	</body>
</html>

溢出文字用省略号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
     
     
				height: 200px;
				width: 200px;
				background-color: red;
				/* 不换行 */
				white-space: nowrap;
				/* 溢出文字隐藏 */
				overflow: hidden;
				/* 溢出文字用省略号 */
				text-overflow: ellipsis;
				}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div>1sdkfjlsdfjksdjfkjdsfkjfdskjdskfjdksjsakdjfsdfjksdkjsjdkfskdj</div>
	</body>
</html>

页码制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 清除内外边距 */
			*{
     
     
				padding: 0;
				margin: 0;
			}
			.box {
     
     
				/* 父元素设置text-align: center; 父盒子里面的行内元素和行内块元素都会水平居中 */
				text-align: center;
			}

			.box a {
     
     
				/* 转换为行内块元素 */
				display: inline-block;
				/* 宽度 */
				width: 36px;
				/* 高度 */
				height: 36px;
				/* 背景颜色 */
				background-color: #f7f7f7;
				/* 边框 */
				border: 1px solid #ccc;
				/* 水平居中 */
				text-align: center;
				/* 垂直居中 */
				line-height: 36px;
				/* 不加下划线 */
				text-decoration: none;
				/* 字体颜色 */
				color: #333;
				/* 文字大小 */
				font-size: 14px;
			}

			/* 上一页 下一页重新设置宽度 */
			.box .previousPage,
			.box .nextPage {
     
     
				width: 85px;
			}

			/* 当前页和省略页更改颜色 */
			.box .currentPage,
			.box .elp {
     
     
				background-color: #fff;
				border: none;
			}
			/* 输入框 */
			.box input {
     
     
				width: 36px;
				height: 36px;
				border: 1px solid #ccc;
				outline: none;
			}
			/* 按钮 */
			.box button {
     
     
				width: 60px;
				height: 36px;
				/* 背景颜色 */
				background-color: #f7f7f7;
				/* 边框 */
				border: 1px solid #ccc;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div class="box">
			<a href="#" class="previousPage">&lt;&lt;上一页</a>
			<a href="#">1</a>
			<a href="#" class="currentPage">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a>
			<a href="#">7</a>
			<a href="#">8</a>
			<a href="#">9</a>
			<a href="#" class="elp">...</a>
			<a href="#" class="nextPage">&gt;&gt;下一页</a>
			到第
			<input type="text" name="" id="" value="" />
			页
			<button type="button">确定</button>
		</div>
	</body>
</html>

直角三角形的制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
     
     
				width: 0;
				height: 0;
				/* 上端透明 */
				border-top: 100px solid transparent;
				border-right: 50px solid skyblue;
				/* 下端和左端为0 */
				border-left: 0 solid blue;
				border-bottom: 0 solid green;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
	</head>
	<body>
		<div class="box1">
			
		</div>
	</body>
</html>

css初始化

不同浏览器对有些标签值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容性，我们需要对css初始化。
个人见解：旅游自带保姆（不管住哪个酒店 我只用自己的保姆）

猜你喜欢

转载自blog.csdn.net/Mr_Qian_Ives/article/details/108048380
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022