黑马程序员技术交流社区

标题: 学习笔记——第5节居中的规范书写(3) [打印本页]

---

作者: Zy_阿匠    时间: 2017-1-8 17:08
标题: 学习笔记——第5节居中的规范书写(3)


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

---

作者: 浮世散人    时间: 2017-1-9 11:50
这个总结的很不错，有图有代码

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2