55-善于使用父亲的padding,而不是margin
56-文本属性和字体属性
div{
width: 300px;
height: 100px;
border: 1px solid red;
/*设置字体的大小,px是像素的意思*/
/*字体的单位还有rem em %*/
/*em主要是用于移动端的字体样式大小的调节*/
/*rem也是移动端的布局使用*/
font-size: 20px;
}
57-单行文本垂直居中
当行文本居中是采用的line-height
58-多行文本垂直居中
多行文本居中采用的是line-height+padding修改外框的格式和大小来限制
修改字体的大小还是会修改格式，所以要先确定字体的大小，并且不再修改
59-font-family介绍
使用font-family的注意点
1.网页中不是所有的字体都能用，因为这个字体要看用户的电脑里装没装，
比如设置的字体为"华文彩云"，但是用户的电脑里没有安装这个字体，那么就会自动变为宋体
页面中，中文我们只使用微软雅黑、宋体、黑体
如果页面中需要其他的字体，那么需要切图，英语：Arial，Times New Roman
2.为了防止用户电脑里面没有微软雅黑，就要用英语的逗号，隔开备选字体，备选字体可以有无数个
3.我们将英语字体放在最前面，这样所有的中文字体就不能匹配英语字体，就会自动变为后面的中文字体
4.所有的中文字体，都有英语别名
5.行高可以用百分比表示字号的百分之多少
60-超链接美化导航案例
a标签有自己的伪类的元素的格式，不继承color属性，需要单独重新设置
61-颜色的使用
color的使用
光学显示器：每个像素都是由三原色的原件组成的靠明亮度的不同来做区分的颜色
62-background-img的使用
div{
width: 1200px;
height: 800px;
background-image: url("mind3.png");
/*background-repeat:no-repeat ;*/
background-repeat:repeat-y ;
}
63-background-repeat的使用
div{
width: 1200px;
height: 800px;
background-image: url("mind3.png");
/*background-repeat:no-repeat ;*/
background-repeat:repeat-y ;
}
64-background-position使用
background-position是根据参数的设置的不同设置图片的区域
65-css精灵图的介绍和使用
background-position难点在于切图
可以将小图标和背景图合并到一张图片
一个网页的请求越多，那么服务器的请求压力就会越大
66-background-position方向的使用
*{
padding: 0;
margin: 0;
}
div{
width: 1226px;
height: 900px;
border: 1px solid red;
background-image: url("timg.jpg");
background-repeat: no-repeat;
/*水平方向 left center right*/
/*垂直方向 top center bottom*/
background-position: center center;
}
/*!*水平居中*!*/
/*background-position: center top;*/
67-background-attach的使用
/*固定背景图片*/
background-attachment: fixed;
68-相对定位的介绍
div下css布局：
1.浮动 float
2.标签转换 display
3.定位：相对定位和绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位特性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
}
.box2{
position: relative;
top: 50px;
left: 100px;
}
.box3{
}
</style>
</head>
<body>
<!--三大特性
1.不脱标 不脱离标准流
2.形影分离 和盒子分不开
3.老家留坑 保留当前位置
相对定位没有特别大的作用，完全会影响布局的美观-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
69-相对定位的特性、位置属性
三大特性
1.不脱标 不脱离标准流
2.形影分离 和盒子分不开
3.老家留坑 保留当前位置
相对定位没有特别大的作用，完全会影响布局的美观
70-相对定位的用途
相对定位的用途
1.微调元素
2.做绝对定位的参照（父相子绝）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位的用途</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.user{
font-size: 30px;
}
.btn{
position: relative;
top: 0;
left: 0;
font-size: 30px;
}
</style>
</head>
<body>
<!--相对定位的用途-->
<!--1.微调元素-->
<!--2.做绝对定位的参照（父相子绝）-->
<div>
<input type="text" name="username" value="输入" class="user"/>
<input type="button" name="" value="please hold on" class="btn"/>
</div>
</body>
</html>
71-绝对定位的介绍、特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
position: absolute;
}
.box2{
}
.box3{
}
span{
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<!--绝对定位的盒子会脱离标准流，可以做遮盖效果，提升层级
设置绝对定位之后，不再区分行内元素和块级元素，都能设置宽高-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>文字</span>
</body>
</html>
72-绝对定位参考点
绝对定位参考点是以页面的左上角（和浏览器的左上角做对比）为参考点来调整位置
当使用bottom属性描述的时候，是以首屏页面的左下角为参考点
73-绝对定位以父辈元素作参考点
父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角作为参考点
父辈元素不一定是直接的父标签，只要是父标签的相对定位去找位置
74-父绝子绝、父相子绝、父固子绝
不仅仅是父相子绝，父绝子绝，父固子绝都是以父辈标签为依据
父绝子绝没有实际意义，做站的时候不能出现父绝子绝，因为绝对定位脱离标准流，影响页面布局，相反，父相子绝在页面布局中，最常用的布局方案是父相子绝，原理是子元素是基于父标签的基础上调整位置
75-绝对定位的盒子无视父辈的padding
还是以父辈的标签的总和为主，和padding无关
76-绝对定位盒子居中
设置left：50% magrin-left:宽度的一般，使得子盒子居中
设置绝对定位以后，margin：0 auto不起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位盒子居中</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
}
.box .c{
width: 960px;
height: 69px;
position: absolute;
left:50%;
margin-left: -480px;
}
</style>
</head>
<body>
<div class="box">
<div class="c"></div>
</div>
</body>
</html>
77-固定定位介绍和特性
/*固定定位会在整个页面上，不会随页面滚动而滚动*/
/*特性：1.脱标 2.提升层次 3.固定不变 不会随页面的滚动而滚动*/
/*参考点：设置固定定位，用top描述 那么是以浏览器的左上角为参考点*/
/*如果用bottom描述，那么是以浏览器的左下角作为参考点*/
/*用途：1.返回顶部栏 2.固定导航条 3.小广告*/
78-固定定位案例_返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
p{
bottom: 20px;
right: 20px;
position: fixed;
color: white;
}
</style>
</head>
<body>
<div>
<p>
返回顶部
</p>
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
</div>
<!--要用jQuery不会，可以尝试用a标签-->
</body>
</html>
79-固定定位案例_固定导航栏
一定要给body设置导航栏的高度，否则导航条就会遮盖住背景图片
80-z-index的四大特性
表示一个属性，表示谁压着谁，数值大的遮盖数值小的，只有定位了的元素才有z-index
不管是相对定位还是绝对定位，都可以使用z-index，而浮动元素不能使用
z-index没有单位，就是一个正整数，默认的z-index为0
如果都没有z-index值，或者z-index一样，那么谁写在html后面，在上方的元素优先显示，定位的元素优先显示
从父现象，子标签会跟随父标签的原本设置
81-z-index的从父现象
82-z-index的用途
01-JavaScript的历史发展过程
- ECMAscript（JS核心语言，只是一个标准的规范）
- 浏览器对象模型（bom基于浏览器对象的前端开发）
- 文档对象模型（dom整个标签的所有对象）
为什么学习JavaScript？
- 表单验证
- 制作页面特效
- 动态改变页面内容
javascript是一种直译式脚本语言，是一种动态类型，弱类型，基于原型的语言，内置支持类型。
最开始他的诞生是因为需要处理服务器的一些表单验证，比如说在以前的时候注册的时候并不会像现在一样，以前不会提示你用户名已被注册。所以以前苦逼的填了满满的信息，点一个提交要等个十几分钟，最后弹出个窗口告诉你用户名被注册了，然后一刷新，你之前填的东西全没了。哇，心态真的炸的天崩地裂啊。
02-js的引入方式和输出
JS的引入方式
1.行内式
将JavaScript代码块直接镶嵌在标签内
2.内部式
3.外部式
引入外部一个JS文件
1.JS引入的时候一般是放在HTML的所有内容之后
2.外部元素内写代码块不会生效
内部式建议引入的时候要在body之后，我们要等待dom元素全部加载完成之后再去执行相应的JS操作
JS的输出方式
1.document.write('')向文档输入内容，不会覆盖文档的内容
2.console 控制台输出【开发者工具】
3.console.log()向控制台抛出一条信息
4.console.error()向控制台抛出一个异常
5.console.dir()输入一个对象的全部属性
6.console.clear()清除
每个能独立完成一个功能的代码以分号结束，这就是一个代码块
7.alert()弹出一个带有一条指定信息的消息（警告）
8.innerHTML/innerText获取或者向指定元素添加内容
9.innerHTML获取元素内所有的内容(包括元素)，还可以解析内容的样式
10innerText获取元素内的文本内容
03-命名规范和变量的声明定义
JS的变量
变量是用来存储信息的容器，由于JS是松散数据类型，所以变量中可以防止任何的数据类型
创建变量->储存值和代表值
var a 声明创建，此时，这个变量中什么都没有，如果要获取变量中的返回值，返回值为undefind
= 在JS中是赋值的意义将等号右侧的值赋值给等号左边的变量
+= 在JS中是保留原来的值上累加
一次声明多个变量，每个变量用逗号隔开，一般会相同的数据类型使用一个声明
var a = [],fn = funcation(){} , num = 5
JS的命名规则
严格区分大小写
命名时名称可以出现字母、数字、下划线、$,但是不能是数字开头，也不能是纯数字
不能包含关键字和保留字
关键字： var number
除了关键字 top name 也尽量不要使用
推荐驼峰命名法，有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母大写
匈牙利命名法：就是根据数据类型的单词的首字符作为前缀
|
JS保留关键字
|
||||
| abstract | arguments | boolean | break | byte |
| case | catch | char | class* | const |
| continue | debugger | default | delete | do |
| double | else | enum* | eval | export* |
| extends* | false | final | finally | float |
| for | function | goto | if | implements |
| import* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield | ||
<script type="text/javascript">
// 变量的声明
// 先声明在定义
// JS中的代码是自上往下的顺序执行
var dog;
dog = '小白';
// 也可以在声明的时候直接定义
var cat = '小黄';
alert(cat)
</script>
04-五种基本数据类型
数字 number
字符串 string
布尔 boolean
数组 [ ]
对象{}
空值 Null
空值 Undefined
-基本数据类型 数字number 字符串 String 布尔 boolean null undefined
-引用数据类型 包括对象数据类型和函数数据类型
-对象数据类型 数组 array 对象 object 正则REGEXP
-函数数据类型 funcation