内容回顾:
CSS相关
盒子模型
margin:用于调整标签与标签之间的距离(外边距)
border:用于调整标签边框的粗细(边框)
padding:用于调整标签内部文本与边框之间的距离(内边距)
content:标签内部文本
ps:有一些标签自带上面一个或多个属性值
p标签自带margin上下16px
ul标签自带margin上下16px padding-left:40px
margin:10px,20px,30px,40px 上右下左
margin:10px,20px,30px 上 左右 下
margin:10px,20px 上下 左右
margin:10px
(上下左右)
ps:padding的规则亦是如此
border:solid 3px red;
border-left
border-right
border-top
border-bottom
浮动
用来做网页的布局(先搭建网页骨架,再去调样式最后再加js代码)
缺点:浮动的元素会脱离文档流,造成父标签塌陷
如何解决浮动带来的负面影响:
1.先手动再写一个div强行撑起来
2.clear属性限制
3.clearfix
.clearfix:after{
content:'',
clear:both,
display:block
}
ps:应用场景 左右页面布局
溢出
overflow:hidden/auto/scoll
圆形头像
定位
标签默认是static,不能调整top,left,right,bottom
相对定位:相对于标签自身的位置
绝对定位:相对于已经定位过的父标签再做定位
固定定位:相对于浏览器固定在窗口的某个位置不随文档上下滑动而变动
是否脱离文档流:
脱离文档流:
浮动
绝对定位
固定定位
不脱离文档流:
相对定位
z-index
调整页面与用户的距离
示例:模态框
透明度
opacity 调整的是所有标签的透明度(包括颜色)
rgba() 只能调节颜色的透明度
小博客园示例
今日内容:
JS:Javascript
跟Java一点关系都没有,当初Java很火,这门是为了蹭Java的热度,所以取名为Javascript
注释:
// 单行注释
/*
多行注释
*/
引入方式
方式1:直接在script内部写js代码
方式2:利用script标签的src属性导入外部js代码文件
声明变量:
var name = 'hello'
let name = 'hello'
js中变量命名规范:
数字 字母 下划线 $
数字不能开头并且不能与存在关键字冲突
python中建议使用:user_name
Javascript建议使用(驼峰体):userName,UserName
Js数据类型
数值类型
字符串类型
布尔类型
undefined
对象
null
数组 [1,2,3,4]
自定义对象 {“name”:“jason”}
symbol
JSON对象
stringify
parse
js中正则的两种定义方式
reg1 = new RegExp('^[A-Za-z][A-Za-z0-9]{5,9}$')
reg2 = /^[A-Za-z][A-Za-z0-9]{5,9}$/
坑点集锦:
1.正则表达式中千万不要写空格
2.全局匹配模式lastindex
3.匹配的时候不传任何参数默认匹配undefined
BOM
Broswer Object Model
DOM(******)
Document Object Model
直接查找(******)
id
class(类)
tag(标签)
间接查找