【2022.8.24】前端开发（3）

学习内容概要

盒子模型
浮动布局
定位属性
z-index
JavaScript基础语法

内容详细

盒子模型

所有的标签都可以看成是一个快递盒
1.两个快递盒之间的距离     标签之间的距离			外边距(margin)
2.快递盒的厚度			 标签的边框		 		 边框(border)
3.盒子内物体距离盒子内壁    内部文本与边框的距离     内边距(padding)
4.物体自身的大小			标签内部的内容			   内容(content)

需要掌握的操作
        margin-top: 20px;
        margin-left: 100px;
        margin-right: 100px;
        margin-bottom: 100px;
        
body标签自带8px的外边距
      margin:0;   简写形式 作用于上下左右
  		margin: 10px 20px;  上下  左右
      margin: 10px 20px 30px;  上 左右	下
      margin: 10px 20px 30px 40px; 上 右 下 左
margin还可以让内部标签居中展示
		margin:100px auto  仅限于水平方向
     
padding使用方式与margin一致

浮动布局

float:left\right  页面布局必不可少的操作

浮动会造成父标签塌陷 这是一个不好的现象 因为会引起歧义
解决浮动造成的父标签塌陷

.clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
提前写好上述的css操作 遇到标签塌陷就给标签加clearfix类值即可

"""浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示)"""

溢出属性

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


div {
            height: 50px;
            width: 50px;
            border: 5px solid gold;
            border-radius: 50%;
            overflow: hidden;
        }
div img {
    max-width: 100%;
}

定位

static(静态)
	所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一
relative(相对定位)
	相对于标签原来的位置做定位
absolute(绝对定位)
	基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)
	相对于浏览器窗口做定位

z-index

1. 浏览器界面其实是一个三维坐标系 z轴指向用户
1. z-index 值表示谁压着谁，数值大的压盖住数值小的
1. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

JavaScript简介

1.跟java没有关系 蹭热度
2.JavaScript与ECMAScript区别
3.版本迭代
4.JavaScript是一门编程语言(NodeJS)  
5.html页面两种引入js的方式
6.两种注释语法
	//
	/**/
7.建议的结束符号是分号

JS变量与常量

"""
支持编写js代码的地方
	1.pycharm
	2.浏览器(Console下编写)
"""
在JS中声明变量和常量都需要使用关键字
	var:全局有效
 	let:如果在局部名称空间中使用 那么仅在局部名称空间有效
 	const:定义常量

JS也是动态类型:变量名绑定的数据值类型不固定
   var name = 'make'
	name = 123
   	name = [11, 22, 33, 44]

JS数据类型之数值类型

"""
在js中查看数据类型可以使用 typeof
"""
在js中整型浮点型统称为数值类型number
    parseInt()  # 转整数
    parseFloat()  # 转小数
NaN:Not A Number 不是一个数字

JS数据类型之字符串类型个

字符串string
var name = 'jason'
var name = "jason"
var name = `jason`  模板字符串

内置方法
	1.js中涉及到字符串拼接 推荐使用+
# 字符串的拼接
var name = 'make'
var age = 24
name+age  # 'make24'

# 字付串的分割方法    
var s1 = 'holle|23|make|'
undefined
s1.split('|')
['holle', '23', 'make', '']
# 字符串的切片方法
var s2 = 'holle world'
undefined
s2.slice(0,3)  # 'hol'

# 文本输入方法
var name_list = `
张三
李四
王五
`
name_list  # '\n张三\n李四\n王五\n'

# 模板字符串
var name = 'make'
var age = 24
var s1 = `my name is $(name) my age is $(age)`
s1
'my name is $(name) my age is $(age)'