《CSS世界》读书笔记（十一）

2024-04-05 05:52:11

激进的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的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的

转载于:https://www.cnblogs.com/beginner2014/p/9462821.html

《CSS世界》读书笔记（十一）相关推荐

《Android源码设计模式解析与实战》读书笔记（十三）
第十三章.备忘录模式备忘录模式是一种行为模式,该模式用于保存对象当前的状态,并且在之后可以再次恢复到此状态,有点像是我们平常说的"后悔药". 1.定义在不破坏封闭的前提下,捕获 ...
《Android源码设计模式解析与实战》读书笔记（十七）
第十七章.中介者模式中介者模式也称为调解者模式或调停者模式,是一种行为型模式. 1.定义中介者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显作用.从而使它们可以松散耦合.当某些对象之 ...
《Android源码设计模式解析与实战》读书笔记（十二）
第十二章.观察者模式观察者模式是一个使用率非常高的模式,它最常用在GUI系统.订阅–发布系统.因为这个模式的一个重要作用就是解耦,将被观察者和观察者解耦,使得它们之间的依赖性更小,甚至做到毫无依赖. ...
《Android源码设计模式解析与实战》读书笔记（十四）
第十四章.迭代器模式迭代器模式,又叫做游标模式,是行为型设计模式之一.我们知道对容器对象的访问必然会涉及遍历算法,我们可以将遍历的方法封装在容器中,或者不提供遍历方法,让使用容器的人自己去实现去吧. ...
《Android源码设计模式解析与实战》读书笔记（十）
第十章.解释器模式解释器模式是一种用的比较少的行为型模式,其提供了一种解释语言的语法或表达式的方式.但是它的使用场景确实很广泛,只是因为我们自己很少回去构造一个语言的文法,所以使用较少. 1.定义 ...
《Android源码设计模式解析与实战》读书笔记（二十四）
第二十四章.桥接模式桥接模式也称为桥梁模式,是结构型设计模式之一.桥接模式中体现了"单一职责原则"."开闭原则"."里氏替换原则".&qu ...
《Android源码设计模式解析与实战》读书笔记（二十一）
第二十一章.装饰模式装饰模式也称为包装模式,是结构型设计模式之一.装饰模式是一种用于替代继承技术的一种方案. 1.定义动态的给一个对象添加一些额外的职责.就增加功能来说,装饰模式相比生成子类更为灵 ...
《Android源码设计模式解析与实战》读书笔记（十一）
第十一章.命令模式命令模式是行为型模式之一.总体来说并不难理解,只是比较繁琐,他会将简单的调用关系解耦成多个部分,增加类的复杂度,但是即便如此,命令模式的结构依然清晰. 1.定义将一个请求封装成一 ...
《Android源码设计模式解析与实战》读书笔记（十九）
第十九章.组合模式组合模式也称为部分-整体模式,结构型设计模式之一. 1.定义将对象组合成树形结构以表示"部分-整体"的层次结构,使得用户对单个对象和组合对象的使用具有一致性. ...
《Android源码设计模式解析与实战》读书笔记（十六）
第十六章.访问者模式访问者模式是一种行为型模式,它是23种设计模式中最复杂的一个,虽然使用频率不高,但是并不代表可以忽略,在合适的地方,它会带来意想不到的灵活性.访问者模式,顾名思义使用了这个模式后 ...

最新文章

热门文章