## 基本概念 - [文档流 mdn](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow) - 块、内联、内联块？ - margin合并 - 两种盒模型 ### 文档流 Normal Flow [流式布局 mdn](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout) ### 文档流动方向 - 从左到右：[内联元素像默认的``](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/span) 直到排满一行，才会另起一行 - 从上到下：[块级元素像默认的`

`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/div) 每一个元素占据一行，不并排（注意不加任何样式为前提下） eg. [css-demo-1 with CSS animation & SCSS](http://xmasuhai.xyz/demo-test/css-demo-1/css-demo_system.html) > 内联元素占满一行，空间不够时，折行，即拦腰折断显示到下一行 > 块级元素就算设置了宽度不占满，也不会合成一行，即不并排，除非设置定位属性：默认情况下，每个块级元素独占一行 ### 文档流小结 - 流动方向 - `inline`元素从左到右，到达最右边才会换行 - `block`元素从上到下，每一个都会另起一行 - `inline-block`也是从左到右 - 宽度 - `inline`宽度为所有内部内联元素的宽度，一般即文字宽度的和所决定，指定`width`无效 - `block`默认自动计算宽度`width:auto;`，指能有多宽就占多宽，**尽量得宽**，并不一定是`100%`，可用`width`指定，指定了也不会换行，除非有其他非默认属性 - `inline-block`结合前两者部分特点，默认宽度和`inline`相同，**尽量得窄**，紧密包裹里面的内容，但可设置`width` - 高度 - `inline`高度由`inline-height`间接确定，跟它的`height`或者`padding`无关 - `block`高度由所有内部正常文档流中的元素高度之和决定，全部包裹住，可以设`height` - `inline-block`和`block`类似，可以设置`height` > 这里`内联/行内 | 块级 | 行盒元素`指的是 `display：[inline | block | inline-block]`的元素，因为HTML5标准不分块级、内联级，只分浏览器的默认属性，可以随时切换 - [**永远不要在inline元素里写block元素**](http://xmasuhai.xyz/post/html/html%E5%85%A8%E8%A7%A35html%E5%85%A5%E9%97%A8-%E4%B8%8D%E8%83%BD%E8%BF%99%E4%B9%88%E5%86%99%E6%88%91%E4%B8%8D%E9%80%A0/) - **永远不要写`width:100%;`**，除非特殊说明 > 默认``的高度是由谁决定的？ [css-demo_flow with CSS animation & SCSS](http://xmasuhai.xyz/demo-test/css-demo-1/css-demo_flow.html) - demo里默认``既不接受宽度，也不接受高度； - 包裹它的`

`并没有被``设置的`padding`撑开，而`

`的高度由其里面的元素决定，包裹住其中的元素； - 加了内边距的``被撑高的只是**可视高度** - `inline`元素的**实际高度**是由**行高`line-height`间接确定的** - 包裹它的`

`被内部元素的实际高度撑开，行高会继承，写在div后也一样 - 间接？还受到不同字体的影响，请看行盒模型[深入理解CSS:字体度量...by方应杭](https://zhuanlan.zhihu.com/p/25808995) - 脱离文档流元素不计算入父元素的高度，具体[看层叠上下文 mdn]([https://xxx/](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)) ### 属性`overflow`溢出 > 当内容`content`大于容器`box` - 等内容的宽度或高度大于容器的，会溢出 - 可用`overflow`来设置是否显示滚动条 - `auto`：灵活设置 - `scroll`：永远显示，太丑，多出的像素会影响布局，不用，在cssReset里干掉 - `hidden`：直接隐藏溢出部分 - `visible`：直接显示溢出部分 - `overflow`可以分为`overflow-x`和`overflow-y` #### [脱离文档流 mdn](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow) > 超出的内容... - visible 可见 - hidden 不给看 - scroll 可滚（太丑高度不超过也显示滚动条） - auto 超出部分，自动显示滚动条 > `

`里面什么也没有，即高度为0px，里面没有文档流元素 > > 而``里面什么也没有时，加了border，看出高度是由`line-height`决定的 > > 指定除visible(默认值)以外的值将创建一个新的块级格式化上下文. > > 为使overflow有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。 > > 注意: 设置一个轴为visible（默认值），同时设置另一个轴为不同的值，会导致设置visible的轴的行为会变成auto。 > > 注意: 即使将overflow设置为hidden，也可以使用JavaScript Element.scrollTop 属性来滚动HTML元素。 > > 如果有滚动条，那么里面的元素默认只在第一屏显示，后面留空 [css-demo-overflow with SCSS](http://xmasuhai.xyz/demo-test/css-demo-1/css-demo_overflow.html) ### 让一个元素脱离文档流 > 回忆一下 - `block`高度由内部文档流元素决定，可以设`height` - 有些元素可以不在文档流中，放飞自我 > 哪些元素脱离文档流 > 如何让一个元素脱离文档流？内联元素的高度是由行高决定的-->确定了行高的文字内容形成文档流元素-->决定了其外部块级元素的高度-->高度撑开其外部的块级元素现在让文字即其内联元素脱离文档流 - 加属性`float` - 加属性`position:absolute | fixed;` > 怎么让元素不脱离文档流 - 不要用以上提到的属性 - 一个元素脱离文档流，就不影响块级父元素的高度，换句话说父容器计算高度时就不把它计算在内了 - 以后会学清除浮动，但一旦脱离文档流，就回不去了 ### 块、内联、内联块？过时的概念 #### 元素的默认level > `内联/行内 | 块级 | 行盒元素`指的是 `display：[inline | block | inline-block]`的元素，因为HTML5标准不分块级、内联级，只分浏览器的默认属性，可以随时切换，[块级元素与行内元素 mdn](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements#%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E4%B8%8E%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0) - 默认是block-level box的元素 - 默认是in-line-level box的元素 - 通过`display:[inline | block | inline-block|];`来随时切换 - `inline-block`在文档流上很像`inline`，但是不会跨两行显示 ### [Flow Layout and Overflow 流布局和溢出](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow) > 块级元素设置的高度比内容矮时，内容溢出边框 ### margin合并（死记硬背） ### 两种盒模型（border-box更符合人类思维、直觉）更符合人类思维、直觉 eg. 第三视角 > CSS不是重点，面向工作学习市场上比较需要的技术才是王道，张*旭的职业发展不适大多数人，选择比努力更重要 --- ·未完待续· --- #### 参考文章 [CSS 基础概念.pdf](https://static.xiedaimala.com/xdml/file/3ac7c224-c23d-491f-84b5-4fabfbeab9b8/2019-8-23-12-30-0.pdf #### 相关文章 - 无 --- - 作者： Joel - 文章链接： - [版权声明](http://xmasuhai.xyz/posts/版权声明链接/) - 非自由转载-非商用-非衍生-保持署名 ---

【CSS非全解02】CSS基础-文档流