Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS2.1 的一些知识点 #67

Open
MengZhaoFly opened this issue May 25, 2020 · 0 comments
Open

CSS2.1 的一些知识点 #67

MengZhaoFly opened this issue May 25, 2020 · 0 comments

Comments

@MengZhaoFly
Copy link
Owner

MengZhaoFly commented May 25, 2020

css 排版

可用于排版相关的一些css 属性:

  • 第一代技术:float, inline-block ...
  • flex
  • grid
  • 以及未来的 css Houdini

选择器

inline-box

文字有自己的空间,文字和文字有对齐的关系,行内盒子和文字也有对齐关系,还有一个行高的概念。
橙色的线称为 baseline,行内本身和文字有上下间距。

image

img下方空白问题

行内元素,inline-block元素的默认对齐是基于baseline的,没有行内元素的box,baseline为底部边缘。
如图:红线即为 baseline 绿线为 middleline
image
这时候k可以设置 line-height 或者 vertical-align。

inline-block 空白问题

html 里 换行产生文本节点

float

绕排

BFC

纵向流排版的一个规则

image

触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性:
body 根元素
浮动元素:float 除 none 以外的值
绝对定位元素:position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
PS:里面容纳正常流

边距折叠

只会发生在 BFC 上下方向,认为 margin 只要满足所有元素周围的留白需求就行。

<style>
    .b1 {
      width: 30px;height: 30px;background-color: green;
      margin: 50px;
    }
    .b2 {
      width: 30px;height: 30px;background-color: green;
      margin: 20px;
    }
  </style>
<body>
  <div>
    <div class="b1"></div>
    <div class="b2"></div>
  </div>
</body>

containing block

想想浏览器怎么把一个元素“画”出来,至少要知道定位和尺寸。定位有三种normal flow, floats和absolute,无论属于哪种首先要找所在的containing block(我翻译为容器块),相当于一个大箱子里摆很多小盒子,小盒子怎么摆取决于大箱子。 -- from 克军

作者:张克军
链接:https://www.zhihu.com/question/20086234/answer/13943060
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

参考

BFC:https://www.w3.org/TR/CSS22/visuren.html#normal-flow
winter-cn:https://www.cnblogs.com/winter-cn/archive/2013/05/11/3072926.html

@MengZhaoFly MengZhaoFly changed the title 重学 CSS CSS normal flow 的一些难点 May 31, 2020
@MengZhaoFly MengZhaoFly changed the title CSS normal flow 的一些难点 CSS2.1 的一些知识点 May 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant