CSS 的基本渲染逻辑 1

前言

本文主要总结最近学习css的内容

浏览器default CSS

如果我们在html文件中不设置任何css, 那么在chrome, a tag的css如下

a {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}

Chrome default CSS rule 参考这里

CSS中的继承

一部分的css属性是可以继承, 它们大多数跟排版相关, 比如color,
font-size, text-shadow . 具体可以参考这里

这个继承跟class中的继承比较类似, 有属性override的functionality

盒子模型

content: 内容
padding: 内容跟边框的距离
border: 边框
margin: 盒子跟盒子的距离

可以把盒子模想象为画框

Padding

padding是内容跟边框的距离, 也可以想象成是一种inner space

Border

就是边框, 注意有radius的属性

Margin

Margin是element之间的距离

1. Margin可以为负
2. Auto margins, 会把能填的内容都填满
   

Flow Layout

浏览器的默认Layout就是Flow的layout, 在这个layout的mode中, display的可以为inline, block, inline-block

Inline元素不能设置后者大小

strong {
  height: 2em;
}

上面是无用的

Block元素不会共享

比如div元素会把宽占满

这个问题可以通过fit-content来解决

inline-block是有inline属性的block

Width 的计算逻辑

对于block元素, 比如h1, p 这些元素会把这个space占满

min-content

Content会以最小的方式占屏

max-content

Content会以最大的方式占屏. 但是如果内容不够, 也不会多占

fit-content

可以理解成刚刚好

Min and max widths

定义最小/最大的width

使用了 max widths, 就可以把Card元素的width定义好, 不会被拉伸

Height的计算逻辑

对于block元素来说, height的默认逻辑就是越小越好.

如果height是fixed的, 比如100px就有可以出现overflow

height tends to look “down” the tree, to determine its size based on the natural size of its contents, while width tends to look “up” the tree, basing its size on the space made available by the parent.

总结

本文总结了 css的基本逻辑以及Flow Layout的使用