《CSS世界》读书笔记(十一)
激进的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世界》读书笔记(十一)的更多相关文章
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
- 《精通CSS》读书笔记(一)
最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...
- 《css世界》笔记之流、元素与基本尺寸
1. 块级元素 基本特性:就是一个水平流上只能单独显示一个元素,多个块级元素则换行显示. 块级元素和"display 为block 的元素"不是一个概念,display:list- ...
- css进阶读书笔记
说明:努力在十一左右,最迟双11之前掌握所有css知识要点 一.摘自<写给大家看的CSS书(第2版)>(虽然书比较旧,09年版的,但对于我这种刚入门的小菜鸟 来说,能学到的还是挺多的) 1 ...
- css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
- 《Two Days DIV + CSS》读书笔记——CSS选择器
1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...
- 《Two Days DIV + CSS》读书笔记——CSS控制页面方式
1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...
- 【锋利的Jquery】读书笔记十一
项目进度太赶,天天公司加班12小时,没时间看书充电.2016年再更新一篇吧.现在凌晨2点36分. 2017加油哦 jquery合适的选择器 $("#id") 无疑是最佳提高性能的方 ...
- CSS Grid 读书笔记
基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relati ...
随机推荐
- (86)Wangdao.com第十九天_JavaScript 接口之 ParentNode 和 ChildNode
ParentNode 接口,ChildNode 接口 节点对象除了继承 Node 接口以外,还会继承其他接口. ParentNode 接口 表示当前节点是一个父节点,提供一些处理子节点的方法. Chi ...
- puppeteer 填充基础表单
main.js const pptr = require("puppeteer"); const gotoUrl = "http://127.0.0.1:5500/ind ...
- python语法_元组
tuple 元组 被称为只读列表 tup = (1,3,4,'234') 只能读,不能进行修改操作. 与列表的区分就是 () [] 中括号和小括号的区别,
- 壁虎书3 Classification
MNIST fetch_openml returns the unsorted MNIST dataset, whereas fetch_mldata() returned the dataset s ...
- SQL语句之on子句过滤和where子句过滤区别
1.测试数据: SQL> select * from dept; DEPTNO DNAME LOC ------ -------------- ------------- ...
- Linux技术栈整理一:系统体系结构
Linux操作系统必备的硬件构造: CPU 主板 显卡 硬盘 网卡 外设(键鼠-输入设备 / 显示器-输出设备) 内核管理调度: 内核体系结构: 来源于:极客专栏
- DDoS攻击流量检测方法
检测分类 1)误用检测 误用检测主要是根据已知的攻击特征直接检测入侵行为.首先对异常信息源建模分析提取特征向量,根据特征设计针对性的特征检测算法,若新数据样本检测出相应的特征值,则发布预警或进行反应. ...
- spring 相关注解详情(一)
1.@controller 控制器(注入服务) 用于标注控制层,相当于struts中的action层2.@service 服务(注入dao) 用于标注服务层,主要用来进行业务的逻辑处理3.@repos ...
- flask微服务框架的初步接触
测试2个关联的系统接口时,经常会遇到被测试系统或被测app的处理内部处理流程会依赖另一个系统的接口返回结果,这时,常用的做法就是写一个模拟测试桩,用作返回请求时的结果.java可以用servicele ...
- awk 实战
awk 一些好玩的用法.有什么不错的点子可以留言,发挥出awk牛逼功能 分离mac地址 ifconfig wlan0 | grep eth | awk '{n=split($2,arr,": ...