盒子模型
浮动布局
溢出属性
定位
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轴指向用户
纯手搭建页面思路
1.先分析页面结构 然后使用div和span构建出基本骨架 2.给标签id和class便于后续查找并修改样式 id 与class的命名也要做到见名知意 3.正儿八经的写不同的语言应该存储不同的文件 html文件,css文件,js文件
JavaScripts 是一种浏览器语言,通常简称为js
1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。
该标准一开始就是针对JavaScript语言制定的,但是没有称其为JavaScript,有两个方面的原因。一是商标,JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA,而不是Netscape,这样有利于保证这门语言的开发性和中立性。
因此ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。
javaScript 是一种脚本编程语言,是一种解释性语言 javascript 的语法结构与C++,JAVA十分类似 javaScripts 是弱类型轻量型语言 JavaScripts 基于对象的语言 javascripts 具有跨平台性 javascripts 具有安全性与简单性
1.核心 ECMAScripts 2.文档对象模型(DOM)Document object model (整合js,css,html) 3.浏览器对象模型(BOM) Broswer object model (整合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
JavaScript拥有动态类型
var x; //此时x是undefined var x = 1; //此时x是数字
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
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) | 分割 |