本文主要是介绍前端3_css，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

盒子模型

浮动布局

溢出属性

定位

z-index

javaScripts 简介

js变量与常量

js数据类型之数值类型

js数据类型之字符串类型

盒子模型

所有的标签都可以看成一个快递盒
1.两个快递盒之间的距离	 标签之间的距离	 		 外边距(margin)
2.快递盒的厚度	标签的边框				 	     边框（border）
3.盒子内物体距离盒子内壁	内部文本与边框的距离			 内边距(padding)
4.物体自身的大小		标签内部的内容					内容（content）

掌握的操作
	margin-top:	20px；
	margin-left: 100px;
	margin-right: 100px;
	margin-bottom: 100px;

body 标签自带&px的外边距
	margin：0;			简写形式	作用于上下左右
	margin:	10px 20px;  上下	左右
	margin：10px	20px	30px;	上 左右	下
	margin:	10px 20px	30px	40px；上 右 下 左
margin 还可以让内部标签居中展示
	margin:100px auto	仅限于水平方向
	
padding使用方式与margin一致

浮动布局

float：left\right 页面布局必不可少的操作

浮动会造成父标签塌陷，这是一个不好的现象，因为会引起歧义
解决浮动造成的父标签塌陷

.clearfix:after {
    		content:'';
    		display:black;
    		clear：both；
}
提前写好上述的css操作，遇到标签塌陷就给标签加clearfix类值即可
"""浏览器针对文本是优先展示的（浮动的元素如果遮挡就会想办法展示） """

溢出属性

定位

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

z-index

浏览器界面其实是一个三维坐标系 z轴指向用户

纯手搭建页面思路

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

JavaScripts简介

JavaScripts 是一种浏览器语言，通常简称为js

ECMAScript和JavaScript的关系

1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

Javascripts特点

javaScript 是一种脚本编程语言，是一种解释性语言
javascript 的语法结构与C++,JAVA十分类似
javaScripts 是弱类型轻量型语言
JavaScripts 基于对象的语言
javascripts 具有跨平台性
javascripts 具有安全性与简单性

javascripts组成

1.核心 ECMAScripts
2.文档对象模型（DOM）Document object model (整合js，css,html)
3.浏览器对象模型（BOM） Broswer object model (整合js和浏览器)

JS引入方式

<script>
//在这里写你的js代码
</script>

• 注释（注释是代码之母）

//单行注释
/*
这是多行注释
*/

• 结束符

javascripts中的语句要以分号（；）为结束符。

JS语言基础

1.JavaScript的变量名可以使用_,数字，字母，$组成，不能以数字开头。

2.声明变量使用var变量名；的格式来进行声明

var name = "alex";
var age = 18;

注意

变量名是区分大小写的

推荐使用驼峰式命名规则

保留字不能用做变量名

ES6新增了let命令，用于声明变量，其用法类似于var，但是所声明的变量只在let命令所在的代码中使用块内有效，例如for循环的计数器就很适用let命令

for （let i=0，i<arr.length;i++）{...}

ES6新增const用来声明常量，一旦声明，其值不能改变。

const PI =3.1415
PI //3.1415

PI =3
//TypeError: "PI" is read-only

JS数据类型

JavaScript拥有动态类型

var x； //此时x是undefined
var x = 1； //此时x是数字

数值（Number）

JavaScript 不区分整型和浮点型 就只有一种数字类型

var a = 12.34;
var b =20;
var c = 123e5;
var d = 123e-4;
-----查看类型---------
typeof a
typeof b

还有一种NaN，表示不是一个数字（NOT a Number）

常用方法：

parseint("123") //返回123
parseint("ABC") //返回NaN,NaNs属性是代表非数字值的特殊值，该属性用于指示某个值不是数字。
parseint("123.456") //返回123.456

字符串（String）

var a = "Hello"
var b = "world";
var c = a + b;
-----输出----------
console.log(c);
内置方法
1.js 中涉及到字符串拼接 推荐使用 + 

这篇关于前端3_css的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！