首页 > 代码库 > 前端学习(三)
前端学习(三)
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是运行在浏览器上的脚本语言。
前台属于浏览器,后台指的事服务器。
前端学习(三)