Day 50 CSS剩余和初识JS

定位流

一、相对定位就是相对于自己以前在标准流中的位置来移动

格式：position:relative；
需要配合以下四个属性一起使用：top:20pxleft:20pxright:20pxbottom:20px

1、相对定位的注意点

在相对定位中同一个方向上的定位属性只能使用一个

top/bottom 只能用一个

left/right 只能用一个
相对定位是不脱离标准流的，会继续在标准流中占用一份空间
由于相对定位是不脱离标准流的，所以在相对定位中是区分块级、行内、行内块级元素的
由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等熟悉时会影响到标准流的布局，即给相对定位的标签设置margin或padding，是以该标签原来的位置为基础来进行偏移的

2、相对定位的应用场景

用于对元素进行微调
配合后面学习的绝对定位来使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box1 {width: 200px;height: 200px;background-color: #f37fb7;}.box2 {width: 200px;height: 200px;background-color: #ff665c;}.box3 {width: 200px;height: 200px;background-color: #ee7c74;}input{height: 35px;font-size: 20px;}img{height: 40px;position: relative;top: 14px;left: 4px;}</style>
</head><body><div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<input type="text" placeholder="xxx">
<img src="https://www.bing.com/th?id=OHR.DorsetHeather_ZH-CN8284282373_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=HpEdgeAn" alt=""></body>
</html>

二、绝对定位就是相对于body或者某个定位流中的祖辈元素来定位

1、绝对定位的参考点

默认情况下所有的绝对定位的元素，无论有无祖先元素，都会以body作为参考点
如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，name这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
- 只要是这个绝对定位元素的祖先元素都可以
- 祖先必须是定位流，此处的定位流指的是绝对定位、相对定位、固定定位（定位流中只有静态定位不行）
- 如果一个绝对定位的元素有祖先元素，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离他最近的那个定位流的祖先元素作为参考点

2、绝对定位的注意点

绝对定位的元素是脱离标准流的，所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点，会相对body定位随着页面的滚动而滚动
一个绝对定位的元素会忽略祖先元素的padding

3、绝对定位水平居中

如果当一个盒子绝对定位之后不能使用margin:0 auto让盒子自身居中
如果想让一个绝对定位的盒子自身居中，可以使用left:50% margin-left:元素宽度一般px

4、绝对定位的应用场景

用于对元素进行微调
配合相对定位来使用

企业开发中一般相对定位和绝对定位都是一起出现，很少单独使用------------------子绝父相

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{align-items: center;}ul > li {text-align: center;text-decoration: none;float: left;list-style: none;width: 200px;height: 50px;background-color: #ff9033;font: 25px "Microsoft YaHei UI";line-height: 50px;}ul>li:hover{background-color: #01bbff;}ul>li:nth-of-type(3){position: relative;}img{width: 40px;position: absolute;top: -20px;}</style>
</head>
<body><ul><li>秋天</li><li>秋天</li><li>秋天<img src="https://www.bing.com/th?id=OHR.DorsetHeather_ZH-CN8284282373_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=HpEdgeAn" alt=""></li><li>秋天</li><li>秋天</li><li>秋天</li><li>秋天</li>
</ul></body>
</html>

三、固定定位

固定定位（和绝对定位高度相似，和背景的关联方式也是高度相似）

背景的关联方式background-attachment：fixed；可以让图片不随着滚动条的滚动而滚动而固定定位可以让某一个元素不随着滚动条的滚动而滚动
注意点
- 固定定位，就是相对浏览器窗口定位，页面如何滚动，这个盒子显示的位置不变
- 固定定位的元素是脱离标准流的，不会占用标准流中的空间
- 固定定位和绝对定位一样不区分行内、块级、行内块级
- E6不支持固定

固定定位应用场景

网页对联广告
网页头部通栏（穿透效果）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box1 {width: 200px;height: 200px;background-color: red;}.box2 {width: 2000px;height: 200px;background-color: green;}.box3 {width: 300px;height: 3000px;background-color: blue;position: relative;}span {display: inline-block;width: 100px;height: 100px;background-color: pink;text-align: center;line-height: 100px;border-radius: 50%;position: fixed;bottom: 0;right: 0;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div><span>
<a href="#">回到顶部</a></span>
</body>
</html>

四、静态定位

1、什么是静态定位?
默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流

五、z-index

1、z-index属性：用于指定定位的元素的覆盖关系

z-index值表示谁压着谁，数值大的压盖住数值小的。
只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值，而浮动的东西不能用
z-index值没有单位，就是一个正整数。默认的z-index值是0
如果大家都没有z-index值（默认所有元素z-index值为0），或者z- index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box1 {width: 200px;height: 200px;background-color: #f37fb7;}.box2 {width: 200px;height: 200px;background-color: #ff665c;position: relative;z-index: 4;}.box3 {width: 200px;height: 200px;background-color: #ee7c74;position: relative;z-index: 3;}.box21 {width: 100px;height: 100px;background-color: #01bbff;position: absolute;right: -50px;bottom: -50px;z-index: 2;}.box31 {width: 100px;height: 100px;background-color: #62ffb5;position: absolute;right: -50px;z-index: 5;}</style></head><body><div class="box1"></div>
<div class="box2"><div class="box21"></div>
</div>
<div class="box3"><div class="box31"></div>
</div>
</body>
</html>

JS初步了解

一、JavaScript简介

1、JavaScrip起源

JavaScrip的用途

javaScript一般用来编写客户端脚本，来为html页面添加交互行为，是前台语言，而不是后台语言（node.js除外）

JavaScrip的特点

解释执行：事先不编译、逐行执行、无需进行严格的变量声明。
简单易用：可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序。
基于对象：内置大量现成对象，编写少量程序可以完成目标

2、JavaScript组成

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
文档对象模型（DOM） Document object model：操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
浏览器对象模型（BOM） Broswer object model：操作浏览器部分功能的API。比如让浏览器自动滚动。

3、ECMAScript和JavaScript的关系

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以ECMAScript可以理解为是javascript的一个标准,而javascript是ECMA-262标准的实现和扩展。

二、JavaScript引入方式

方式一

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

方式二

<script src="xxx.js"></script>

三、JavaScript语法规范

1、JavaScript对换行、缩进、空格不敏感。

每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，压缩之后将不能运行。

2、所有的符号，都是英语的。比如括号、引号、分号。

3、JavaScript的注释：

　　单行注释：// 我是注释多行注释：/*多行注释1多行注释2*/

四、变量

1、声明变量的语法

// 1. 先声明后定义
var name; // 声明变量时无需指定类型，变量name可以接受任意类型
name= "egon";// 2. 声明立刻定义
var age = 18;

js是弱类型、动态语言

2、变量名命名规范

#1、由字母、数字、下划线、$ 组成,但是不能数字开头，也不能纯数字#2、严格区分大小写#3、不能包含关键字和保留字（以后升级版本要用的关键字）。
如：abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
#4、推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母写#5、匈牙利命名：就是根据数据类型单词的的首字符作为前缀

3、ES6中let

ES6之前js没有块级作用域，ES6新增了let命令，用于声明变量（声明的变量属于块级作用域），流程控制语句的{}就是块级作用域。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。

for(let i=1;i<=5;i++){}

4、常量

ES6新增const用来声明常量。一旦声明，其值就不能改变。

const PI = 3.1415926;
PI=3 //TypeError: "PI" is read-only

五、数据类型与内置方法

js是动态语言：变量里面能够存储数字、字符串等。变量会自动的根据存储内容的类型不同，来决定自己的类型。

js是动态语言：变量里面能够存储数字、字符串等。变量会自动的根据存储内容的类型不同，来决定自己的类型。

1、数值（Number）

JavaScript不区分整型和浮点型，就只有一种数字类型，即number

var x = 3;
var y = 3.1;
var z = 13e5;
var m = 13e-5;
var n = NaN; // typeof n结果"number"

四舍五入

var num=1.3456
num.toFixed(2) // "1.35"

字符串类型转成数字(parseInt)

#字符串转numbber
parseInt("123")  // 返回123#NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseInt("ABC")  // 返回NaN#带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。例如：
console.log(parseInt("18林海峰")); //18#只去末尾的中文，不会去开头的
console.log(parseInt("林海峰18")); // NaN# 字符串中的数字转浮点
parseInt("123.456")  // 返回123
parseFloat("123.456")  // 返回123.456 #自动带有截断小数的功能：取整，不四舍五入
var a = parseInt("1.3") + parseInt("2.6"); //a=3var a = parseFloat("1.3") + parseFloat("2.6"); //a=3.9

数字类型转成字符串

#数字转成字符串类型
var x=10;
var y='20';
var z=x+y; // z='1020'
typeof z; //String#数字转成字符串类型
var m=123;
var n=String(m)var a=123;
var b=a.toString()

2、字符串（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)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

补充：

ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识，它的用途为

#1、完全可以当做普通字符串使用
var msg = `my name is egon`#2、也可以用来定义多行字符串
var info = `name:egonage:18sex:male
`#3、并且可以在字符串中嵌入变量
var name = "egon";
var age = 18;
var msg = `my name is ${name}, my age is ${age}`;

注意：

如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。

3、布尔值（Boolean）

区别于Python，true和false都是小写。

var a = true;
var b = false;

任何数据类型都可以转换为boolean类型：空字符串、0、null、undefined、NaN都是false。

#布尔值为假的数据类型
Boolean('')
Boolean(0)
Boolean(null)
Boolean(undefined)
Boolean(NaN)# 其余数据类型的布尔值均为真，例如
Boolean([])
Boolean(123)

4、null和undefined

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

5、常用内置对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…

此外I,JavaScript还提供多个内建对象，比如 Array,Date,Math 等等

对象只是带有属性和方法的特殊数据类型

Day 50 CSS剩余和初识JS相关推荐

用css，html，js搭建一个书店购物系统
用css,html,js搭建一个书店购物系统,如下: <!DOCTYPE html> <html> <head> <meta charset="ut ...
雪碧图 css 使用方式与 Js使用方式
效果链接示例雪碧图如下,雪碧图图片资源来源于力扣官网中头像悬浮Dark Side功能. 雪碧图分析:该雪碧图横向为12等分,高度32px 1. JavaScript方式使用雪碧图(猜测力扣使用的方式 ...
前端进阶 -css的弱化与js的强化（11）
为什么80%的码农都做不了架构师?>>> web的三要素html, css, js在前端组件化的过程中,比如react,vue等组件化框架的运用,使html 的弱化与 js 的 ...
[css] 鼠标事件css的:hover和js的mouseover有什么区别？
[css] 鼠标事件css的:hover和js的mouseover有什么区别? JavaScript中鼠标事件有:onmouseover和onmouseout: 当鼠标移入和移出时触发事件onmous ...
[css] 除了可以用js跟踪用户信息外，如果不用js，使用纯css怎么做呢？
[css] 除了可以用js跟踪用户信息外,如果不用js,使用纯css怎么做呢? 可以利用 css 的伪类 :hover :active :focus 之类的监听用户行为,然后给指定的url 发送请求. ...
python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...
1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下在settings.py里面编辑添加 STATICFILES_DIR ...
关于css外链和js外链的位置
为什么外链css为什么要放头部? css的下载解析是可以和html的解析同步进行的,如果放到尾部,还需要花费多余的时间来解析,并且浏览器会解析一个没有样式的页面,等css加载完之后再渲染一个有样式的页 ...
html、css、vue、js在VsCode中代码格式化（代码自动调准为标准格式）
目录一.安装以下几个 vscode 扩展程序: 例如二.打开 settings 文件三.将下面配置添加到 setting.json 文件中一.安装以下几个 vscode 扩展程序: ESLin ...
为什么css放头部、js放尾部
(题图:梵高-向日葵) 我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后.为什么要这样子处理,今天参考一些资料好好分析下. 为什么外链 ...

Day 50 CSS剩余和初识JS

Day 50 CSS剩余和初识JS

定位流

一、相对定位就是相对于自己以前在标准流中的位置来移动

1、相对定位的注意点

2、相对定位的应用场景

二、绝对定位就是相对于body或者某个定位流中的祖辈元素来定位

1、绝对定位的参考点

2、绝对定位的注意点

3、绝对定位水平居中

4、绝对定位的应用场景

三、固定定位

固定定位应用场景

四、静态定位

五、z-index

JS初步了解

一、JavaScript简介

1、JavaScrip起源

JavaScrip的用途

JavaScrip的特点

2、JavaScript组成

3、ECMAScript和JavaScript的关系

二、JavaScript引入方式

方式一

方式二

三、JavaScript语法规范

四、变量

五、数据类型与内置方法

Day 50 CSS剩余和初识JS相关推荐

最新文章

热门文章