CSS补充与JavaScript简介

CSS补充与JavaScript简介

盒子模型

  • 合资类型四大属性
    • 外边距(margin)
      • 用于控制内容和元素之间的距离，margin最基本的用具就是空值元素周围空间的间隔，从视觉角度上达到相互隔开的效果
    • 边框(Border)
      • 围绕在内边距和内容外的边框
    • 内填充(Padding)
      • 用于控制内容和边框之间的距离
    • 内容(Content)
      • 盒子的内容，显示文本和图像
  • 外边距
1.改变外边框
	div {
		margin-top: 5px;  上边距
		margin-bottom: 15px;  下边距
		margin-left: 20px;  左边距
		margin-right: 10px;  右边距
		background-color: orange;  填充颜色
	}
2.我们也可以将上方的步骤进行简写
	div {
		margin: 5px 10px 15px 20px; 外边距：上边距 右边距 下边距 左边距
    }
3.常见居中
	div {
		margin: 0 auto  外边距 上下距离 左右距离
    }center center
  • padding内填充
1.改变字体的位置
	.padding-test {
	    padding-top: 5px;  上边距
	    padding-right: 10px;  右边距
	    padding-bottom: 15px;  下边距
	    padding-left: 20px;  左边距
	    background-color: pink;  填充颜色
	}
2.我们内填充也是可以进行简写的
	.padding-test {  
		padding: 5px 10px 15px 20px;  内填充：上边距 右边距 下边距 左边距
    }
3.padding内填充不能直接居中

浮动布局

  • 在CSS中，任意元素都可以浮动。祖东元素会生成一个块级框，而不论它本身是何种元素。

  • 浮动的两个特点

    • 浮动的狂可以向左或者右移动，知道他的外边缘碰到包含另一个浮动框的边框为止
    • 由于浮动框不在文档的普通流中，有疑问党的普通流中的块框表现得就像浮动框不存在一样

  • 三种取值

    • 向左浮动：
      • left
    • 向右浮动
      • right
    • 默认值，不浮动
      • none

  • clear（属性规定元素的哪一侧不允许其他浮动元素，clear属性只会对自身起作用，而不会影响其他元素）

值 描述
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 左右两侧都不允许浮动元素
none 默认值，允许浮动元素出现在两侧
inherit 规定应该从父元素继承，clear属性的值

  • 浮动会造成父标签坍塌，这是一个不好的现象，因为会引起歧义所以就需要解决父标签塌陷的问题也就是清除浮动

  • 清除浮动的三种方式：

    • 固定高度
    • 伪元素清除法
    • overflow：hidden
    1.伪元素的清除法
	.clearfix:after {
		content:"";
		display: block;
		clear:both;
    }

溢出属性

值 描述
vislble 默认值。内容不会被修改，会成现在元素框外。
hidden 内容会被修改，并且其余内部内容是不可见的
scroll 内容会被修改，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修建，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承overflow属性的值
overflow-x X轴溢出
overflow-y Y轴溢出 
.img1 {
    width: 100px;
    height: 100px;
    border: 5px solid black;
    border-radius: 50%;
    overflow: hidden;
}
.img1>img {
    max-width: 100%;
}
    
    
    <div class="img1">
    	<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.52xiee.com%2FupFiles%2FinfoImg%2Fcoll%2F20150506%2FOT20150506021314029.jpg&refer=http%3A%2F%2Fwww.52xiee.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663932084&t=d999e49188da9952d5b7ee96292c22e9" alt="">
    </div>

定位

  • 静态定位（static）
    • 所有的标签默认都不能直接通过定位修改位置，必须要切换成下面三种之一，不能当做绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的
  • 相对定位(relative)
    • 相对定位是相当于对钙元素在文档流中的原始位置，即以自己原始位置为参照物。即使设置了元素的相对定位已经便宜，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将一句top、right、bottom、left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义
  • 绝对定位(absolute)
    • 设置为绝对定位的元素框从文档流完全删除，冰箱对对最近的已定位祖先元素定位，如果元素没有定位的祖先元素，那么他的位置相对于最初的包含块（即body元素）元素原先正常文档流中所占的空间会关闭，就好像钙元素原来不存在一样，元素定位后生成一个块级框，而不论原来他在正常流中生成和种类型得框，也就是给予已经定位过的父标签做定位，如果没有父标签那么就以body为参照
  • 固定定位(fixed)
    • 对象脱离正常文档流，无论怎样使用移动属性都不会使其改变定位，对象不会跟随滚动而其层叠通过zindex属性，相当于浏览器窗口做定位固定在该位置
示范：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .c1 {
      height: 100px;
      width: 100px;
      background-color: red;
      float: left;
    }
    .c2 {
      height: 50px;
      width: 50px;
      background-color: yellowgreen;
      float: right;
      margin-right: 400px;
      position: relative;
    }
    .c3 {
      height: 200px;
      width: 200px;
      background-color: pink;
      position: absolute;
      top: 50px;
    }
    .c4 {
      height: 100px;
      width: 100px;
      border: black;
      background-color: orange;
      position: fixed;
      left: 100px;
      top: 100px;
    }
  </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2">
      <div class="c3"></div>
    </div>
    <div class="c4"></div>
</body>
</html>

z-index

  • 定位叠放次序(z-index)
    • 在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来空值盒子的前后顺序。
  • 特点
    • 数值可以是正整数，负整数，0，默认是auto，数值越大盒子越靠上。
    • 如果属性值相同，则按照书写顺序后来居上。
    • 数字后面不能加单位
    • 只有定位的盒子才有z-index的属性，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .c2 {
      background-color: gray;
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: 200;
    }
    .c3 {
      height: 300px;
      width: 500px;
      position: fixed;
      background-color: white;
      z-index: 500;
      left: 50%;
      top: 50%;
      margin-left: -250px;
      margin-top: -150px;
    }
  </style>
</head>
<body>
    <div class="c1">最底层属性</div>
    <div class="c2"></div>
    <div class="c3">
      <p>username:<input type="text"></p>
      <p>password:<input type="password"></p>
    </div>
</body>
</html>

JavaScript简介

1.看到他的名字我们第一眼就会想到他是不是和java类似或者说有点像，答案是不是的，不说毫无关系那也是互不相干
2.JavaScript与ECMAScript的区别，不说丝毫不差那也是一模一样就是一个东西就是改了几次名字
3.我们现在使用最多的版本是JavaScript 6版本，也有很多老项目使用的是5版本
更新速度贼快现在已经13版了
4.JavaScript是一门编程语言，但是内部有很多逻辑漏洞，也叫做知识点，毕竟虱子多了也就不痒了，是一种解释性的脚本语言。
5.HTML页面两种引入js的方法
	方法一：
		<script>
			在这个内部来编写js代码
		</script>
	方法二：
		<script src="myscript.js"></script>直接导入js文件
6.js注释方法
	方法一：
		//
	方法二：
		/**/
7.建议结束符；（分号）
	其实不使用分号他也可以执行，但是为了逻辑清晰和规范我们还是需要使用分号来结束
版本 发布日期 基于 Netscape Navigator Mozilla Firefox Internet Explorer Opera Safari Google Chrome
1.0 1996年3月 - 2.0 - - - - -
1.1 1996年8月 - 3.0 - 3.0 - - -
1.2 1997年6月 - 4.0-4.05 - - - - -
1.3 1998年10月 ECMA-262 1 edition / ECMA-262 2 edition 4.06-4.7x - 4.0 - - -
1.4 - - NetscapeServer - - - - -
1.5 2000年11月 ECMA-262 3 edition 6.0 1.0 5.5 (JScript 5.5),6 (JScript 5.6),7 (JScript 5.7),8 (JScript 6) 6.0,7.0,8.0,9.0 - -
1.6 2005年11月 1.5 + Array extras + Array and String generics + E4X - 1.5 - - 3.0,3.1 -
1.7 2006年10月 1.6 + Pythonic generators + Iterators + let - 2.0 - - 3.2,4.0 1.0
1.8 2008年6月 1.7 + Generator expressions + Expression closures - 3.0 - 11.50 - -
1.8.1 - 1.8 + Native JSON support + Minor Updates - 3.5 - - - -
1.8.2 2009年6月22日 1.8.1 + Minor updates - 3.6 - - - -
1.8.5 [11] 2010年7月27日 1.8.1 + ECMAScript 5 Compliance - 4 9 11.60 - -
ES2015 2015年 ECMAScript 2015 - - - - - -
WebStorm 2021.3 [13] 2021年 WebStorm 2021.2 - - - - - -
版本 说明 实现
ECMAScript 1 标准化了JavaScript1.1的基本特性，并添加了一些新特性。没有标准化switch语句和正则表达式。 由Netscape 4.5和IE 4实现。
ECMAScript 2 ECMA v1的维护版本，只添加了说明 由Netscape 4.5和IE 4实现。
ECMAScript 3 标准化了switch语句、异常处理和正则表达式。 由Mozilla、Netscape 6和IE 5.5实现。
ECMAScript 5 添加了“严格模式”。添加了 JSON 支持。添加了 String.trim()。添加了 Array.isArray()。添加了数组迭代方法。 -
ECMAScript 5.1 编辑改变 -
ECMAScript 2015 添加了 let 和 const添加了默认参数值添加了 Array.find()添加了 Array.findIndex() [4] -
ECMAScript 2016 添加了指数运算符（**）。添加了 Array.prototype.includes [4] -
ECMAScript 2017 添加了字符串填充。添加了新的 Object 属性。添加了异步功能。添加了共享内存。 [4] -
ECMAScript 2018 添加了 rest / spread 属性。添加了异步迭代。添加了 Promise.finally()。增加 RegExp。 [4] -

JS变量与常量

支持书写JS代码的地方有两个
	第一个：pycharm中JS文件
	第二个：浏览器直接右键检查，点击console编写JS代码
1.JavaScript的变量名和敞亮都是需要使用关键字来定义的
	变量：
		var：全局有效
		let：如果实在局部名称空间中使用，那么就只有局部可以使用
	常量：
		const：定义常量（真正意义上的常量，python是虚假的常量）
2.JS也是动态类型：变量名绑定的数据值类型不固定（但是我们也需要做到见名知意）
3.命名规范
	和python差不多也是数字、字母、下划线但是还有一个$符也是可以起变量名的
	推荐使用驼峰体命名格式

JS数据类型之数值类型

1.在JS中查看变量名内数据类型
	typeof
2.在JS中没有整形和浮点型两种概念，合并为一种格式叫做数值统称为（number）
	parseInt(整型)
	parseFloat(浮点型)
	NaN：Not A Number 不是一个数字，当字符串想要存成整型的情况下就会变为NaN

JS数据类型之字符串类型

1.在JS中字符串和我们python中有一点不一样我们的是str
	字符串string（JS）
2.存储字符串的三种格式，字符串可以使引号中的任意文本。
	var name = 'joseph'
	var name = "jsoeph"
	var name = `joseph`
3.我们拼接字符串建议使用"+"
posted @ 2022-08-24 21:35  Joseph-bright  阅读(34)  评论(0)  编辑  收藏  举报