HTML5教程

前端3_css

本文主要是介绍前端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类值即可
"""浏览器针对文本是优先展示的(浮动的元素如果遮挡就会想办法展示) """

溢出属性

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

定位

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 中涉及到字符串拼接 推荐使用 + 
内置方法 说明
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边空白
.trimRight() 移除右边的空白
.charAt(n) 返回第N个字符
.concat(value,...) 拼接
.indexOf(substring,start) 子序列位置
.substring(from,to) 根据索引获取子序列
.slice(start,end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimter,limit) 分割

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