激进的margin属性

margin与元素尺寸以及相关布局

  • 元素尺寸

border box尺寸,对应jQuery中的$().outerWidth()和$().outerHeight()方法,在原生DOM API中写作offsetWidth和offsetHeight,所以有时候也称为“元素偏移尺寸”

  • 元素内部尺寸

padding box尺寸,对应jQuery中的$().innerWidth()和$().innerHeight()方法,在原生DOM API中写作clientWidth和clientHeight,所以有时候也称为“元素可视尺寸”

  • 元素外部尺寸

margin box尺寸,不仅包括padding和border,还包括margin,对应jQuery中的$().outerWidth(true)和$().outerHeight(true)方法,没有对应的原生DOM API

margin与元素的内部尺寸

当元素是“充分利用可用空间”状态的时候,margin可以改变元素的可视尺寸。

<div class="father">
<div class="son"></div>
</div> .father { width: 300px; }
.son { margin: 0 -20px; }

  这里.son元素的宽度是340px,此时的宽度表现就是“充分利用可用空间”

CSS世界默认的流方向是水平方向,因此,对于普通元素,margin只能改变元素水平方向尺寸。但是,对于具有拉伸特性的绝对定位元素,则水平或垂直方向都可以

由于margin具有这种流体特性下的改变尺寸特性,因此,margin可以很方便地实现很多流体布局效果。例如:一侧定宽的两栏自适应布局效果,假设我们定宽的部分是128像素宽的图片,自适应的部分是文字。

(1)如果图片左侧定位:

.box { overflow: hidden; }
.box > img { float: left; }
.box >p { margin-left: 140px; } <div class="box">
<img src="1.jpg">
<p>文字内容……</p>
</div>

此时,文字内容会根据.box盒子的宽度变化而自动排列,形成自适应布局效果

(2)图片右侧定位

.box { overflow: hidden; }
.box > img { float: right; }
.box >p { margin-right: 140px; }

HTML 与上面的左侧定位效果一模一样,最终实现的也是一个效果良好的自适应布局。有一点瑕疵的地方在于:元素在DOM文档流中的前后顺序和视觉表现上的前后顺序不一致。如果想要实现顺序完美一致的自适应效果——

(3)图片右侧定位,同时顺序一致

.box { overflow: hidden; }
.full { float: left; width: 100%; }
.box > img { float: left; margin-left: -128px; }
.full>p { margin-right: 140px; } <div class="box">
<div class="full">
<p>文字内容……</p>
</div>
<img src="1.jpg">
</div>

内联元素垂直方向的margin是没有任何影响的,既不会影响外部尺寸,也不会影响内部尺寸。对于水平方向,由于内联元素宽度表现为“包裹性”,也不会影响内部尺寸

margin百分比值

和padding属性一样,margin的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的

《CSS世界》读书笔记(十一)的更多相关文章

  1. CSS揭秘读书笔记 (一)

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  2. 《CSS世界》笔记二:盒模型四大家族

    上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...

  3. 《精通CSS》读书笔记(一)

    最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...

  4. 《css世界》笔记之流、元素与基本尺寸

    1. 块级元素 基本特性:就是一个水平流上只能单独显示一个元素,多个块级元素则换行显示. 块级元素和"display 为block 的元素"不是一个概念,display:list- ...

  5. css进阶读书笔记

    说明:努力在十一左右,最迟双11之前掌握所有css知识要点 一.摘自<写给大家看的CSS书(第2版)>(虽然书比较旧,09年版的,但对于我这种刚入门的小菜鸟 来说,能学到的还是挺多的) 1 ...

  6. css 揭秘-读书笔记

    css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...

  7. 《Two Days DIV + CSS》读书笔记——CSS选择器

    1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...

  8. 《Two Days DIV + CSS》读书笔记——CSS控制页面方式

    1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...

  9. 【锋利的Jquery】读书笔记十一

    项目进度太赶,天天公司加班12小时,没时间看书充电.2016年再更新一篇吧.现在凌晨2点36分. 2017加油哦 jquery合适的选择器 $("#id") 无疑是最佳提高性能的方 ...

  10. CSS Grid 读书笔记

    基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relati ...

随机推荐

  1. mobile_轮播图_transform 版本_transform 读写二合一

    轮播图_transform 版本 关键点: 2D 变换 transform 不会改变 元素 在 文档流 中的位置 定位 position 会改变 元素 在 文档流 中的位置 语句解析太快,使用 set ...

  2. bootstrap_开始

    bootstrap 一个移动设备优先 UI 库,底层是用 less 写的,依赖于 jQuery. 面试点: bootstrap 的所有盒子都是怪异盒子模型(box-sizing: border-box ...

  3. 取消Fragment切换时间,Fragment+ViewPager静止滑动,去掉默认的滑动效果

    import android.content.Context; import android.support.v4.view.ViewPager; import android.util.Attrib ...

  4. 网络流 ek

    hdu3549 求最大流果题 ek算法 先bfs出一条流 然后通过不断地添加增广路 得到最大流(证明在算法书上都有) 增加了一个流 就加反向边 允许程序通过走方向边的方式进行“回滚” i^1 = i+ ...

  5. CentOS下添加用户并且让用户获得root权限

    转自:https://blog.csdn.net/tropicofcancer9/article/details/53926920 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: ...

  6. 20164320 王浩 Exp1 PC平台逆向破解

    一.逆向及Bof基础实践说明 1.1实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 手工修 ...

  7. 在vue中使用lang="scss"出现报错解决思路

    最近在学习vue框架,使用lang="scss" 出现如下错误: This dependency was not found: * !!vue-style-loader!css-l ...

  8. javascript 的引入

    目录 一.静态引入 1. html标签script引入 2. esm 中import ModuleName from 'module/path' 3. commonjs 中 const ModuleN ...

  9. Redis多机多节点集群实验

    第一步:环境准备 我们搞两台虚拟机 局域网IP 分别是 192.168.1.109和192.168.1.110 我们约定把192.168.1.109作为集群控制端,需要安装redis-trib.rb ...

  10. C#递归复习

    static void Main(string[] args) {  Console.WriteLine("请输入你要的数字:");  long flag = Convert.To ...