发表于: 2018-07-11 23:51:25
2 640
今天完成的事情:
基本完成任务6 有些细节需要修正
1 昨天做任务时,发现自己对img与background-image用法的熟悉程度并不完善,就自己遇到的问题总结一下两个标签的用法和区别
img与background-image区别;2,img中设置文字悬浮(利用float或绝对定位)
img标签的用法
语法:<img src=""alt=""/>src里面为图片来源,alt表示当图片无法显示时图片位置会出现的说明性文字,在W3C标准中为必填选项,有助于辅助阅读,另外img还具有width,height,border等style属性
特点:img属于块级内联标签有自闭合特性,通俗的说就是在网页中自己建一块位置自己占位。
backgroun-image标签的用法
语法:background-image:url();
Url中为图片来源,通过background-position,background-size等属性来控制大小位置以及重复性等。
特点:background-image既不是Inline标签也不是block标签,无法单独使用,需要放在一个父标签里面使用,本身也是一个空标签,设置好之后作为父标签的背景。
2 了解z-index与堆叠上下文
设置position且z-index不为auto,将产生堆叠上下文,堆叠规则异于常规堆叠。处在堆叠上下文的元素的z-index只在当前父元素下有效,子堆叠上下文被看做是父堆叠上下文中一个独立的模块,相邻的堆叠上下文完全没关系。意味着如果一个元素位于一个最低位置的层,那你z-index设置得再大,它也不会出现在其它层元素的上面。
- 默认的摆放规则
- ① 根元素的背景和边界
- ② 普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠
- ③ 定位元素按HTML中的出现顺序堆叠
① 根元素的背景与边框
② 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序堆叠
③ 浮动块元素
④ 常规流中的后代行内元素
⑤后代中的定位元素按照它们在 HTML 中出现的顺序堆叠
明天计划的事情:
1新标签——HTML5 audio
2半透明
3 CSS3动画
遇到的问题:
现在做任务的时候主要遇到的是细节问题
类似在引入图片是 是直接放一个img还是将图片放到背景当中
了解到的知识点越多就会发现实现一个目的有很多种方法,接下来就是要学习如何去用最合适最高效的方法去实现这个目的。
收获:
Get到的知识点
1 img与background img
2 z-index堆叠
评论