css相关补充
css盒子模型
1.所有的标签都可以看成是一个快递盒
1.1两个标签之间的距离 外边框(margin)
1.2标签边框的距离 边框(border)
1.3控制内部文本与边框的距离 内边框(padding)
1.4标签内部的内容大小 内容(content)
2.需要掌握的操作
margin-top: 20px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px;
'body标签自带8px的外边距'
3.简写
margin:0; 作用于上下左右
margin: 10px 20px; 作用于上下,左右
margin: 10px 20px 30px; 作用于上,左右,下
margin: 10px 20px 30px 40px; 作用于上,下,左,右
4.margin还可以让内部的标签居中展示
margin:100px auto 仅限水平方向
'padding使用方式与margin一致'
浮动布局
1.浮动是页面布局必不可少的操作,任何元素浮动都会变成一个块级框
float: left; 向左浮动
float: right; 向右浮动
float: none; 默认值 不浮动
2.浮动会造成父标签坍塌,提前写好下面的css操作,那个标签坍塌就给那个标签加clearfix即可
.clearfix:after {
content: ''; 在标签后面写一个文本
display: block; 这个文本是块级标签
clear: both; 规定元素在那一侧不允许其他浮动元素
}
'文本在浏览器中优先展示,'
溢出属性
1.overflow溢出属性
visible 默认值,内容不会被修剪,会呈现在元素框之外
hidden 内容会被修剪,并且其余内容是不可见的
scroll 内容会被修剪,但浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪了,浏览器就会显示滚动条以便查看其余内容
inherit 规定应该从父元素继承overflow属性的值
2.圆形头像
在圆形头像内部将图片100%展示
div {
height: 200px;
width: 200px;
border: 5px solid gold;
border-radius: 50%;
overflow: hidden;
}
div img {
max-width: 100%;
}
定位
1.position: static(静态)
所有的标签都不能直接通过定位修改位置,必须要切换成下面三种之一
2.position: relative(相对定位)
相当于标签原来的位置做定位
3.position: absolute(绝对定位)
基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
4.position: fixed(固定定位)
相对于浏览器窗口做定位
z-index
1.z-index值表示谁压着谁,数值的压盖住数值小的
z-index: 100;
2.只有定位的元素才能有z-index,所以相对定位、绝对定位、固定定位,都可以使用,而浮动元素不能使用
3.z-index值没有单位,就是一个正整数,默认值的z-index值为0如果大家都没有z-index值或z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素
JavaScript
JavaScript简介
1.JavaScript跟java没有关系,ECMAScript一开始是针对JavaScript语言制定的,它往往被称为JavaScript,因此ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现
2.JavaScript有很多版本,现在ECMAScript6使用的人比较多
3.JavaScript是一门编程语言(NodeJS)
4.html页面两种引入js的方式
4.1script标签内写代码
<script>
//JS代码
</script>
4.2引入额外的JS文件
<script src="myscript.js"></script>
5.两种注释语法
//
/**/
6.结束符建议是分号
JS变量与常量
1.支持编写js代码的地方
1.1pycharm
1.2浏览器(随便找个页面,右键点击检查,点击Consale)
2.在JS中声明变量和常量都需要使用关键字
var:全局有效
let:如果在局部名称空间使用,那么仅在局部名称空间有效
const:定义常量
3.JS也是动态类型:变量名绑定的数据值类型不固定
var name = 'barry'
name = 123
name = [1, 2, 3]
JS数据类型之数值类型
1.在js中查看数据类型可以使用 typeof
2.在js中整型和浮点型统称为数值类型numder
parseInt()
parseFloat()
3.报错:NaN
Not A Number 这不是一个数字
JS数据类型之字符串类型
1.字符串string
2.字符串模板
var name = 'barry'
var name = "barry"
var name = `barry`
3.内置方法
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边空白
.trimRight() 移除右边空白
.charAt(n) 返回n个字符
.concat(n, m) 拼接
.slice(start, end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割
'js中涉及到字符串拼接,推荐使用+'