李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例

今天是2017年3月23日

1 复习昨天知识

1.1浮动

　　Float:left | right

　　特点:

　　->浮动的元素不占位置(脱标)

　　->可以将行内元素转化为行内块元素

　　->块级元素在一行上显示

　　->设置了浮动的元素,影响其后面的元素

　　作用:

　　解决了文字图片环绕问题

　　制作网页导航栏

　　网页布局

　　清除浮动

　　　　清除浮动的影响

　　　

1.2定位

　　静态定位(static)

　　绝对定位(absolute)看脸型

　　　　绝对定位绝对脱标(不占位置)

　　　　行内元素转化为行内块元素

　　　　如果父盒子没有设置定位,以浏览器左上角为基准设置定位

　　　　如果父盒子设置定位,以父容器左上角为基准设置定位

　　　　

相对定位(relative)自恋型

　　看自己的位置设置定位

　　相对定位没有脱标,占位置

　　子绝父相(子元素设置绝对定位,父元素设置相对定位)

　　　　一般情况下会使用子绝父相

固定定位(fixed)

　　固定定位也脱标了(不占位置)

　　行内元素转化为行内块元素

2 新知识

2.1 盒子居中

　　Margin: 0 auto　　　只能让标准流下的盒子居中显示

2.2定位的盒子居中显示(重要)

　　先走父盒子宽度的一半:  left:50 %

　　往回走自己宽度的一半

2.3标签包含规范

div可以包含任何标准流下的元素

p标签中不能包含div和标题标签及列表标签

标题标签可以包含其他标签

行内元素最好不要包含其他标签

2.4规避脱标流

网页布局过程中,能用表流布局就用标准流布局

标准流不能解决用浮动

浮动不能解决用定位

使用 margin-left | margin-right 取值为auto 可以将盒子自动冲到另一边

2.5 图片与文字垂直对齐

　　每一种 inlne-block 元素 都有一个默认的vertical-align:baseline

　　vertical-align:moddle  垂直对齐

　　vertical-align与inline-block更搭配

2.6　　CSS可见性

　　overflow: hidden　　将超出部分进行隐藏

　　display: none　　　　直接将元素隐藏

　　display:block              将元素显示(与js配合更搭)

　　visibility: hidden　　 将元素隐藏

　　display: none　　　　将元素隐藏后不占位置

　　visibility: hidden         将元素隐藏后占原来的位置

2.7  内容移除文字 (logo优化)

　　

或者

2.8精灵图使用 (重点)

浏览器中的坐标系

　　圆点以右为正方向,圆点一下为正

　　css精灵是一种处理网页背景图像的方式精灵兔也是一种背景图片

　　精灵图的使用

使用fw一定要用打开的方式打开精灵图

　　使用精灵图作为背景图片的时候,常与background-position配合使用

　　测量精灵图中的元素的坐标使用举行选择器

或者使用快捷键 字母: k

2.9制作精灵图步骤

选择透明文档

2.10 滑动门　　(次重点)