源码如下: margin-left 指的是左边的外边距,为正数时,左边间距增大,div向右偏移,为负数时,左边间距减少,相反往左偏移

双飞翼

.wrap {
width: 100%;
margin: 0 auto;
}

    .left {
width: 15%;
height: 700px;
background: red;
float: left;
bottom: 0px;
/*margin-left: -100%;*/
} .right {
width: 15%;
height: 700px;
background: red;
float: right;
/*margin-left: -15%;*/
} .main {
width: 100%;
float: left;
background: pink;
text-align: center;
} .content {
height: 700px;
width: 70%;
background: yellow;
margin: 0 auto;
}
</style>
content

left
right

CSS理论:margin-left在float中的运用的更多相关文章

  1. DIV+CSS:Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

  2. 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM

    好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...

  3. CSS布局总结及实际应用中产生的问题

    布局初步 所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去. 布局的基本步骤: 1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式: a) 上下结构:此时,只要 ...

  4. 精简高效CSS系列之二——浮动float

    一.浮动基础知识 假如一个页面上有3个div块,如下排列: 图1:不使用浮动 图2:向右浮动 图2说明了框1脱离了文档流向右移动,直到它的右边缘碰到包含框的右边缘为止. 图3:向左浮动 图3说明了框1 ...

  5. CSS的margin属性:详解margin属性

    在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...

  6. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  7. CSS盒子模型(boeder)+浮动(float)+定位(position)

    盒子的上下层:margin--background-color--background-image--padding--content--border(最外层) 计算一个盒子宽 =  内容的宽(wid ...

  8. CSS 在IE6, IE7 和IE8中的差别////////////////z

    CSS 在IE6, IE7 和IE8中的差别 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存.截至本文,Internet Explorer各个版本总共占据了 ...

  9. CSS(6)---通俗讲解浮动(float)

    CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...

随机推荐

  1. 详解 stream流

    在本人之前的博文中,我们学习了 I/O流.NIO流的相关概念. 那么,在JDK8的更新内容中,提出了一个新的流 -- stream流 那么,现在,本人就来讲解下这个流: 目录 stream流 常用AP ...

  2. 初探Redis-基础类型String

    Redis存在五种基础类型:字符串(String).队列(List).哈希(Hash).集合(Set).有序集合(Sorted Set).String的出镜率算是最高的.本次列举出String的常用操 ...

  3. 2018版移动端ui规范

    计规范是一种将移动端常用控件标准化.统一化的的文档 今天整理了一篇设计规范的文章概论,讲诉中会以ios做介绍,安卓由于开源,平台相对教多不做单一阐述,实际操作的时候,我们不管是做一代还是二次的迭代产品 ...

  4. Linux下jdk的安装和环境变量的配置

    Linux下jdk的安装和环境变量的配置 一.jdk的下载 方式一:在官网下载 http://www.oracle.com/technetwork/java/javase/downloads/inde ...

  5. Flutter 分页功能表格控件

    老孟导读:前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析来来. PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTabl ...

  6. JavaScript之浅谈内存空间

    JavaScript之浅谈内存空间 JavaScipt 内存自动回收机制 在JavaScript中,最独特的一个特点就是拥有自动的垃圾回收机制(周期性执行),这也就意味者,前端开发人员能够专注于业余, ...

  7. Android | 教你如何快速集成机器学习能力

    背景   继上篇博文说了如何快速集成扫码以后 我又上官网去了解了一下其他的功能,其中机器学习服务是当下比较火的,而且还是免费的.就赶紧点进去学习一下.看看能够快速实现哪些功能. 链接在这里:https ...

  8. 2019-2020-1 20199328《Linux内核原理与分析》第七周作业

    分析Linux内核创建一个新进程的过程 2019/10/28 18:34:58 笔记部分 首先是查看进程描述符(用来描述进程,其代码比较庞大)的一些内容 系统调用回顾 fork.vfork.clone ...

  9. 阿里云有奖调查结果公布,赠送10个阿里巴巴logo胸针 ...

    4月17日,我们发起了"阿里云有奖调查!赠10个阿里巴巴logo胸针"活动,现经过随机抽奖机抽选出10名幸运同学,每人赠送一枚阿里巴巴胸针.现把获奖同学ID公布如下,请如下同学私信 ...

  10. js的同步与异步

    JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为 ...