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. DOS 命令批量删除文件及相关批处理命令详解

    del X:\*.* /f /s /q /a 递归强制静默删除X盘及其所有子目录下的所有文件 /f 表示强制删除文件 /s表示子目录都要删除该文件 /q表示无声,不提示 /a根据属性选择要删除的文件 ...

  2. C++著名程序库的比较和学习经验(STL.Boost.GUI.XML.网络等等)

    1.C++各大有名库的介绍--C++标准库 2.C++各大有名库的介绍--准标准库Boost 3.C++各大有名库的介绍--GUI 4.C++各大有名库的介绍--网络通信 5.C++各大有名库的介绍- ...

  3. mnesia

    1.模式创建 mnesia:create_schema([node()|nodes()]).集群的节点之间创建模式 2.启动和停止 application:start(mnesia). applica ...

  4. 观后感-MySQL索引类型 btree索引和hash索引的区别

    http://www.cnblogs.com/osfipin/p/4943229.html.http://www.2cto.com/database/201411/351106.html-文章地址 首 ...

  5. div盒子水平垂直居中的方法

    这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...

  6. HDU 5807 Keep In Touch

    加维降复杂度 #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #inc ...

  7. ios用xib实现三等分以及多等分思路

    Auto Layout 的本质原理 Auto Layout 的本质是用一些约束条件对元素进行约束,从而让他们显示在我们想让他们显示的地方. 约束主要分为以下几种(欢迎补充): 相对于父 view 的约 ...

  8. linux下base命令

    查看base那么命令的帮助: root@OpenWrt:/# basename --help BusyBox v1.22.1 (2015-09-15 16:38:30 CST) multi-call ...

  9. HDU1860:统计字符

    Problem Description 统计一个给定字符串中指定的字符出现的次数   Input 测试输入包含若干测试用例,每个测试用例包含2行,第1行为一个长度不超过5的字符串,第2行为一个长度不超 ...

  10. hdu 2503 a/b + c/d

    Problem Description 给你2个分数,求他们的和,并要求和为最简形式.   Input 输入首先包含一个正整数T(T<=1000),表示有T组测试数据,然后是T行数据,每行包含四 ...