首页 > 其他分享 >前端开发3

前端开发3

时间:2022-08-24 19:34:50浏览次数:60  
标签:浮动 元素 JavaScript var ECMAScript 字符串 前端开发

目录

一、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;
}

设置对象的层叠顺序

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

  1. JavaScript的变量名可以使用_、数字、字母、$组成,不能以数字开头
  2. 声明变量使用var 变量名; 的格式来进行声明
  3. 变量名是区分大小写的
  4. 推荐使用驼峰式命名规则
  5. 保留字不能用做变量名
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,字符串,前端开发
From: https://www.cnblogs.com/NianBai/p/16621300.html

相关文章

  • 前端开发2
    目录表单标签知识补充1.获取用户输入的标签两大重要的属性2.获取用户输入的input标签理论上需要有label配合使用3.获取用户输入的input标签也可以添加背景提示4.获取用户输......
  • 【2022.8.22】前端开发(1)
    学习内容概要前段简介HTTP超文本传输协议HTML简介head内常见标签body内常见标签内容详细前段简介1.前段与后端的本质前段:与用户直接打交道的操作界面都......
  • 【2022-08-22】python前端开发(一)
    python前端开发(一)前端简介前端与后端前端与用户直接交互的操作界面都可以称之为是前端后端不直接与用户交互,内部真正执行核心业务逻辑的......
  • 前端开发环境搭建
    1nvm(nodeversionmanager)的安装和使用(管理node版本)下载地址:https://github.com/coreybutler/nvm-windows/releases 选择想要的版本,点击nvm-setup.zip可直接下载安装:安......
  • 使用Fiddler劫持网络资源为前端开发助力(示例:Dynamic CRM 表单开发 也能热更新? )
    背景:使用过vue开发的童鞋应该都知道,在开发vue项目的过程中,有个叫"热更新"的功能特别爽,在传统html开发到初次接触vue时,才发现原来前端开发可以这么香。热更新的表现形......