标签：浏览器 标签 前端 JavaScript js var margin 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) | 分割 |
标签：浏览器,标签,前端,JavaScript,js,var,margin,css 来源： https://www.cnblogs.com/zongliang-ya/p/16622590.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。