CSS理论:margin-left在float中的运用

源码如下: 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>
CSS理论:margin-left在float中的运用的更多相关文章
- DIV+CSS:Margin和Padding属性[转载]
margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...
- 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM
好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...
- CSS布局总结及实际应用中产生的问题
布局初步 所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去. 布局的基本步骤: 1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式: a) 上下结构:此时,只要 ...
- 精简高效CSS系列之二——浮动float
一.浮动基础知识 假如一个页面上有3个div块,如下排列: 图1:不使用浮动 图2:向右浮动 图2说明了框1脱离了文档流向右移动,直到它的右边缘碰到包含框的右边缘为止. 图3:向左浮动 图3说明了框1 ...
- CSS的margin属性:详解margin属性
在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- CSS盒子模型(boeder)+浮动(float)+定位(position)
盒子的上下层:margin--background-color--background-image--padding--content--border(最外层) 计算一个盒子宽 = 内容的宽(wid ...
- CSS 在IE6, IE7 和IE8中的差别////////////////z
CSS 在IE6, IE7 和IE8中的差别 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存.截至本文,Internet Explorer各个版本总共占据了 ...
- CSS(6)---通俗讲解浮动(float)
CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型.浮动 .定位.上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一.理解浮动 1.概念 概念 浮动可以理解为让某 ...
随机推荐
- Springboot:IDEA重调安装依赖窗口(二)
Settings-Plugins 搜索Editstarters: 安装完插件 重启idea: 查看安装是否成功: 在pom.xml 右键: 选择热部署依赖 点击ok进行自动装配: 热部署依赖环境已经配 ...
- 使用HashMap或Hashset优化使用循环判断字符串中是否含有重复元素
原本遇到判断字符串中是否含有重复元素的问题总是使用for循环遍历进行判断,这一方法则需要O(n3)的时间复杂度,如果本身方法处于几个循环中,就会指数倍增加时间复杂度.类似于如下代码: String[] ...
- 推荐一个小而美的Python代码格式化工具
代码可读性是评判代码质量的标准之一,有一个衡量代码质量的标准是 Martin 提出的 “WFT” 定律,即每分钟爆出 “WTF” 的次数.你在读别人代码或者做 Code Review 的时候有没有 “ ...
- 什么是LVM
LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵活性.前面 ...
- Spark RDD----pyspark第四次作业
1.pyspark交互式编程 查看群里发的“data01.txt”数据集,该数据集包含了某大学计算机系的成绩,数据格式如下所示: Tom,DataBase,80 Tom,Algorithm,50 To ...
- php正则匹配到字符串里面的a标签
$cont = preg_replace('/<a href=\"(.*?)\".*?>(.*?)<\/a>/i','',$cont);
- Spring MVC 中的http Caching
文章目录 过期时间 Last-Modified ETag Spring ETag filter Spring MVC 中的http Caching Cache 是HTTP协议中的一个非常重要的功能,使 ...
- 运用jieba库统计词频及制作词云
一.对中国十九大报告做词频分析 import jieba txt = open("中国十九大报告.txt.txt","r",encoding="utf ...
- PostgreSQL 10.0 preview 性能增强 - 分区表性能增强(plan阶段加速)
标签 PostgreSQL , 10.0 , 分区表 , 子表 , 元信息搜索性能增强 背景 PostgreSQL 10.0 增强了分区表的子表搜索性能,对于涉及分区表包含子表特别多的QUERY,可以 ...
- Apache Storm 官方文档 —— Storm 与 Kestrel
本文说明了如何使用 Storm 从 Kestrel 集群中消费数据. 前言 Storm 本教程中使用了 storm-kestrel 项目和 storm-starter 项目中的例子.建议读者将这几个项 ...