接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页面所有内容构成的树形结构.例如: 根 ...

随机推荐

继GitHub的Copilot收费后，亚马逊推出了 CodeWhisperer，感觉不错哟！
Copilot 是 Github 推出的一款人工智能编程助手,推出仅一年就受到大量开发者的追捧(据官方统计有 120 万用户).然而,自 2022 年 6 月起,它改为了付费订阅模式(每月 10 美元 ...
使用containerlab搭建cilium BGP环境解析
使用 Containerlab + Kind 快速部署 Cilium BGP 环境一文中使用Containerlab和Cilium实现了模拟环境下的Cilium BGP网络.它使用Containerl ...
Kibana：在Kibana中对数据进行深入分析 (drilldown)
文章转载自:https://blog.csdn.net/UbuntuTouch/article/details/105193907 在上面,我们需要把之前地址栏中拷贝的内容粘贴过来,并做相应的修改.针 ...
第六章：Django 综合篇 - 9：序列化 serializers
Django的序列化工具让你可以将Django的模型'翻译'成其它格式的数据.通常情况下,这种其它格式的数据是基于文本的,并且用于数据交换\传输过程. 一.序列化数据 Django为我们提供了一个强大 ...
请求体: Request Body
官方文档地址:https://fastapi.tiangolo.com/zh/tutorial/body/ # -*- coding: UTF-8 -*- from fastapi import Fa ...
简书是如何把用户wo逼疯的
趁验证码还有一分钟时间,吐槽一下简书. 准备开始在简书写文章,遇到一些问题. 一.markdown的问题 1.不支持html 2....... 二.绑定手机--这是一个bug 我原来是使用邮箱注册的, ...
微信小程序实现与登录
一.小程序的实现原理在小程序中,渲染层和逻辑层是分开的,双线程同时运行,渲染层和逻辑层这两个通信主体之间的通讯以及通讯主体与第三方服务器之间的通信,都是通过微信客户端进行转发.小程序启动运行两种情况 ...
C++面向对象编程之C++11语法糖
1.variadic template(模板参数可变化) template... type就是说有可变模板参数,作为参数使用时类型就是类型后 + ... ,例如type... / type& ...
修改-Python函数-2
一.导入 $$f ( x , y ) = 2 x + 3 y$$ 上面括号里面的就是数学公式里的自变量,自变量就相当于函数里的参数. 二.为什么要有参数如果一个大楼里有两种尺寸不一的窗户,显然在没有 ...
Effective java 总结
用静态工厂方法代替构造器的最主要好处 1.不必每次都创建新的对象 Boolean.valueOf Long.valueOf 2.直接返回接口的子类型,对于外界来说并不需要关心实现细节,主要知道这个接口 ...

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