李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
2017-03-23 11:42
615 查看
今天是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 滑动门 (次重点)
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 滑动门 (次重点)
相关文章推荐
- 李洪强和你一起学习前端之(10)滑动门案例讲解,新闻列表
- 李洪强和你一起学习前端之(3)Css基础和选择器
- 李洪强和你一起学习前端之(6)浮动 布局 定位
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
- 李洪强和你一起学习前端之(11)梅兰商贸案例
- 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类
- 李洪强和你一起学习前端之(8)CSS复习
- 李洪强和你一起学习前端之(8)浮动,网页布局,定位
- web前端学习笔记(CSS盒子的定位)
- web前端学习笔记(CSS盒子的定位)
- 李洪强和你一起学习前端之(2)表格、表单、标签语义化
- 李洪强和你一起学习前端之(1)Html基础
- 李洪强和你一起学习前端之(7)复习
- 李洪强和你一起学习前端之面试题
- 李洪强和你一起学习前端之(4)HTML5介绍
- Android程序员学WEB前端(8)-CSS(3)-盒子内联块级定位浮动-Sublime
- Web前端学习第十二天·fighting_使用CSS布局和定位(二)
- 从零开始前端学习[3]:css+div盒子模型
- Web前端学习第十一天·fighting_使用CSS布局和定位(一)
- 前端学习 -- Css -- 盒子模式