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

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

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

清除浮动:在父元素加上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. idea ssm项目迁移到另一台机器上时出现不能正常启动项目的解决方案

    首先右下角提示关联spring文件,关联之,然后启动,发现项目无法启动,然后开始排错 首先从这个日志里发现了这么一条提示信息 然后百度了一下,答案都是说 web.xml 之类的 spring拦截器问题 ...

  2. C#精华面试题及答案 三

    PS.学了两三年的软件开发到头来发现连一些基本的东西都没掌握,通过面试题来检验自己的水平,让学习变得更加有方向性,也为将来择业而打下基础,不至于到时候手忙脚乱. 一.选择,填空题 1. 在ADO.NE ...

  3. DelayQueue 订单限时支付实例

    1.订单实体 package com.zy.entity; import java.util.Date; import java.util.concurrent.Delayed; import jav ...

  4. Kubernetes并发控制与数据一致性的实现原理

    在大型分布式系统中,定会存在大量并发写入的场景.在这种场景下如何进行更好的并发控制,即在多个任务同时存取数据时保证数据的一致性,成为分布式系统必须解决的问题.悲观并发控制和乐观并发控制是并发控制中采用 ...

  5. 小学生都能写智能语音助手了,我这颗转战AI的心要何去何从?

    前言——我是不是老了 前天看了一个关于AI类的综艺节目我感觉整个人都不好了.这个综艺的名字叫<智造将来>上面那个小屁孩自己写了一个智能语音助手,这个小屁孩叫袁翊闳是2018年百度AI开发者 ...

  6. PAT甲题题解-1004. Counting Leaves (30)-统计每层叶子节点个数+dfs

    统计每层的叶子节点个数建树,然后dfs即可 #include <iostream> #include <cstdio> #include <algorithm> # ...

  7. 主流蓝牙芯片盘点,Nordic/TI/博通哪家强?

    无线通信技术自19世纪中期诞生以来,从使用狼烟.火炬.闪光镜.信号弹等在视距内传输信息,到1838年塞缪尔・莫尔斯发明电报网,再到电报网被电话取代,再到几十年后的1895年马可尼首次从英国怀特岛到30 ...

  8. 软件工程团队项目第一次Sprint评审

    第一组:9-652 作品:炸弹人 评价:已经完成了界面的设计和基本功能,游戏已初具雏形.这款游戏可玩性很强,是个很不错的项目.但是对游戏并没有进行深入开发,不能持续的吸引玩家的兴趣,容易引起玩家的厌倦 ...

  9. XCODE 6.1.1 配置GLFW

    最近在学习opengl的相关知识.第一件事就是配环境(好烦躁).了解了一下os x下的OpenGL开源库,主要有几个:GLUT,freeglut,GLFW等.关于其详细的介绍可以参考opengl网站( ...

  10. RabbitMQ-从基础到实战(3)— 消息的交换(上)

    转载请注明出处 0.目录 RabbitMQ-从基础到实战(1)— Hello RabbitMQ RabbitMQ-从基础到实战(2)— 防止消息丢失 RabbitMQ-从基础到实战(4)— 消息的交换 ...