目录
1_CSS属性 white-space
用于设置空白处理和换行规则
normal：合并所有连续的空白，允许单词超屏时自动换行【浏览器默认】
nowrap：合并所有连续的空白，不允许单词超屏时自动换行
（以下三个不常用）
pre：不合并所有连续的空白，不允许单词超屏时自动换行
pre-wrap：不合并所有连续的空白，允许单词超屏时自动换行
pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行
2_CSS属性 text-overflow
用来设置文字溢出时的行为
clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
ellipsis：溢出那行的结尾处用省略号表示
text-overflow生效的前提是overflow不为visible
常见的是将white-space、text-overflow、overflow一起使用：
white-space:nowrap;
text-overflow：ellipsis;
overflow:hidden;
3_CSS函数
在前面有使用过CSS函数:
比如rgb/rgba/translate/rotate/scale等;
CSS函数通常可以更加灵活的来编写样式的值；
几个好用的CSS函数:
var: 使用CSS定义的变量;
calc: 计算CSS值, 通常用于计算元素的大小或位置;
blur: 毛玻璃(高斯模糊)效果;
gradient：颜色渐变函数；
3.1_ var 变量
CSS中可以自定义属性
属性名需要以两个减号（–）开始;
属性值则可以是任何有效的CSS值;
通过var函数来使用:
<style>
/* :root换成html也可以 */
:root {
/* 定义了一个变量(CSS属性) */
/* 只有后代元素可以使用 */
--main-color: #f00;
}
.box {
color: var(--main-color);
}
.title {
color: var(--main-color);
}
</style>
<body>
<div class="box">
我是box
</div>
<h1 class="title">
我是标题
</h1>
</body>
规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)
3.2_ calc 计算值
calc() 函数允许在声明 CSS 属性值时执行一些计算。
-
计算支持加减乘除的运算；
-
+和 - 运算符的两边必须要有空白字符。
-
通常用来设置一些元素的尺寸或者位置；
<style>
.box {
width: 500px;
height: 100px;
background-color: orange;
}
.item {
height: 50px;
display: inline-block;
}
.item1 {
/* width的百分比相对于包含块(父元素) */
width: calc(100% - 100px);
background-color: #f00;
}
.item2 {
width: 100px;
background-color: #0f0;
}
</style>
<body>
<div class="box">
/*运行效果，两个方块不在统一水平线上，是因为，隔着一个换行符；若想在一个水平线上，在下面删去两个方块代码之间的换行符*/
<div class="item item1"></div>
<div class="item item2"></div>
</div>
</body>
3.3_blur 毛玻璃模糊
blur() 函数将高斯模糊应用于输出图片或者元素;
-
blur(radius)
-
radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊;
通常会和两个属性一起使用：
-
filter: 将模糊或颜色偏移等图形效果应用于元素;
-
backdrop-filter: 为元素后面的区域添加模糊或者其他效果;
/*直接演示 模糊效果*/
<style>
img {
filter: blur(5px);
}
</style>
<body>
<!-- filter -->
<img src="../images/test.jpg" alt="">
</body>
/* 开发中常用的模糊效果 */
<style>
.box {
display: inline-block;
position: relative;
/* filter: blur(5px); */
}
.cover {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
}
</style>
<body>
<div class="box">
<img src="../images/test.jpg" alt="">
<div class="cover"></div>
</div>
</body>
3.4_ gradient过渡
gradient 是一种image数据类型的子类型，用于表现两种或多种颜色的过渡转变
-
image数据类型描述的是2D图形。比如background-image、list-style-image、border-image、content等；
-
image常见的方式是通过url来引入一个图片资源；也可以通过CSS的gradient 函数来设置颜色的渐变；
gradient常见的函数实现有下面几种：
-
linear-gradient()：创建一个表示两种或多种颜色线性渐变的图片；【常用】
-
radial-gradient()：创建了一个图像，该图像是由从中心原点发出的两种或者多种颜色之间的逐步过渡组成；
-
repeating-linear-gradient()：创建一个由重复线性渐变组成的image；
-
repeating-radial-gradient()：创建一个重复的原点触发渐变组成的image；
<style>
.box {
width: 200px;
height: 100px;
/* background-color: orange; */
/* background-image: linear-gradient(red, blue); */
/* 线性渐变。 上面的代码表示 默认渐变方向从上(红)到下（蓝） */
/* background-image: linear-gradient(to right, red, blue); */
/* 上面的代码表示 渐变方向从左到右 */
/* background-image: linear-gradient(to right top, red, blue); */
/* 上面的代码表示 渐变方向从左下角到右上角 */
/* background-image: linear-gradient(-45deg, red, blue); */
/* 上面的代码表示 以y轴起始角度，渐变方向从逆时针45度开始 */
/* background-image: linear-gradient(to right, red, blue 40px, orange 60%, purple 100%); */
/* radial-gradient 圆周渐变，由内而外渐变*/
/* background-image: radial-gradient(red, blue); */
background-image: radial-gradient(at 0% 50%, red, blue);
}
</style>
<body>
<div class="box"></div>
</body>
4_浏览器前缀
有时候可能会看到有些CSS属性名前面带有：-o-、-xv-、-ms-、mso-、-moz-、-webkit-
官方文档专业术语叫做：vendor-specific extensions（供应商特定扩展）
为什么需要浏览器前缀？
CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀；
浏览器私有前缀，只有对应的浏览器才能解析使用
-o-、-xv-：Opera等
-ms-、mso-：IE等
-moz-：Firefox等
-webkit-：Safari、Chrome等
注意：不需要手动添加，后面学习了模块化打包工具会自动添加浏览器前缀，比如webpack
5_FC(Formatting Context)
元素在标准流里面都是属于一个FC；
块级元素的布局属于Block Formatting Context（BFC）：也就是block level box都是在BFC中布局的；
行内级元素的布局属于Inline Formatting Context（IFC）：而inline level box都是在IFC中布局的；
5.1_BFC(Block Formatting Context)
官网MDN上有整理出在哪些具体的情况下会创建BFC：
- 根元素（html）
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
- 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
- overflow 计算值(Computed)不为 visible 的块元素
- 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
- 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
- display 值为 flow-root 的元素
5.2_BFC作用
关于官方文档的描述 概括如下：
- 在BFC中，box会在垂直方向上一个挨着一个的排布；
- 垂直方向的间距由margin属性决定；
- 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
- 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；
BFC作用：
- 解决margin的折叠问题；
- 解决浮动高度塌陷问题；
5.3_BFC解决margin的折叠问题
在同一个BFC中，相邻两个box之间的margin会折叠（collapse）
官方文档明确说 The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
如果让两个box是不同的BFC,那么就可以解决折叠问题。(说人话就是，在其中一个盒子外面再加一个盒子)
<style>
/* 在其中一个盒子外面再加一个盒子 */
.container {
overflow: auto;
}
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
</style>
<body>
<div class="container">
<div class="box1"></div>
</div>
<div class="box2"></div>
</body>
5.4_解决浮动高度塌陷
网上说，BFC可以解决浮动高度塌陷，实现清除浮动的效果。
但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明；
也压根没有办法解释，为什么可以解决浮动高度的塌陷问题，但是不能解决绝对定位元素的高度塌陷问题呢？
事实上，BFC解决高度塌陷需要满足两个条件：
浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）；
浮动元素的父元素的高度是auto的；
BFC的高度是auto的情况下，是如下方法计算高度的
-
如果只有inline-level，是行高的顶部和底部的距离；
-
如果有block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离；
-
如果有绝对定位元素，将被忽略；（因为脱标）
-
如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘
<style>
.container {
background-color: orange;
/*法一：*/
overflow: auto;
}
/*法二：结构伪类
.clear_fix::after{
content: " ";
display: block;
clear: both;
}
*/
.item {
width: 400px;
height: 200px;
box-sizing: border-box;
border: 1px solid #000;
float: left;
background-color: #f00;
}
</style>
</head>
<body>
<div class="container clear_fix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
