《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 ...
随机推荐
- mobile_轮播图_transform 版本_transform 读写二合一
轮播图_transform 版本 关键点: 2D 变换 transform 不会改变 元素 在 文档流 中的位置 定位 position 会改变 元素 在 文档流 中的位置 语句解析太快,使用 set ...
- bootstrap_开始
bootstrap 一个移动设备优先 UI 库,底层是用 less 写的,依赖于 jQuery. 面试点: bootstrap 的所有盒子都是怪异盒子模型(box-sizing: border-box ...
- 取消Fragment切换时间,Fragment+ViewPager静止滑动,去掉默认的滑动效果
import android.content.Context; import android.support.v4.view.ViewPager; import android.util.Attrib ...
- 网络流 ek
hdu3549 求最大流果题 ek算法 先bfs出一条流 然后通过不断地添加增广路 得到最大流(证明在算法书上都有) 增加了一个流 就加反向边 允许程序通过走方向边的方式进行“回滚” i^1 = i+ ...
- CentOS下添加用户并且让用户获得root权限
转自:https://blog.csdn.net/tropicofcancer9/article/details/53926920 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: ...
- 20164320 王浩 Exp1 PC平台逆向破解
一.逆向及Bof基础实践说明 1.1实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 手工修 ...
- 在vue中使用lang="scss"出现报错解决思路
最近在学习vue框架,使用lang="scss" 出现如下错误: This dependency was not found: * !!vue-style-loader!css-l ...
- javascript 的引入
目录 一.静态引入 1. html标签script引入 2. esm 中import ModuleName from 'module/path' 3. commonjs 中 const ModuleN ...
- Redis多机多节点集群实验
第一步:环境准备 我们搞两台虚拟机 局域网IP 分别是 192.168.1.109和192.168.1.110 我们约定把192.168.1.109作为集群控制端,需要安装redis-trib.rb ...
- C#递归复习
static void Main(string[] args) { Console.WriteLine("请输入你要的数字:"); long flag = Convert.To ...