We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
可用于排版相关的一些css 属性:
文字有自己的空间,文字和文字有对齐的关系,行内盒子和文字也有对齐关系,还有一个行高的概念。 橙色的线称为 baseline,行内本身和文字有上下间距。
baseline
行内元素,inline-block元素的默认对齐是基于baseline的,没有行内元素的box,baseline为底部边缘。 如图:红线即为 baseline 绿线为 middleline 这时候k可以设置 line-height 或者 vertical-align。
html 里 换行产生文本节点
绕排
纵向流排版的一个规则
只要元素满足下面任一条件即可触发 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>
想想浏览器怎么把一个元素“画”出来,至少要知道定位和尺寸。定位有三种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
The text was updated successfully, but these errors were encountered:
No branches or pull requests
css 排版
可用于排版相关的一些css 属性:
选择器
语法:https://www.w3.org/TR/selectors-3/#grammar
inline-box
文字有自己的空间,文字和文字有对齐的关系,行内盒子和文字也有对齐关系,还有一个行高的概念。
橙色的线称为
baseline
,行内本身和文字有上下间距。img下方空白问题
行内元素,inline-block元素的默认对齐是基于baseline的,没有行内元素的box,baseline为底部边缘。
如图:红线即为 baseline 绿线为 middleline
这时候k可以设置 line-height 或者 vertical-align。
inline-block 空白问题
html 里 换行产生文本节点
float
绕排
BFC
纵向流排版的一个规则
触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性:
body 根元素
浮动元素:float 除 none 以外的值
绝对定位元素:position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
PS:里面容纳正常流
边距折叠
只会发生在 BFC 上下方向,认为 margin 只要满足所有元素周围的留白需求就行。
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
The text was updated successfully, but these errors were encountered: