关注
分享
枫叶流丹
金牛座萌妹纸一枚，典型工科女，误打误撞进入前端世界，自此沉迷其中，乐此不疲。喜欢一切美的东西，希望可以通过自己的代码描摹出心中向往的东西。静若处子，动若脱兔。偶尔玩点小文艺，喜欢读书，喜欢旅行，立志做一个有思想，有情怀的程序媛。
展开
-
深入理解盒子模型——CSS视觉格式化模型|盒模型|定位方案|BFC
视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将这些框布局成访问者看到的样子。 哪些因素控制了这些布局 1. 盒的尺寸和类型 2. 定位体系 Positioning Scheme （常规流，浮动和绝对定位） 3. 文档树中元素之间的关系原创 2017-05-28 21:03:50 · 841 阅读 · 0 评论 -
深入理解盒子模型——CSS之BFC详解
首先我们看看w3c对BFC是怎么定义的: Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other原创 2017-05-28 21:10:58 · 4521 阅读 · 0 评论 -
深入理解盒子模型——CSS 盒模型Block box与Line box
在上一篇想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC比较宏观的了解了盒子模型的作用，接下来就详细的介绍两种盒子的具体细节。 Block Box display ： block 、 list-item 以及 table 会让一个元素成为块级元素。 在Block Box中，会被水平格式化，垂直格式化，那我们就分垂直和水平来讲讲． 水平格式化 如何计原创 2017-05-28 21:29:04 · 5040 阅读 · 0 评论 -
深入理解盒子——模型文本垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
文本垂直居中方法比较常用，比如一定高度的盒子中，未知高度的盒子等常用于总结下文本垂直居中的以下方法： 1.单行文本垂直居中： 如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：div{ height:25px; line-height:25px; } 2.（未知高度）多原创 2017-05-28 21:56:00 · 5548 阅读 · 1 评论