Web前端学习总结第二周

it2023-07-01  77

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的组成

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

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

JavaScript的输入与输出

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

二、变量

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

最新回复(0)