前端学习笔记

今日内容概要

• 盒子模型
• 浮动布局
• 溢出属性
• 定位
• z-index
• 手动搭建页面练习
• JavaScript简介
• JS变量与常量
• JS数据类型之数值类型
• JS数据类型之字符串类型

今日内容详细

盒子模型

所有的标签其实都有一个盒子模型，学习盒子模型可以将标签看成是一个个快递盒。

盒子模型	标签	快递盒
外边距(margin)	标签之间的距离	两个快递盒之间的距离
边框(border)	标签的边框	快递盒的厚度
内边距，内填充(padding)	内部文本与边框的距离	内部物品与盒子内壁的距离
内容(content)	标签内部的内容	内部物品自身的大小

ps:两个标签之间的距离，有时候可以用margin也可以用padding。

body标签默认自带8px的margin值 我们在编写页面之前应该去掉。

body{
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

margin不同个数的参数对应修改的位置

参数个数	对应位置
margin: 0;	简写形式，作用于上下左右
margin: 10px 10px;	(上下) (左右)
margin: 10px 20px 30px;	上 (左右) 下
margin: 10px 20px 30px 40px;	上 右 下 左

盒子模型页面布局，想要内部标签居中展示，可以使用固定搭配。

body {margin: 0 auto;}   仅限于水平方向

ps：padding使用方式与margin一致

浮动布局

浮动的作用

div {float: left/right;}

浮动是所有网站页面布局必备的，可以将块儿级标签浮动起来脱离正常的文档流。是多个块儿级标签可以在一行显示(全部飘在了空中)。

浮动的影响

1.浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)

2.浮动的元素有时候也会遮挡住底下的区域，如果区域内有文本内容，那么浏览器会遵循文本内容优先展示的原则，会想法设法让文本展示出来。

解决浮动造成的影响

方法1：直接写div然后写对应的长宽。

方法2：写div然后添加clear属性，避免去查找长宽。

div {clear: left;}  原理就是在左侧不允许浮动元素，然后元素就会水平向下避开上方的浮动元素变相的撑起了塌陷

方法3：万能公式(固定搭配 记住就可以)

.clearfix:after {
    content: '';
    clear: both;
    display: block;
}
以后写网页，提前写好上面的代码,然后哪个标签塌陷了就给谁添加上clearfix类名即可。

溢出属性

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

文本内容超出了标签的最大范围。就类似于下面这种情况。

解决方法1：{overflow: hidden;},直接隐藏超出的文本内容。

解决方法2:{overflow: auto\scroll;} 提供滚动条查看

实战案例：制作圆形头像

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

定位

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

定位操作

relative:相对于标签原来的位置做定位

<div style="width: 100px;
            height: 100px;
            background: royalblue">
</div>
<div style="width: 100px;
            height: 100px;
            background: mediumvioletred;
            position: relative;
            left: 100px;
            top: 100px">
</div>

absolute:相对于已经定位过的父标签做定位，如果没有父标签或者父标签没有定位，则以body为准，相当于变成了相对定位。

<div style="width: 100px;
            height: 100px;
            background: royalblue">
</div>
<div style="width: 100px;
            height: 100px;
            background: mediumvioletred;
            position: absolute;
            left: 107px;
            top: 107px">
</div>

fixed:相对于浏览器窗口做定位，下拉还是上划都不会改变位置只要窗口不变。

<div style="width: 100px;
            height: 100px;
            background: royalblue">
            当前标记位置
</div>
<div style="width: 100px;
            height: 100px;
            background: mediumvioletred;
            position: fixed;
            left: 107px;
            top: 107px">

z-index

前端界面其实是一个三维坐标系，z轴指向用户。

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

调整颜色的rgba里面的a只能调整颜色的透明度。

opacity可以调整文本和颜色的透明度。

手动搭建页面练习

1.先分析页面结构
    然后使用div和span构建出基本骨架
2.给标签起id和class便于后续查找并修改样式
    id与class的命名也要做到见名知意
3.正儿八经的写不同的语言应该存储不同的文件
    html文件、css文件、js文件

JavaScript简介

JavaScript是一种专为与网页交互而设计的脚本语言，简称JS。是一门前端的编程语言。

JavaScript是可插入HTML页面的编程代码。

JavaScript插入HTML页面后，可由所有的现代浏览器执行。

在哪里编写js？可以在pycharm提供的js文件或者在浏览器提供的js环境(学习阶段推荐)。

在html标签中可以直接在head里的script标签里编写js，或者通过引入外部的js文件。

Script标签内写代码
<script>
  /*在这里写你的JS代码*/
</script>

引入额外的JS文件
<script src="myscript.js"></script>

变量与注释

注释语法

// 单行注释

/*多行注释*/

结束符号:分号结束

console.log('hello world');

变量声明:在js中定义变量需要使用关键字声明

var name = 'jason'  var声明都是全局变量
let name = 'jason'  let可以声明局部变量
const pi = 3.14  常量声明

数据类型

在js中查看数据类型的方式是typeof。

JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

数值类型-Number

js中的数值类型相当于python里面的整型int和浮点型float。

常用方法

var a=123
var b=123.1
typeof a  // 'number'
typeof b  // 'number'
parseInt(a)  // 123  
parseInt(b)  // 123  取整数部分
parseFloat(b)  // 123.1  取浮点数
parseInt('abc')  // NaN  NaN(not a number)当前数据不是数字

字符类型-String

js中的字符串类型相当于python里面的字符串str。

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

功能	方法
字符的拼接	+
统计长度	.length
移除空白(不能指定)	.trim()、.trimLeft()、.trimRight()
切片操作	.substring(start,end)，.slice(start,end)前者不支持负数索引后者支持
大小写转换	.toLowerCase()、.toUpperCase()
切割字符串	.split()
返回第n个字符	.charAt(n)

切片操作演示

var s='abcdef'
s.substring(1,3)  // 'bc'
s.slice(-3,-1)  // 'de'

切割字符串演示:

第一个参数：字符串或正则表达式，从该参数指定的地方分割

第二个参数：该参数可指定返回的数组的最大长度，如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

var s='abcdef'
s.split('',3)  // (3) ['a', 'b', 'c']
s.split('')  // ['a', 'b', 'c', 'd', 'e', 'f']
s.split('b',3)  // (2) ['a', 'cdef']