接day26CSS=>CSS定位

overflow属性

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

z-index属性

1）此属性指定了一个元素的堆叠顺序（哪个元素应该放在上面或者下面）

2）值越大，越靠上

3)没有指定z-index，后面的元素会压住前面的元素

值	描述	示例
number	根据数字确定堆叠顺序，值越大，越靠前	z-index: 999;
auto		overflow: auto;
inherit	继承父元素的z-index属性值	overflow: inherit;

7.4 top/bottom/left/right属性

定位一个元素的上外边距与其包含块上边框之间的偏移量。

top: 10%; //元素向下移动10%

left: -10px; //元素向左移动10像素

8 CSS显示

8.1 display属性

值	描述
值	描述
none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认值，此元素会被显示为内联元素
inline-block	行内块元素
table	此元素会作为块级表格来显示（类似table标签），表格前后带有换行符
table-row	此元素会作为一个表格行显示（类似tr）
table-cell	此元素会作为一个表格单元格显示（类似td和th）
inherit	继承父元素的display属性的值

8.2 visibility属性

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认值，此元素会被显示为内联元素
inline-block	行内块元素
table	此元素会作为块级表格来显示（类似table标签），表格前后带有换行符
table-row	此元素会作为一个表格行显示（类似tr）
table-cell	此元素会作为一个表格单元格显示（类似td和th）
inherit	继承父元素的display属性的值

值	描述
visible	默认值，元素是可见的
hidden	元素不可见，但是原有的位置还存在
collapse	在表格元素中使用，此值可以删除一行或一列，但是不会影响表格布局；被行和列占据的空间会l留给其他内容使用；此值在其他元素中使用，等效于hidden；
inherit	继承父元素的visibility属性的值

9 CSS伪类

伪类用于定义元素在特殊状态下的样式。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

值	描述	示例
:link	选择未访问的链接时	a:link
:visited	选择访问过的链接时	a:visited
:hover 鼠标悬停状态（鼠标悬停事件）	a:hover
:active	选择正在活动的链接时
:focus	获得焦点时的状态（获得焦点事件）	input:focus
:first-letter	选择每个p标签的首字母	p:first-letter
:first-line	选择每个p标签的第一行
::before	在每个p标签之前插入内容	p::before{content: "hi ";}
::after	在每个p标签之后插入内容
:lang(language_code)	为元素的lang属性选择一个初始值	p:lang(en)示例：当鼠标放在图片上悬停时，修改图片尺寸img:hover{width: 200px;height: 200px;}

<img src="../../img/icon.jpg" width="100px" height="100px" />

HTML的lang属性可用于声明网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的；

示例：

<html lang="en"></html>

<p lang="zh"></p>

ISO 639-1 语言代码

en 英语

zh 中文简体/繁体

fr 法语

it 意大利语

ja 日语

ko 朝鲜语/韩语

ru 俄语

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框（父级框元素）或另一个浮动框为止。

如果元素设置了浮动，后面紧邻的元素则会受到浮动的影响，若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放。这种定位使得元素脱离DOM文档流。

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。

特点：

1 设置元素浮动，元素相当于往上移动一个图层；

2 设置元素浮动，元素会具有内联元素的特性，即跟其他相邻的浮动元素在同一行；

属性描述值

clear 指定不允许元素的哪一侧有浮动元素 left

right

both 两边

none

inherit

float 指定一个盒子（元素）是否浮动 left

right

none

inherit继承父元素

示例：

<html>

	<head>

		<style>

			div{

				border: 0px solid #000000;

				width: 100px;

				height: 100px;

				margin: 5px;

				color: white;

			}

		</style>

	</head>

	<body>

		<div style="float: left; background-color: black;">1</div>

		<div style="float: left; background-color: red;">2</div>

		<div style="float: left; background-color: blue;">3</div>

	</body>

</html>

JavaScript

1 javascript简介

javascript 简称JS，是一种基于对象Object和事件驱动Event Driver的解释型脚本语言，用于增强HTML页面的动态交互性。

2 特点

1)嵌套在HTML中；

2)环境支持，JS在运行中需要浏览器环境的支持，如果使用的浏览器不支持js脚本，那么浏览器在运行时将忽略js代码；

3)解释执行，无需经过专门编译器的编译，在嵌入脚本的HTML文档载入时被浏览器逐行地解释执行；

4)弱类型语言，js中不需要指定变量的类型；

5)基于对象，js提供了很多内建对象，也允许定义新的对象，还提供对DOM（文档对象模型）的支持；

6)事件驱动，HTML中控件（如文本框、按钮）的相关事件触发时可以自动执行js代码；

7)跨平台，js是依赖浏览器运行的，与具体的操作系统无关。

3 基本语法

3.1 引入JS脚本

内部引入

<script type="text/javascript">

//js脚本代码

</script>

外部引入js文件



<head>

<script type="text/javascript" src="../js/div.js"></script>

</head>

3.2 声明变量

JS中的任何数据类型的变量都可以用var关键字声明；

示例：

var no = 1;

var str = "abc";

var obj = {

	name: "张三",

	age: 12

};

3.3 数据类型

3.3.1 五种原始数据类型

数据类型说明示例

Number 数字类型

可以声明整数、小数、正数、负数 var no1 = 1;

var no2 = new Number(12);

var no3 = 12.12;

var no4 = -12.123;

Boolean 布尔类型

0-false

1-true var no_bt = true;

var no_bf = false;

var no_nf = new Boolean(0);

var no_nt = new Boolean(-1);

var no_nt2 = new Boolean(2);

//赋值非0都是true

String 字符串类型 var str1 = "李四";

var str2 = new String("abc");

Null 空值，属于Object类型 var no = null;

Undefined 无（未找到），表示变量未初始化或未接收到函数的返回值； var no = undefined;

3.3.2 引用类型

数据类型说明示例

Array 数组 var arr = [1,2,3];

//一个数组可以存放不同类型的元素

var arr2 = [1, "abc", true];

//声明数组元素

var arr3 = new Array(1,2,3);

//声明数组长度

var arr4 = new Array(3);

arr4[0]='a';

arr4[1]='b';

arr4[2]='c';

//获取数组长度

console.info(arr4.length);

Object 对象 var obj = {

//属性

name:"张三",

age:12,

addr:"青岛"

}

日期类型

Date() var d = new Date();

//把Date对象的日期转为字符串

//Tue Jul 20 2021

console.info(d.toDateString());

//把Date对象转为字符串

//Tue Jul 20 2021 17:58:27 GMT+0800 (中国标准时间)

console.info(d.toString());

//返回四位数字的年份

d.getFullYear();

//返回月份0-12

d.getMonth();

//返回一个月中的第几天

d.getDate();

//返回小时0-23

d.getHours()

//返回分钟0-59

d.getMinutes();

//返回秒数0-59

d.getSeconds();

//返回1970年1月1日至今的毫秒数（时间戳）

d.getTime();

正则类型

RegExp() var str = "15701238485";

//方式1 创建正则表达式

var regx = /^1[345789]\d{9}$/;

//方式2 创建正则表达式对象

var regx = new RegExp("^1[345789]\d{9}$");

//test()方法验证字符串是否跟正则表达式匹配，返回布尔值

var tar = regx.test(str);

console.info(tar);

Function 函数 //构造一个名为t的函数

var t = function(){};

3.3.3 数据类型转换

1 parseInt()转成数字类型

示例：

var no = "1";

console.info(no+1);//打印结果 11

var no2 = parseInt(no);

console.info(no2+1);//打印结果 2

注意当转换失败时，会报NaN（Not a Number），指不是一个数字，所以导致转换失败；

可以用isNaN()方法验证，将要类型转换的值是否是数字；

示例：

var no = "1";

var tar = isNaN(no);

2 parseFloat()转成小数

3.4 运算符

3.4.1 算术运算符

加法运算符

乘

/ 除

% 取模（取余）

++ 自增 var no = 1;

//++在变量后，变量先参与代码执行，后自加1

console.info(no++);

//++在变量前，变量先自加1，后参与代码执行

console.info(++no);

-- 自减

3.4.2 赋值运算符

= 等于 var no = 1;

+= 加等于 var no += 1; 等价于 var no = no + 1;

-= 减等于

*= 乘等于

/= 除等于

%= 取模等于

3.4.3 比较运算符

==	等于（判断值）	var no = 1;

var no2 = "1";

console.info(no == no2);//返回true

===	全等（同时判断值和类型）	var no = 1;

var no2 = "1";

console.info(no === no2);//返回false

!=	不等于（判断值）

>  	大于（判断值）	var no = 2;

var no2 = "1";

console.info(no > no2);//返回true

>=	大于等于

<	小于

<=	小于等于

3.4.4 逻辑运算符

&& 与 and a && b;

a=true 且 b=true，则返回true，否则返回false

|| 或 or a || b;

a和b都等于false，则返回false，否则返回true

! 非 not !true 等于 false

3.4.5 三元运算符(条件运算符)

Condition ? Value if true : value if false;

示例：

var text = (a > b) ? "yes" : "no";

3.5 分支语句

if语句

if(condition){

} else if(condition){

} else {

}

switch语句

switch(){

case v1:

break;

case v2:

break;//跳出分支

default:

//当所有的case值都不匹配时，执行default分支

}

3.6 循环语句

for/in循环

示例：

//创建对象

var user = {

name:"张三",

	age: 12,

	sex: "男"

}

for(key in user){

//获取对象的属性值

	var value = user[key];

	console.info(key + ":"+ value);

}

for循环

var arr = [1,2,3,4];

for(var i = 0; i < arr.length; i++){

console.info(arr[i]);

}

while循环

while(condition){

}

do while()循环

do{

}while(condition);

break与continue关键字

break 跳出循环，循环终止；

continue 跳出本次循环，继续下一次循环；

3.7 函数function

函数用function关键字声明

function 函数名{

return [返回值];

}

无参无返回值函数

function f1(){

}

有参无返回值函数

function f2(a, b){

	//参数列表中的形参，不需要用var声明

}

有参有返回值函数

function f3(a, b){

	return a+b;

}

调用函数

f1();

f2(1, 2);

var c = f3(1, 2);

3.8 对象

创建对象

var user = {

//对象属性

	name:"张三",

	age: 12,

	sex: "男",

//对象方法

	move:function(){

		console.info("user is moving");

	}

}

获取对象属性值

var property = user.name;

或者

var property = user["age"];

修改属性值

user.name = "李四";

或

user["age"] = 20;

添加属性

user.addr = "青岛";

删除属性

delete user.addr;

3.9 DOM文档对象模型

DOM(Document Object Model) 文档对象模型

当页面被加载时，浏览器会创建页面的DOM，可以把DOM理解为当前被加载的HTML页面的对象；

3.9.1 document对象

getElementById()

根据标签的id，返回一个标签对象(element)

示例：

var ele = document.getElementById("user_name");

console.info(ele.value);

getElementsByName()

根据标签name属性值，返回一个标签对象的集合

示例：

var ele = [];

ele = document.getElementsByName("p2");

console.info(ele[0].innerHTML);

getElementsByTagName()

根据标签名，返回一个标签对象的集合

3.9.2 element对象

属性

element.attributes; 返回标签中的属性对象集合

element.innerHTML; 设置或返回标签元素的内容;

内容中包含的子HTML标签会当成字符串处理；

获取标签内容

var c = element.innerHTML;

设置标签内容

element.innerHTML = "abc";

element.innerText 设置或返回标签元素的内容;

内容中的子HTML标签会显示样式；

element.id; 设置或获取元素的id

element.value; 设置或获取元素的value属性值； //获取value属性值

var v = element.value;

//给value属性赋值

element.value = "1";

element.className; 设置或获取元素的class属性值

element.style; 设置会或获取元素的样式 element.style = "font-size: 10px";

方法

ele.getAttribute(); 获取元素的指定属性值 var c = ele.getAttribute("align");

ele.setAttribute(); 设置元素属性值 ele.setAttribute("align","left");

ele.hasAttribute(); 判断元素是否有该属性值，返回布尔值 var bo = ele.hasAttribute("width");

console.info(bo);//true/false

ele.removeAttribute(); 从元素中移除指定属性 ele.removeAttribute("width");

ele.toString(); 把元素转换为字符串

3.9.3 DOM事件

onBlur 元素失去焦点事件

onfocus 元素获得焦点

onchange 元素内容改变时

onclick 点击触发事件

ondblclick 双击触发事件

onmouseout 鼠标从元素上移开

onmouseover 鼠标移到某元素上

onsubmit 提交按钮被点击

onreset 重置按钮被点击

示例：

day27 CSS浮动、溢出 & js基本语法 & DOM文档流操作的更多相关文章

4、前端--浮动、定位、是否脱离文档流、溢出属性、z-index、透明度、JavaScript简介
浮动 # ps:html代码时没有缩进一说的全部写在一行也可以 """浮动主要就是用于页面布局的!!!""" # 浮动带来的负面影响 &q ...
前端开发—BOM对象DOM文档对象操作
BOM 浏览器对象 BOM:Browser Object Model 操作浏览器,需要调用window对象,它是所有浏览器都支持的对象,表示的就是浏览器窗口 window对象可以通过点调用子对象 wi ...
HTML+CSS基础块级元素div分析文档流脱离文档流的方法
块级元素div分析 1.外边距 margin 2.内边距 padding 3.边框 border Div的真实宽度=width+margin-left+margin-right+border*2+ ...
JS第二部分--DOM文档对象模型
一.DOM的概念二.DOM可以做什么三.DOM对象的获取四.事件的介绍五.DOM节点标签样式属性的操作六.DOM节点对象对值的操作七.DOM节点-标签属性的操作(例如id class sr ...
一天搞定CSS：浮动（float）及文档流--10
浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...
python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
day 41 标准文档流浮动
一.标准文档流什么是标准文档流宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画标准文档 ...
{03--CSS布局设置} 盒模型二 padding bode margin 标准文档流块级元素和行内元素浮动 margin的用法文本属性和字体属性超链接导航栏 background 定位 z-index
03--CSS布局设置本节目录一盒模型二 padding(内边距) 三 boder(边框) 四简单认识一下margin(外边距) 五标准文档流六块级元素和行内元素七浮动八 mar ...
padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
Html文档流和文档对象模型DOM理解
前言在理解浮动和定位时,触碰到文档流概念.为了更好理解浮动和定位,学习了文档流和DOM(文档对象模型). 正文 DOM(文档对象模型)简单理解就是编写的html页面所有内容构成的树形结构.例如: 根 ...

随机推荐

前端必读：如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件
JavaScript在前端领域占据着绝对的统治地位,目前更是从浏览器到服务端,移动端,嵌入式,几乎所有的所有的应用领域都可以使用它.技术圈有一句很经典的话"凡是能用JavaScript实现的 ...
学习完nio的一个小笔记吧
这是一个nio网络通信服务端的demo,主要就学习了selector的一些用法,以及它里面的事件类型 selector是对nio的一个优化,它能保证既能高效处理线程中的事件,又能保证线程不会一直占用c ...
尝试阅读理解一份linux shell脚本
以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「englyf」https://www.cnblogs.com/englyf/p/16721350.html 从头一二去阅读语法和命令说明 ...
Containerd教程
文档是从B站有关视频上对应找到的,具体视频地址是:https://www.bilibili.com/video/BV1XL4y1F7QB?p=21&spm_id_from=333.880.my ...
对vue中的data进行数据初始化
this.$data:是表示当前的改变后的this中的数据 this.$options.data():是表示没有赋值前的this中的数据,表示初始化的data 一般可以使用Object.assign ...
PAT (Basic Level) Practice 1018 锤子剪刀布分数 20
大家应该都会玩"锤子剪刀布"的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入 ...
改善C#程序的方法-3 比较器和LINQ排序
一创建对象时考虑实现比较器假设有这样的场景,有一个40个人的学生列表,业务中需针对学生的成绩来进行排序. 可以考虑用IComparable接口和ICompare接口实现: class Progra ...
洛谷P5788 单调栈（模板）
1 #include<bits/stdc++.h> 2 using namespace std; 3 const int N=3e6+10; 4 int n,a[N],s[N],ans[N ...
Pep9课下作业
(1)编写一个伪代码算法 Set sum to 0 Input num1 Read num1 Set sum to sum + num1 Input num2 Read num2 Set sum to ...
规则引擎深度对比，LiteFlow vs Drools！
前言 Drools是一款老牌的java规则引擎框架,早在十几年前,我刚工作的时候,曾在一家第三方支付企业工作.在核心的支付路由层面我记得就是用Drools来做的. 难能可贵的是,Drools这个项目在 ...

day27 CSS浮动、溢出 & js基本语法 & DOM文档流操作