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

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

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

清除浮动:在父元素加上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. makefile怎么写?

    参考:https://blog.csdn.net/haoel/article/details/2886    https://blog.csdn.net/haoel/article/details/2 ...

  2. maven 相关问题

    maven 这里要更新完 不一定非要clean install  那个出问题了再弄,一般刷新一下maven仓库就行了,最好还是用自己配置的maven,不容易出问题

  3. Unity接入监控摄像头

    公网RTSP测试地址: rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov RTSP测试软件: EasyPlayerRTSP: https:// ...

  4. Vue.js 相关知识(脚手架)

    1. vue-cli 简介 Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构 2. vue-cli 安装步骤 安装npm 或 cnpm n ...

  5. mysql学习(3)10045错误,连接不上数据库

    mysql8.0默认加密的方式是caching_sha2_password认证方式,当使用navicat 或者程序连接是连接不上, 好吧,那我们修改配置并重启服务可以解决此问题 找到mysql的配置文 ...

  6. 《Linux内核设计与实现》第一二章读书笔记

    第一章 Linux内核简介 1.Unix简介 (一)概念:支持抢占式多任务.多进程.虚拟内存.换页.动态链接和TCP/IP网络的现代化操作系统. (二)Unix特点(层次化结构): Unix很简洁,仅 ...

  7. 第二阶段Sprint9

    昨天:重新规划主界面,把视频录制暂放到主页面里 今天:查看有关“共享平台”的资料,看如何实现上传下载功能,并尝试编码, 遇到的问题:看不懂什么意思,照例子做不行,还得需要联网等

  8. 重温jsp①

    Jsp就是一个servlet servlet的缺点 不适合设置html响应体,需要response.Getwriter.print(); 优点:动态资源,可以编程. Jsp:在原有的html中加入了J ...

  9. 浅谈个人对RAID技术的理解

    RAID,字面意思为一种廉价的冗余磁盘阵列,它是通过将大量的磁盘分组,实现了数据冗余,目的是为了保护数据.RAID现已经应用于计算机各个领域.它的优点是降低了工作成本并提高了效率,并且使系统有稳定的运 ...

  10. ElasticSearch 2 (34) - 信息聚合系列之多值排序

    ElasticSearch 2 (34) - 信息聚合系列之多值排序 摘要 多值桶(terms.histogram 和 date_histogram)动态生成很多桶,Elasticsearch 是如何 ...