首页 > 代码库 > 前端学习(三)

前端学习(三)

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是运行在浏览器上的脚本语言。

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

前端学习(三)