一点点css的基础原理总结0.前言1.包含块(CB)2.宽和高3.BFC4.行内元素5. 垂直方向的margin6.盒子模型

0.前言

CSS属性非常多,如果说死记的话,是不容易的,我们了解他的原理,其他不常见的属性都是手到擒来

1.包含块(CB)

首先说一下ICB(初始包含块)。简单来说,根元素的ICB就是首屏。 连续媒体:页面内容范围超出视窗大小,需要我们拉动滚动条才能看,他的ICB是视窗(viewport) 分页媒体:页面内容是一页一页的,比如我们在手机上看见的一些h5,他的ICB是页面范围

这很明显,position为fixed的时候就是ICB

CB是做什么的呢? 比如我们的top、left、bottom、right,他们定位就相对于CB。百分比,也是相对于CB。所有的元素,在CB里面参与高度计算。对于脱离文档流的float、absolute、fixed,父元素无法识别他们,也不参加高度的计算,所以float的时候会导致父元素高度坍塌。

  • position为relative或者static的元素,它的包含块由最近的块级(display为block,list-item, table)祖先元素的内容框组成
  • 如果元素position为absolute,它的包含块是祖先元素中最近一个非static
  • 其他情况下包含块由祖先节点的padding edge组成

对于margin需要注意了:margin-top和margin-bottom的百分比也是相对于父元素width,不是height。这个理由很简单,我们可以想象一下:设置了上下方向的margin->父元素的高增加->上下margin又增加->父元素高又增加......,如此循环。

其实这个是流传的说法,其实真正的原因是在于我们的书写习惯。我们写字是从左到右,从上到下,在排版上,水平方向可能就有具体的需求比如分栏。但是垂直方向上,我们要写多少字是一个未知数,而且要是的确需要知道垂直方向尺寸有多大,也是我们人为地给他一个高度(height默认是0,我们要是想用百分比的高只能给父级元素人为地赋值)。也可以想一下,如果是我们书写习惯是竖着写,那么就是height默认是视窗高度了,而width默认是0.

我们是不是会发现一个问题,都说absolute相对于最近的非static元素,但是我们做遮罩层的时候,是不是直接写宽高100%,而且还能有效。 因为,最近都没有一个非static的父元素,absolute会相对于ICB

2.宽和高

无论什么时候,要记得水平方向,宽默认取全部;垂直方向,高默认取0。所以,我们平时width100%就是占满全部,auto就是占满剩下的内容,而height100%有时候设置了也没有用。 height没用的时候,因为他的父元素是0或者被默认是0。比如一个div,直接设置高100%,他是0,但是你用一个已知高度的div包住他,这时候他的百分比就有用了。 auto、百分比,都由CB(包含块)决定

这样子,我们也可以知道为什么margin auto能居中了: 首先,先要知道宽高,既然已经知道了宽高,那margin就可以被反推出来值是多少,auto会平分剩下的(两边margin=行宽-width)。

先说一个概念:outerHeigth,也就是margin-box。顾名思义就是普通盒子模型加上margin。所以我们可以得出一个条件:居中的时候,outerHeigth=父(CB或者ICB)的高。如何居中呢,显然是top或者bottom为0,这样子margin盒子边界和父元素(CB或者ICB)重叠

3.BFC

块级盒子形成BFC的条件: 1.浮动元素 2.绝对定位元素 3.非块级盒子的块级容器(inline-block,table-cells,and table-captions) 4.overflow不是“ visible” 5.根元素

BFC的特点: 1.一个独立的容器。 2.盒子从顶端开始垂直地一个接一个地排列,盒子之间垂直的间距是由 margin 决定的。 3.在同一个 BFC 中,两个相邻的块级盒子的垂直外边距会发生重叠。 4.BFC 区域不会和 float box 发生重叠。 5.BFC 能够识别并包含浮动元素,参与高度计算。

因此我们可以想起一些场见的问题,用bfc解决 1.父子盒子margin越界问题

而BFC可以解决这个问题,由bfc的特点:一个独立容器(甚至可以说是一个独立的margin-box),当然不会无缘无故地穿透父盒子

2.float时父元素高度坍塌、兄弟元素重叠 前面我们已经看见,父元素高度为0。因此,我们把父元素变成BFC,那就可以实现我们想要的结果——父元素包含一堆子元素

还有一种方法,在父元素后面(::after)加上一个尺寸为0的伪元素,clear:both,使得父元素换行显示,识别前一行的高度(即是0)

3.兄弟元素,一个float 如果是一个float另一个不是,则正常情况下,没有float的那个直接无视float的那个,因为用了float脱离文档流。如果无float为bfc,则会像加了float一样紧跟后面

一个float,一个正常,正常的元素无视float的元素:

另一个是bfc:

4.行内元素

4.1可置换行内元素

展示内容不属于css范畴的,比如src、value,可被替换的(img、object、video、textarea、input等标签),伪元素通过content插入的对象是匿名可置换元素。

反之,其他的就是不可置换行内元素了,a、span标签

对比:

可置换

不可置换

宽高margin可设?

不能

水平对齐方式

父元素的text-align影响

默认左对齐

垂直对齐方式

自己的或者父为table-cell时的vertical-align

默认baseline

4.2IFC

不同于BFC,IFC是默认地、隐式的创建,当一个区域内仅仅包含水平排列的元素才生成(文本、行级元素、行级块元素),可以通过vertical-align来设置垂直方向上的对齐。

4.2.1 inline-box(行级盒子)

有点像我们以前的英语作业本一样,只是多了几条线

baseline就是基线,英语本上写字的那一行,middle是中间(整个7线谱的最中间,也是英语本三行的最中间的1.5行) ,vertical-align就是设置对齐哪一条线的。

面试官:你见过这种情况吗

当img的vertical-align为baseline,img的高又小于行高就会发生这样子的情况。我们只要让他的对齐线是bottom或者top(是top的时候,他用上边线和top对齐的)就行

4.2.2 行高inline-height

非置换元素可以设置,也可以被span、a、label影响,可置换元素或者行级块、行级表格子元素的margin盒子和vartical-align决定。

对于不可置换元素的行高,高为最上面的text-top到最下面的text-bottom(无论是单行还是多行),如果父级块元素不设置高,行内子元素line-height影响父元素的行高。

父为table-cell的时候,可以利用vertical-align控制内部子元素垂直居中(无论行级元素还是块级元素)

对于块级包含文本的行高,比如p标签嵌套一些文字的情况,默认是normal。这个normal是根据font-size大小来决定,块高稍大于font-size。同样的,对于多行的情况,是每一行加起来的和。每一种字体,已经确定了自身相应的高度,不同字体可能有很细微的差别。于是,我们可以设置line-height:1(或者100%),这样子就可以让字体饱满地填充块高。

5. 垂直方向的margin

前面已经说到outerHeigth的概念,也就是margin盒子。

居中条件是outerHeigth=line-height《=》vartical-align:top=bottom=0

还有我们都知道的垂直方向margin折叠:

用BFC或者float,margin就不会折叠了:

6.盒子模型

大家都知道的ie盒子和w3c盒子,有的人就说了,ie盒子这种旧东西,有什么意义? 其实,在响应式的情况下,比如50%宽,10pxpadding, ie盒子比w3c盒子更好了 ie:

W3C:

calc需要计算,所以性能上就稍微差了一点

现在bootstrap也是用ie盒子了,在响应式上比较容易操作。ie盒子,在关心盒子外部与外部整体的联系时候比较优;W3C盒子,在关心盒子内部的内容与外部的联系的时候比较优

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏达摩兵的技术空间

css选择器攻略

很多小伙伴对css选择器表示不屑,觉得很简单没必要学习,其实你究竟了解多少呢?当面试官问你的时候,你能分出哪些是css3新增的选择器,他们兼容如何?又该如何处理...

983
来自专栏偏前端工程师的驿站

CSS魔法堂:那个被我们忽略的outline

 在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性——outline,由于之前对其...

711
来自专栏用户3030674的专栏

Android5.0新特性之——控件移动动画(初级)

最近开发,UI大牛们设计了好多很炫酷吊炸天的动画,不由得重新学习了一下5.0的ObjectAnimator动画。

1442
来自专栏Python爱好者

Python绘制分形树(一)

4028
来自专栏前端知识分享

第2天:HTML常用标签

一、超链接a href:www.baidu.com(跳转页面);id名(锚点跳到相应div位置);01.rar(压缩包) target:_blank(新窗口打...

2591
来自专栏C/C++基础

CSS3制作3D水晶糖果按钮

本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon(Candy)Button实现了其棒棒糖果按钮,如下图所示:

1191
来自专栏hightopo

绘制SVG内容到Canvas的HTML5应用

2213
来自专栏肖蕾的博客

解决安卓中XML文件声明高度 宽度无效的问题

1133
来自专栏lgp20151222

脱离文档流两操作,float和position:absolute的区别

文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行;

932
来自专栏前端吧啦吧啦

常用页面布局分享

5498

扫码关注云+社区

领取腾讯云代金券