前端开发3

2022-08-24 19:32:20 阅读：225 来源： 互联网

标签：浮动元素 JavaScript var ECMAScript 字符串前端开发

JavaScript

一、CSS盒子模型

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
padding: 用于控制内容与边框之间的距离
border(边框): 围绕在内边距和内容外的边框
content(内容): 盒子的内容，显示文本和图像

1.margin外边距

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

/*简写*/
.margin-test {
    margin: 5px 10px 15px 20px; /*上右下左*/
}

/*常见居中*/
.mycenter {
    margin: 0 auto;
}

2.padding内填充

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

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

padding的常用简写方式：

提供一个：用于四边
提供两个：第一个用于上－下，第二个用于左－右
如果提供三个：第一个用于上，第二个用于左－右，第三个用于下
提供四个参数值：将按上－右－下－左的顺序作用于四边

二、浮动布局（float）

在 CSS 中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素

1.浮动的特点

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

2.浮动的三种取值

left：向左浮动
right：向右浮动
none：默认值，不浮动

3.clear属性

clear属性规定元素的哪一侧不允许其他浮动元素。

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

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

4.清除浮动

清除浮动的副作用（父标签塌陷问题）

4.1.清除浮动主要的三种方式：

固定高度
伪元素清除法
overflow:hidden

4.2.伪元素清除法（使用较多）

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

三、溢出属性（overflow）

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

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

四、定位（position）

1.static（静态）

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的，所有的标签默认都不能直接通过定位修改位置，必须要切换成这三种：relative、absolute、fixed

2.relative（相对定位）

相对于标签原来的位置做定位

3.absolute（绝对定位）

基于已经定位过的父标签做定位（如果没有父标签则以body为参照）

4.fixed（固定定位）

相对于浏览器窗口做定位

五、z-index

#i2 {
    z-index: 999;
}

设置对象的层叠顺序

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

<!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是完全不透明

语法

opacity: value|inherit;

值	描述
value	规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）
inherit	应该从父元素继承 opacity 属性的值

/* 完全不透明 */
opacity: 1;
opacity: 1.0;

/* 半透明 */
opacity: 0.6;

/* 完全透明 */
opacity: 0.0;
opacity: 0;

opacity: inherit;

JavaScript

一、简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

1.JavaScript

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执
JavaScript 很容易学习

2.ECMAScript版本

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化

年份	名称	描述
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

注：ES6就是指ECMAScript 6

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

核心（ECMAScript）
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容

3.JavaScript引入方式

script标签内写代码
引入额外的JS文件

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

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

4.JavaScript注释

//单行注释
/*多行注释*/

5.结束符

JavaScript中的语句要以分号 ; 为结束符

二、变量与常量

1.关键字

var：全局有效
let：如果在局部名称空间中使用那么仅在局部名称空间有效
const：定义常量

2.变量声明：

JavaScript的变量名可以使用_、数字、字母、$组成，不能以数字开头
声明变量使用var 变量名; 的格式来进行声明
变量名是区分大小写的
推荐使用驼峰式命名规则
保留字不能用做变量名

var name = "Alex";
var age = 18;

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

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

三、数据类型

JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

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

1.数值类型（Number）

js中整型浮点型统称为数值类型Number

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

NaN：表示不是一个数字（Not a Number）

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

2.字符串类型（String）

2.1.简介

JavaScript 字符串用于存储和处理文本，字符串可以存储一系列字符，字符串可以是插入到引号中的任何字符。可以使用单引号或双引号

js中涉及到字符串拼接，推荐使用+

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

2.2.字符串属性

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

2.3.字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

标签：浮动,元素,JavaScript,var,ECMAScript,字符串,前端开发
来源： https://www.cnblogs.com/NianBai/p/16621300.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9