JavaWeb---Day 03

小麦穗呀

已于 2023-04-28 08:31:42 修改

阅读量93

点赞数

分类专栏： JavaWeb 文章标签： java html 前端 css javascript

于 2023-04-27 19:59:56 首次发布

本文链接：https://blog.csdn.net/qq_49544301/article/details/130413505

版权

JavaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、CSS盒子模型

（一）盒子模型的组成

（1） margin：盒子的外边距

margin：数字1 给上下左右设置外边距为数字1
margin：数字1,数字2 给上下设置外边距为数字1，给左右设置外边距为数字2
margin：数字1,数字2,数字3 上 左右 下
margin：数字1,数字2,数字3,数字4 上 右 下 左
margin-top：上边距
margin-bottom：下边距
margin-left：左边距
margin-right：右边距

（2）border：盒子的边框

border-top: 上边框
border-left:左边框
border-right: 右边框
border-bottom: 下边框
border：边框 粗细 样式 颜色

（3）padding：盒子的内边距

padding: 10px; 上下左右的内边距
padding: 10px 20px; 上下 左右
padding: 10px 20px 30px; 上 左右 下
padding: 10px 20px 30px 40px; 上 右 下 左
padding-top: 上边距
padding-left:左边距
padding-right: 右边距
padding-bottom: 下边距

（4）盒子大小的计算

margin+border+padding+content

二、CSS标准文档流

行内标签、行内块标签：依次从左到右进行排布

块级标签：依次从上到下进行排布

（一）脱流：

1.浮动

2.绝对定位

3.固定定位

（三）CSS浮动

浮动的特性：

1.脱离标准文档流

2.浮动的元素相互依靠

3.浮动会出现字体围绕的效果

浮动的弊端：

1.导致高度塌陷，可以通过设置 overflow ： hidden进行解决（overflow有 hidden，visible，scroll三个属性值）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东导航栏</title>
		<style type="text/css">
		ul{
			list-style: none;
		}
		ul li{
			float: left;
			font-size: 20px;
			margin-left: 20px;
		}
		
		a{
			color: black;
			text-decoration: none;
		}
		
		a:hover{
			color: red;
		}
		</style>
	</head>
	<body>
		<ul>
			<li><a target="_blank" href="https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html">京东家电</a></li>
			<li><a target="_blank" href="https://www.jd.hk/">进口好物</a></li>
			<li><a target="_blank" href="https://mro.jd.com/">东五金城</a></li>
			<li><a target="_blank" href="https://passport.jd.com/new/login.aspx?ReturnUrl=https%3A%2F%2Fplus.jd.com%2Findex%3Fflow_system%3Dappicon%26flow_entrance%3Dappicon11%26flow_channel%3Dpc">PLUS会员</a></li>
		</ul>
	</body>
</html>

三、CSS定位

1.静态定位：默认静态定位， position:static ，无法通过 top 、 left 、 right 、 bottom 进行定位

2.相对定位： position:relative ，可以通过 top 、 left 、 right 、 bottom 进行定位，参照原本的位置，并且会保留原本的位置

3.绝对定位： position:absolute ，可以通过 top 、 left 、 right 、 bottom 进行定位，如果当前元素有父级标签，并且该父级标签有定位属性，则参照父级标签进行定位，否则参照body 进行定位，并且不会保留原本的位置

4.固定定位： position:fixed ，可以通过 top 、 left 、 right 、 bottom 进行定位，参照浏览器进行定位，并且不会保留原本的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css定位</title>
		<link type="text/css" rel="stylesheet" href="../css/position.css" />
	</head>
	<body>
		<div id="div1">111</div>
		<div id="div2">222</div>
		<div id="div3">333</div>
		<div id="div4">
			444
			<div id="div5">555</div>
		</div>
		<div id="div6">666</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
		<div>777</div>
	</body>
</html>

z-index：是设置覆盖的，例如有好几个div摞在一起了，通过设置该属性，达到想要的效果。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            position: absolute;
        }
        #div1{
            background-color: yellow;
            top:100px;
            z-index:3;
            opacity: 0.2;
        }
        #div2{
            background-color: green;
            top:120px;
            z-index: 2;
            opacity: 0.4;
        }
        #div3{
            background-color: blue;
            top:140px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米</title>
		<style type="text/css">
			#div1{
				position: absolute;
				top: 9px;
			}
			#div2{
				position: absolute;
				top: 195px;
				left: 242px;
			}
			#div3{
				position: absolute;
				top: 195px;
				right: 316px;
			}
		</style>
	</head>
	<body>
		<div><img src="../img/111.jpg"/></div>
		<div id="div1"><img src="../img/xiaom_left.png"/></div>
		<div id="div2"><img src="../img/left.png"/></div>
		<div id="div3"><img src="../img/right.png"/></div>
	</body>
</html>

四、JavaScript介绍

javascript是基于对象和事件的解释型语言，是一门弱类型语言。以 .js 为后缀。

注意：js 严格区分大小写

特点：

1.解释型语言

2.简单

3.动态性

4.跨平台性

（一）js的引入方式

1.行内 js ：只作用于当前行

2.页面 js ：只作用于当前页面

3.外部 js ：作用于当前项目

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js</title>
		<!-- 页面js -->
		<script type="text/javascript">
			document.write("哈哈哈哈哈哈哈哈哈");
			console.log("嘿嘿嘿嘿嘿嘿")
			alert("欢迎光临");
		</script>
		<!-- 外部js -->
		<script type="text/javascript" src="../js/demo.js">
		</script>
	</head>
	<body>
		<!-- 行内js -->
		<a href="javascript:alert('点我干嘛')">点我</a>
		<script type="text/javascript">
			alert(点我);
		</script>
		
	</body>
</html>

（二）js的基本数据类型

1.boolean：两个值 true 和 false

2.number：整数或浮点型

3.null：表明 null 值得关键词

4.undefined：未定义的关键词

5.string：字符串

6.symbol：代表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        var num = 1;
        var str1 = "1";
        console.log(num == str1);//只比较内容
        console.log(num === str1);//比较内容及数据类型
        console.log(typeof(num));//判断变量所属的数据类型
        let num1 = 1.1;
        console.log(typeof(num1));
        var flag = true;
        console.log(typeof(flag));
        let str = "1111";
        console.log(typeof(str));
        //isNaN is not a number 判断是不是一个非数字，返回结果是boolean
        console.log(isNaN(num));
        //isFinite 判断是不是有穷 返回boolean
        console.log(isFinite(num));
        var result = 1/0;
        console.log("=========================")
        console.log(typeof(result));
        console.log(isFinite(1/0));
        </script>
    </head>
    <body>
    </body>
</html>