你可能不知道的 css 内容块
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
相关的属性。
如何找到元素对应的内容块
position
是static
或者relative
时,其内容块是其最近的块级父元素的内容框(content-box),比如block
,inline-block
,list-item
,或者是被指定为某种格式容器的元素,比如table
,flex
,grid
。position
是absolute
时,其内容块是其最近的position
不是static
的块级父元素的填充框(padding-box)。position
是fixed
时,其内容块是整个视图窗口(viewport)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 内容块的更多相关文章
- 你所不知道的 CSS 阴影技巧与细节
关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- 【CSS】346- 你所不知道的 CSS 阴影技巧与细节
偷懒了1个多礼拜,在工作饱和的情况下,怎么坚持学习?今天的分享来自@Coco国服第一切图仔,我们聊聊CSS属性box-shadow- 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 ...
- 你所不知道的 CSS 滤镜技巧与细节
承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用
您可能不知道的CSS元素隐藏“失效”以其妙用 by zhangxinxu from http://www.zhangxinxu.com地址:http://www.zhangxinxu.com/word ...
- 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭
一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
- 你有可能不知道的css浮动问题
最近在开发过程中,有的时候会经常遇见明明知道需要这样做,但是为什么要这样做的原因我们却总是不明所以然. 先来解释下什么叫做清除浮动吧: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且 ...
- 你所不知道的CSS
1.用FONT-SIZE:0来清除间距 inline-block的元素之间会受空白区域的影响,也就是元素之间差不多会有一个字符的间隙.如果在同一行内有4个25%相同宽度的元素,会导致最后一个元素掉下来 ...
随机推荐
- [ Skill ] load 函数优化,识别相对路径
https://www.cnblogs.com/yeungchie/ 在 cds.lib 文件中定义库的路径,为了规范库定义的管理,经常这样做: . |-- cds.lib ------------- ...
- 【二】遗传算法(GA)的MATLAB实现
essay from:https://wenku.baidu.com/view/ce45bbf44693daef5ef73df3.html 一.MATLAB编程实现GA 二.MATLAB函数调用实现G ...
- rsyn的使用
以下是rsync的语法: Local: rsync [OPTION...] SRC... [DEST] Access via remote shell: Pull: rsync [OPTION...] ...
- BeautifulSoup图片爬取
------------恢复内容开始------------ BeautifulSoup介绍: 简单来说,Beautiful Soup 是 python 的一个库,最主要的功能是从网页抓取数据.官方解 ...
- 3、myql的逻辑架构和sql的执行流程
msyql逻辑架构 逻辑架构的解析 逻辑架构图如下(序号代表的是:服务器处理客户端请求的流程) 1.1connectors connectors是指使用不同语言的客户端与mysql server服务器 ...
- MM32F0020 UART1空闲中断接收
目录: 1.MM32F0020简介 2.初始化MM32F0020 UART1空闲中断和NVIC中断 3.编写MM32F0020 UART1中断接收和空闲中断函数 4.编写MM32F0020 UART1 ...
- Python列表生成
# For More :http://www.codebelief.com/article/2017/02/python-advanced-programming-list-comprehension ...
- python 生产数据表脚本
# -*- coding: utf-8 -*-import re"""建立相关表的字段从源表创建指定的MySQL建表脚本"""# 目标表名称 ...
- 七天接手react项目 系列 —— react 脚手架创建项目
其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...
- Java 8 + 10 = Java 18
明天Java 18将正式发布, 虽然它不是长期支持 (LTS) 版本,但它却实现了九个 JEP(在Java 18列出).有哪些特性值得关注呢?今天胖哥为你提前解读.再看.点赞.转发.关注来一波吧. J ...