css盒子模型、定位于JavaScript简介

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中涉及到字符串拼接，推荐使用+'