- 引入CSS的几种方式
- block, inline, inline-block
- box-sizing
- 块级/内联元素的高度
- 元素横向陈列的方法
- CSS画三角形
引入CSS的几种方式：
1.内联样式引入：
2.通过<style>标签引入：（<style>一般放在<head>里）
3.外部样式引入：（用<link>）
4.import另一个css文件（不常用）
块级元素（block）：
块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性。
内联元素（inline）：
内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满，对inline元素设置width,height属性无效。
inline-block：
我们有个时候既希望元素具有宽度高度特性，又具有同行特性，这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。
box-sizing：
定义了 user agent 应该如何计算一个元素的总宽度和总高度。
属性
- content-box 默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
- border-box width 和 height 属性包括内容，内边距和边框，但不包括外边距。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。
文档流：
就是文档内 元素的流动方向。
块级元素的高度：
由其内部的 文档流元素 的高度总和 决定。
内联元素（红框）从左往右流动，如果流动受到阻碍，换行继续流动。
- 一个元素如果是中文，遇到换行会被切割（一部分留在第一行一部分已经到第二行）
- 一个元素如果是英文，遇到换行不会被切割（超出部分不显示），要使它换行显示需要
word-break: break-all代码实现。
块级元素（绿框）从上往下流动（每一个块占一行）。
内联元素的高度：
很难精确确定，一般由最高的那个元素决定（同一字符因字体不同高度也会不同）。
所以如果需要确定的高度，就自己定义一个行高 line-height: **px;
⚠️字体基于基线对齐
让元素横向陈列的方法之一：
1.在所有子元素上加float；
2.在父元素上加clearfix（固定代码背下来）消除float产生的bug
⚠️排查bug可以通过给元素加border边框
CSS画三角形 （实现过程）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
