Web前端学习总结第二周

Web前端学习总结第二周

上周学完了HTML和CSS的部分内容，也是让我瞧见了Web前端的强大之处，本周也继续学习把CSS差不多学完了和Javascript的初步了解，下面是知识总结。

CSS

盒子模型

1.盒子的外边距

外边距用margin来表示，它可以控制各个盒子之间的距离，具体熟悉和内边距大同小异。

属性	作用
margin-top	盒子的上外边距
margin-left	盒子的左外边距
margin-right	盒子的右外边距
margin-bottom	盒子的下外边距

简写方法为margin:上，右，下，左；，遵循逆时针顺序。
用margin也可以实现盒子的居中，代码如下：

margin:0 auto;

为了方便我们设计网页，我们一般会把默认的内外边距都给删除，代码如下：

* {
	padding: 0;
	margin: 0;
}

外边距的合并

两个盒子之间的外边框是会合并的，这可能会影响我们设计网页，这种情况我们往往是可以避免的，只要控制好两个盒子的边距，就不会出太大的问题，但是如果是嵌套式的盒子就无法避免了，解决方案是我们需要给外层盒子加一个边框或者加一个上内边距，才可以是里面的盒子有自己的外边距。

2、计算盒子的尺寸

在设计网页的时候我们往往会给盒子定义宽度、高度、内边距、外边距和边框，但是这些数据是会叠加的，并不会等于你刚开始定义的宽度和高度，所以我们需要学会计算盒子的尺寸。

（1） 外盒尺寸计算

空间高度= content height + padding + border + margin
空间宽度= content width + padding + border + margin

（2） 内盒尺寸计算

Height = content height + padding + border + margin
Width = content width + padding + border + margin

3、浮动（float)

浮动就是漂浮的作用，浮动刚开始是用来做文字环绕效果的，后来浮动就用来制作盒子的平铺效果，语法如下：

属性值	描述
right	右浮动
left	左浮动
none	默认不浮动

浮动的使用方法：
浮动首先创建包含块的概念，就是说浮动元素总要找他最近的父级元素对齐，但是不会超过内边框的范围。
注意：
浮动元素的排列位置，跟上一个元素有关系。如果上一个元素有浮动，则该元素的顶部会和上一元素顶部对齐；如果上一个元素是标准流，则该元素的顶部会和上一元素低部对齐。

JavaScript

本周学习了一门新的语言——JavaScript，这是一种运行在客户端的脚本语言。脚本语言就是不需要编译，运行过程中由js解释器来进行解释执行的。

一、JavaScript基本初识

JavaScript的应用非常广泛，比如表单动态监测，网页特效，服务器开发和游戏开发都有着重要作用。

JavaScript的组成

组成部分	作用
ECMAScript	JavaScript的基本语法
DOM(文档对象模型）	对页面上的元素进行操作
BOM(浏览器对象模型)	可以和浏览器窗口进行互动

JavaScript和CSS一样分为三种写法分别是行内、内嵌和外部。

JavaScript的输入与输出

方法	说明
alert(msg)	浏览器弹出警示框
console.log(msg)	浏览器控制台打印输出信息
prompt(info)	浏览器弹出输入框，用户可以输入

二、变量

变量是用于存放数据的容器，它可以保存一些需要的数据，方便我们以后使用里面的数据。变量用var来定义，使用变量的时候，一定要先声明变量，后赋值，声明变量的本质是申请存储空间。JavaScript中的变量，和其他语言中的变量不同，因为他没有固定的数据类型，完全依靠你所赋值的内容来决定，所以他的类型是可以通过赋值来改变的。
对于变量需要注意的是命名，出来英文和数字，只能用$和_来命名，其他都是不合法的，还有开头不能用数字，不能用关键字命名。