内容概览

• CSS
  • 盒子模型
  • 浮动布局
  • 溢出属性
  • 定位
  • z-index
• JavaScript
  • JS简介
  • JS变量与常量
  • JS数据类型之数值类型
  • JS数据类型之字符串类型

CSS

盒子模型

所有标签都可以看做是一个盒子
外边距(margin)：盒子之间的距离；标签之间的距离
边框(border)：盒子本身的厚度；标签的边框
内边距(padding)：盒子中的空余部分；内部文本与边框的距离
内容(content)：盒子中的物体；标签内部的内容

• margin外边距

/*修改上外边距*/
margin-top: 20px;

/*修改右外边距*/
margin-right: 10px;

/*修改下外边距*/
margin-bottom: 30px;

/*修改左外边距*/
margin-left: 40px

/*body标签自带8px的外边距*/
body {
	margin: 0;
}
/*设置边距的简写形式,作用于上下左右*/
margin: 0 10px;  /*上下 左右*/
margin: 0 10px 20px;  /*上 左右 下*/
margin: 0 10px 20px 30px;  /*上 右 下 左*/

/*可以让内部带有边框的标签水平居中显示,*/
margin: auto;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

padding的使用方式与margin一致

浮动布局(float)

在CSS中，任何标签都可以浮动
浮动一个标签会生成一个块级框，但框的大小取决于标签的大小
浮动的框可以向左或向右移动，直到它的外边框移动到最左边或另一个浮动框

float:left;  /*向左浮动*/
float:right;  /*向右浮动*/

/*浮动会造成父标签的坍塌
解决浮动造成的父标签坍塌需要使用clear属性
clear属性规定了标签的那一侧不能够有浮动标签
解决方式：伪元素选择器+clear*/
.clearfix:after{
	content:"";
	display: bolck;
	clear: both;
}
/*将塌陷了的标签添加clearfix类*/
1
2
3
4
5
6
7
8
9
10
11
12
13

浏览器针对文本是优先展示的，如果被浮动标签遮挡可能会修改布局方式进行展示文本

溢出属性(overflow)

对于溢出边框的内容进行的操作

/*圆形头像*/
div {
	height: 50px;
	width: 50px;
	border: 5px solid gold;
	border-radius: 50%;
	overflow: hidden;
}
div img {
	max-width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11

定位(position)

将标签使用某种定位方式来做定位

position: fixed;
1

z-index属性

设置标签的层级
谁的z-index值更大，谁就在更上层

"background:red;height: 50px;width: 50px;position: relative;z-index: 20;">
"background:blue ;height: 50px;width: 50px;position: relative;top: -40px;z-index: 10">
1
2

JavaScript

JS简介

1. JavaScript也是一门编程语言，但和Java没有关系
2. JavaScript与ECMAscript的关系
   JavaScript=ECMAscript+BOM+DOM
3. HTML页面两种引入js的方式
   直接在script标签中编写或使用src属性引入外部文件
4. 注释语法
   • // 单行注释
   • /*
     多行注释
     */
5. 建议的结束符号是分号

JS变量与常量

编写js代码可以在pycharm中编写，也可以在谷歌浏览器中编写
在JS中声明变量需要使用关键字

JS也是动态类型：变量名绑定的数据值类型不固定

var name = 'jason'
name = 123  //定义了一次后就不能再次定义了
name = [11, 22, 33]

const PI = 3  //常量一旦定义就不能修改

// 命名规范和python一样,但是变量名中还可以使用$符
1
2
3
4
5
6
7

JS数据类型之数值类型(number)

//在js中查看数据类型可以使用typeof
//js中,整型与浮点型统一归到了数值类型number
var a = 123
typeof a //number

//转换数据类型
a = '123abc'
parseInt(a) //123
parseFloat(a) //123
var b = '123.4'
parseInt(b)  //123
parseFloat(b)  //123.4
//如果转换的数据值里没有数字,则返回NaN
var c = 'abc'
parseInt(c)
// Not a Number  不是一个数字
typeof(NaN)  //number
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

JS数据类型之字符串类型(string)

//有三种定义字符串的方式
var name = 'jason'  // 单引号
var name = "jason"  // 双引号
var name = `jason`  // 反单引号

// 常用内置方法
var a = 'abcde'
a.length  //统计长度
a = '  abc  '
a.trim()  //abc;移除空白
a.trimLeft()  //abc  ;移除左边的空白
a.trimRight()  //  abc;移除右边的空白
a = 'abcdefg'
a.charAt(n)  //返回第n个字符
a.concat('hijk')  //abcdefghijk;拼接
a.indexOf('d')  //3;查询字符索引
a.substring(2,5)  //cde;根据索引获取子序列
a.slice(2,4)  //cd;切片
a.toLowerCase()  //小写
a.toUpperCase()  //大写
a.split('c')  //分割

//拼接字符一般使用+号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23