1.清楚浮动

  父盒子高度为0,子盒子全部定位、浮动。子盒子不会撑开父盒子,下面的盒子会顶上来

  清楚方法:

    clear:both;

    overflow:hidden;

    加空标签

    单/双

//双标签
.clearfix:berore , .clearfix:after {
content:".";
didsplay:table;
}
.fixclear:after{
clear:both;
}
.fixclear{
*zoom:;
}
//单标签
.fixclear:after{
content:"0";
display:block;
height:;
ling-height:;
visibility:hidden;
clear:both;
}
.fixclear{
*zoom:;//兼容IE
}

2.隐藏盒子的物种方法

  1.display:none;  隐藏盒子,不占位置

  2.overflow:hidden;  隐藏溢出部分

  3.visibility:hidden:  隐藏盒子,占位置

  4.opacity:0;  隐藏盒子,占位置(设置透明之后,里面包含的内容也透明)

  5.position-left/top:-999em;  隐藏盒子,不占位置

3.有高度的盒子,子盒子高度超过父盒子高度,父盒子会被撑破;

4.没有高度的盒子,子盒子会撑开父盒子

5.浮动的盒子遮挡不住标准流的文字

6.cursor:pointer;模拟鼠标小手

7.dotted  点线  dashed  虚线

8.层级

  浮动的比标准的高。定位的比浮动的高

  z-index为负值的比标准流的盒子层级低

    

      

前端知识复习一(css)的更多相关文章

  1. 前端知识复习: JS选中变色

    前端知识复习:JS选中变色 上篇文章 :前端知识复习:Html DIV 图文混排(文字放在图片下边) Js选中图片效果 <!DOCTYPE html> <html xmlns=&qu ...

  2. 前端知识复习:Html DIV 图文混排(文字放在图片下边)

    Html知识复习之图文混排 练习练习基础 先上效果图: 废话不多说,直接贴代码: <!DOCTYPE html> <html xmlns="http://www.w3.or ...

  3. 前端知识体系之CSS及其预处理器SASS/LESS

    如果你是个前端设计师,很多时候我们都在写CSS,CSS是定义页面样式的脚本,并不是一种编程语言,只是一行行单纯的描述页面元素的样子,如果对英语熟练的话,它像说话一样简单,这里举个简单的例子: body ...

  4. (原)前端知识杂烩(css系列)

    更新于 20160217 1. css hack .pad{ padding:17px 0 0 17px; /* 普通写法 */ *padding:17px 0 0 17px; /* *为IE7 *+ ...

  5. 前端知识复习二(js)

    JS的作用 页面特效 移动端 异步交互(AJAX) 服务器端开发(node.js) 由ECMAScript和dom(操作网页上的api).bom组成(操作浏览器的部分api) 输出到页面内容 cons ...

  6. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  7. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  8. Web 前端之HTML和CSS

    Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...

  9. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

  1. Openjudge-计算概论(A)-完美立方

    描述: a的立方 = b的立方 + c的立方 + d的立方为完美立方等式.例如12的立方 = 6的立方 + 8的立方 + 10的立方 .编写一个程序,对任给的正整数N (N≤100),寻找所有的四元组 ...

  2. 【FBA】SharePoint 2013自定义Providers在基于表单的身份验证(Forms-Based-Authentication)中的应用

    //http://www.cnblogs.com/OceanEyes/p/custom-provider-in-sharepoint-2013-fba-authentication.html 由于项目 ...

  3. ural 1352. Mersenne Primes

    1352. Mersenne Primes Time limit: 1.0 secondMemory limit: 64 MB Definition. If the number 2N−1 is pr ...

  4. redis持久化探究

    redis支持两种持久化方式,一种是RDB方式,另一种是AOF方式.redis3.0windows版本默认关闭AOF(appendonly no),而开启RDB,当达到一定条件时,redis就会将内存 ...

  5. Android自动测试之Monkey工具

    Monkey工具 前言: 最 近开始研究Android自动化测试方法,对其中的一些工具.方法和框架做了一些简单的整理,其中包括android测试框架.CTS.Monkey. Monkeyrunner. ...

  6. js 放置 cookie、获取 cookie、删除 cookie

    这块TM的删不掉 代码如下: // 自定义 js cookies var mycookie = { // 放置 set : function(name,value){ var Days = 1; // ...

  7. VBS控制鼠标移动和点击(附源代码下载)

    森思:想用vbs来控制鼠标的移动和点击,虽然按键精灵可以做到,但做这么简单的事情不想启动那么大一个程序,所以自己用VC写了一个小程序,可以让VBS来控制鼠标移动和点击. 用法: 移动鼠标到桌面坐标20 ...

  8. Win7 Cygwin环境试验Nutch tutorial遇到的异常解决方法

    安装tutorial的步骤安装Nutch,当执行下面这条命令时出现异常 bin/nutch crawl urls - -topN Injector: starting at -- :: Injecto ...

  9. 美版MC 使用

    备份 C:\ProgramData\TS Support\MultiCharts .NET\StudyServer\Techniques\CS pledit 无法打开 解决方法 regedit hke ...

  10. html5结合flash实现视频文件在所有主流浏览器兼容播放

    来源:http://blog.csdn.net/freshlover/article/details/7535785/ 由于html5的出现,让网页中的视频.音频有了更加便捷的实现方式.但是video ...