css盒子模型 float属性 定位 静态网页搭建 JacaScript简介 js数据类型
-
CSS盒子模型
-
CSS盒子模型四大重要属性
-
margin和padding的格式和含义
-
盒子模型图示
-
-
float浮动
-
溢出属性
-
定位
- 静态网页搭建策略
-
JavaScript简介
-
JS变量与常量
-
关键字
-
-
JS数据类型之数值类型(Number)
-
JS数据类型之字符串(String)
CSS盒子模型
对于网页内的所有元素都可以看成是一个盒子，既然是盒子，那么他们之间就有边距，同时在盒子的内部也有内容，那么盒子的内容和盒子的内壁也有边距
CSS盒子模型四大重要属性
| margin(外边距) | 盒子与盒子之间的距离 |
| border(盒子的边框) | 盒子本身的边框 |
| padding(内边距) | 盒子内部内容和盒子内壁的距离 |
| content(内容) | 盒子中的内容 |
margin和padding的格式和含义
在html中 body标签是自带 8px 的外边距
四个方位
top left right bottom
| 单个值 margin/padding {20px} | 四个方位全部都是20px |
| 两个值 margin/padding {20px，40px} | 第一个值设置的是上下为20px 第二个值设置的是左右为40px |
| 三个值 margin/padding {20px， 40px，60px} | 第一个值设置的是上为20px 第二个值设置的是左右40px 第三个值设置的是下60px |
| 四个值 margin/padding {20px， 40px， 60px， 80px} | 遵循上右下左的方式 依次设置值 上20px 右40px 下60px 左80px |
margin让内部标签居中显示
margin: auto;仅限水平方位
盒子模型图示
float浮动
在html中，所有的元素都可以浮动
浮动的两种方式：
float: left/right
浮动造成父标签塌陷的解决措施
但是，浮动会造成父标签塌陷，所以下面我们使用clearfix：after一个方法解决它
.clearfix:after{
content:'';
display:block;
clear:both;
}
这个方法在我们写网页的时候可以直接写在css样式中，只要遇到标签塌陷就给标签加上clearfix类即可
<div class='clearfix'></div>
"""浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示)"""
溢出属性
盒子内部的东西太多或者太大，导致盒子本身已经装不下，这时候盒子内部的东西会显示在盒子外边。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden(重要) | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
定位
在html中，所有的标签默认都是static(静态)的，不能通过定位修改位置，必须要切换成下面三种之一
| relative(相对定位) | 相对于标签原来的位置做定位 |
| absolute(绝对定位) | 基于已经定位过的父标签做定位(如果没有父标签则以body为参照) |
| fixed(固定定位) | 相对于浏览器窗口做定位 |
Z-index
浏览器界面其实是一个三维坐标系，z轴指向用户。
静态页面搭建策略
1.先分析页面的结构
使用div等搭建出页面骨架
2.用id，class给div等起名字便于后期查找和修改样式
id和class起名字要见名知意
3.正儿八经的写不同的语言应该存储不同的文件
html文件、css文件、js文件
JavaScript简介
1.跟java没有关系 蹭热度
2.JavaScript与ECMAScript区别
3.版本迭代
4.JavaScript是一门编程语言(NodeJS)
5.html页面两种引入js的方式
在head中写script
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
</script>
</head>
引入外部js文件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
</script>
<script src="myscript.js"></script>
</head>
6.两种注释语法
//
/**/
7.建议的结束符号是分号
JS变量与常量
"""
支持编写js代码的地方
1.pycharm
2.浏览器
"""
JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头
关键字
| 关键字 | 含义 |
| var | 声明变量 全局有效 |
| let | 声明变量 如果在局部名称空间中使用 那么仅在局部名称空间有效 |
| const | 定义常量 |
JS也是动态类型:变量名绑定的数据值类型不固定
var name = 'jason'
name = 123
name = [11, 22, 33, 44]
JS数据类型之数值类型(Number)
1.js中查看数据类型的方法 typeof
typeof(变量名)
2.在js中整型浮点型统称为数值类型number
var a = 12.34;
var b = 20;
var c = 123e5; // 12300000
var d = 123e-5; // 0.001233.当一个变量名被定义了但是没被赋值那么他就是underfined
4.NaN(Not a Number)NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456JS数据类型之字符串(String)
var a = "Hello"
var b = "world;
var c = a + b;
console.log(c); // 得到Helloworld常用方法：
| 方法 | 说明 |
| .length | 返回长度 |
| .trim() | 移除字符串两端空白 |
| .trimLeft() | 移除左边的空白 |
| .trimRight() | 移除右边的空白 |
| .charAt(n) | 返回第n个字符 |
| .concat(value, ...) | 拼接 |
| .indexOf(substring, start) |
var s = '12345'; 子序列位置(如果参数是数值它会转换为字符来进行查询然后返回索引) |
| .substring(from, to) | 根据索引获取子序列 |
| .slice(start, end) | 切片 |
| .toLowerCase() | 小写 |
| .toUpperCase() | 大写 |
| .split(delimiter, limit) | 分割 |
1.拼接字符串一般用+
2.ES6中引入了模板字符串(可以理解为python中的格式化输出)，用反引号（`）标识，它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
// 普通字符串
`这是普通字符串！`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "jason", time = "today";
`Hello ${name}, how are you ${time}?`注意：
如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。
JSHint启用ES6语法支持:/* jshint esversion: 6 */
浙公网安备 33010602011771号