源码如下: 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. 测试需要用到的chrome调试

    模拟慢网速 断开网络 F12后勾选上offline 请求304 后来发现是选中了该浏览其的Disable cache,去掉就好了.

  2. Jmeter系列(2)- Jmeter工具介绍、Jmeter安装目录介绍、Jmeter面板介绍

    如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html Jmeter支持哪些测试场景? Jme ...

  3. 批量查询PDF文本并导出结果的小工具

    效果: 批量查询指定关键字 & 指定目录下PDF文件中的文本,并导出文件路径和关键字所在文本行. 下载: 链接: https://pan.baidu.com/s/1sK2OMMgGX26l7P ...

  4. sqlliab7-8

    less-7 https://www.jianshu.com/p/20d1282e6e1d ?id=0')) union select 1,'2','<?php @eval($_POST[&qu ...

  5. PHP open_basedir配置未包含upload_tmp_dir 导致服务器不能上传文件

    在做一个上传图片的功能时候发现后台接收到的$_FILES['file']['error'] = 6,这个错误意思是找不到临时文件,或者是临时文件夹无权限,需要更改php.ini文件的 upload_t ...

  6. 2019-2020-1 20199325《Linux内核原理与分析》第四周作业

    start_kernel函数的执行过程 asmlinkage __visible void __init start_kernel(void) { char *command_line; char * ...

  7. Ubuntu 安装 Qt, 安装辅助软件

    sudo apt-get install libgl1-mesa-dev libglu1-mesa-dev sudo apt-get install gcc g++ sudo apt-get inst ...

  8. java 接口实现关系下的多态

    2019独角兽企业重金招聘Python工程师标准>>> 多态: 父类的引用类型变量指向了子类的对象 或者 是接口类型的引用类型变量指向了接口实现类的对象. 实现关系下的多态:    ...

  9. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  10. 关于LinearLayout设置权重后width或height不设置0dp的影响说明

    摘要 平时没那么注意LinearLayout布局时权重的问题,设置了权重属性后,通常建议将width或height的属性值设置为0dp,有时候设置权重后,还是习惯将width或height的属性设置为 ...