前端学习（三）

1、绝对定位是不占用页面的结构的。

 

固定定位：（不管页面怎么拖动，图片永远都停留在屏幕的同一位置）

Position:fixed;

 

相对定位：

Position:relative;

 

相对定位会在页面占据位置，是相对于以前的位置进行了改变。

它是“想当年”定位。

 

总结：绝对定位相当于是一种特殊的浮动。

 

一般情况下定位的使用：

 

子绝父相：

 

将来在使用定位的时候最好在父元素中使用子元素定位，并且遵守一个约定，父元素使用相对定位，子元素使用绝对定位。

 

CSS标签的嵌套关系

 

 

行内元素：span，U, b ,i，strong

块级元素：h1-h6,div，p/

 

原则：

1、行内元素可以嵌套行内元素，但是不能嵌套块级元素、

2、块级元素可以嵌套行内元素。、

少数块级元素不可以嵌套其他的块行元素；

举例：p元素就不可以嵌套div/

 

在p标签中不可以使用div。

在h标签中最好不要用div/

 

 

 

Overflow:hidden               将内容隐藏起来了、

Display:none;                     将这个容器都隐藏起来了。

Visibility：hidden;           

Display会完全隐藏原来的div是不占位置的，visibility也会隐藏原来的div但是div还是会占据着自己的位置不放，屏幕上显示的事空白。

 

 

Display:none             隐藏

 

Display:block       显示

 

 

 

图片的居中。

 

Vertical-aligan :middle  垂直居中、

 

如果在文字和图片中设置设个属性，那么他们之间的对齐方式是：以两者的中线为标准对齐。、

 

Vertical-align 不适用于会计元素，只适合行内元素

Vertical——align跟inline-block更配

 

Margin是盒子模型的一部分，但是我们在计算盒子宽度的时候，一般不将这个计算在内，为的是因为方便计算。

 

精灵图：

Background-positioin：x坐标y坐标；

 

简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）。就是说，你JavaScript学完了，Flash中的程序也会写了。

ECMAScript在2015年6月，发布了ECMAScript 6版本，语言的能力更强。但是，浏览器的厂商不能那么快的去追上这个标准。

 

 

Javascript是运行在浏览器上的脚本语言

 

 

如果要把背景图片放在精灵图里面，就必须要把这个这个图片占满一行。

 

Em是以我们当前父宽口的字体大小为单位的。

Text-indent：2em;

 

补充1：

Text-indent       一般情况用于首行缩进。

我们在使用的时候，一般是有利用SEO优化、

比如京东，在使用的时候是在一个a标签中放入一个京东的文字，在通过这个属性将文字缩进屏幕之外，然后给a标签一个背景图片，仅仅是为了添加页面的权重，这个文字不是给用户的，而是给搜索引擎看的。

 

制作圆角导航，有三个背景图片。

在导航栏里放入一个ul标签，ul标签中有三个li标签。

分别在第一个中放入左圆角图片，在第二个中平铺第二个图片，第三个li中放入最右边的图片、

 

 

Javascript是一种直译式的脚本语言，是一种动态类型，弱类型，基于原型的语言。

 

 

web前端三层来说：（三大标准）

结构层     HTML                 从语义的角度，描述页面结构

样式层     CSS            从审美的角度，美化页面样式

行为层     JavaScript         从交互的角度，提升用户体验（使用页面动起来）

 

ECMAScript  不是一门语言，他是一个协会，相当于一个联盟，他是一个标准。

Javascript是在那里运行的。

Javascrip是运行在浏览器上的脚本语言。

前台属于浏览器，后台指的事服务器。