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

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

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

清除浮动:在父元素加上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. mfc 虚函数

    知识点 类虚函数概念 类虚函数定义virtual 一.虚函数 简单地说,那些被virtual关键字修饰的成员函数,就是虚函数. 二.虚函数定义 定义:在某基类中声明为 virtual 并在一个或多个派 ...

  2. P3426 [POI2005]SZA-Template

    P3426 [POI2005]SZA-Template 链接 分析: 首先T一定是S的一个前缀,也是一个后缀. 判断一个前缀s[1...i]是不是满足条件,那么求出s[1...i]在s中出现的所有位置 ...

  3. H5——video百花齐放(浏览器自带的播放器)

    前言 手机自带浏览器的H5播放器 真是百花齐放啊(各个手机厂家有各个厂家的控件UI) 需求 手机浏览器木有控件条 自动播放 全屏处理 监控进度条 快进后退 自动播放 自动播放就给跪了 ios 安卓 为 ...

  4. Js_获取当前日期时间

    一.获取当前时间 new Date()方法---------得到结果是当前电脑时间如2011-11-6,10:07 二.获取有个固定的时间方法---------var endtime=new Date ...

  5. DMS专线联通外网测试

    配置 CE Ping PE: “本地链接”-->属性-->"Internet 协议版本4(TCP/IPv4)",选择“使用下面的IP”,填写“172.16.10.21” ...

  6. Git版本库的创建(Ubuntu)

    在Ubuntu上学习Git随笔. 一. git 仓库的安装 git 在终端用git命令查看Ubuntu是否安装git版本库,如果没有安装,最新版本(Ubuntu18.04)会提示用下面命令进行安装. ...

  7. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  8. PAT甲题题解-1043. Is It a Binary Search Tree (25)-二叉搜索树

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789220.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  9. [2017BUAA软工助教]学期总结

    一.表 学号 第0次 week1 week2 week3 个人项目 附加1 结对项目 附加2 a团队得分 a贡献分 b团队得分 b贡献分 阅读作业 提问回顾 总分1 总分2 14011100 8 8 ...

  10. 实训二(cocos2dx 2.x 打包apk)

    利用cocos2dx编程得到的展现形式之一就是最终的apk,中间的过程只有自己走过才能知道,对于没有章法的初学者,那是相当的头疼, 言归正传,2.x到3.x版本引擎变动很大,除去了CC只是很小一方面, ...