position

我们都知道元素都拥有 position 这个css属性，先来看看他的基本定义和可用值。

定义

position 决定了元素位置是如何被渲染的

可用值

值 描述
static 默认值，元素在文档流中依次渲染
absolute 元素位置相对于其最近的非 static 的父元素
fixed 元素位置相对于浏览器窗口
relative 元素位置相对于原本应该渲染的位置
sticky 根据滚动的位置在 relative 和 fixed 之间切换
initial 设置为默认值
inherit 从父元素继承

基本用法

<body>

  <section>

    <p>This is a paragraph!</p>

  </section>

</body>
body {

  background: beige;

}

section {

  display: block;

  width: 400px;

  height: 160px;

  background: lightgray;

}

p {

  width: 50%;   /* == 400px * .5 = 200px */

  height: 25%;  /* == 160px * .25 = 40px */

  margin: 5%;   /* == 400px * .05 = 20px */

  padding: 5%;  /* == 400px * .05 = 20px */

  background: cyan;

}

很好，与我们期望的一样渲染出来了。现在我们把 section 的 display 属性 换成 inline

section {

  display: inline;

  width: 400px;

  height: 160px;

  background: lightgray;

}

这个破坏真是立竿见影啊，为什么会这样呢？要知晓其中的奥秘，就要了解什么是内容块。

内容块

定义

通常情况下，元素的大小和位置都取决他的内容块。一般地，内容块是该元素最近的块级父元素，但有一些例外情况。

为什么内容块很重要

元素的大小和位置都是由其内容块做为参考的，他会影响到元素的 width, height, padding, margin 还有 offset 相关的属性。

如何找到元素对应的内容块

  1. position 是 static 或者 relative 时，其内容块是其最近的块级父元素的内容框(content-box)，比如 block, inline-block, list-item，或者是被指定为某种格式容器的元素，比如 table, flex, grid。
  2. position 是 absolute 时，其内容块是其最近的 position 不是 static 的块级父元素的填充框（padding-box）。
  3. position 是 fixed 时，其内容块是整个视图窗口（viewport）

  4. position 是 absolute 或者 fixed 时，其内容块也可能是有下列特殊情况的最近的父元素的填充框（padding-box）。

    • transform 或者 perspective 被设置过或将被设置不为 none。
    • filter 被设置或将被设置不为 none。

从内容块计算百分比

height, top 和 bottom 依据内容块的 height 值进行百分比计算。如果内容块是 static 或者 relative，并且没有设置高度，依靠其内容决定高度，那么这些值都会变成 0。

width, left, right, padding, margin 依据内容块的 width 值进行百分比计算。

例子解释

现在我们了解了内容快的概念之后，再来看看上面的例子，p 最近的父元素是 section, 被设置为 inline 之后不再是块级元素，所以 body 变成了离 p 最近的块级父元素，此时内部的百分比计算都依据 body 的宽高做对应计算。

absolute的用例

我们再看看别的例子

现在我们将第一个例子中的 p 的 position 设置为 absolute, section 从 inline 改回 block,

body {

  background: beige;

}

section {

  display: block;

  width: 400px;

  height: 160px;

  background: lightgray;

}

p {

  position: absolute;

  width: 50%;   /* == 浏览器宽度的50% */

  height: 25%;  /* == 浏览器高度的25% */

  margin: 5%;   /* == 浏览器宽度的5% */

  padding: 5%;  /* == 浏览器宽度的5% */

  background: cyan;

}

由于 p 设置为了 absolute, 显而易见他的大小尺寸都根据了浏览器窗口来计算，注意这里也经历了寻找内容块的过程。p 的祖先元素均是 static，所以浏览器窗口才成为了其内容块。

现在我们还不错，一切都在掌握之中，我们试着把 section 的 transform 设置为 rotate(0deg)，旋转了 0 度，可以预计到本来应该没有视觉上的效果，但这么做会影响对内容块的决定，从而导致 p 的大小和位置变化。

section {

  transform: rotate(0deg);

  width: 400px;

  height: 160px;

  background: lightgray;

}

p {

  position: absolute;

  ...

}

看！由于我们为 section 设置了 transform，p 的内容块不再是浏览器窗口了，而是 section。

总结

css 的世界就是这么奇妙，表面上看上去酷炫多彩，内心维护着自己的规则世界。有时候产生了一些让人疑惑不解的 bug ...不过，通过探究其本质，迷雾终会散尽，bug 总会改完的。

希望大家都 get 到了新技能，下回再见！

首发于自己的 github/kimochg/TinyThoughts

你可能不知道的 css 内容块的更多相关文章

  1. 你所不知道的 CSS 阴影技巧与细节

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  2. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  3. 【CSS】346- 你所不知道的 CSS 阴影技巧与细节

    偷懒了1个多礼拜,在工作饱和的情况下,怎么坚持学习?今天的分享来自@Coco国服第一切图仔,我们聊聊CSS属性box-shadow- 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 ...

  4. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  5. 您可能不知道的CSS元素隐藏“失效”以其妙用

    您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...

  6. 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...

  7. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  8. 你有可能不知道的css浮动问题

    最近在开发过程中,有的时候会经常遇见明明知道需要这样做,但是为什么要这样做的原因我们却总是不明所以然. 先来解释下什么叫做清除浮动吧: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且 ...

  9. 你所不知道的CSS

    1.用FONT-SIZE:0来清除间距 inline-block的元素之间会受空白区域的影响,也就是元素之间差不多会有一个字符的间隙.如果在同一行内有4个25%相同宽度的元素,会导致最后一个元素掉下来 ...

随机推荐

  1. ROS开发指令

    常用指令: 1.rospack 查找某个pkg的地址$rospack find package_name列出本地所有pkg$rospack list 2.roscd 跳转到某个pkg路径下$roscd ...

  2. 【pip install】+【环境变量配置】

    1.环境变量配置 (1)用打开后下面的"系统变量"进行配置,下面的名字为Path: (2)举例,如果安装ping.exe:而且ping.exe在C:\lianghua\ping.e ...

  3. laravel 7 H-ui模板ajax批删

    1,HTML页面写一个button按钮 <a href="javascript:;" onclick="deleteAll()" class=" ...

  4. JavaScript面向对象—深入ES6的class

    JavaScript面向对象-深入ES6的class 前言 在前面一篇中主要介绍了JavaScript中使用构造函数+原型链实现继承,从实现的步骤来说还是比较繁琐的.在ES6中推出的class的关键字 ...

  5. 前端—我的第一篇博客 梦开始的地方（面向对象版tab栏）

    这是我的第一篇博客 博客生涯才开始 但是人生已经过去了二十个年头了 才开始弄这个 也没搞得太懂 我原本的想法是想搞个源代码上来 但是看了半天好像就只能传html源代码 那我还有css js的部分呢 我 ...

  6. Hadoop之Mapreduce 程序

    package com.gylhaut.hadoop.senior.mapreduce; import java.io.IOException; import java.util.StringToke ...

  7. Linux-centos7安装mysql步骤

    原文地址:https://blog.csdn.net/qq_42467339/article/details/89471395 Centos7.3 yum安装MySQL5.7.25 扩展:在CentO ...

  8. Ubuntu 16.04 更改系统语言为简体中文

    镜像下载.域名解析.时间同步请点击阿里巴巴开源镜像站 一.安装时报错 原因:以访客的身份进入的会报错,改为管理员进入即可. ps:有时候往往一点小细节也会造成大问题,但是我们要善于排错. 注:可以看到 ...

  9. 虚拟机Centos安装配置

    开始吧~ 新建一个虚拟机 完成后编辑虚拟机 配置内存 处理器: 映像文件: 点击确定完成配置: 开启虚拟机,对操作系统进行配置 输入红线上内容,为计算机选择默认网卡 选择安装时的语言,可选择中文: 设 ...

  10. 6月6日 python复习 面向对象

    1.面向对象编程 1.面向过程编程核心是"过程"二字,过程指的是解决问题的步骤,即先干什么再干什么基于该思想编写程序就好比在编写一条流水线,是一种机械式的思维方式 优点:复杂的问题 ...