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

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

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

清除浮动:在父元素加上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. Scracpy爬取图片实例

    非常简单,直接上爬虫代码 # -*- coding: utf-8 -*- import scrapy import urllib import logging class TopitComSpider ...

  2. JavaScript快速入门-ECMAScript基础语法

    一.JavaScript引入方式 1.行内式 <script> alert(123); </script> 2.外链式 <script src='custom.js'&g ...

  3. Docker 部署学习

    https://yeasy.gitbooks.io/docker_practice/basic_concept/repository.html https://hujb2000.gitbooks.io ...

  4. 关于java线程池的一丢丢

    线程池应用达到的目的 1.降低资源消耗:可以重复利用已创建的线程从而降低线程创建和销毁所带来的消耗. 2.提高响应速度:当任务到达时,不需要等线程创建就可以立即执行. 3.提高线程的可管理性:使用线程 ...

  5. cocos2dx内存优化

    纹理消耗了大量内存 在大部分情况下,是纹理(textures)消耗了游戏程序大量的内存.因此,纹理是我们首要考虑优化的对象 纹理加载 cocos2d里面纹理加载分为两个阶段:从图片文件中创建一个Ima ...

  6. Spark RDD深度解析-RDD计算流程

    Spark RDD深度解析-RDD计算流程 摘要  RDD(Resilient Distributed Datasets)是Spark的核心数据结构,所有数据计算操作均基于该结构进行,包括Spark ...

  7. Jenkins Maven安装设置

    Jenkins Maven安装设置 如果没有学习过 Maven 的朋友,可以先了解 Maven教程,然后再进一步学习本教程文章. 第1步:下载和设置Maven Maven的官方网站就是Apache M ...

  8. 第三次作业--导入excel表格(完整版)

    031302322 031302316 将教师排课表导入系统 使用powerdesigner设计数据库表格 设计概念模型 打开new -> Conceptual Data Model创建概念模型 ...

  9. SpringMVC(五)-- springmvc的系统学习之拦截器

    资源:尚学堂 邹波 springmvc框架视频 一.拦截器简介 使用拦截器时, (1)实现HandlerInterceptor (2)在springmvc配置文件中配置以下信息 <mvc:int ...

  10. wc 统计程序

    WC项目要求 这个项目要求写一个命令行程序,模仿已有的wc.exe的功能,并加以扩充,给出某程序设计源语言文件的字符数.单词数和行数.给实现一个统计程序,它能正确统计程序文件的字符数.单词数.行数,以 ...