组成：
首先，我们需要了解下web前端由哪些组成：

1. 页面结构：html、Servlet、jsp（Java Server Page）=html+java

2. 页面样式：css（Cascading Style Sheet，层叠样式表）

3. 页面交互：js（javascript）、jQuery、AJAX

一、CSS的优先级和继承：

1.1 CSS的优先级：

行内样式>ID选择器>类选择器>标签选择器。

就近原则。

1.2 CSS继承：

原则：

1、父元素的样式会在子元素中生效，但是如果子元素也定义了同样的样式，遵循就近原则，以子元素设定的为准。

2、子元素设置的样式不会对父元素的样式产生影响。

二、盒子模型：

2.1 内边距padding：

padding的取值：

给定一个值：四个内边距值都是该值。

给定两个值：按照上/下、右/左取值。

给定三个值：按照上、右/左、下取值。

给定四个值：按照上、右、下、左取值。（顺时针）

padding-top

padding-right

padding-bottom

padding-left

2.2 边框border：

边框的方向：

border

border-top

border-right

border-bottom

border-left

边框的特征：

border-style：边框的样式

border-width：边框的宽度

border-color：边框颜色

边框的方向和特征：

border-top-style

border-top-width

border-top-color

2.3 外边距margin：

margin：

给定一个值：四个方向的边距全部是该值；

给定两个值：上/下、右/左；

给定三个值：上、右/左、下；

给定四个值：上、右、下、左。

margin-top

margin-right

margin-bottom

marginleft

2.4 盒子模型的大小问题：

三. js特点：

3.1 概述：

javascript，java脚本，跟java没有关系。

NetScape公司。

3.2 特点：

1、脚本语言，依赖于html/jsp/asp页面，可以在浏览器中运行。

2、属于解释性语言，不需要编译。

3、跨平台，与平台无关。

4、基于对象的。

3.3 js和java的区别：

1、js是基于对象的，java是面向对象。

2、js属于Netscape公司，java属于sun公司。

3、java语言先编译后解释，js不需要编译。

4、java的语法规则比较强，js语法比较弱。

四、js的语法：

4.1 js的引入：

内部引入：直接写在html/jsp页面中，可以写在head内，也可写在body内。

2、外部引入：把js代码单独写在js文件中，在html/jsp的head（body）中引入js文件。

4.2 数据类型：

4.2.1 基本类型：

Number：数字类型

Boolean：布尔类型

String：字符串类型，用””定界，如”2017-08-02”

4.2.2 对象类型：

数组：

对象：Math

自定义对象：

Date：使用’’定界

4.2.3 特殊类型：

null

undefined

4.3 js的运算符：

4.3.1 算术运算符：

运算符	描述	例子	结果
+	加
-	减
*	乘
/	除
%	余
++	自增
--	自减

++i和i++：

--i和i--：

4.3.2 赋值运算符：

4.3.3 比较运算符：

==：

===：全等（类型和值）、强等

“23”==23 true

“23”===23 false

4.3.4 位运算符：

！

4.3.5 逻辑运算符：

&&：短路与

||：短路或

4.4 js函数：

1、显示函数:

2、隐式函数（匿名函数）：

4.5 js表达式：

4.5.1 if-else 表达式：

案例1：用户登录时“账号为空”验证：

案例2：if与三目表达式的互换

4.5.2 switch-case表达式

If表达式集合switch表达式的使用选择：

If表达式——特定的范围

Switch——有限的、固定值

4.5.3 for表达式

4.5.4 while/do-while表达式

While：先判断后执行

Do-while：先执行后判断

4.5.5 with表达式：

4.6 js事件：

4.6.1 onchange事件：

当输入框的内容发生变化、失去焦点时触发动作。

4.6.2 onclick事件：

可以使用js动态修改css样式：

使用js给html元素动态绑定事件：

4.6.3 onfocus事件：

4.6.4 onsubmit和onreset事件：

onmouseover：当鼠标从指定的元素上经过时触发；

onmouseout：当鼠标从指定的元素上移除时触发；

onmousedown 和 onmouseup：当鼠标按下（或放开）该元素时触发；

onload：当页面加载完毕后会自动触发，一般放在body中，作为body的属性使用。

CSS基础和js基础相关推荐

JS一起学01：css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序
一.html/css 1. 什么是盒子模型? padding+border+width/height 2. float 浮动 (1)浮动的特性脱离文档流行内 ...
【笔记】查漏补缺-H5+CSS3+JS基础：JS基础
一.数据类型 1. 简单数据类型(基本数据类型) Number:数字型(整型+浮点型): 范围:Number.MIN_VALUE - Number.MAX_VALUE 特殊值:Infinity无穷大, ...
前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
构建node.js基础镜像_我如何使用Node.js构建工作抓取网络应用
构建node.js基础镜像 by Oyetoke Tobi Emmanuel 由Oyetoke Tobi Emmanuel 我如何使用Node.js构建工作抓取网络应用 (How I built a ...
JS基础知识学习（一）
JS基础知识前端开发常用的浏览器谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
JS基础篇--HTML DOM classList 属性
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加 ...
【译】一份通俗易懂的React.js基础指南-2018
原文链接:tylermcginnis.com/reactjs-tut- by Tyler McGinnis 这篇文章最初发表于2015年1月,但最近被更新为React 16.3以及它所包含的所有优点. ...
05 JS基础DOM
05 JS基础DOM JS的window对象定时器: window下一些方法: <script>弹出window.alert('hello')返回布尔值var ret = window.c ...
前端面试题目汇总摘录（JS 基础篇）
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...

CSS基础和js基础