前端——css补充及初识js

前端——css补充及初识js

css——盒子模型
CSS——浮动布局
CSS——定位属性
CSS——z-index
CSS——练习
JavaScript （js）基础语法

CSS——盒子模型

盒子模型理解

所有的标签都可以看成是一个快递盒

用快递盒理解	理解	边距
两个快递盒之间的距离	标签之间的距离	外边距(margin)
快递盒的厚度	标签的边框	边框(border)
盒子内物体距离盒子内壁	内部文本与边框的距离	内边距(padding)
物体自身的大小	标签内部的内容	内容(content)

盒子类型需要掌握的操作

margin外边距

.margin-test {
  margin-top:10px;		上边框
  margin-right:20px;	右边框
  margin-bottom:30px;	下边框
  margin-left:40px;		左边框
}

可以简写为：

margin:0;   简写形式 作用于上下左右
margin: 10px 20px;  上下  左右
margin: 10px 20px 30px;  上 左右	下
margin: 10px 20px 30px 40px; 上 右 下 左

body标签自带有8px的外边距

margin还可以让内部标签居中展示
margin:100px auto 仅限于水平方向

padding 内填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

简写为：
.padding-test {
  padding: 5px 10px 15px 20px;  上右下左
}

浮动布局

在css中，任何元素都可以浮动

浮动的特点

1.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

2.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
浮动的取值

浮动是页面必不可少的操作，他有三种取值方式

取值含义

folat: left 向左浮动

folat: right 向右浮动

folat: none 默认值，不浮动

取值	含义
folat: left	向左浮动
folat: right	向右浮动
folat: none	默认值，不浮动

规定元素不允许其他浮动元素（clear）

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

注：clear属性只会对自身起作用，而不会影响其他元素。

清除浮动

清除浮动的副作用（父标签塌陷问题）
- 父标签塌陷解决方法
  
  浮动会造成父标签塌陷这是一个不好的现象因为会引起歧义
  
  解决浮动造成的父标签塌陷：
```
.clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
```
  提前写好上述的css操作遇到标签塌陷就给标签加clearfix类值即可
浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示)

溢出属性

overflow溢出属性

值	作用
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且内容是不可见的
scroll	内容会被修建，但浏览器会显示滚动条以便查看其余内容
auto	若内容被修建，浏览器会显示滚动条以便查看其余内容
inherit	规定应该从父元素继承 overflow 属性的值

overflow：水平和垂直均设置

overflow-x：设置水平方向

overflow-y：设置垂直方向

图片头像设置事例：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圆形的头像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      background-color: #eeeeee;
    }
    .header-img {
      width: 150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;
      overflow: hidden;
    }
    .header-img>img {
      width: 100%;
    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt="">
</div>

</body>
</html>

定位

有四种定位：静态、相对定位、绝对定位、固定定位

static（静态）

所有的标签默认都不能直接通过定位修改位置必须要切换成下面三种之一
relative(相对定位)

相对于标签原来的位置做定位
absolute(绝对定位)

基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)

相对于浏览器窗口做定位

z-index

设置对象的层叠顺序
1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4. 从父现象：父亲怂了，儿子再牛逼也没用

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定义模态框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

用于三层界面的样式

JavaScript简介

JavaScript 的概述

JavaScript与Java没有关系，由于正值Java正火之时，创建的，为了蹭热度，才取名为JavaScript
JavaScript与ECMAScript的关系

ECMAScript可以理解为标准，也就是语言的规则。

JavaScript是ECMAScript的一种实现。

可理解为ECMAScript相当于接口，JavaScript则是实现类。

版本迭代

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式添加try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5	添加"strict mode"严格模式添加JSON支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符（**）增加Array.prototype.includes

JavaScript 实现的组成部分

1.核心（ECMAScript）

2.文档对象模型（BOM）整合js，css，html

3.浏览器对象模型（BOM）整合js和浏览器

JavaScript 的引入方式

Script 标签内写入代码

<script>
  // 在这里写你的JS代码
</script>

引入额外的JS文件
```
<script src="myscript.js"></script>
```

JavaScript语言规范

语言规范符号

注释 // 注释内容或 /* 注释内容 */

结束符；（分号）
总结

ECMAScript 描述了JavaScript语言本身的相关内容。

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

语言规范	符号
注释	// 注释内容或 /* 注释内容 */
结束符	；（分号）

js的变量与常量

变量

1.JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头

2.声明变量使用 var 变量名；的格式来进行声明如： var name = 'a'; var age = 18;
变量的注意事项
1. 变量名是区分大小写的。
2. 推荐使用驼峰式命名规则。
3. 保留字不能用做变量名
JavaScript声明变量所需要的关键字

关键字作用

var 全局有效

let 若在局部名称空间中使用，则仅在局部名称空间有效

const 定义常量

关键字	作用
var	全局有效
let	若在局部名称空间中使用，则仅在局部名称空间有效
const	定义常量

js 是的动态类型

变量名绑定的数据值类型不固定

   var name = 'jason'
	name = 123
   	name = [11, 22, 33, 44]

JS数据类型

在js中查看数据类型可以使用 typeof

数值类型

在js中整型浮点型统称为数值类型number
parseInt()
parseFloat()
NaN:Not A Number 不是一个数字

字符串类型

字符串string
var name = 'jason'
var name = "jason"
var name = jason 模板字符串

内置方法

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

拼接字符串一般使用“+”

	特点
string.slice(start, stop)	如果 start > stop 不会交换两者如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符) 如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
string.substring(start, stop)	如果 start > stop ，start和stop将被交换如果参数是负数或者不是数字，将会被0替换