1  复习昨天知识

1.1 浮动

　　  特点:

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

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

　　　　>块级元素在一行上显示

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

　　   作用:

　　　　>解决文字图片环绕问题

　　　　>制作网页导航栏

　　　　>网页布局

　　　清除浮动:

　　　　清除浮动的影响

　　

定位的分类:

1.2定位

　　静态定位(static)

　　  绝对定位(absolute)看脸型

　　　　>绝对定位绝对脱标

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

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

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

　　　相对定位(relative)自恋型

　　　　>看自己的位置设置定位

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

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

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

　　　固定定位(fixed)

　　　　>固定定位也脱标了,不占位置

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

2.新知识:

2.1 盒子居中

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

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

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

　　往回走自己宽度的一半

定位的盒子设置居中显示案例:

说明: 父盒子设置了相对定位,子盒子设置了相对定位如何让子盒子居中

.one{

height: 300px;

width: 577px;

border: 1px solid green;

margin: 0 auto;

/*相对定位*/

position: relative;

}

.two{

width: 100px;

height: 100px;

border: 1px solid yellowgreen;

/*设置绝对定位*/

position: absolute;

left: 50%;

margin-left: -50px;

/*bottom: 0;*/

}

2.3标签包含规范:

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

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

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

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

2.4规避脱标流

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

　　标准流不能解决浮动

　　浮动不能解决用定位

　　使用margin-left/margin-right 取值为auto 可以自动将盒子冲到

另一边

2.5 图片与文字垂直对齐

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

vertical-align:middle 垂直对齐

vertical-align与inline-block更搭配

图片与文字垂直对齐案例:

代码:

.one{

width: 300px;

height: 200px;

border: 1px solid red;

}

.one img{

margin-top: 10px;

vertical-align: middle;

}

说明: 给图片设置:vertical-align: middle;

案例: tab切换

效果图: 

说明: 点击每个链接切换不同的盒子

代码:

.box{

width: 300px;

height: 300px;

border: 1px solid red;

overflow: hidden;

}

#div1,#div2,#div3{

width: 300px;

height: 300px;

}

#div1{

background-color: palegreen;

}

#div2{

background-color: red;

}

#div3{

background-color: yellowgreen;

}

</style>

</head>

<body>

<a href="#div1">div1</a>

<a href="#div2">div2</a>

<a href="#div3">div3</a>

<div class="box">

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

</div>

2.6 CSS可见性

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

display: none　　直接将元素隐藏(将元素隐藏后不占位置)

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

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

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

或者

a{

width: 200px;

height: 200px;

display: inline-block;

background-color: pink;

/*设置字的位置 为负值,目的不想让显示*/

text-indent:-60px ;

}

</style>

</head>

<body>

<a href="#">搜狐</a>

2.8 精灵图的使用

浏览器中的坐标系

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

　　精灵图的使用

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

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

　　>测量精灵图中的元素的坐标使用矩形选择器

或者 使用快捷键  字母: k

精灵图的使用: 代码:

.box{

width: 85px;

height: 32px;

background-image: url(img/qq.png);

background-position: -601px -160px;

margin: 400px 300px;

}

</style>

</head>

<body>

<div class="box">

</div>

2.9制作精灵图步骤

　　选择透明文档

2.10  滑动门(次重点)

滑动门案例:

实现以下效果: 

代码:

div{

float: left;

}

.left{

width: 10px;

height: 100px;

background-image: url(img/l.png);

}

.middle{

height: 100px;

background-image: url(img/m.png);

/*设置文字垂直居中*/

line-height: 100px;

}

.right{

width: 10px;

height: 100px;

background-image: url(img/r.png);

}

</style>

</head>

<body>

<div class="left"></div>

<div class="middle">你好你好</div>

<div class="right"></div>

比较复杂一点的滑动门案例

代码:

li{

/*li的初始化*/

list-style: none;

float: left;

}

li a{

height: 35px;

background-image: url(img/bg_r1_c1.png);

background-repeat: no-repeat;

padding-left: 7px;

display: inline-block;

}

li span{

height: 35px;

background-image: url(img/bg_r1_c2.png);

background-repeat: no-repeat;

background-position: right;

display: inline-block;

padding-right: 22px;

/*padding-top: 10px;*/

}

</style>

</head>

<body>

<ul>

<li>

<a href="#">

<span id="">fghjkhg</span>

</a>

</li>

<li>

<a href="#">

<span id="">fghjkhg</span>

</a>

</li>

<li>

<a href="#">

<span id="">fghjkhg</span>

</a>

</li>

</ul>

</body>

李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例相关推荐

  1. 李洪强和你一起学习前端之面试题

    前言 本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典.很有代表性.上面没有答案,我就整理了一下,从网上找了一些相关问题的答案.里面有一部分问题的答案我也没有进行考证 ...

  2. 李洪强和你一起学习前端之(8)浮动,网页布局,定位

    2.1标准流(文档流) 块级元素独占一行显示,标准流的显示方式 让两个盒子在一行显示 <!DOCTYPE html> <html> <head> <meta ...

  3. 李洪强经典面试题146-网络

    李洪强经典面试题146-网络   网络 http请求方式? 通常,HTTP的请求方式有3种,分别是:POST.GET.HEAD.POST和GET方法是用于数据发送的. POST:它将要发送的数据单独放 ...

  4. 李洪强iOS经典面试题37-解释垃圾回收的原理

    李洪强iOS经典面试题37-解释垃圾回收的原理 问题 我们知道,Android 手机通常使用 Java 来开发,而 Java 是使用垃圾回收这种内存管理方式. 那么,ARC 和垃圾回收对比,有什么优点 ...

  5. 李洪强iOS开发本人集成环信的经验总结_01环信SDK的导入

    李洪强iOS开发本人集成环信的经验总结_01环信SDK的导入 01 - 直接在项目中导入SDK和一些静态库 这个时候,没有错误的编译没有错误的话,就说明SDK已经配置成功 还有一种方法是用cocoap ...

  6. 李洪强iOS经典面试题144-数据存储

    李洪强iOS经典面试题144-数据存储   数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...

  7. 李洪强iOS经典面试题153- 补充

    李洪强iOS经典面试题153- 补充   补充 有空就来解决几个问题,已经懒癌晚期没救了... UML 统一建模语言(UML,UnifiedModelingLanguage)是面向对象软件的标准化建模 ...

  8. 和李洪强一起学设计01 PS第一天

    和李洪强一起学设计01 PS第一天

  9. 李洪强iOS开发之RunLoop的原理和核心机制

    李洪强iOS开发之RunLoop的原理和核心机制 搞iOS之后一直没有深入研究过RunLoop,非常的惭愧.刚好前一阵子负责性能优化项目,需要利用RunLoop做性能优化和性能检测,趁着这个机会深入研 ...

最新文章

  1. 固定table标题头、标题列（兼容多种浏览器）
  2. 华为精益敏捷专家：DevOps转型中的那些坑
  3. 在node.js中一次读取一行文件？
  4. java引用其他类的数据头文件_Java 实现数据表与简单Java类映射转换
  5. 《Go语言圣经》学习笔记 第二章 程序结构
  6. GestureDetector学习之左右滑动，上下滑动屏幕切换页面
  7. Java中多实现接口的一个好处
  8. ‘catkin_make‘ is currently not installed问题修复
  9. Pixhawk-姿态解算源码注释
  10. JS实现鼠标点击特效，五颜六色的小球绽放
  11. Mocking Techniques for Go
  12. Druid (大数据实时统计分析数据存储)
  13. 2021年中国皮革行业市场现状分析，PU合成革趋势明显，汽车皮革是关键需求「图」
  14. Rootkit的技术发展史
  15. 支付宝支付申请流程,配置过程
  16. Fork/Join工作原理解析
  17. BTT控制系统六自由度仿真
  18. SQL数据库基础语法总结
  19. 主成分分析（PCA）的主要使用场景
  20. LGPL许可协议具体限制了什么？

热门文章

  1. 动态绑定dropdownlist --开始拣.NET
  2. 现有系统如何集成Consul服务发现
  3. linux 取出本机IP
  4. select、poll与epoll的优缺点
  5. android查看数据库
  6. Q95：纹理映射（Texture Mapping）（2）——圆柱面
  7. 问题五十四：怎么用ray tracing画参数方程表示的曲面（2）—— bezier surface
  8. linux 递归查看文件个数,Linux下递归读取文件数量
  9. mysql wait_timeout=_Mysql的wait_timeout解决_MySQL
  10. 大数据要学javaweb吗_大数据是私有财产吗？