css补充与javascript简介
一、盒子模型
盒子模型有四种属性：
magin(外边距): 用于控制标签与标签之间的距离 相当于两个快递盒的距离
border(边框): 用于控制标签的边框的宽度的 相当于快递盒的厚度
padding(内填充): 用于控制标签中的内容和边框之间的距离 相当于快递盒内的物品到快递盒之间的距离
content(内容): 标签内部的内容 相当于快递盒内的物品大小
border和content之间我们已经知道了现在我们看一下magin和padding
1.magin外边距
div { height: 200px; width: 100px; background-color: red; margin-top: 10px; margin-left: 20px; margin-bottom: 30px; margin-right: 40px; } top:就是离上面的标签有多少距离 left:就是离左边的标签有多少距离 right:就是离右边的标签有多少距离 bottom:就是离下面的标签有多少距离 也可以简写: div { height: 200px; width: 100px; background-color: red; margin: 10px 20px 30px 40px; } 只写一个的话就是上下左右的距离都为20像素 body自带8px外边距 所以我们写标签的时候在页面展示的时候是碰不到边的 margin还可以让内部标签水平居中 margin: 0 auto 只能水平居中垂直方向不行
2.padding(内填充)
div { height: 400px; width: 400px; border: red solid 10px; margin: 20px; padding-bottom: 10px; padding-left: 20px; padding-right: 30px; padding-top: 40px; } p { height: 100px; width: 100px; border: black solid 10px; } 上下左右跟margin都一样 推荐使用下列写法: div { height: 400px; width: 400px; border: red solid 10px; margin: 20px; padding: 10px 20px 30px 40px; } p { height: 100px; width: 100px; border: black solid 10px; }
margin和padding下四个参数的时候的顺序是上右下左
根据传入的参数数量不同:
只有一个参数的时候: 控制上下左右的距离
两个参数的时候: 第一个控制上下 第二个控制左右
三个参数的时候: 第一个控制上 第二个控制左右 第三个控制下
四个参数的时候:第一个控制上 第二个控制右 第三个控制下 第四个控制左
二、浮动
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
left：向左浮动
right：向右浮动
none：默认值，不浮动
.c1 { height: 200px; width: 200px; background-color: red; float: left; } .c2 { height: 200px; width: 200px; background-color: blue; float: right; }
1.塌陷问题
就是当一个标签浮动起来的时候 父标签就会撑不起来
2.解决办法
- 固定高度
- 伪元素清除法
- overflow:hidden
伪元素清除法(使用较多)
.clearfix:after { content: ""; display: block; clear: both; } 然后哪个标签塌陷 就在哪个标签使用clearfix <div class="c3 clearfix" > <div class="c1"></div> <div class="c2"></div> </div>
浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示
clear属性规定元素的哪一侧不允许其他浮动元素
clear属性只会对自身起作用，而不会影响其他元素
三、溢出
溢出就是当一个标签内的文本的内容大于标签的大小的时候 这个文本内容就会溢出这个标签
overflow溢出属性
圆形头像实例
<style> * { margin: 0; padding: 0; background-color: #eeeeee; } .header-img { width: 150px; height: 150px; border: 3px solid white; border-radius: 50%; overflow: hidden; } .header-img>img { width: 100%; } </style> </head> <body> <div class="header-img"> <img src="https://img0.baidu.com/it/u=324201646,1175190975&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661446800&t=2dba0fbbeb463080f35bbbfcb67bdc5a" alt=""> </div> </body>
四、定位
static(静态) 所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一 relative(相对定位) 相对于标签原来的位置做定位 absolute(绝对定位) 基于已经定位过的父标签做定位(如果没有父标签则以body为参照) fixed(固定定位) 相对于浏览器窗口做定位 绝对定位 如果没有父标签或则父标签没有定位,就会以body标签为基准 就相当于编程了相对定位 语法: #d1 { position: fixed; }
五、z-index
其实浏览器是一个三维坐标系界面 就是x,y,z x,y就是电脑的平面 而z就是指向用户 语法: .cover { z-index: 500; }
设置对象的层叠顺序。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
六、js简介
# 1.JavaScript与Java没有任何关系 之所以叫这个名字纯粹是为了蹭当时Java的热度 # 2.JavaScript简称JS 也是一门前端的编程语言 前端由于非常受制于后端,所以有些人一项天开想要通过js来编写后端代码一统江湖 由此开发了一个叫nodejs的工具(支持js跑在后端服务器上)>>>:不好用 # 3.JS最初有一个程序员花了七天时间开发的 里面存在很多bug 为了解决这些bug一直在编写相应的补丁 补丁本身又有bug 最后导致了js中有很多不符合逻辑的地方(成了大家墨守成规的东西) # 4.JavaScript与ECMAScript 其实是一个东西 是因为版权问题改过名字 # 版本问题 ECMA5 ECMA6
七、变量和注释
""" 编写js代码的位置 1.pycharm提供的js文件 2.浏览器提供的js环境 """ # 1.注释语法 // 单行注释 /*多行注释*/ # 2.结束符号 以分号结束 console.log('hello world');
有时候不写分号也没事 # 3.变量声明 在js中定义变量需要使用关键字声明 1.var var name = 'jason' 2.let let name = 'jason' '''var声明的都是全局变量 let可以声明局部变量''' # 4.常量声明 关键字: const const pi = 3.14 声明之后就不能在改了
八、数据类型之数值
''' 查看数据类型的方式 : typeof python中用type ''' # 数值类型(相当于python里面的整型int和浮点型float) '''关键字:Number''' NaN:属于数值类型 意思是'不是一个数字'(not a bumber) parseInt:转成整形 parseFloat:转成浮点型 parseInt('abc') 不报错 返回一个NaN parseFloat('abc') 不报错 返回一个NaN
九、数据类型之字符串
# 字符类型(相当于python里面的字符串str) '''关键字:String''' 默认只能是单引号和双引号 var name1 = 'jason' var name2 = "jason" 格式化字符串小顿号 1旁边那个键 '''换行:shift按住才能按回车''' var name3 = `jason` 字符的常用方法 # 1.字符的拼接 js中推荐使用加号 # 2.统计长度 js中使用length python使用len # 3.移除空白(不能指定移除) js中使用trim()、 trimLeft()、trimRight() python使用strip()、lstrip()、rstrip() # 4.切片操作 js使用substring(start,stop)、slice(start,stop) substring不支持负数索引 slice支持负数索引 python中使用 [index:index2] # 5.大小写转换 js中使用 toLowerCase()、toUpperCase() python使用lower()、upper() # 6.切割字符串 js中python都是使用split var ss1 = 'jason say hello big baby' ss1.split(' ') # 输出结果:['jason', 'say', 'hello', 'big', 'baby'] ss1.split(' ', 1) # 第二数字是控制要几个结果 # 输出结果:['jason'] ss1.split(' ', 2) # 输出结果:['jason', 'say'] # 7.字符串的格式化 js中使用格式化字符串(小顿号) var name = 'jason' var age = 18 console.log(` my name is ${name} my age is ${age} `) # 输出结果:my name is jason my age is 18 python使用format
