前端3_css
盒子模型
浮动布局
溢出属性
定位
z-index
javaScripts 简介
js变量与常量
js数据类型之数值类型
js数据类型之字符串类型
盒子模型
所有的标签都可以看成一个快递盒
1.两个快递盒之间的距离 标签之间的距离 外边距(margin)
2.快递盒的厚度 标签的边框 边框（border）
3.盒子内物体距离盒子内壁 内部文本与边框的距离 内边距(padding)
4.物体自身的大小 标签内部的内容 内容（content）
掌握的操作
margin-top: 20px；
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px;
body 标签自带&px的外边距
margin：0; 简写形式 作用于上下左右
margin: 10px 20px; 上下 左右
margin：10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px；上 右 下 左
margin 还可以让内部标签居中展示
margin:100px auto 仅限于水平方向
padding使用方式与margin一致
浮动布局
float：left\right 页面布局必不可少的操作
浮动会造成父标签塌陷，这是一个不好的现象，因为会引起歧义
解决浮动造成的父标签塌陷
.clearfix:after {
content:'';
display:black;
clear：both；
}
提前写好上述的css操作，遇到标签塌陷就给标签加clearfix类值即可
"""浏览器针对文本是优先展示的（浮动的元素如果遮挡就会想办法展示） """
溢出属性
| visible | 默认值。内容不会被修改，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
| auto | 如果内容被修剪，则浏览器会显示滚动条一边查看其余的内容 |
| inherit | 规定应该从父元素继承，overflow属性的值 |
定位
static(静态)
所有的标签默认都不能直接通过定位修改位置，必须要切换成下面三种之一
relative(相对定位)
相对于标签原来的位置做定位
absolute(绝对定位)
基于已经定位过的父标签做定位（如果没有父标签则以body为参照）
fixed(固定定位)
相对于浏览器窗口做定位
z-index
浏览器界面其实是一个三维坐标系 z轴指向用户
纯手搭建页面思路
1.先分析页面结构
然后使用div和span构建出基本骨架
2.给标签id和class便于后续查找并修改样式
id 与class的命名也要做到见名知意
3.正儿八经的写不同的语言应该存储不同的文件
html文件，css文件，js文件
JavaScripts简介
JavaScripts 是一种浏览器语言，通常简称为js
ECMAScript和JavaScript的关系
1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。
Javascripts特点
javaScript 是一种脚本编程语言，是一种解释性语言
javascript 的语法结构与C++,JAVA十分类似
javaScripts 是弱类型轻量型语言
JavaScripts 基于对象的语言
javascripts 具有跨平台性
javascripts 具有安全性与简单性
javascripts组成
1.核心 ECMAScripts
2.文档对象模型（DOM）Document object model (整合js，css,html)
3.浏览器对象模型（BOM） Broswer object model (整合js和浏览器)
JS引入方式
<script>
//在这里写你的js代码
</script>
-
注释（注释是代码之母）
//单行注释
/*
这是多行注释
*/
-
结束符
javascripts中的语句要以分号（；）为结束符。
JS语言基础
1.JavaScript的变量名可以使用_,数字，字母，$组成，不能以数字开头。
2.声明变量使用var变量名；的格式来进行声明
var name = "alex";
var age = 18;
注意
变量名是区分大小写的
推荐使用驼峰式命名规则
保留字不能用做变量名
ES6新增了let命令，用于声明变量，其用法类似于var，但是所声明的变量只在let命令所在的代码中使用块内有效，例如for循环的计数器就很适用let命令
for （let i=0，i<arr.length;i++）{...}
ES6新增const用来声明常量，一旦声明，其值不能改变。
const PI =3.1415
PI //3.1415
PI =3
//TypeError: "PI" is read-only
JS数据类型
JavaScript拥有动态类型
var x； //此时x是undefined
var x = 1； //此时x是数字
数值（Number）
JavaScript 不区分整型和浮点型 就只有一种数字类型
var a = 12.34;
var b =20;
var c = 123e5;
var d = 123e-4;
-----查看类型---------
typeof a
typeof b
还有一种NaN，表示不是一个数字（NOT a Number）
常用方法：
parseint("123") //返回123
parseint("ABC") //返回NaN,NaNs属性是代表非数字值的特殊值，该属性用于指示某个值不是数字。
parseint("123.456") //返回123.456
字符串（String）
var a = "Hello"
var b = "world";
var c = a + b;
-----输出----------
console.log(c);
内置方法
1.js 中涉及到字符串拼接 推荐使用 +
| 内置方法 | 说明 |
|---|---|
| .length | 返回长度 |
| .trim() | 移除空白 |
| .trimLeft() | 移除左边空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第N个字符 |
| .concat(value,...) | 拼接 |
| .indexOf(substring,start) | 子序列位置 |
| .substring(from,to) | 根据索引获取子序列 |
| .slice(start,end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimter,limit) | 分割 |
