Introducing positioning

Positioning可以元素脱离normal document layout flow.

默认下,块级盒子的宽度是其父元素的100%,并且和它自己的内容一样高。行级盒子的宽度和高度都和它自己的内容一样大。

The normal layout flow是元素放置在浏览器视口内的系统。默认下,block元素垂直列出,每个出现在一个新行,并且在上一行的下面,它们由margin隔开。

inline元素不一样,它和其他的inline元素或者text内容在同一行,只要父级block盒子有空间就这么做,如果没有空间,那么超出的内容或元素会移动到新的一行里。

特性请看替换元素与非替换元素

Static positioning

Static positioning is the default that every element gets -- it just means "put the element into it's normal position in the document layout flow --- nothing special to see here".

Relative positioning

相对定位和static定位很相似,除了一旦定位的元素在正常流中占据了位置,则可以修改其最终位置,包括使其与页面上的其他元素重叠。

简单概括,设置了relative后,脱离了文档流,原来的位置依然占据。通过left,right设置的值会与其他元素重叠。

position: relative;

Introducing top, bottom, left and right

使用top、bottom、left和right可以指定元素往哪个方向移动。举例来说:

div {
position: relative;
top: 30px;
/*表示举例原来的top30px*/
}

Absolute positioning

使用绝对定位,元素脱离文档流,原来的位置将不再保留。当设置了绝对定位后,它的位置也会改变。而使用top、right、bottom、left也将不一样了,它表示距离最近有定位属性的祖先的top或者right或者bottom或者left。

Positioning contexts

哪个元素是绝对定位的"包含元素"? 默认情况下,它是html元素--- 定位元素嵌套在body里,但在最终的布局中,它离页面边缘的顶端和左边30px,这是html元素。这更准确地称为元素的positioning context.

我们可以改变positioning content --- 绝对定位的元素相对于其定位的元素。这是通过在元素的其他祖先元素之一设置定位实现的。

div {
position: relative;
} div p {
position: absolute;
}

Introducing z-index

定位元素会在未定位元素上面,但是当有多个定位元素的时候,我们如何考虑它们的层叠顺序呢?

如果有多个定位元素的话,后定位的元素会在之前定位的元素的上面,但是如何改变它们的顺序呢?

我们可以使用"z-index", 默认下,定位的元素z-index的值是auto,实际上是0。我们可以通过改变它的值来改变定位元素的层叠顺序。但是不可以改变未定位元素的层叠顺序。

Fixed positioning

Fixed position和绝对定位类似,但是fixed position 它相对的是浏览器的视口。不管浏览器是如何滚动的或者如何放大缩小的,它都相对的是浏览器的视口。

浮动

浮动过后的任何元素都成了block level element

简单例子

/* html */
<p>
This is my very impoort paragraph.
I am a distinguished gentleman of such renown that my paragraph
needs to be styled in a manner befitting my majesty. Bow before
my splendour, dear students, and go forth and learn CSS!
</p> /* CSS */
p {
width: 400px;
margin: 0 auto;
} p::first-line {
text-transform: uppercase;
} p::first-letter {
font-size: 3em;
border: 1px solid black;
background: red;
float: left;
padding: 2px;
margin-right: 4px;
}

清除浮动

所有内容在浮动,如果不处理,那么就会很可怕。幸运的是有一个属性叫做clear,当将它应用到一个元素时,它基本上说"停止浮动到这里"--- 这个元素和它之后的元素都不会浮动,除非你应用一个新的float到另一个元素。

clear有三个值:

  • left: 停止左侧浮动
  • right: 停止右侧浮动
  • both: 停止左右浮动

浮动的特点

  • 浮动元素会脱离正常的文档流,按照其margin指定的位置相对于它的上一个块级元素(或父元素)显示。
  • 浮动元素后面的块级元素的内容会围绕此浮动元素, 但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠其。
  • 浮动元素后面的内联元素会向此浮动元素的外边距靠齐。

浮动造成的影响

  1. 对父元素的影响: 对于其父元素来说,元素浮动之后,它将脱离正常的文档流,所以它也无法撑开其父元素, 造成其父元素的塌陷。
  2. 对其兄弟元素(非浮动)的影响:
    • 如果兄弟元素是块级元素: 该元素会忽略浮动元素的位置而占据它的位置,并且元素会处在浮动元素的下层,但它的内部文字和其他行内元素都会围绕浮动元素。
    • 如果兄弟元素是内联元素:则元素会环绕浮动元素排列。
  3. 对其兄弟元素(浮动)的影响:
    • 同一个方向的浮动元素:当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时,它会紧跟在它们后面。
    • 相反方向的浮动元素:互不影响,在同一条水平线上,当空间不够时会被挤下去。

浮动问题

当对div用的百分比时,然后浮动刚刚好,但是如果要为div设置border、padding等等,那么可能就会超过100%或者父级盒子的大小,因此可以为div设置box-sizing: border-box。

另外一个问题, 当你有一下布局时:

<div>
<div class="fl">111</div>
<div class="fl">222</div>
</div>
<footer>333</footer> .fl {float: left}
footer {margin-top: 50px;clear: left;}

因为使用了clear: left后,所以footer不在围绕浮动元素。但是你会发现,margin-top: 50px并不起作用。为了解决这个问题, 在HTML中添加新的div元素,并且设置它的class为clearfix。此时,可以取消了footer的clear:both;如下:

<div>
<div class="fl">111</div>
<div class="fl">222</div>
<div class="clearfix"></div>
</div>
<footer>333</footer> .fl {float: left}
footer {margin-top: 50px;}
clearfix {clear: both;}

但是这只是简单的解决了这个问题而已。

因此概括一下清除浮动(我觉得应该叫闭合浮动更好一点儿,清除浮动只是清除了浮动,但是不能解决高度塌陷的问题)的几种方法:

  • 第一个,像上面那样,但是没有语意化,并且增加了许多毫无意义的标签。
  • 第二种,The Overflow Method, 设置overflow: auto或者hidden,就可以了,但是它不是专门用来闭合浮动的,而且要小心overflow后可能会隐藏或者出现滚动条。
  • 第三种,推荐使用。
.clearfix:after {
content: ".";
display: block;
clear: both;
}

参考

All about floats

那些年我们清除过的浮动

BFC神奇背后的原理

BFC

BFC的中文意思是块级格式化上下文。它是一块独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相关。

哪些元素会生成BFC?

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex(关于这一点我是真的没有测试出来)
  • overflow不为visible

BFC的布局规则

  • 内部的box会在垂直方向,一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 每个元素的margin box的左边,与包含块的border box的左边相接触,即使存在浮动也是如此。
  • BFC的区域不会和float box重叠。
  • BFC就是页面上的一个隔离的独立容器,容器里的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时,浮动元素也参与运算。

BFC的作用与原理

  • 自适应两栏布局
  • 清除内部浮动
  • 防止margin重叠

参考:

BFC背后神奇的原理

替换元素与非替换元素

替换元素(replaced element):所谓替换元素就是浏览器根据元素的标签和属性,来决定元素具体显示什么内容。比如说:img标签的src属性的值用来读取图片信息并且显示出来。又比如说,input标签的type属性决定是显示输入框还是单选按钮。html中的img、input、textarea、object、video、embed都是替换元素。

非替换元素(non-replaced element): 是指内容包含在文档里的元素。比如p、span等等。

margin-top/margin-bottom与padding-top/padding-bottom

在考虑inline的时候,我们就需要考虑inline元素到底是行内可替换元素还是行内不可替换元素。

讨论margin-top和margin-bottom对行内非替换元素是否其作用:

  1. 规范允许margin可以设置到行内元素。
  2. 由于向一个行内非替换元素应用margin,对行高没有影响。
  3. 并且margin是透明的,所以声明margin-bottom, margin-top没有任何视觉效果。
  4. 而对于行内非替换元素应用左右的margin,是有影响的。

讨论margin-top和margin-bottom对行内替换元素是否其作用:

  1. 为行内替换元素设置margin会影响行高。
  2. 所以margin-top和margin-bottom是有视觉效果的。
  3. 对行内替换元素应用左右的margin,也是有影响的。

讨论padding-top和padding-bottom对行内非替换元素是否其作用:

  1. 明确是有作用的,可以设置背景颜色看出来。
  2. 不会影响block布局。

讨论padding-top和padding-bottom对行内替换元素是否其作用:

  1. 明确是有作用的,可以设置背景颜色看出来。
  2. 也会影响block布局的。

参考:

是不是inline元素就不能设置宽高margin,padding?

CSS中的一些概念

阅读MDN文档之布局(四)的更多相关文章

  1. 阅读MDN文档之布局(四)

    Introducing positioning Static positioning Relative positioning Introducing top, bottom, left and ri ...

  2. 阅读MDN文档之CSS选择器介绍(一)

    本文为阅读MDN文档笔记 目录 Different types of Selectors Attribute Selectors Presence and value attribute select ...

  3. 阅读MDN文档之StylingBoxes(五)

    目录 BoxModelRecap Box properties Overflow Background clip Background origin Outline Advanced box prop ...

  4. 阅读MDN文档之基本盒模型(三)

    Box properties Margin collapsing Adjacent siblings(相邻兄弟) Parent and first/last child Empty blocks Ac ...

  5. 阅读MDN文档之层叠与继承(二)

    目录 The cascade Importance Specificity Source order A note on rule mixing Inheritance Controlling inh ...

  6. Emacs阅读chm文档

    .title { text-align: center; margin-bottom: .2em } .subtitle { text-align: center; font-size: medium ...

  7. 前端开发必备之MDN文档

    想下载MDN文档的看前面的内容就可以了. HTML 源码下载 MDN官方下载地址:https://developer.mozilla.org/media/developer.mozilla.org.t ...

  8. MDN 文档高级操作进阶教程

    MDN 文档高级操作进阶教程 MDN 文档, 如何优雅的使用 MDN 文档上的富文本编辑器 pre & 语法高亮器 code & note box source code 上传附件 i ...

  9. 关于MDN,HTML入门来自MDN文档

    由开发者和作者组成的开源社区:推动web发展, MDN(Mozilla Developer Network) 维基,共同维护做贡献: 需要使用到github账号进行验证,以此再创建MDN账号: HTM ...

随机推荐

  1. javaSE_Java第一周总结:有难度题目集合

    第一周练习总结 说明:尽量采用多种做法解决 1.使用三种方法实现变量交换 public class Test1Change{ public static void main(String[] args ...

  2. 克隆 CentOS 后系统启动问题解析

    问题背景: 虚拟机:VMware Workstation. 操作系统:CentOS,是Linux发行版之一. 问题: 原因:虚拟机的服务没有开启(虚拟机开启一般比较占内存,所有多数人都设置成手动开启) ...

  3. 保存和恢复 Android Fragment 的状态

    经过几年在 Android 应用开发中应用 Fragment 的努力之后,我必须要说尽管Fragment的概念非常优秀,但是它也同时带来了一堆问题.当我们处理实例的状态保存时就需要特别一件一件地修护好 ...

  4. react-native学习(RN)--之Window环境下搭建环境配置

    react-native以后会更火的,自从2015年facebook开源了Android 一.安装java 二.安装Android Studio 三.安装react-native需要的Android ...

  5. datatables 学习笔记1 基础篇

    本文共3部分:基本使用|遇到的问题|属性表 1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ...

  6. Scrapyd部署爬虫

    Scrapyd部署爬虫 准备工作 安装scrapyd: pip install scrapyd 安装scrapyd-client : pip install scrapyd-client 安装curl ...

  7. python 中 for 循环 if循环 break

    python中最基本的语法格式大概就是缩进了.python中常用的循环:for循环,if循环.一个小游戏说明for,if ,break的用法. 猜数字游戏: 1.系统生成一个20以内的随机数 2.玩家 ...

  8. 短信发送接口被恶意访问的网络攻击事件(三)定位恶意IP的日志分析脚本

    前言 承接前文<短信发送接口被恶意访问的网络攻击事件(二)肉搏战-阻止恶意请求>,文中有讲到一个定位非法IP的shell脚本,现在就来公布一下吧,并没有什么技术难度,只是当时花了些时间去写 ...

  9. Python之数据加密与解密及相关操作(hashlib模块、hmac模块、random模块、base64模块、pycrypto模块)

    本文内容 数据加密概述 Python中实现数据加密的模块简介 hashlib与hmac模块介绍 random与secrets模块介绍 base64模块介绍 pycrypto模块介绍 总结 参考文档 提 ...

  10. angular之$watch、$watchGroup、$watchCollection

    1,原型:$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}: 2,参数:watchExp(必须 ...