学习了张鑫旭大神的浮动教程,记一下笔记。

浮动最开始是为了文字环绕图片效果。

浮动会破坏父元素的包裹。

清除浮动:在父元素加上clearfix(after不兼容ie6 7,zoom为ie6 7下方法)

clearfix:after {
content:"";
display:table;
clear:both;
}
clear {
zoom:;
}

浮动可以去空格化。

流体化布局,普通:

左侧 { width: 56px; float: left; }   

右侧 { margin-left: 76px; }

流体化布局 ,左右自适应宽度变化:

左侧 { float: left; margin-right: 20px; }

右侧 { display: table-cell; *display: inline-block; width: 2000px; *width: auto; }

CSS 笔记(一)的更多相关文章

  1. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  2. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  3. HTML+CSS笔记 CSS中级 一些小技巧

    水平居中 行内元素的水平居中 </a></li> <li><a href="#">2</a></li> &l ...

  4. HTML+CSS笔记 CSS中级 颜色&长度值

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...

  5. HTML+CSS笔记 CSS中级 缩写入门

    盒子模型代码简写 回忆盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左. 语法: margin:10px 15p ...

  6. HTML+CSS笔记 CSS进阶再续

    CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...

  7. HTML+CSS笔记 CSS进阶续集

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  8. HTML+CSS笔记 CSS进阶

    文字排版 字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性. 语法: body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果 ...

  9. HTML+CSS笔记 CSS入门续集

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...

  10. HTML+CSS笔记 CSS入门

    简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. & ...

随机推荐

  1. 洛咕3312 [SDOI2014]数表

    洛咕3312 [SDOI2014]数表 终于独立写出一道题了...真tm开心(还是先写完题解在写的) 先无视a的限制,设\(f[i]\)表示i的约数之和 不妨设\(n<m\) \(Ans=\su ...

  2. pycharm如何在虚拟环境中引入别人的项目

    如果你想引入别人的项目,但是呢引入的项目可能与自己原先装的模块的版本产生冲突,而且如果引入一个项目就在本地进行运行使用,每个项目用的依赖包都不大相同,就会导致解释器安装包过多,就会导致加载过慢,甚至会 ...

  3. 蓝牙学习笔记三(Android Debug)

    android 端可以通过两种方式去Debug: 一.在手机的设置功能里,开发者模式 Enable,如下图:   http://blog.bluetooth.com/debugging-bluetoo ...

  4. SpringBoot日记——MQ消息队列整合(一)

    除了之前讲到的缓存,我们还会用到消息队列来存储一些消息,为了提升系统的异步性能等等: 消息服务有两个概念需要知道:消息代理-message broker,目的地-destination.消息发送由代理 ...

  5. [T-ARA][Ma boo]

    歌词来源:http://music.163.com/#/song?id=22704447 作曲 : 金道勋/Rhymer [作曲 : 金道勋/Rhymer] 作词 : 金道勋 [作词 : 金道勋] 사 ...

  6. Individual Project - Word frequency program by HJB

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text;us ...

  7. LINUX内核分析第五周学习总结——扒开应用系统的三层皮(下)

    LINUX内核分析第五周学习总结——扒开应用系统的三层皮(下) 张忻(原创作品转载请注明出处) <Linux内核分析>MOOC课程http://mooc.study.163.com/cou ...

  8. WC----命令行实现对文件信息的统计

    需求分析: 程序处理用户需求的模式为: wc.exe [parameter][filename] 在[parameter]中,用户通过输入参数与程序交互,需实现的功能如下: 1.基本功能 支持 -c ...

  9. c++中队列queue和栈stack的基本操作

    1.queue 模板类的定义在<queue>头文件中. 定义queue 对象的示例代码如下:queue<int> q1;queue<double> q2; queu ...

  10. jedispool资源释放

    我的天啊,这几天要被jedis逼疯了,网上好多资料并没有介绍jedis链接释放不了的方法,我确定他们那些老人肯定知道都,就是不说,你们说气人不.还有要吐槽哈jedis源码开发的那些家伙,怎么写的代码, ...