源码如下: 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. MRCTF Ezpop_Revenge小记

    前言 一道typecho1.2的反序列化,顺便记录一下踩的坑 www.zip获得源码,结构大致如下 flag.php需要ssrf,如果成功会写入session 拿到源码直接去网上先找了一下有没有现成的 ...

  2. 重装anaconda的记录,包含设置jupyter kernel

    anaconda安装记录 官网下载最新版 linux:sh xx.sh 注意不要敲太多回车,容易错过配置bash的部分,还要手动添加 (vim ~/.bashrc 手动添加新bash,卸载时也要删掉此 ...

  3. python执行提示“ImportError: No module named OpenSSL.crypto”

    错误信息如下: Traceback (most recent call last): File "/usr/local/yunanbao/yxz-script/autoops/TaskSer ...

  4. AJAX教程——检视阅读

    AJAX教程--检视阅读 参考 AJAX 教程--菜鸟 AJAX 教程--w3cschool AJAX 教程--w3school.cn AJAX 教程--易百 AJAX = Asynchronous ...

  5. sudo: 在加载插件“sudoers_policy”时在 /etc/sudo.conf 第 0 行出错 sudo: /usr/lib/sudo/sudoers.so 必须只对其所有者可写 sudo: 致命错误,无法加载插件

    解决办法:  su root chmod 644 /usr/lib/sudo/sudoers.so chown -R root /usr/lib/sudo 千万不要给 /usr 赋全部权限!!!   ...

  6. css3--:target选择器称为目标选择器

    :target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素.我们先来上个例子,然后再做分析. 示例展示 点击链接显示隐藏的段落. HTML代码: <h2>< ...

  7. nginx+vue+thinkphp5.1部署,解决前端刷新404,以及前端404解决后,后台又404的问题

    宝塔的话直接在网站的伪静态一栏中如下就行 location /admin { if (!-e $request_filename){ rewrite ^(.*)$ /index.php?s=$1 la ...

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

    <Linux内核原理与分析>第四周作业 步骤一 首先我们指定一个内核并指定内存根文件系统,这里的bzImage是vmLinux经过gzip压缩的内核,"b"表示&quo ...

  9. Spring5参考指南:组件扫描

    文章目录 组件扫描 @Component 元注解和组合注解 组件内部定义Bean元数据 为自动检测组件命名 为自动检测的组件提供作用域 生成候选组件的索引 组件扫描 上一篇文章我们讲到了annotat ...

  10. Linux 用户管理和提权

    Linux ⽀持多个⼈使⽤同⼀个⽤户登录系统, Windows 在修改组策略的情况下,也可以多个⼈使⽤同⼀个⽤户登录 远程连接Linux的⽅式:SSH协议 远程连接Windows的⽅式:RDP协议 安 ...