css与js

最新推荐文章于 2023-06-25 07:49:33 发布
最新推荐文章于 2023-06-25 07:49:33 发布
阅读量129 收藏
点赞数
文章标签： css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51621893/article/details/111699353
版权

 

今日内容：

  • 标准流

  • 浮动流

  • 定位流

  • JavaScript概念介绍

  • JavaScript的引入

  • ECMAScript

  • BOM

  • DOM

标准流

>1.HTML标签被分为两种类型，一种是块级标签(独占一行，能够设置宽高)，另外一种是行级标签(不独占一行，不能设置宽高)
>
>2.这两种类型的标签都是按照标准流的方式进行渲染加载的(排列)，行级标签从左到右加载，块级元素从上到下加载。

display

display属性：常用取值 inline(行级元素)、block(块级元素)、inline-block(行内块元素)，none(隐藏，不占空间)

浮动流

1.浮动流，设置标签的属性float，它能够让元素向左或者向右进行浮动，浮动流只能是左右浮动没有上下浮动，如果元素按照浮动流渲染，那么该元素会脱离标准流，在浮动流中没有行级元素和块级元素之说。但是都可以设置宽高。

2.在标准流的加载方式下，如果更改标准流，那么该元素后面的元素会相应的顶上来。

3.如果按照浮动流进行加载，在浮动流加载的情况下，元素是之间排列是按照紧邻排列，中间没有空隙。

  1. 浮动流一般加载在标准流的上面

clear

设置clear属性，能够使元素在浮动的过程中不去紧贴其他标签，只能影响自己，不能影响其他的元素

定位流

#####     相对定位

不会脱离标准流。相对于在标准流的位置进行位置移动，所以下面的元素不会顶上来。
属性position设置值为relative，进行位置移动结合属性top、left、right、bottom进行空间位置移动。

绝对定位

会脱离标准流，所以下面的元素会顶上来，相对于在标准流的位置上进行空间移动
设置属性position为absolute,同样也需要结合top、left、right、bottom四个属性搭配使用
如果它的父元素或者祖先元素都没有设置定位流(相对定位、绝对定位、固定定位)，绝对定位相对于body进行定位。
如果父元素或者祖先元素有定位流，绝对定位相对于父元素或者祖先元素(就近原则)。
在绝对定位中，也是不区分块级元素和行级元素，但是都可以设置宽高。

定位流中，一般我们采用父相子绝

固定定位

固定定位也会脱离标准流，设置position为fixed，依然需要借助于四个方向属性top、left、right、bottom进行空间移动

不区分行级元素和块级元素，和绝对定位一样，唯一的不同它不会随着滚动条的滚动而发生移动。

z-index

z-index 可以改变定位流中的前后加载顺序。

  • 定位流中有以下规律

    1.默认情况下定位流会覆盖标准流

    2.默认情况下后面的会覆盖前面的

    3.定位流中设置z-index,是一个整数数值，谁的大谁就在上面

    如果父元素设置z-index,子元素的z-index就会失效，谁的父元素大，谁就显示上方(从父原则)

JavaScript概念的介绍

>JavaScript是web上的一门编程语言，用于和用户进行交互，不需要进行编译，嵌套在html文件中由浏览器引擎加载执行，和Java没有大的联系。

JavaScipt的组成

  1. 核心(ECMAScirpt)语法,包括基本的流程控制，运算符，数据类型，数组，对象，类，接口等。

  2. 浏览器对象模型(BOM) browser object model,主要是操作当前浏览器窗口的内容，如页面的跳转和页面刷新等动作。

  3. 文档对象模型(DOM) document object model,主要是操作html文件中的具体内容(页面元素内容)，如页面中有一个div，动态给div添加高宽，添加背景图像，植入需要的文本内容，让div隐藏起来。

JavaScript代码的引入

  • 内嵌式

    在html文档中，将相关的js代码直接放在标签<script>中,至于位置可以放在html标签中也就可以放在body中。

  • 外联式

    首先需要在html文件的外面独立创建一个js文件，文件的扩展名为xxx.js,在html文件中通过script标签进行引入，至于引入的位置没有要求。(head和body都可以)。

备注：1.引入的位置虽然随意，但是有一个加载顺序的问题，如果js代码存放在head标签中，那么会首先加载js代码，如果js代码中对页面元素内容有控制，则没有效果；如果js代码存放在body标签中并且存放在body页面元素的下面，那么浏览器会首先加载body中的页面元素，再去加载js代码，此时如果js对页面元素有控制，则有效果。

2.如果引入的不是直接对页面元素控制的技术代码，而是第三方js插件，那么一般情况下需要先引入(浏览器先加载)，才能进行后续依赖开发。

ECMAScript核心语法

>在核心语法中，语法的特征基本和java一致，个别有点区别。

声明变量的时候，不需要指定变量的数据类型，通用写法，使用var,比如你想声明一个整数类型的变量 var num = 123;

编译器代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标准流加载</title>
<style type="text/css">
  *{
  	box-sizing: border-box;
  	margin: 0;
  	padding: 0;
  }
  a{
  	 display: block;
  	 height: 100px;
  	 width: 200px;
  }
  div{
  	 display: inline-block;
  	 height: 100px;	
  	 width: 200px;
  }
  h1{
  	display: none;
  }
</style>
</head>
<body>
	<a style="border: 1px solid red;">百度一下</a>           
	<span style="border: 1px solid black;">有求必应</span>
	<!-- 块级标签 -->
	<div style="border: 1px solid green;">
		我是一个块级标签div
	</div>
	<span>我是第二个span标签元素</span>
	<h1 style="border: 1px solid purple;">我是一个大标题</h1>
	<p style="border: 1px solid blue;">我也是一个块级标签p段落</p>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动流</title>
<style>
	*{
		box-sizing: border-box;
	}

	div{
		height: 300px;
		width: 500px;
		border: 1px solid red;
	}
	#div01{
		background-color: green;
		float: left;
	}
	#div02{
		background-color: yellow;
		/* float: left; */
	}
	
</style>
</head>
<body>
	<div id="div01">我是第一个div</div>
	
	<div id = "div02">
	   	我是第二个div
	</div>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动流操作2</title>
<style type="text/css">
	a{
		float: left;
		margin-right: 30px;
		margin-top:20px;
		font-size: 13px;
	}
	#div01{
		float: left;
	}
	#div02{
		float: right;
	}
</style>
</head>
<body>
	<div id="div01">
		<a>新闻</a>
		<a>hao123</a>
		<a>地图</a>
		<a>视频</a>
		<a>贴吧</a>
		<a>学术</a>
		<a>更多</a>
	</div>
	<div id="div02">
		<a>设置</a>
		<a>登录</a>
	</div>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动流操作3</title>
<style type="text/css">
	div{
		width: 200px;
		height: 200px;
	}
	#box01{
		float: right;;
		background-color: red;
	}
	#box02{
		float: left;
		background-color: green;
	    clear: both;
	}
	#box03{
		float: left;
		background-color: blue;
		clear: both;
	}
</style>
</head>
<body>
	<div id="box01"></div>
	<div id="box02"></div>
	<div id="box03"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
	div{
		height: 200px;
		width: 200px;
		border: 1px solid red;
	}
	#box01{
		background-color: blue;
		position: relative;
		/* top left right bottom */
		/* left:500px; *//* 距离左边框向右移动500个像素点 */
		right:100px;/* 向左移动 */
	}
	#box02{
		background-color: green;
		position: relative;
		/* 往上移动到顶部 */
		bottom:200px;
	}
	#box03{
		background-color: pink;
		position: relative;
		/* 往上移动到顶部 */
		top:-400px;
	}
</style>
</head>
<body>
	<div id="box01">
		
	</div>
	<div id="box02"></div>
	<div id="box03"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位操作2</title>
<style type="text/css">
	*{
		box-sizing: border-box;
	}
	div{
		height: 300px;
		width: 300px;
		border: 1px solid red;
	}
	
	#father{
		background-color: blue;
	}
	#son{
		height: 100px;
		width: 100px;
		border: 1px solid red;	
		background-color: purple;
		position: relative;
		/* 向右向下使用left和top */
		left:100px;
		top:100px;
	}
	
	#brother{
		background-color: pink;
		position: relative;
		left: 300px;
		bottom: 300px;
	}
	
</style>
</head>
<body>
	<div id="father">
		<div id="son"></div>
	</div>
	
	<div id="brother"></div>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位操作1</title>
<style type="text/css">
	*{
		box-sizing: border-box;
	}
	
	div{
		height: 300px;
		width: 300px;
		border: 1px solid red;
	}
	
	#box01{
		background-color: blue;
		position: absolute;
		left:500px;
	}
	#box02{
		background-color: yellow;
	}
	#box03{
		background-color: black;
	}
	
</style>
</head>
<body>

	<div id="box01"></div>
	<div id="box02"></div>
	<div id="box03"></div>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位操作2</title>
<style type="text/css">
	
	*{
		box-sizing: border-box;
	}
	
	div{
		height: 300px;
		width: 300px;
		border: 1px solid red;
	}

	#father{
		background-color: green;
	   /*  position: absolute; */
	   /*  position: relative;  */
	    /* position: static; */
		/* left: 500px; */
		margin-left: 500px;
	}
	
	#son{
		height:100px;
		width:100px;
		background-color: blue;
		/* position: absolute; */
		/* left: 400px; */
	}

	#grandson{
		height: 50px;
		width: 50px;
		background-color: purple;
		position: absolute;
		left: 25px;
		top:25px;
	}

	#uncle{
		background-color: yellow;
		position: absolute;
		
	}
</style>
</head>
<body>
	<div id="father">
		<div id="son">
			<div id="grandson"></div>
		</div>
	</div>
	<div id="uncle"></div>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位操作</title>
<style type="text/css">
	*{
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}
	
	div {
		height: 300px;
		border: 1px solid red;
    }
    #div01{
    	background-color: black;
    }
    
	#div02{
		height: 500px;
		background-color: purple;
	}
	
	#div03{
		background-color: yellow;
		position: fixed;
		top:200px;
		width: 100%;
	}
	
</style>
</head>
<body>
	<div id ="div03">我是固定定位</div>
	<div id="div01">我是相对定位</div>
	<div id="div02">我是绝对定位</div>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Z-index的使用</title>
<style type="text/css">
	*{
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}
	
	div {
		height: 200px;
		width: 200px;
		border: 1px solid red;
    }
    
	.div01{
		background-color: green;
		position: absolute;/* 定位流 */
		z-index: 101;
	}
	
	.div02{
		background-color: purple;
		position: fixed;/*  定位流*/
		/* left:600px; */
		z-index: 1;
	}
	
	.div03{
		background-color: pink;
		position: relative; /* 定位流 */
		/* left: 200px; */
		z-index: 10;
		
	}
	
	.div04{
	
		background-color: cyan;
	}

</style>
</head>

<body>
	<div class="div01"> </div>
	<div class="div02"> </div>
	<div class="div03"> </div>
	<div class="div04"> </div>
</body>
</html>
// 给div添加背景色为红色
document.getElementById("one").style.height = "100px";
document.getElementById("one").style.width = "100px";
document.getElementById("one").style.border = "1px solid red";
document.getElementById("one").style.backgroundColor = "red";

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js代码引入方式</title>
<script type="text/javascript">
	prompt("需要给我输入一个文字信息");
	
</script>
</head>
<body>
	<!-- 通过内联式，植入到html文件中 -->
	<script type="text/javascript">
		/* 就是js代码    多行注释*/
		// 单行注释
		alert("点我！！！");
		
	</script>
	<div>
		我是第一个div标签
	</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Js外联式引入</title>
<!-- 引入外部的js文件 -->
<!-- <script type="text/javascript" src="./one.js"></script>  -->
<script type="text/javascript">
    window.onload = function reload() {
		document.getElementById("one").style.border = "1px solid red";
		document.getElementById("one").style.height = "300px";
		document.getElementById("one").style.width = "800px";
		document.getElementById("one").style.backgroundColor = "green";
	}
</script>
</head>
<body>
	<div id="one">我是一个div标签</div>
	<!-- <script type="text/javascript" src="./one.js"></script>  -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Js外联式引入</title>
<!-- 引入外部的js文件 -->
<!-- <script type="text/javascript" src="./one.js"></script>  -->
<script type="text/javascript">
    window.onload = function reload() {
		document.getElementById("one").style.border = "1px solid red";
		document.getElementById("one").style.height = "300px";
		document.getElementById("one").style.width = "800px";
		document.getElementById("one").style.backgroundColor = "green";
	}
</script>
</head>
<body>
	<div id="one">我是一个div标签</div>
	<!-- <script type="text/javascript" src="./one.js"></script>  -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
	/* overflow: hidden; */
	overflow-x: hidden;
}
	div{
		height: 100px;
		width:2000px;
	}
</style>
</head>
<body>
	<a href="http://www.baidu.com" target="box">百度一下</a><br>
	<iframe name="box" height="500px" width="100%" src="http://www.baidu.com" scrolling = "no">
		
	</iframe>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	
	
</body>
</html>

 

学java的狗蛋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS和JS学习
03-15
CSS和JS基础学习，黑马2017前端的css和JS基础课件，文档是比较好的学习CSS和JS 的资源，浅显易懂可用浏览器打开，方便翻阅和学习。
css和js的入门
Dansha的花果山
08-17 417
使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 网站注册案例: form 标签: 表单标签,主要是用来向服务器提交数据 method: 提交方式 get post action : 提交的路径 input 标签: type: password: 密码...
JS
Kunaly
08-10 304
回顾: css: 层叠样式表 作用: 渲染页面 提供工作效率,将html和样式分离 和html的整合 方式1:内联样式表 通过标签的style属性   方式2:内部样式表 通过head的子标签Style子标签 选择器{ 属性:值; 属性1:值1; } 方式3:外部样式表 有一个独立css文件.后缀名:.css 在html中通过link标签导入 选择器
CSS基础和js基础
逼哥很疯狂的博客
05-21 961
组成： 首先，我们需要了解下web前端由哪些组成： 1. 页面结构：html、Servlet、jsp（Java Server Page）=html+java 2. 页面样式：css（Cascading Style Sheet，层叠样式表） 3. 页面交互：js（javascript）、jQuery、AJAX 一、CSS的优先级和继承： 1.1 CSS的优先级： 行内样式>ID选择器>类选择器>标签选择器。 就近原则。 1.2 CSS继承： 原则： ...
CSS和JS的学习
weixin_44039136的博客
02-15 385
CSS和JS的学习CSS概述HTML的块标签主要作用简单语法CSS选择器**元素选择器：****ID 选择器****类选择器****属性选择器**后代选择器伪类选择器CSS的引入方式选择器的优先级使用 DIV+CSS 完成页面的优化盒子模型CSS 绝对定位JSJS入门什么是脚本语言JS的组成JS的语法JS 的数据类型JS 的运算符和语句JS 的输出JS的开发步骤 CSS概述 Cascading S...
动态加载外部CSS与JS文件
12-10
动态加载外部CSS与JS文件使用dom创建[removed]或者<link>标签，并给他们附加属性，如type等。然后使用appendChild方法把标签绑定到另一个标签，一般是绑到<head>。 　应用： 　1、提高代码的复用，减少...
学前端,css与javascript重难点浅析
10-15
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发，CSS（Cascading Style Sheet）层叠样式表单，今天给大家分享css与javascript重难点，感兴趣的朋友一起看看吧
CSS与JS中的相对路径引用简单介绍
01-19
javascript和css文件中采用相对路径，其基准路径是完全不同的。 1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件，则index.php即为宿主)所处位置为基准。 2...
CSS与JS属性对照表.
10-03
CSS与JS属性对照表,CSS 属性对照表是 js 初学者必备的基础知识.CSS与JS紧密配合,为我们的页面增添了很多别致的效果,为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性CSS与JS紧密配合
理论知识总结（js和css）
fdbyd的博客
01-28 2039
目录 css 选择器 一：类选择器 class元素可以有多个值，中间用空格隔开。一个文件中，可以有多个相同的class值。 <p class="first done"></p> .first{ background-color: red; } 二：ID选择器 #(哈希)符号加上id名称组成。但是单个文件中id值要保持唯一。一个element中只设置一个id。 <p id="polite"></p> #polite{ ..
css和js
最新发布
weixin_44943389的博客
06-25 730
需要注意的是，CSS和JavaScript是独立的技术，它们可以单独使用，也可以相互结合，根据具体需求和开发场景来决定如何应用它们。
1. web前端开发分享-css,js入门篇
weixin_34301307的博客
03-14 220
关注前端这么多年，没有大的成就，就入门期间积累了不少技巧与心得，跟大家分享一下，不一定都适合每个人，毕竟人与人的教育背景与成长环境心理活动都有差别，但就别人的心得再结合自己的特点，然后探索适合自己的学习之路是比较好的。学习没有捷径，但学习是有技巧与方法。   一，css入门篇：   推荐书籍：css哪些事儿，精通css。 理由：css那些事儿，他是一本介绍css基础类的书，是入门的经典...
Css和JavaScript
Faker_whoop的博客
09-08 296
css简介：层叠样式表 将网页的显示样式和内容分离，提高显示功能 css和html的结合方式四种 在每个html标签上都有一个属性 style <div style ="background-color:red;color:white">天行有常不为尧存 不为桀亡</div> 使用<style> 标签 写在head 里面 3.写在css文件里面 通过@import url直接引用来写这个 使用 头标签 link标签 引入外部css文件 < link re
前端知识点难点重点总结（持续。。。）
qq_38118222的博客
03-03 375
1.对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。 2.对闭包的理解，实现一个暴露内部变量，而且外部可以访问修改的函数 闭包的作用： 匿名自执行函数、缓存、实现封装（主要作用）、实现面向对象中的对象 var car = (function () { var name = 'default'; return { getName: function () {
添加css和js文件
yanxk777的专栏
07-03 220
显而易见，我们刚刚创建的Homepage页面并没有添加
前端常用重难点总结之css篇
迪拉克之海
02-27 271
今天天气不错，心情也一扫阴霾，人生的路，有的时候越走越窄，有的时候越走越多，但是，每一次选择，便注定意味着无数的错过，我们应该珍惜每一场相逢，把握好每一个机会，不向命运低头。 废话不多说，css篇参上。 css篇 &amp;lt;1&amp;gt;基础 1、选择器概念的理解以及css规则命名惯例 2、三种机制=&amp;gt;继承、层叠、特指 3、理解什么是上下文选择符 4、盒子模型、定位、浮动与清除 5、样式权重计...
CSS和JS简介-HTML5极速入门
潘高的小站
05-24 617
前言 更多内容，请访问我的 个人博客。 CSS CSS，又称层叠样式表，用于渲染HTML元素标签的样式。 我们在创建HTML文档时，如果不使用样式美化页面，就是这个样子的： 使用样式文件排版美化后，就是这样子的： CSS可以通过以下方式添加到HTML中: 内联样式 - 在HTML元素中使用 style 属性 内部样式表 - 在HTML文档头部 <head> 区域使用 <style> 元素来包含CSS 外部引用 - 使用外部 CSS 文件 内联样式 在标签中使用样式属性，如下
JS与CSS
翱翔天空的专栏
08-09 503
发现最近的学习和工作很累，似乎是每天像梦游一样的再课堂和工作单位之间游走，也许是最近JS的恶补带来的负面效应吧。当然能力的提升带来的是以后更好的发展，哥们儿打电话过来说他们现在做网络安全方面的了，我还是原地踏步走啊走，偶尔和他们交流交流，也算是一种提高吧，今天是深夜写BLOG ，写的很少希望大家见谅。晚安
CSS与JS简单总结
weixin_46245201的博客
04-04 1770
1. CSS CSS的角色：页面显示的美观风格 CSS的基础语法：标签样式；类样式；ID样式；组合样式；嵌入式样式表；内部样式表；外部样式表 盒子模型：border、margin、 padding 定位和浮动：position、float、DIV+CSS布局 2. JS JS是客户端（浏览器端）运行的脚本语言，语法风格和java比较类似 JS是弱类型的语言var str=99； JS的函数function hello(var num) {} DOM技术： 鼠标悬浮：onmouseover,eve
我的家乡应用css与js
05-24
好的，你可以按照以下步骤来应用CSS和JS： 1. 在HTML文档中引入CSS文件和JS文件。在标签中添加标签和标签来引入CSS和JS文件。 例如，引入CSS文件的代码如下： ``` <link rel="stylesheet" type="text/css" href...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值