第五周-周二

一、视频和音频

<video src="路径" controls="controls"></video>

1、加controls为视频显示控件，其中" "可省；

2、在controls后加width/height可以设置宽度/高度；

3、muted 视频输出时静音；

4、poster=“路径” 加视频封面；

5、loop 视频循环播放；

6、preload 属性规定是否在页面加载后载入视频；
可能的值：none 不载入视频、meta 只载入元数据、auto 载入整个视频

二、元素display

1、块级元素[block]

在浏览器显示时，元素开始时换行，结束时也换行；

特点：独占一行，宽度为父级元素的100%填充；有宽高、上下、左右属性；
可以通过CSS设置元素样式为display：block；修改元素为块级元素。

2、内联元素[inline]
<style type="text/css">

	p { display: inline; }

</style>

特点：又称为行内元素，在显示时通常不会以新行开始；
不可以可以设置宽高，宽度随着内容变化二变化；
有左右属性。

3、内联-块级元素[inline-block]
<style type="text/css">

	p { display: inline-block; }

</style>

特点：声明为inline-block的元素，整体不独占一行，
宽高，上下，左右都可设置。

三、HTML整合CSS的几种方法

1、内联样式：style属性

在html中直接给html元素设置样式。（不推荐）

<html>

	<body style="background-color: yellow;">

		<h2 style="background-color: red;">内联样式</h2>

	</body>

</html>
2、内部样式：

将html元素与css分离，在html的head标签中定义文档的css样式。（不推荐）

<head>

	<style type="text/css">

		p {background-color:red}

	</style>

</head>
3、外部样式：标签

正规项目范围：将css与html分开，在html文档中引入css文件。

css文件：

div {

	width: 300px;

	border:  solid 1px red;

	color: red;

}

引入css文件：

<link rel="stylesheet" type="text/css" href="css文件的相对路径"/>

注意：文本内容会优先使用最近的样式。

4、导入样式 :@import

将一个css引入另一个css文件样式。（不推荐）

demo2.css 文件

body {

	background-color:green;

}

demo.css文件，引入demo2.css

@import "demo2.css";

div {

	width: 300px;

}

html文件引入demo.css文件

<html>

	<head>

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

		</head>

	<body>

		<div>

			hello

		</div>

	</body>

</html>

第五周-周五

一、元素、全选、并列选择器

1、元素选择器
<html>

	<head>

		<style type="text/css">

				p {

					color:red;

				}

		</style>

	</head>

	<body>

		<p>hello</p>

	</body>

</html>

只适用与p标签。

2、全选选择器
<html>

	<head>

		<style type="text/css">

				* {

					color:red;

				}

		</style>

	</head>

	<body>

		<p>hello</p>

	</body>

</html>

适用于所有标签，但是元素选择器优先级大于全选选择器（权重为0）。

3、并列选择器

选择器被逗号分隔，表示之间为并列关系。

<html>

	<head>

		<style type="text/css">

			h1,h2 {

					color:red;

				}

		</style>

	</head>

	<body>

		<h1>hello</h1>

		<h2>hello</h2>

	</body>

</html>

当选择器被空格分隔时，表示派生选择器，父子关系。

效果只有b标签的内容有样式，但标题（h标签）不可嵌套。

二、class选择器、id选择器

1、class选择器
<html>

	<head>

		<style type="text/css">

			p.p1{

					color: red;

				}

		</style>

	</head>

	<body>

		<p class="p1">hello</p>

		<span class="p1">hello</span>

	</body>

</html>

.p1表示所有带class="p1"的标签有效果；

p.p1 表示只有p标签且带有class="p1"有效果

可以有引用多样式的声明。

2、id选择器
<html>

	<head>

		<style type="text/css">

			p#p1{

					color: red;

				}

		</style>

	</head>

	<body>

		<p id="p1">hello</p>

		<span id="p1">hello</span>

	</body>

</html>

用法和class一样，但是class在同一页面可以有多个，值相同的id只能有一个；

不可以有多样式的声明。

三、派生选择器

根据元素在其位置的上下文关系来定义样式，可以使标记更加简洁，分为以下三种：

1、后代选择器（包含选择器）

指定元素A内的特定元素B的样式，不在元素A内的B元素不会收到影响。

<html>

	<head>

		<style type="text/css">

			p b{ color: red; }

		</style>

	</head>

	<body>

		<p>hello<b>world</b></p>

        <h1>hello<b>world</b>

        </h1>

	</body>

</html>

运行效果：只有第一行p标签里的b标签中的内容变红色，第二行不变。

p和b不一定满足父子关系，只要满足祖先与子孙的关系即可，即两个元素之间的层次间隔可以是无限的。

2、子元素选择器

与后代选择器相比，只能选择作为某元素直接子元素的元素。

<html>

	<head>

		<style type="text/css">

			p>b{ color: red; }

		</style>

	</head>

	<body>

		<p>hello

            <b>world</b>

            <em><b>world</b></em>

        </p>

	</body>

</html>

运行效果：只有第一个在p标签里的b标签有效果，em标签里的b标签无效果。

3、兄弟选择器
<html>

	<head>

		<style type="text/css">

			p~b{ color: red; }

		</style>

	</head>

	<body>

        <b>world</b>

		<p>hello</p>

        <b>world</b>

        <b>world</b>

	</body>

</html>

运行效果：p标签后面所有的b标签有效果，p标签无效果，且p标签前面的b标签无效果。

4、相邻兄弟选择器
<html>

	<head>

		<style type="text/css">

			p+b{ color: red; }

		</style>

	</head>

	<body>

        <b>world</b>

		<p>hello</p>

        <b>world</b>

	</body>

</html>

运行效果：p标签后面第一个的b标签有效果，p标签无效果，且p标签前面的b标签无效果。

四、属性选择器

是一个根据元素属性为依据标记元素的选择器；

可以拥有指定属性的html元素设置样式。

1、所有属性
<html>

	<head>

		<style type="text/css">

			[name]{

				border: solid 1px red;

			}

		</style>

	</head>

	<body>

			用户名：<input type="text" name="username"/><br />

			密码：<input type="password" name="password"/><br />

			联系方式：<input type="tel"/>

			<hr />

		</form>

	</body>

</html>

运行效果：所有带name属性的都由效果。

[name=“username” ] , input [name=“username” ]

input [name^=“username” ] 选取以username开头的元素

input [name$=“username” ] 选取以username结尾的元素

input [name*=“username” ] 选取任意位置包含username的元素

input [name~=“username” ] 选取包含username单词的元素，以空格为分隔

input [name|=“username” ] 选取带有以指定值开头的属性值的元素，该值必须是整个单词，使用与连字"-"分隔的属性值

一、伪类

在之前的选择器基础上，进一步分类筛选的选择器，用于给选择器加特殊效果。

1、:link、:visited、:hover、:active
<html>

	<head>

		<style type="text/css">

            body {background-color: azure;}

			a:link {color: green;}

			a:visited {color: red;}

			a:hover {color: fuchsia;}

			a:active {color: yellow;}

		</style>

	</head>

	<body>

		<a href="#" target="_blank">这是一个链接。</a>

	</body>

</html>

a:link {background-color: azure;} ——未访问的链接
a:visited {color: green;}——已访问的链接
a:hover {color: fuchsia;}——鼠标移动到链接上
a:active {color: yellow;}——选定的链接（鼠标点击后未释放状态）

a:hover 必须在 a:link 和 a:visited 之后，才生效；

a:active 必须在 a:hover 之后，才生效。

2、:focus
<html>

	<head>

		<style type="text/css">

			input:focus {

				background-color: yellow;

			}

		</style>

	</head>

	<body>

		<form>

			First name: <input type="text" name="fname" /><br />

			Last name: <input type="text" name="lname" /><br />

			<input type="submit" value="Submit" />

		</form>

	</body>

</html>

运行效果：鼠标点击输入框后，输入框会显示指定颜色。

（加上autocomplete=“off” 后，不会显示上次的记忆输入。）

第六周-周二

3、:first-child 与 :first-of-type

:first-child ，第一个元素；

<html>

	<head>

		<style type="text/css">

			p:first-child {

				color: red;

			}

		</style>

	</head>

	<body>

		<p>hello</p>

		<p>hello</p>

	</body>

</html>

:first-of-type ，第一个某种类型的元素

<html>

	<head>

		<style type="text/css">

			.div1 :first-of-type {

				color: red;

			}

		</style>

	</head>

	<body>

		<div class="div1">

			<h2>一</h2>

			<h1>二</h1>

			<div class="div1">

				<h1>三</h1>

				<h2>四</h2>

			</div>

			<h2>五</h2>

			<h2>六</h2>

		</div>

	</body>

</html>
<style type="text/css">

			.div1 h2:first-child {

				color: red;

			}

</style>

这种情况无效果，因为div1后面的第一个元素不是h2标签。

<style type="text/css">

			.div1 h2:first-of-type {

				color: red;

			}

</style>

这种情况只有div1后面的h2标签才有效果。

4、:only-child 与 :only-of-type

.div1 :only-child {
color: red;
}

当div只有一个子元素才会有效果；

.div1 :only-of-type {
color: red;
}

当div只有一种元素才会有效果；

.div1 h2:only-child {
color: red;
}

当div只有一个h2元素才会有效果；

.div1 h2:only-of-type {
color: red;
}

当div只有h2一种类型才会有效果。

5、:nth-child 与 :nth-of-type
<html>

	<head>

		<style type="text/css">

			ul li:nth-child(2) {

				color: red;

			}

		</style>

	</head>

	<body>

		<ul>

            <li>一</li>

            <li>二</li>

            <li>三</li>

        </ul>

	</body>

</html>

:nth-child(n) n表示行数；

n可以为2n，表示偶数，2n+1为基数；

n+2 表示从第二行开始向下执行效果，-n+2 表示从第二行开始向反方向执行效果；

:nth-last-child 表示相反方向；

:nth-of-type用法相同。

6、:empty

选中值为空的元素

<html>

	<head>

		<style type="text/css">

			ul li:empty {

				display:none;

			}

		</style>

	</head>

	<body>

		<ul>

            <li>一</li>

            <li>二</li>

            <li></li>

        </ul>

	</body>

</html>
7、:not

排除选择器

<html>

	<head>

		<style type="text/css">

			ul li:not {

				color: red;

			}

		</style>

	</head>

	<body>

		<ul>

            <li>一</li>

            <li>二</li>

            <li>三</li>

        </ul>

	</body>

</html>

:not(:first-child) 排除第一行；

:not(:last-child) 排除最后一行。

二、表单伪类

<html>

	<head>

	</head>

	<body>

		<form action="#">

			<label for="today">今日日期：</label>

			<input type="text" name="today" id="today" disabled />

			<hr />

			<label for="usename">用户名：</label>

			<input type="text" name="usename" id="usename" required />

			<hr />

			<label for="password">密码：</label>

			<input type="text" name="password" id="password" required />

			<hr />

			<label for="tel">联系方式：</label>

			<input type="text" name="tel" id="tel" />

			<hr />

			<label for="email">邮箱：</label>

			<input type="email" name="email" id="email" />

			<hr />

			<input type="radio" name="sex" value="male" id="male" />

			<lable for="male" >男</lable>

			<input type="radio" name="sex" value="female" id="female" />

			<label for="female">女</label>

			<hr />

			<button type="submit">提交</button>

		</form>

		<script type="text/text/javascript">

			var date = new Date();

			var dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();

			document.getElementById("today").value = dateString;

		</script>

	</body>

</html>
1、禁用

对禁用表单实现操作 ( input:disabled )

<style type="text/css">

    input:disabled {

		background-color: red;

	}

</style>

对可用表单实现操作 ( input:enabled )

<style type="text/css">

	input:enabled {

		background-color: red;

	}

</style>

对选中的单选框进行操作

<style type="text/css">

    input:checked+label {

    	color:red;

    }

</style>
2、必填/非必填

input:required ( 必填 )

让必填的input边框显示为红色

<style type="text/css">

    input:required {

    	color:red;

    }

</style>

input:optional ( 非必填 )

让非必填的input边框显示为红色

<style type="text/css">

    input:required {

    	color:red;

    }

</style>
3、有效值

input:valid

<style type="text/css">

    input:valid {

    	color:red;

    }

</style>

input:invalid

<style type="text/css">

    input:invalid {

    	color:red;

    }

</style>

三、伪元素

虚拟化的

1、:before 与 :after

在标签前面或后面加操作

<style type="text/css">

    p:before(:after){

    	color:red;

    }

</style>
2、:first-line 与 :first-letter

第一行或者第一个字符进行操作

<style type="text/css">

    p:first-line(:first-letter){

    	color:red;

    }

</style>

第六周-周五

一、权重

! important 权重无穷（最大）

内联样式（style属性）权重为1000

id 权重为100

class/属性选择器/伪类 权重为10

标签选择器/伪元素 权重为1

通配符 权重为0

注意：相同权重，应用最后面的；强制改变权重为最优先，设置！important 即可。

<style type="text/css">

	p{

    	color:red;

    }

    .p1{

    	color:red !important;/* 此时权重最大 */

    }

    #p2{

    	color:red;

    }

</style>

二、继承

<html>

    <head>

        <style type="text/css">

            body {

                color: red;

            }

        </style>

    </head>

    <body>

        <h2>

            一

            <span>二</span>

            <small>三</small>

        </h2>

    </body>

</html>

body里面的标签都会变红。

注意：当父类标签与子类标签有属性无冲突时，会显示父类标签的属性；有冲突时，要考虑权重问题。

三、通配符

<html>

    <head>

        <style type="text/css">

            h2 {

                color: blue;

            }

            * {

                color: red;

            }

        </style>

    </head>

    <body>

        <h2>

            一

            <span>二</span>

            <small>三</small>

        </h2>

    </body>

</html>

结果：一为蓝色，二三为红色。

span和small标签时继承与h2标签，继承过来的东西时没有权重，又因为span和small标签满足通配符的标准，通配符的权重为0，大于没有权重。

一、文本-字体

1、设置字体名称

font-family 属性，定义文本的字体。

<style type="text/css">

	body {

    	font-family:sans-serif;

    }

  /*设置备用字体，或者按照优先级显示字体*/

    h1{

    	font-family: Georgia,sans-serif;

    }

</style>
2、引用外部字体文件

字体文件有 ttf 、otf 、woff 等

<html>

<head>

	<style type="text/css">

		@font-face {

			font-family: "xxx-self";

			src: url("字体路径")format("opentype");

		}

		p {

			font-family: "xxx-self";

		}

	</style>

</head>

<body>

	<p>hello</p>

</body>

</html>
3、设置字体倾斜

font-style属性，常用于规定斜体文本

normal 文本正常显示

italic 文本斜体显示

oblique 文本斜体显示

<html>

<head>

	<style type="text/css">

		p.normal {

			font-style: normal;

		}

		p.italic {

			font-style: italic;

		}

		p.oblique {

			font-style: oblique;

		}

	</style>

</head>

<body>

	<p class="normal">hello</p>

	<p class="italic">hello</p>

	<p class="oblique">hello</p>

</body>

</html>
3、设置字体加粗

font-weight属性，设置文本加粗：

使用bold关键字可以将文本设置为粗体；

关键字100~900为字体指定了9级加粗度，

100对应最细，900最粗，400等价于normal，700等价于bold。

<html>

<head>

	<style type="text/css">

		p.normal {

			font-weight: normal;

		}h

		p.thick {

			font-weight: bold;

		}

		p.thicker {

			font-weight: 900;

		}

	</style>

</head>

<body>

	<p class="normal">hello</p>

	<p class="thick">hello</p>

	<p class="thicker">hello</p>

</body>

</html>
4、设置字体大小

font-size属性，所有css单位都可以作为值。

使用像素 p{ font-size: 14px; }

使用em p{ font-size: 1em; }

<style type="text/css">

	div {

    	font-size: 10px;

    }

    p{

    	font-size: 2em;

    }

</style>

em设置，相对于父类元素的大小，1em相当于100%

<html>

<head>

	<style type="text/css">

		div {

	    	font-size: 10px;

	    }

	    p{

	    	font-size: 2em;

	    }

	</style>

</head>

<body>

	<div>

		一

		<p>二</p>

	</div>

</body>

</html>
5、组合定义

font属性设置组合字体样式，必须设置字体于大小。

<html>

<head>

	<style type="text/css">

	    p{

	    	font: bold italic 40px Georgia;

            /*字体规则声明必须放最后*/

	    }

	</style>

</head>

<body>

		<p>hello</p>

</body>

</html>

二、文本-颜色

预定义/跨浏览器颜色名

p {color:red;}

十六进制色

#RRGGBB，其中RR表示红色、GG表示绿色、BB表示蓝色；

六进制整数规定了颜色的成分，所有值必须介于0到FF之间

p {color:#0000ff}

RGB颜色

规定：rgb(red,green,blue)。每个参数定义颜色的强度，可以是介于0到255之间的整数，或者是0%到100%

p {color:rgb(0,0,255);}

RGBA 颜色

是RGB颜色的扩展，带一个alpha通道，规定了对象的不透明度。

rgba(red,green,blue,alpha),alpha参数是介于0到1.0（完全不透明）之间。透明色如果有背景，可以透出背景图。

p {color:rgb(0,0,255,0.5);}

三、文本-单位

单位 描述
% 百分比
in 英寸
cm 厘米
mm 毫米
em 1em等于当前字体尺寸的一倍
ex 一个ex是一个字体的x-height。（x-height是字体尺寸的一半）
pt 磅（1pt等于1/72英寸）
pc 12点活字（1pc等于12点）
px 像素（计算机屏幕上的一个点）

第七周-周二

四、文本-样式

1、大小写转换（text-transform）

none （默认值，do nothing）

uppercase （全大写）

lowercase （全小写）

capitalize （首字母大写）

<html>

	<head>

		<style type="text/css">

			p.upercase {

				text-transform: uppercase;

			}

			p.lowercase {

				text-transform: lowercase;

			}

			p.capitalize {

				text-transform: capitalize;

			}

		</style>

	</head>

	<body>

		<p class="upercase">This is a text.</p>

		<p class="lowercase">This is a text.</p>

		<p class="capitalize">This is a text.</p>

	</body>

</html>
2、线条（text-decoration）

none （无线条）

underline （下划线）

overline （上划线）

line-through （删除线）

blink （多数浏览器不支持了）

<html>

	<head>

		<style type="text/css">

			.a1{

				text-decoration: none;

			}

			.a2{

				text-decoration: underline;

			}

			.a3{

				text-decoration: overline;

			}

			.a4{

				text-decoration: line-through;

			}

			.a5{

				text-decoration: blink;

			}

			.a6{

				text-decoration: underline overline;

			}

		</style>

	</head>

	<body>

		<a class="a1">This is a text.</a>

		<a class="a2">This is a text.</a>

		<a class="a3">This is a text.</a>

		<a class="a4">This is a text.</a>

		<a class="a5">This is a text.</a>

		<a class="a6">This is a text.</a>

	</body>

</html>
3、阴影（text-shadow）

参数顺序为：阴影颜色、水平偏移量、垂直偏移量、模糊度。

<html>

	<head>

		<style type="text/css">

			p {

				text-shadow: rgb(0,0,255) 3px 3px 3px;

			}

		</style>

	</head>

	<body>

		<p>This is a text.</p>

	</body>

</html>
4、空白（white-space）

white-space: pre; 原样输出，不换行；

white-space: pre-line; 合并空白符，换行；

white-space: pre-wrep; 原样输出，换行；

white-space: nowrep; 合并空白符，不换行；

white-space: normal; 默认。

5、溢出

假如有个宽高都不能随意改变的div，里面写了一个文本，但是文本太长超出了限制：

<html>

	<head>

		<style type="text/css">

			p {

				width: 300px;

				border: 1px solid;

				white-space: nowrap;

				overflow: hidden;

			}

			p:hover {

				overflow: visible;

                /*鼠标放上面显示隐藏内容*/

			}

		</style>

	</head>

	<body>

		<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

	</body>

</html>
6、缩进（text-index）

设置首行缩进

<html>

	<head>

		<style type="text/css">

			p {

				font-size: 16px;

				text-indent: 20px;

                /*px也可以换成em,方便代码的更改*/

			}

		</style>

	</head>

	<body>

		<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

	</body>

</html>
7、水平对齐（text-align）

只有对元素中的文本有效，对元素无效；

left（左）、center（中）、right（右）、justify（两端对齐）

<html>

	<head>

		<style type="text/css">

			h1 {

				text-align: left;

			}

			h2 {

				text-align: right;

			}

			h3 {

				text-align: center;

			}

			p {

				width: 200px;

				border: dotted 1px red;

				text-align: justify;

			}

		</style>

	</head>

	<body>

		<h1>文本</h1>

		<h2>文本</h2>

		<h3>文本</h3>

		<p>文本文本文本文本文本文本文本文本文本文本文本文本</p>

	</body>

</html>

字数不够时，设置两端对齐的方法：

<style type="text/css">

			p {

				width: 200px;

				border: dotted 1px red;

				text-align: justify;

			}

			p:after {

			cont

			}

</style>

设计四要素：

对齐 对比 重复 亲密性

middle常用于图片居中

8、垂直对齐（vertical-align）

使用满足两点：文本，inline类元素或表格单元格。

值 描述
baseline 默认，元素放置在父元素的基线上
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在夫元素的中间
bottom 把元素的顶端与行中最低元素的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐
length
% 使用"line-height"属性的百分比值来排列此元素，允许使用负值
inherit 规定应该从父元素继承vertical-align属性的值

可以设置文本相对于图片的位置：

<style type="text/css">

	p img {

		vertical-align: middle;

	}

</style>

第七周-周五

9、行高（line-height）

两行文字基线之间的距离

<html>

	<head>

		<style type="text/css">

			p {

				line-height: 1.5em;

			}

		</style>

	</head>

	<body>

		<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

	</body>

</html>
<style type="text/css">

	p {

        font: italic 2em Georgia;

		line-height: 1.5em;

	}

</style>

/*可以写成*/

<style type="text/css">

	p {

		font: italic 2em/1.5 Georgia;

	}

</style>

line-height 也可以用于垂直居中

<html>

	<head>

		<style type="text/css">

			div {

				width: 10em;

				height: 10em;

				background-color: red;

			}

			p {

				/*垂直居中*/

				line-height: 10em;

				/*水平居中*/

				text-align: center;

			}

		</style>

	</head>

	<body>

		<div>

			<p>hello</p>

		</div>

	</body>

</html>

行高还有一个常用单位：x-height （字体尺寸的一半）

10、排版

字符间距：

letter-spacing（字符间距）

word-spacing（单词间距）

文字方向（writing-mode）：

horizontal-tb （水平方向自上而下）

vertical-rl （水平方向自上而下，垂直方向从右向左）

vertical-lr （水平方向自上而下，垂直方向从左向右）

一、盒子模型-边框

border：

每个边框有3个方面（宽度、样式、颜色）

1、边框样式（border-style）
值 描述
none 默认值，定义无边框
hidden 与none相同，不过应用与表时除外，对于表，hidden 用于解决边框冲突
dotted 定义点状边框，在大多数浏览器中呈现为实线
dashed 定义虚线，在大多浏览器中呈现为实线
solid 定义实线
double 定义双线，双线的宽度等于border-width 的值 
<html>

	<head>

		<style type="text/css">

			p.dotted {

				border-style: dotted;

			}

			p.dashed {

				border-style: dashed;

			}

			p.solid {

				border-style: solid;

			}

			p.double {

				border-style: double;

			}

		</style>

	</head>

	<body>

			<p class="dotted">dotted</p>

			<p class="dashed">dashed</p>

			<p class="solid">solid</p>

			<p class="double">double</p>

	</body>

</html>

若一个边框有多个样式，那么顺序遵循上右下左；没有设置的样式会取对面的样式！

2、边框宽度（border-width）

指定长度值：2px 或0.1em；

使用关键字：thin、medium（默认值）和 thick

3、边框颜色（border-color）

值为css颜色值

4、透明边框

颜色值 transparent 用于创建右宽度的不可见边框

<html>

<head>

	<style type="text/css">

		a:link, a:visited {

			border-style: solid;

			border-width: 5px;

			border-color: transparent;

		}

		a:hover {

			border-color: gray;

		}

	</style>

</head>

	<body>

		<a href="#">AAA</a>

		<a href="#">BBB</a>

		<a href="#">CCC</a>

	</body>

</html>
5、复合写法

border: 5px solid red;

二、盒子模型-边距

1、内边距（padding）
<html>

<head>

	<style type="text/css">

		.a {

			border: solid 1px red;

			padding: 10px 20px 30px 40px;

		}

	</style>

</head>

	<body>

		<div class="a">

			hello

		</div>

	</body>

</html>

注意：padding的四个值分别对应边框的上右下左；

当只有两个值时，则上下对应第一个值，左右对应第二个值；

当有三个值时，三个值优先对应上右下，左边取对面的值（右）。

padding的值也可以是百分比，但不常用。

2、外边距（margin）
<html>

<head>

	<style type="text/css">

		.a {

			border: solid 1px red;

			padding: 10px 20px 30px 40px;

			margin: 10px;

		}

		.b {

			border: solid 1px #000;

		}

	</style>

</head>

	<body>

		<div class="b">

			<div class="a">

				hello

			</div>

		</div>

	</body>

</html>

margin的值同padding；

margin可以为负值；

设置块级元素水平居中时，必须设置width。

三、盒子模型拓展

1、圆角（border-radius）
<html>

<head>

	<style type="text/css">

		div {

			width: 300px;

			height: 300px;

			border-radius: 10px 20px 30px 40px;

		}

	</style>

</head>

	<body>

		<div></div>

	</body>

</html>

border-radius: 50% 设置正圆；

2、阴影（box-shadow）
<html>

<head>

	<style type="text/css">

		div {

			width: 300px;

			height: 100px;

			background-color: red;

			box-shadow: 10px 10px 10px blue;

		}

	</style>

</head>

	<body>

		<div></div>

	</body>

</html>

box-shadow: 10px 10px 10px blue;

三个值对应：水平偏移量、垂直偏移量、模糊程度。

3、轮廓线（outline）

不占空间

<html>

<head>

	<style type="text/css">

		div {

			width: 300px;

			height: 100px;

			border: solid 2px red;

			outline: dotted 25px green;

		}

        p {

            background-color: blue;

		}

	</style>

</head>

	<body>

		<div><span>world</span></div>

        <p>hello</p>

	</body>

</html>

第八周-周二

4、display与visibility
<html>

<head>

	<style type="text/css">

		li.li {

			display: none;

		}

		li.ping {

			visibility: hidden;

		}

	</style>

</head>

	<body>

		<ul>

			<li>香蕉</li>

			<li class="li">梨子</li>

			<li class="ping">苹果</li>

			<li>芒果</li>

			<li>杨桃</li>

		</ul>

	</body>

</html>

区别：display位置不在，visibility位置还在。

5、宽度和高度

min-width：设置最小宽度；

max-width：设置最大宽度；

min-height：设置最小高度；

max-height：设置最大高度。

6、内容自适应-撑满

fit-content：设置宽度撑满当前可用空间；

<html>

<head>

	<style type="text/css">

		p {

			width: fit-content;

			border: solid 1px #333;

			margin: auto;

		}

	</style>

</head>

	<body>

		<p>hello</p>

	</body>

</html>

fill-available：设置宽、高撑满当前可用空间；

<html>

<head>

	<style type="text/css">

		body {

			background-color: pink;

		}

		div.container {

			width: 500px;

			height: 100px;

			margin: 0 auto;

			border: solid 1px #333;

			padding: 40px;

		}

		div.container div.main {

			background-color: green;

			color: white;

			height: -webkit-fill-available;

		}

	</style>

</head>

	<body>

		<div class="container">

			<div class="top">qwertyuiop</div>

			<div class="main">asdfghjk</div>

		</div>

	</body>

</html>

等高布局

<html>

<head>

	<style type="text/css">

		ul {

			height: 100px;

		}

		ul li {

			display: inline-block;

			margin-right: 10px;

			width: 100px;

			height: -webkit-fill-available;

			background-color: green;

		}

	</style>

</head>

	<body>

		<ul>

			<li>商品1</li>

			<li>商品2</li>

			<li>商品3</li>

			<li>商品4</li>

			<li>商品5</li>

		</ul>

	</body>

</html>
7、内容自适应-收缩

max-content：按最大的文本宽度显示；

min-content：按最小的文本宽度显示。

<html>

<head>

	<style type="text/css">

		div.top {

				width: -webkit-max-content;

				/* width: -webkit-min-content; */

		}

	</style>

</head>

	<body>

		<div class="container">

			<div class="top">qwertyuiop</div>

			<div class="main">asdfghjk</div>

		</div>

	</body>

</html>

一、背景

1、背景色（background-color）

默认值：transparent（透明）

<html>

<head>

    <style type="text/css">

		body{

			background-color: green;

		}

	</style>

</head>

<body>

</body>

</html>
2、背景图片（background-image）

默认值none

<html>

<head>

    <style type="text/css">

		body{

			background-image: url("图片路径");

		}

	</style>

</head>

<body>

</body>

</html>
3、背景重复

background-repeat属性设置背景在模拟坐标上平铺；

repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复。

no-repeat表示不允许平铺

4、背景定位（background-position）
①关键字

可取值：top、bottom、left、right、center

可以同时设置1到2个参数；

如果写了两个参数，则第一个是水平方向位置，第二个是垂直方向位置

如果写了一个关键字，则认为另一个关键则为center。

<html>

<head>

    <style type="text/css">

		body{

			background-image: url("图片路径");

			background-repeat: no-repeat;

			background-position: center;

		}

	</style>

</head>

<body>

</body>

</html>

body{
background-image: url(“图片路径”);
background-repeat: no-repeat;
background-position: center;
}

也可以写成

body{
background: url(“图片路径”) no-repeat center;
}

②百分比

background-position属性默认值为0% 0%，功能上相当于top left

可以同时设置1到2个参数；

如果写了两个参数，则第一个是水平方向位置，第二个是垂直方向位置

如果写了一个百分比参数，则认为另一个为50%。

<html>

<head>

    <style type="text/css">

		body{

			background-image: url("图片路径");

			background-position: 50%;

			background-repeat: no-repeat;

		}

	</style>

</head>

<body>

</body>

</html>
③像素

像素值的位置是相对于内边距左上角的偏移位置

<html>

<head>

    <style type="text/css">

		body{

			background-image: url("图片路径");

			background-position: 50px 100px;

			background-repeat: no-repeat;

		}

	</style>

</head>

<body>

</body>

</html>
5、背景关联（background-attachment）

当文本比较长时，向下滚动时，背景图也会滚动，因为background-attachment属性默认值为scroll，可以设置为fixed，防止滚动。

<html>

<head>

    <style type="text/css">

		body{

			background-image: url("图片路径");

			background-position: top;

			background-repeat: no-repeat;

			background-size: 100%;

			background-attachment: fixed;

			color: white;

		}

	</style>

</head>

<body>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

	1<br>

</body>

</html>
6、背景裁切（background-clip）

以盒子模型为基准，设置背景显示范围

值 描述
border-box 默认值，背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框 
html>

<head>

    <style type="text/css">

		.containter{

			width: 800px;

			height: 200px;

			border: dashed 15px black;

			margin: 20px;

			padding: 20px;

			background-color:pink;

			background-clip: content-box;

		}

	</style>

</head>

<body>

	<div class="containter">

		<div>hello</div>

	</div>

</body>

</html>
7、尺寸（background-size）
值 描述
px 设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为"auto"
% 以父元素的百分比来设置背景图的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为”auto“
cover 把背景图片扩展至足够大，以使背景图完全覆盖背景区域，背景图的某些部分也许无法显示在背景定位区域中
contain 把背景图像扩展到最大尺寸，使其宽高完全适应内容区域 
<html>

<head>

    <style type="text/css">

		.containter{

			width: 800px;

			height: 200px;

			border: dashed 15px black;

			margin: 20px;

			padding: 20px;

			background-image: url("图片路径");

			background-repeat: no-repeat;

			/*background-size:50%;*/

			/*background-size: contain;*/

			background-size: cover;

		}

	</style>

</head>

<body>

	<div class="containter">

		<div>hello</div>

	</div>

</body>

</html>
8、多图背景

background-image属性中用逗号分隔两个url，在其他设置如background-repeat，background-position等属性中也用逗号分隔两者的设置，如果没有用逗号分隔，视为两者一起应用，如下面的例子中的background-repeat: no-repeat;

<html>

<head>

    <style type="text/css">

		.containter{

			width: 1200px;

			height: 800px;

			border: dashed 15px black;

			margin: 20px;

			padding: 20px;

			background-image: url("图片一路径"),

			url("图片二路径");

			background-repeat: no-repeat;

			background-position:left top,center;

			background-size: 100px 100px,200px 200px;

		}

	</style>

</head>

<body>

	<div class="containter">

		<div>hello</div>

	</div>

</body>

</html>
9、渐变
<html>

<head>

    <style type="text/css">

		.containter{

			height: 400px;

			border: dashed 3px black;

		}

	</style>

</head>

<body>

	<div class="containter">

        <div>hello</div>

	</div>

</body>

</html>
①线性渐变（linear-gradient）

不同浏览器最好添加引擎前缀

background:linear-gradient(red,green,blue);

从上到下，依次平均分配几个颜色

改变渐变角度：

background:linear-gradient(45deg,red,green,blue);

改变渐变方向（to top ，to right等）;

background:linear-gradient(to top,red,green,blue);

同色系渐变效果比较好看

<html>

<head>

    <style type="text/css">

		.containter{

			height: 400px;

			border: dashed 3px black;

			background:linear-gradient(to top,#a0c1db,#208ce0,#a0c1db);

		}

	</style>

</head>

<body>

	<div class="containter">

	</div>

</body>

</html>
②径向渐变（radial-gradient）

可以设置水平垂直像素：

background:radial-gradient(100px 100px,red,green,blue);

也可以设置渐变起点（圆心位置）：

background:radial-gradient(at top,red,green,blue);
③色标

渐变位置：

渐变颜色本来是均匀分布，可以设置色标控制渐变的位置

<!DOCTYPE html>

<html>

<head>

    <style type="text/css">

		.containter{

			height: 400px;

			width: 400px;

			border: dashed 3px black;

			background:radial-gradient(red,yellow 30%,black 70%);

		}

	</style>

</head>

<body>

	<div class="containter">

	</div>

</body>

</html>

渐变中点

渐变的中心位置

background:linear-gradient(yellow, 20%, blue);
10、重复渐变

给linear-gradient和radial-gradient前面加一个repeating

示例：

background:repeating-linear-gradient(90deg,yellow,red 50px);

或者：

background:repeating-linear-gradient(yellow,red 50px);

ps：在动画中常用

第八周-周五

一、布局基本概念

某个元素在什么位置，元素横向还是纵向排列，一行几个元素，距离多少等等

二、文档流

网页水平方向做x轴，垂直方向做y轴，垂直于屏幕为z轴，文档流就代表x和y轴的平面，在这个平面里，窗体自上而下一行一行，从左到右排放元素，无越级，秩序井然。

脱离文档流：

脱离了x、y轴平面，定位在了 z! = 0 的位置

三、float浮动

会脱离文档流；

两个最主要的使用方式：

block元素水平排列

文字与图片环绕排版

基本理解：

<html>

<head>

    <style type="text/css">

    	div{

    		width: 200px;

    		height: 200px;

    	}

		div:nth-of-type(1){

			border: red 5px solid;

		}

		div:nth-of-type(2){

			background: green;

		}

	</style>

</head>

<body>

	<div></div>

	<div></div>

</body>

</html>

1脱轨：

div:nth-of-type(1){

			border: red 5px solid;

			float: left;

		}

2跟着1脱轨：

div:nth-of-type(2){

			border: red 5px solid;

			float: left;

		}

1、2都脱轨，于是float就取消他们一人一行的规则，让2紧挨着1显示

接着1回到文档流中

div:nth-of-type(1){

			border: red 5px solid;

		}

过程解析：

1设置了float，脱离文档流，文档流中他就不存在了，2就会顶替他的位置

1、2都设置float，都脱离文档流，脱离文档流的元素没有行的概念，只能跟在脱离的元素后面显示

1取消float占回了本来位置，2还是浮动的，只是他前面没有浮动元素，所以会在已有位置上浮动

四、左右浮动

示例：

<!DOCTYPE html>

<html>

<head>

    <style type="text/css">

    	div{

    		width: 300px;

    		height: 300px;

    	}

    	.containter{

    		width: 650px;

    		height: 300px;

    		margin: auto;

    		border: solid 1px #000;

    		padding: 20px;

    	}

    	.containter div:nth-of-type(1){

    		float: left;

    		border: solid 2px red;

    	}

    	.containter div:nth-of-type(2){

    		float: left;

    		background-color: green;

    	}

	</style>

</head>

<body>

	<main class="containter">

		<div></div>

		<div></div>

	</main>

</body>

</html>

五、浮动后转块级元素

示例：脱离文档流后span的宽高设置都在不调整display的情况下也可以使用

<!DOCTYPE html>

<html>

<head>

    <style type="text/css">

    	.containter{

    		width: 650px;

    		height: 300px;

    		margin: auto;

    		border: solid 1px #000;

    		padding: 20px;

    	}

    	span{

    		border: solid 1px green;

    		width: 300px;

    		height: 50px;

    		float: left;/*脱离文档流后span的宽高设置都在不调整display的情况下也可以使用*/

    	}

	</style>

</head>

<body>

	<main class="containter">

		<span>hello</span>

		<span>word</span>

	</main>

</body>

</html>

六、清除浮动

clear属性，对前后元素无效，只能作用于自身

取值 释义
none 默认值，允许两边有浮动对象
left 不允许左边有浮动对象
right 不允许右边有浮动对象
both 左右都不允许有浮动对象

示例1：

<!DOCTYPE html>

<html>

<head>

	<title>布局</title>

	<style type="text/css">

		div{

			width: 300px;

			height:300px;

		}

		.red{

			float: left;

			background-color: red;

		}

		.green{

			float: left;

			background-color: green;

		}

		.blue{

			float: left;

			background-color: blue;

		}

	</style>

</head>

<body>

	<div class="red"></div>

	<div class="green"></div>

	<div class="blue"></div>

</body>

</html>

CSS原则：

1、父元素如果没有设置高度，他的高度其实是被子元素撑开的

2、浮动元素不占文档流的空间位

所以，当子元素盒子脱离文档流，父元素无法被撑起：

示例：

<!DOCTYPE html>

<html>

<head>

	<title>布局</title>

	<style type="text/css">

		div{

			width: 300px;

			height:300px;

		}

		.container{

			width: 650px;

			margin: auto;

			border: solid 1px #000;

			padding: 20px;

		}

		.container div:nth-of-type(1){

			float: left;

			border: solid 2px red;

		}

		.container div:nth-of-type(2){

			float: right;

			background-color: green;

		}

	</style>

</head>

<body>

	<main class="container">

		<div></div>

		<div></div>

	</main>

</body>

</html>

解决方法：

方法一 添加子元素

再定义一个没有脱离文档流的子元素，并保证左右清除浮动

<html>

<head>

	<style type="text/css">

		div{

			width: 300px;

			height:300px;

		}

		.container{

			width: 650px;

			margin: auto;

			border: solid 1px #000;

			padding: 20px;

		}

		.container div:nth-of-type(1){

			float: left;

			border: solid 2px red;

		}

		.container div:nth-of-type(2){

			float: right;

			background-color: green;

		}

		.container p{

			clear: both;

		}

	</style>

</head>

<body>

	<main class="container">

		<div></div>

		<div></div>

		<p></p>

	</main>

</body>

</html>
方法二 添加after伪元素

添加一个after伪元素达到和方法一添加子元素一样的效果

<html>

<head>

	<style type="text/css">

		div{

			width: 300px;

			height:300px;

		}

		.container{

			width: 650px;

			margin: auto;

			border: solid 1px #000;

			padding: 20px;

		}

		.container::after{

			content: "";

			clear: both;

			display: block;

		}

		.container div:nth-of-type(1){

			float: left;

			border: solid 2px red;

		}

		.container div:nth-of-type(2){

			float: right;

			background-color: green;

		}

	</style>

</head>

<body>

	<main class="container">

		<div></div>

		<div></div>

	</main>

</body>

</html>
方法三 BFC

强制识别子类高度的方法

<html>

<head>

	<style type="text/css">

		div{

			width: 300px;

			height:300px;

		}

		.container{

			width: 650px;

			margin: auto;

			border: solid 1px #000;

			padding: 20px;

			/*BFC*/

			overflow: hidden;

		}

		.container div:nth-of-type(1){

			float: left;

			border: solid 2px red;

		}

		.container div:nth-of-type(2){

			float: right;

			background-color: green;

		}

	</style>

</head>

<body>

	<main class="container">

		<div></div>

		<div></div>

	</main>

</body>

</html>

第九周-周二

一、文字环绕排版

1、文字环绕图形（shape-outside）
取值 释义
margin-box 外边距环绕
padding-box 内边距环绕
border-box 边框环绕
content-box 内容环绕

示例:

文字环绕圆形

<!DOCTYPE html>

<html>

<head>

	<style type="text/css">

		body{

			background-color: #e1e2e2;

			font-size: 32px;

		}

		.circle{

			float: left;

			width: 200px;

			height: 200px;

			padding: 20px;

			margin: 20px;

			border:solid 15px darkgreen;

			border-radius: 50%;

			shape-outside: border-box;

		}

	</style>

</head>

<body>

		<span class="circle"></span>

		<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

</body>

</html>
2、clip-path属性

clip-path可以用于画图形

clip-path: circle(); 圆
clip-path: circle(50% at 0 0); 四分之一圆
clip-path: inset(25% 0 round 0 25%); 圆角
clip-path: polygon(0 100%,50% 0,100% 100%); 三角形

3、整合使用
<!DOCTYPE html>

<html>

<head>

	<title>布局</title>

	<style type="text/css">

		body{

			background-color: #e1e2e2;

			font-size: 32px;

		}

		.circle{

			background-color: pink;

			float: left;

			width: 200px;

			height: 200px;

			padding: 20px;

			margin: 20px;

			clip-path: circle();

			shape-outside: circle();

		}

	</style>

</head>

<body>

		<span class="circle"></span>

		<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</p>

</body>

</html>

二、position属性

1、常用取值：
取值 说明
static 默认值，文档流标准定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
2、位置偏移属性

position定位之后，通常配合这些属性使用

属性名称 说明
top 设置距离顶部距离
right 设置距离右边距离
bottom 设置距离底部距离
left 设置距离左边距离
3、默认static

默认值，position设置static后，left等将无效，content里的内容会以正常文档流形式显示

<html>

	<style type="text/css">

		*{

			margin: 0;

			padding: 0;

		}

		.container{

			background-color: #868686;

			width: 100%;

			height: 800px;

		}

		.content{

			background-color: yellow;

			width: 100px;

			height: 100px;

			position: static;

			float: left;

			left: 50px;/*无法实现距离左边50像素*/

		}

	</style>

</head>

<body>

		<div class="container">

			<div class="content"></div>

		</div>

</body>

</html>
4、相对定位（relative）

不脱离文档流，只是相对于文档流中的位置进行偏移

<html>

<head>

	<style type="text/css">

		*{

			margin: 0;

			padding: 0;

		}

		.container{

			background-color: #868686;

			width: 100%;

			height: 800px;

		}

		.content{

			background-color: yellow;

			width: 100px;

			height: 100px;

			position: relative;

			left: 50px;

		}

		.content_1{

			background-color: red;

			width: 100px;

			height: 100px;

		}

	</style>

</head>

<body>

		<div class="container">

			<div class="content"></div>

			<div class="content_1"></div>

		</div>

</body>

</html>

绝对定位absolute

脱离文档流：

通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置，如果都没有，则相对于body位置。

绝对定位的元素可以设置外边距（margin），且不会与其他边距合并。

示例1：相对body定位

祖先元素都没有非static的定位，则相对于body位置定位，不受父元素影响

<html>

<head>

	<style type="text/css">

		*{

			margin: 0;

			padding: 0;

		}

		.container{

			background-color: #868686;

			width: 100%;

			height: 800px;

			margin-top: 50px;

		}

		.content{

			background-color: yellow;

			width: 100px;

			height: 100px;

			position: absolute;

			top: 10px;

		}

	</style>

</head>

<body>

		<div class="container">

			<div class="content"></div>

		</div>

</body>

</html>

示例2：相对祖先定位

相对于最近的非static定位的祖先定位

<html>

<head>

	<style type="text/css">

		*{

			margin: 0;

			padding: 0;

		}

		.container{

			background-color: #868686;

			width: 100%;

			height: 800px;

			margin-top: 50px;

			position: relative;/*这里设置了reletive定位，属于content的非static祖先*/

		}

		.content{

			background-color: yellow;

			width: 100px;

			height: 100px;

			position: absolute;

			top: 10px;

		}

	</style>

</head>

<body>

		<div class="container">

			<div class="content"></div>

		</div>

</body>

</html>

示例3 ：控制块的尺寸

通过控制定位距离上下左右的距离控制块的宽高

<html>

<head>

	<style type="text/css">

		*{

			margin: 0;

			padding: 0;

		}

		.container{

			background-color: #868686;

			width: 300px;

			height: 300px;

			position: relative;

		}

		.content{

			background-color: yellow;

			/*width: 100px;

			height: 100px;*/

			/*不设置宽高*/

			position: absolute;

			top: 100px;

			left: 100px;

			right: 0;

			bottom: 0;

		}

	</style>

</head>

<body>

		<div class="container">

			<div class="content"></div>

		</div>

</body>

</html>
示例4：水平垂直居中（必考）

让子块在父块中水平垂直居中的几种方法。

<!DOCTYPE html>

<html>

<head>

	<title>布局</title>

	<style type="text/css">

		*{

			padding:0;

			margin: 0;

		}

		.father{

			width: 300px;

			height: 300px;

			border:solid 2px #333;

            margin: auto;

		}

		.child{

			width: 100px;

			height: 100px;

			background-color: red;

		}

	</style>

</head>

<body>

	<div class="father">

		<div class="child"></div>

	</div>

</body>

</html>

方法1：计算宽度-非定位

调整margin的数值使其定位在中央，具体值自己计算

<html>

<head>

	<style type="text/css">

		*{

			padding:0;

			margin: 0;

		}

		.father{

			width: 300px;

			height: 300px;

			border:solid 2px #333;

			margin: auto;

		}

		.child{

			width: 100px;

			height: 100px;

			margin: 100px;

			background-color: red;

		}

	</style>

</head>

<body>

	<div class="father">

		<div class="child"></div>

	</div>

</body>

</html>

方法2：计算宽度-绝对定位

2.1 父元素变动会影响结果的版本：

设置父元素reletive定位，子元素相对父元素使用absolute定位，具体值自己计算

<html>

<head>

	<style type="text/css">

		*{

			padding:0;

			margin: 0;

		}

		.father{

			width: 300px;

			height: 300px;

			border:solid 2px #333;

			margin: auto;

			position: relative;

		}

		.child{

			width: 100px;

			height: 100px;

			background-color: red;

			position: absolute;

			left: 100px;

			top: 100px;

		}

	</style>

</head>

<body>

	<div class="father">

		<div class="child"></div>

	</div>

</body>

</html>

2.2 父元素变动不会影响结果的版本：

先将子块左上角的点偏移至父块中心，再往回偏移子块自己边的一半

<!DOCTYPE html>

<html>

<head>

	<title>布局</title>

	<style type="text/css">

		*{

			padding:0;

			margin: 0;

		}

		.father{

			width: 300px;

			height: 300px;

			border:solid 2px #333;

			margin: auto;

			position: relative;

		}

		.child{

			width: 100px;

			height: 100px;

			background-color: red;

			position: absolute;

			left: 50%;

			top: 50%;

			margin-top: -50px;

			margin-left: -50px;

		}

	</style>

</head>

<body>

	<div class="father">

		<div class="child"></div>

	</div>

</body>

</html>

方法3：定位+2D转换

<html>

<head>

	<style type="text/css">

		*{

			padding:0;

			margin: 0;

		}

		.father{

			width: 300px;

			height: 300px;

			border:solid 2px #333;

			margin: auto;

			position: relative;

		}

		.child{

			width: 100px;

			height: 100px;

			background-color: red;

			position: absolute;

			left: 50%;

			top: 50%;

			transform: translate(-50%,-50%);

		}

	</style>

</head>

<body>

	<div class="father">

		<div class="child"></div>

	</div>

</body>

</html>
示例5：滚动

当块元素在祖先内部滚动时，他的定位是什么样的？

<html>

<head>

	<style type="text/css">

		*{

			padding:0;

			margin: 0;

		}

		.grandfather{

			margin:auto;

			position: relative;

			width: 300px;

			height: 300px;

			border:solid 3px #333;

			overflow: scroll;

		}

		.father{

			position: relative;

			height: 1300px;

			background-color: green;

		}

		.child{

			position: absolute;

			top: 100px;

			width: 100px;

			height: 100px;

			background-color: red;

		}

	</style>

</head>

<body>

	<div class="grandfather">

		<div class="father">

			<div class="child"></div>

		</div>

	</div>

</body>

</html>

第九周-周五

5、固定定位fixed

脱离文档流。

相对于屏幕窗口固定，元素位置在屏幕滚动时不会改变，打印时元素会出现在每页的固定位置。

<html>

<head>

	<style type="text/css">

		*{

			padding:0;

			margin: 0;

		}

		.grandfather{

			margin:auto;

			position: relative;

			top: 100px;

			width: 300px;

			height: 300px;

			border:solid 3px #333;

			overflow: scroll;

		}

		.father{

			position: relative;

			height: 1300px;

			background-color: green;

		}

		.child{

			position: fixed;

			top: 100px;

			width: 100px;

			height: 100px;

			background-color: red;

		}

	</style>

</head>

<body>

	<div class="grandfather">

		<div class="father">

			<div class="child"></div>

		</div>

	</div>

</body>

</html>
6、position取值小结（必考）

static

默认值，元素在文档流中，元素框正常生成。

relative

元素在文档流中，相对于原始位置进行偏移

元素仍保持其未定位前的形状，他原本所占的空间也保留

absolute

脱离文档流，相对于最近的祖先非static定位；

元素在原先正常文档流中所占空间不复存在

不论原来在正常文档流中是何种类型的框，定位都会生成一个块级框；

fixed

脱离文档流。元素相对于当前浏览器窗口定位，其他和absolute一样

sticky

元素在文档流中，以某个div为区域定位。

7、层级z-index

确定z轴方向上元素的显示层级（也可以理解为z轴方向上元素显示的优先级）

示例1：基本举例

z-index仅对非static元素生效

同级元素实现z-indix代码：

<html>

<head>

	<style type="text/css">

		*{

			margin:0;

			padding: 0;

		}

		div{

			width: 200px;

			height: 200px;

		}

		.bg-yellow{

			background-color: yellow;

		}

		.bg-red{

			background-color: red;

		}

		.bg-blue{

			background-color: blue;

		}

		.main{

			position: relative；

		}

		.div1{

			position: absolute;

			top: 0;

			left: 0;

			z-index: 1;

		}

		.div2{

			position: absolute;

			top: 20px;

			left: 20px;

			z-index: 2;

		}

		.div3{

			position: absolute;

			top: 40px;

			left: 40px;

			z-index: 3;

		}

	</style>

</head>

<body>

	<div class="main">

		<div class="div1 bg-yellow">

			<!-- <div class="div1-1 bg-red">

				<div class="div1-1-1 bg-blue"></div>

			</div> -->

		</div>

		<div class="div2 bg-red"></div>

		<div class="div3 bg-blue"></div>

	</div>

</body>

</html>

提问1：

不设置z-indix情况下，子元素会覆盖父元素显示：

那么，将父元素z-index值设为高于子元素，能否实现父元素覆盖子元素？（不能）

示例代码：反向设置父子元素z-index后，发现效果并不能实现

<html>

<head>

	<style type="text/css">

		*{

			margin:0;

			padding: 0;

		}

		div{

			width: 200px;

			height: 200px;

		}

		.bg-yellow{

			background-color: yellow;

		}

		.bg-red{

			background-color: red;

		}

		.bg-blue{

			background-color: blue;

		}

		.main{

			position: relative；

		}

		.div1{

			position: absolute;

			top: 0;

			left: 0;

			z-index: 3;

		}

		.div1-1{

			position: absolute;

			top: 20px;

			left: 20px;

			z-index: 2;

		}

		.div1-1-1{

			position: absolute;

			top: 40px;

			left: 40px;

			z-index: 1;

		}

	</style>

</head>

<body>

	<div class="main">

		<div class="div1 bg-yellow">

			<div class="div1-1 bg-red">

				<div class="div1-1-1 bg-blue"></div>

			</div>

		</div>

<!-- 		<div class="div2 bg-red"></div>

		<div class="div3 bg-blue"></div> -->

	</div>

</body>

</html>

提问2：z-index的取值标准，是作用于全局，还是只代表一个元素内部的层级？

答：不知道，但是排除全局

<html>

<head>

	<style type="text/css">

		*{

			margin:0;

			padding: 0;

		}

		div{

			width: 200px;

			height: 200px;

		}

		.bg-yellow{

			background-color: yellow;

		}

		.bg-red{

			background-color: red;

		}

		.bg-blue{

			background-color: blue;

		}

		.bg-green{

			background-color: green;

		}

		.main{

			position: relative；

		}

		.div1{

			position: absolute;

			top: 0;

			left: 0;

			z-index: 10;

		}

		.div2{

			position: absolute;

			top: 20px;

			left: 20px;

			z-index: 10;

		}

		.div3{

			position: absolute;

			top: 40px;

			left: 40px;

			z-index: 10;

		}

		.div1-1{

			border-radius: 50%;

			z-index: 11;

		}

	</style>

</head>

<body>

	<div class="main">

		<div class="div1 bg-yellow">

			<div class="div1-1 bg-green">

				<!-- <div class="div1-1-1 bg-blue"></div> -->

			</div>

		</div>

		<div class="div2 bg-red"></div>

		<div class="div3 bg-blue"></div>

	</div>

</body>

</html>

第十周-周二

一、视口单位

单位名称 释义
vw 1vw等于视口宽度的1%
vh 1vh等于视口高度的1%
vmin 选取vw和vh中最小的那个
vmax 选取vw和vh中最大的那个

二、flex声明

使用display声明，共两种

取值 释义
flex 最常用，可理解为block
inline-flex 可理解为inline-block 
<html>

<head>

	<style type="text/css">

			footer{

				/*display: flex;*/

				/*display: inline-flex;*/

				height: 80px;

				background-color: pink;

			}

			footer div{

				color: green;

			}

		</style>

</head>

<body>

		<footer>

			<div>最新日期</div>

			<div>联系我们</div>

			<div>往期文章</div>

			<div>。。。。。。</div>

		</footer>

</body>

</html>

三、flex容器属性

<html>

<head>

	<style type="text/css">

			.container{

				display: flex;

				width: 600px;

				border: solid 2px #333;

			}

			.container div{

				width: 100px;

				height: 100px;

				margin: 10px;

				text-align: center;

				line-height: 100px;

				color: white;

				background-color: green;

			}

		</style>

</head>

<body>

		<div class="container">

			<div>最新日期</div>

			<div>联系我们</div>

			<div>往期文章</div>

			<div>。。。。。。</div>

		</footer>

</body>

</html>

四、定义相关

1.flex-direction（主轴方向）

该属性决定主轴方向（即元素的排列方向）

取值 释义
row 默认值，主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在上沿
column-reverse 主轴为垂直方向，起点在下沿

示例：

.container{

				display: flex;

				flex-direction: row-reverse;

			}
2.flex-wrap（换行）

默认情况下元素都在一条轴上，flex-warp定义一条轴排不下如何换行

取值 释义
nowrap 默认值，不换行
wrap 换行，第一行在后面元素的上方
wrap-reverse 换行，第一行在后面元素的下方

示例：

宽度不够时：


<html>

<head>

	<style type="text/css">

			.container{

				display: flex;

				width: 300px;

				border: solid 2px #333;

			}

			.container div{

				width: 100px;

				height: 100px;

				margin: 10px;

				text-align: center;

				line-height: 100px;

				color: white;

				background-color: green;

			}

		</style>

</head>

<body>

		<div class="container">

			<div>最新日期</div>

			<div>联系我们</div>

			<div>往期文章</div>

			<div>。。。。。。</div>

		</footer>

</body>

</html>
flex-wrap的取值特点？
.container{

				display: flex;

				/*flex-wrap: wrap;

				flex-wrap:wrap-reverse;*/

				width: 600px;

				border: solid 2px #333;

			}
改变高度，看看效果：


<html>

<head>

	<style type="text/css">

			.container{

				display: flex;

				/*flex-wrap: wrap;*/

				flex-wrap:wrap-reverse;

				width: 200px;

				height: 1100px;

				border: solid 2px #333;

			}

			.container div{

				width: 100px;

				height: 100px;

				margin: 10px;

				text-align: center;

				line-height: 100px;

				color: white;

				background-color: green;

			}

		</style>

</head>

<body>

		<div class="container">

			<div>最新日期</div>

			<div>联系我们</div>

			<div>往期文章</div>

			<div>。。。。。。</div>

		</footer>

</body>

</html>
3.flex-flow

flex-direction和·flex-wrap的组合写法：默认值为row nowrap。

五、轴线相关

1、.justify-content（主轴元素对齐）

定义了元素在主轴上的对齐方式，和flex-direction属性常一起出现

取值 释义
flex-start 默认值，主轴起点对齐
flex-end 主轴终点对齐
center 居中
space-between 两端对齐，元素之间的间隔都相等
space-around 每个元素两侧间隔相等，最前最后元素和边框的距离，是中间元素距离的一半
space-evenly 每个元素之间，元素与边界之间的距离全部平均分配，但兼容性较低 
.container{

				display: flex;

				width: 600px;

				height: 200px;

				justify-content: space-evenly;

				border: solid 2px #333;

			}

2.aligin-items（交叉轴元素对齐）

定义了元素在交叉轴上的对齐方式。

取值 释义
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 元素第一行文字的基线对齐
stretch 轴线占满整个交叉轴，权重低于宽高，所以只能作用于未设置宽高或宽高为auto的元素

示例：水平垂直居中

.container{

				display: flex;

				width: 600px;

				height: 250px;

				justify-content: center;

				align-items: center;

				border: solid 2px #333;

			}

3.aligin-content（轴的对齐）

定义多根轴的对齐方式，如果只有一个轴，则不起作用

取值
flex-start 交叉轴起点对齐
flex-end 交叉轴终点对齐
center 交叉轴中点对齐
space-between 交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧间隔相等
space-evenly 元素距离平均分配
stretch 默认值，轴线占满整个交叉轴 
.container{

				display: flex;

				width: 300px;

				height: 600px;

				flex-wrap: wrap;

				align-content:center;

				border: solid 2px #333;

			}

六、flex元素属性

弹性元素均为块元素

<html>

<head>

	<style type="text/css">

			.container{

				display: flex;

				width: 600px;

				height: 400px;

				border: solid 2px #333;

			}

			.container div{

				width: 100px;

				height: 100px;

				margin: 10px;

				text-align: center;

				line-height: 100px;

				color: white;

				background-color: green;

			}

		</style>

</head>

<body>

		<div class="container">

			<div>1 最新日期</div>

			<div>2 联系我们</div>

			<div>3 往期文章</div>

            <div>4 一一一一</div>

		</footer>

</body>

</html>
1.align-self

align-self属性设置单个元素的对齐方式，可覆盖align-items属性。

默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto,其他都与align-items属性完全一致。

.container{

				display: flex;

				width: 600px;

				height: 400px;

				border: solid 2px #333;

				align-items: center;

			}

			.container div:nth-of-type(1){

				align-self: flex-start;

			}

			.container div:nth-of-type(4){

				align-self: flex-end;

			}
2.flex-grow

定义元素的放大比例，默认为0，即如果存在剩余空间也不放大

权重大于宽高属性

1、如果所有元素的flex-grow属性都为1，则他们将等分剩余空间（如果有的话）

.container div{

				flex-grow: 1;

			}

2、有一个元素的flex-grow属性为0，其他的都为1 ，为0的那个保持原样，其他的放大。

.container div{

				flex-grow: 1;

			}

			.container div:nth-of-type(1){

				flex-grow: 0;

			}

3、有一个元素的flex-grow属性为2，其他的都为1，为2的元素占据的剩余空间比其他项多一倍

.container div{

				flex-grow: 1;

			}

			.container div:nth-of-type(1){

				flex-grow: 2;

			}

4、4个元素flex-grow值分别为0,1,2,3时的效果：

<html>

<head>

	<style type="text/css">

			.container{

				display: flex;

				width: 1000px;

				height: 400px;

				border: solid 2px #333;

			}

			.container div{

				width: 100px;

				height: 100px;

				margin: 10px;

				text-align: center;

				line-height: 100px;

				color: white;

				background-color: green;

			}

			.container div:nth-of-type(1){

				flex-grow: 0;

			}

			.container div:nth-of-type(2){

				flex-grow: 1;

			}

			.container div:nth-of-type(3){

				flex-grow: 2;

			}

			.container div:nth-of-type(4){

				flex-grow: 3;

			}

		</style>

</head>

<body>

		<div class="container">

			<div>1 最新日期</div>

			<div>2 联系我们</div>

			<div>3 往期文章</div>

			<div>4 一一一一</div>

		</footer>

</body>

</html>
3.flex-shrink

定义了元素的缩小比例，默认为1，如果空间不足，该元素将缩小

如果所有元素的flex-shrink属性都为1,当空间不足时，都将等比例缩小;

如果-个元素的flex-shrink属性为0，其他元素都为1,则空间不足时，0者不缩小;

设置的flex- shrink属性值越大，缩小的比例就越高;

负值对该属性无效;

<html>

<head>

	<style type="text/css">

			.container{

				display: flex;

				width: 300px;

				height: 400px;

				border: solid 2px #333;

			}

			.container div{

				width: 100px;

				height: 100px;

				margin: 10px;

				text-align: center;

				line-height: 100px;

				color: white;

				background-color: green;

			}

			.container div:nth-of-type(1){

				flex-shrink: 0;

			}

			.container div:nth-of-type(2){

				flex-shrink: 1;

			}

			.container div:nth-of-type(3){

				flex-shrink: 2;

			}

			.container div:nth-of-type(4){

				flex-shrink: 3;

			}

		</style>

</head>

<body>

		<div class="container">

			<div>1 最新日期</div>

			<div>2 联系我们</div>

			<div>3 往期文章</div>

			<div>4 一一一一</div>

		</footer>

</body>

</html>

第十周-周五

4、flex-basis

flex-basis属性定义了在分配多余空间之前，元素占据的主轴空间(main size)。 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto,即元素的本来大小，权重大于width. height 属性。它可以设为跟width或height属性一样的值(比如350px)，则元素将占据固定空间。

示例1：主轴水平时，表现为宽度

<html>

<head>

	<style type="text/css">

			.container{

				display: flex;

				width: 600px;

				height: 600px;

				border: solid 2px #333;

				flex-direction: row;

			}

			.container div{

				width: 100px;

				height: 100px;

				margin: 10px;

				text-align: center;

				color: white;

				background-color: green;

			}

			.container div:nth-of-type(2){

				flex-basis: 50px;

			}

		</style>

</head>

<body>

		<div class="container">

			<div>1 最新日期</div>

			<div>2 联系我们</div>

			<div>3 往期文章</div>

			<div>4 一一一一</div>

		</footer>

</body>

</html>

示例2：主轴垂直时表现为高度

<html>

<head>

	<style type="text/css">

			.container{

				display: flex;

				width: 600px;

				height: 600px;

				border: solid 2px #333;

				flex-direction: column;

			}

			.container div{

				width: 100px;

				height: 100px;

				margin: 10px;

				text-align: center;

				color: white;

				background-color: green;

			}

			.container div:nth-of-type(2){

				flex-basis: 50px;

			}

		</style>

</head>

<body>

		<div class="container">

			<div>1 最新日期</div>

			<div>2 联系我们</div>

			<div>3 往期文章</div>

			<div>4 一一一一</div>

		</footer>

</body>

</html>

优先级：

max-…， min-…>line-height>flex-basis>width、height

5、flex(组合形式)

flex属性是flex-grow ，flex-shrink和flex -basis的简写，默认值为0 1 auto。 后两个属性可选。

该属性有两个快捷值: auto(1 1 auto) 和none(00 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

.container div:nth-of-type(2){

				flex:auto;

				}
6、order

定义元素的排列顺序，数值越小，排列越靠前，可取负值默认为0；

<html>

<head>

	<style type="text/css">

			.container{

				display: flex;

				width: 600px;

				height: 600px;

				border: solid 2px #333;

				flex-direction: row;

			}

			.container div{

				width: 100px;

				height: 100px;

				margin: 10px;

				text-align: center;

				color: white;

				background-color: green;

			}

			.container div:nth-of-type(1){

				order: 1;

			}

			.container div:nth-of-type(2){

				order: -1

			}

			.container div:nth-of-type(3){

				order: 6;

			}

			.container div:nth-of-type(4){

				order: 2;

			}

		</style>

</head>

<body>

		<div class="container">

			<div>1 最新日期</div>

			<div>2 联系我们</div>

			<div>3 往期文章</div>

			<div>4 一一一一</div>

</body>

</html>

第十一周-周二

一、书写方式

三种：行内，内嵌，外部

1、行内脚本

代码写在html文件中，且在标签属性值里出现。

<html>

<head>

</head>

<body>

	<p id="demo">JavaScript能改变HTML的内容。</p>

	<button type="button" onclick='document.getElementById("demo").innerHTML= "Hello Javascript!"'>点击我！</button>

</body>

</html>

函数式写法：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

	<p id="demo">JavaScript能改变HTML的内容。</p>

	<button type="button" onclick="foo();">点击我！</button>

	<script>

	function foo(){

		document.getElementById('demo').innerHTML= '<h1>Hello Javascript!</h1>';

	}

	</script>

</body>

</html>
2、内嵌脚本

代码写在html中，位置在script

<html>

<head>

</head>

<body>

	<p id="demo"></p>

	<script type="text/javascript">

		document.getElementById('demo').innerHTML =  '<h1>Hello Javascript!</h1>';

	</script>

</body>

</html>
3、外部脚本（推荐）
<html>

<head>

</head>

<body>

	<p id="demo"></p>

	<script src="demo.js"></script>

</body>

</html>
document.getElementById('demo').innerHTML =  '<h1>Hello Javascript!</h1>';

二、语法

1、大小写

JavaScript对大小写敏感

2、注释

单行注释

// alert(hello);

多行注释

/*function add(var a,var b)

		{

			return a+b;

		}*/
3、分号

以 ; 作为一句话的结尾，JavaScript可以不写分号。但最好还是要写

4、空格
var person = "bill"

var person="bill"

加不加空格都行，两句话相同

5、引号

JavaScript支持引号和双引号：

document.getElementById("demo").innerHTML= "Hello Javascript!"

document.getElementById('demo').innerHTML= 'Hello Javascript!'

或者：

<button type="button" onclick="document.getElementById('demo').innerHTML= 'Hello Javascript!'">点击我！</button>

<button type="button" onclick='document.getElementById("demo").innerHTML= "Hello Javascript!"'>点击我！</button>

引号嵌套一定是大套小或者小套大。

三、输入输出

1、常用输出
语句 功能
window.alert(); 弹出警告框
document.write(); 写入HTML，重置文档
innerHTML(); 写入HTML，不重置文档
console.log(); 写入控制台

alert();

示例：

<html>

<head>

</head>

<body>

	<button type="button" onclick="alert('hello');">点击我！</button>

	<!-- 点击按钮弹出hello -->

</body>

</html>

innerHTML();

在被选中的元素内部添加新的HTML代码

示例：

<html>

<head>

</head>

<body>

	<p id="demo"></p>

	<button type="button" οnclick='document.getElementById("demo").innerHTML= 1+2'>点击我！</button>

</body>

</html>

这里的1+2被识别为表达式，输出结果为3，如果改为“1+2”则会输出1+2

console.log();

需要打开控制台

示例：



<html>

<head>

e>js</title>

</head>

<body>

	<button type="button" onclick='console.log("hello");'>点击我！</button>

</body>

</html>

document.write();

<!DOCTYPE html>

<html>

<head>

	<title>js</title>

</head>

<body>

	test、、、

	<p id="demo">我的第一个案例</p>

	<button type="button" onclick='document.write(1+2);'>点击我！</button>

</body>

</html>

document.write();直接将内容写入文档流，会导致页面全部重置

2、常用输入

prompt对话框

语法：

prompt(text,defaultText);

text:可选，要在对话框中显示的纯文本

defaultText：可选，默认的输入文本

<html>

<head>

</head>

<body>

	<button type="button" onclick="disp_prompt()">点击我！</button>

	<script type="text/javascript">

		function disp_prompt(){

			var name = prompt("请输入姓名","admin");

			if(name!= null&&name != ""){

				document.write("你好！"+ name + "!");

			}

		}

	</script>

</body>

</html>

四、标识符

所有JavaScript变量的唯一名称称为标识符

构造变量名称（唯一标识符）的通用规则是：

名称可以包含字母、数字、下划线和美元符号

名称必须以字母、$、_ 开头

名称大小写敏感

保留字无法作为变量名称

JavaScript标识符对大小写敏感

五、字面量

var obj = {name:"xu",age:18};//{name:"xu",age:18}为对象字面量

var str = "abcdefg";//abcdefg为字符串字面量

var num = 999;//999为数字字面量

var arr = (1,2,3);//(1,2,3)为数字面量

六、变量

计算机语言中能储存计算结果或能表示值的抽象概念。
用于存储数据的容器，在程序的运行中可以发生变化或者被再次赋值。

可以使用var关键字来声明变量，变量的值可以是任意类型。

示例：

var myName = "xsb";//myName是变量，xsb是字面量

在ES6中新增了let关键字声明变量，作用与var类似，只是声明的变量只在其所在代码块内有效:

let name = "xsb";//name是变量，xsb是字面量

七、常量

常量与变量- -样均是用于存储数据的容器，只不过常量的值在程序的运行中不可以发生改变。

在ES6之前并没有声明常量的方法，在ES6中新增加了const来定义常量。
建议常量的命名全部大写，如果由多个单词构成，可以用下划线隔开。

// NUM和MY_SITE只能在初始化的时候被赋值赋值以后不允许被再次赋值

const NUM = 1;//NUM是常量，1是字面量

const MY_SITE="http://www.baidu.com";//MY_SITE是常量，http://www.baidu.com是字面量

常量必须有初始值，否则会报错

第十二周-周五

一、全局污染

1、不写关键字

不写var let const

function foo() {

	var content = "hello"

}

foo();

console.log(content);

不遵守代码规范:

在外部文件demo.js定义了一个content变量，没写关键字

//demo.js

function foo() {

	content = "hello"

}

在html中定义了一个同名变量，然后调用已写好的代码

<script src="demo.js"></script>

<script type="text/javascript">

	var content = "world";

	foo();

	console.log(content);

</script>

var、let、const

关键字 变量提升 作用域 可否重复声明 声明后是可否可变 是否影响window对象
var 1 函数级 1 1 1
let 0 块级，存在暂时性死区 0 1 0
const 0 块级，存在暂时性死区 0 0 0

1、变量提升为yes，声明前调用变量，值为underfined；变量提升为no，声明前调用变量会抛ReferenceError;

2、暂时性死区（TDZ）：ES6规定，如果代码区块中存在let 和 const 命令声明的变量，这个区块对这些变量从一开始就形成了封闭作用域，直到声明语句完成，这些变量才能被访问（获取或设置），否则会报错ReferenceError。这在语法上称为“暂时性死区”，即代码块开始到变量声明语句完成之间的区域。

function foo() {

	let a = "hello";

	let b = "my";

	console.log(c);

	let c = "world";

}

3、const为只读常量的关键字，使用效果类似Java中的final关键字。

//修饰常量时，常量值不可变

const a = "hello";

a = "my";

console.log(a);

//修饰对象时，对象的引用不可变

const a = {dog:"泰迪犬"，cat:"加菲猫"}；

console.log(a);

a.dog = "博美犬"；

console.log(a);

拓展：js提供了Object.freeze(a)冻住某个对象，让其变为完全不可修改的对象。

html笔记重点的更多相关文章

  1. 031 Spring Data Elasticsearch学习笔记---重点掌握第5节高级查询和第6节聚合部分

    Elasticsearch提供的Java客户端有一些不太方便的地方: 很多地方需要拼接Json字符串,在java中拼接字符串有多恐怖你应该懂的 需要自己把对象序列化为json存储 查询到结果也需要自己 ...

  2. Linux学习笔记——重点推荐的Linux网络在线学习资源

     首先非常感谢百度,感谢网络的搜索引擎技术,也非常感谢学习资源的贡献者和组织! 1:http://billie66.github.io/TLCL/book/zh/ 2:http://www.ha97. ...

  3. JavaScript代码笔记重点：

    JavaScript的基本特点:JavaScript是基本对象和事件驱动,具有实时性,动态性,跨平台性和安全性等. JavaScript是对大小写敏感的. <!DOCTYPE html> ...

  4. 《深入理解Elasticsearch》读书笔记 ---重点概念汇总

    文章转载自: https://mp.weixin.qq.com/s?__biz=MzI2NDY1MTA3OQ==&mid=2247483918&idx=1&sn=a9f2ad3 ...

  5. IRP IO_STACK_LOCATION 《寒江独钓》内核学习笔记（1）

    在学习内核过滤驱动的过程中,遇到了大量的涉及IRP操作的代码,这里有必要对IRP的数据结构和与之相关的API函数做一下笔记. 1. 相关阅读资料 <深入解析 windows 操作系统(第4版,中 ...

  6. Java学习笔记 ：2021年12月31日 上午

    Java学习笔记 :2021年12月31日 上午 目录 Java学习笔记 :2021年12月31日 上午 关于计算机语言 1.关于语言的分类 2.小结 关于Java语言的基础语法 1.主方法 2.其他 ...

  7. Liunx初学指令

    今天又讲了一下Liunx操作系统,这个感觉比较简单一点了,多积极练练就好了,今天的课堂笔记重点如下: 1. 查看当做操作目录位置 > pwd 2. 查看(当前)目录里边的文件内容 > ls ...

  8. 10.30 rest_framework总结

    2018-10-30 20:25:23 终于学完了rest_framework  这个框架! 这个框架有一些基本组件!最重要的就是看源码!要一个类一个类的去找!按顺序! 并且要自己配置类的时候要先看源 ...

  9. Linux命令--1

    之前一直在学习Linux,不过有点一天打鱼两天晒网的意味,现在希望通过写博客的形式,积累更多的知识,也希望可以帮到同在linux坑中的各位小伙伴们~ PS:我的笔记重点在于通俗,很多命令一百度就有,但 ...

  10. OpenCV颜色转换和皮肤检测

    本笔记重点记录OpenCV中的颜色转换和利用色彩空间的特性进行皮肤检测 颜色转换 实现原理 之所以要引入色调/饱和度/亮度的色彩空间概念,是因为人们喜欢凭直觉分辨各种颜色,而它与这种方式吻合.实际上, ...

随机推荐

  1. Windows查询进程和杀死进程

    查询进程 查询进程占用的端口(通过端口查询) netstat -ano |findstr "端口号" 杀死进程 通过进程号查看所属进程名称 tasklist |findstr &q ...

  2. Cilium 系列-3-Cilium 的基本组件和重要概念

    系列文章 Cilium 系列文章 前言 安装完了,我们看看 Cilium 有哪些组件和重要概念. Cilium 组件 如上所述,安装 Cilium 时,会安装几个运行组件(有些是可选组件), 它们各是 ...

  3. 但因热爱，愿迎万难，OpenTiny 社区增加一枚前端程序媛贡献者🎉

    我们非常高兴地宣布,OpenTiny Vue Playground 正式上线! 链接:https://opentiny.github.io/tiny-vue-playground/ 在此非常感谢 xi ...

  4. 不想引入mq？试试debezium

    有句话叫做"如无必要,勿增实体". 在一些小型项目当中,没有引入消息中间件,也不想引入,但有一些业务逻辑想要解耦异步,那怎么办呢? 我们的web项目,单独内网部署,由于大数据背景, ...

  5. JDK 17 营销初体验 —— 亚毫秒停顿 ZGC 落地实践

    前言 自 2014 年发布以来, JDK 8 一直都是相当热门的 JDK 版本.其原因就是对底层数据结构.JVM 性能以及开发体验做了重大升级,得到了开发人员的认可.但距离 JDK 8 发布已经过去了 ...

  6. 使用 AutoGPTQ 和 transformers 让大语言模型更轻量化

    大语言模型在理解和生成人类水平的文字方面所展现出的非凡能力,正在许多领域带来应用上的革新.然而,在消费级硬件上训练和部署大语言模型的需求也变得越来越难以满足. Hugging Face 的核心使命是 ...

  7. Strategy Pattern and Polymorphism —— Behavioral Class

    策略模式着重于封装和替换 不同的算法或行为,以便在运行时进行选择. Simple example - Computer and USB interface 现代人对计算机.USB接口还有各种设备之间的 ...

  8. 如何使用io_uring构建快速响应的I/O密集型应用？

    本文分享自华为云社区<如何使用io_uring构建快速响应的I/O密集型应用>,作者: Lion Long . 当涉及构建快速响应的I/O密集型应用时,io_uring技术展现出了其卓越的 ...

  9. centos8环境基本优化

    centos8环境基本优化 目录 centos8环境基本优化 1.防火墙优化 2.源优化: 方案1.更换阿里源 方案2.使用centos8.5 源 安装epel源 3.ssh连接慢解决 4.关闭公网, ...

  10. 如何创建集成 LSP 支持多语言的 Web 代码编辑器

    对于一个云开发平台来说,一个好的 Web IDE 能很大程度地提高用户的编码体验,而一个 Web IDE 的一个重要组成部分就是代码编辑器. 目前有着多款 web 上的代码编辑器可供选择,比如 Ace ...