A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 Zy_阿匠 于 2017-1-8 17:13 编辑

第1课时
1、规避脱标就是避免脱离文档流的含义。在实际开发中,能避免就一定要避免,意思就是能不用浮动,就不要用,好让元素始终是在文档的标准流中。
2、通过设置元素的margin值,让其浮动在父元素的右侧
规避脱标案例1——margin的用法:


3、规避脱标案例2——购物车



第2课时
1、Css元素的可见性
  • overfloat: hidden,隐藏超出的那部分。
  • display: none,移除某元素,不显示元素,同时也不占位置。
  • visibility:hidden,不显示元素,但是占据位置

2、元素的嵌套规则
  • 内联元素不能嵌套块级元素,它只能嵌套其他内联元素。例如,span标签不能嵌套div等块级标签。
  • 有些块级元素不能嵌套其他块级元素。例如,p标签里不能嵌套div标签,h系标签不能嵌套其他块级标签,只能嵌套行内标签
  • A标签里不能嵌套a标签和input标签,只能嵌套行内标签

3、css内容移除某个区域,常用于logo的优化
  • 利用text-indent首行缩进负数,来移除某个区域或者内容。例如:text-indent: -5000px;
  • 利用父级元素的padding 挤开盒子,并用overflow进行子元素超出部分切割。
  • 利用父级元素的margin属性拉开盒子,并用overflow进行子元素超出部分切割

切割案例:



第3课时
css精灵图,简单的说,它是一种处理网页背景图像的方式,它将一个页面所涉及到的所有背景图像都集中到一张大图上去,然后,将大图应用于网页。这样,当用户访问该网页时,浏览器只需向服务器发送一次请求,网页中的所有背景背景即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图。

1 个回复

倒序浏览
这个总结的很不错,有图有代码
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马