HTML入门-补充11

单行文字溢出…

     p{
         width:100px;
         border:1px solid green;
         /* 超出隐藏 */
         overflow: hidden;
         /* 文字隐藏的方式是... */
         text-overflow: ellipsis; 
         /* 不换行 */
         white-space: nowrap;
     }

多行溢出，显示…

p{
width:100px;
border:1px solid green;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* 控制让哪一行显示... */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

禁止用户选择文字

body{user-select: none;}

字母和单词之间的间隙

letter-spacing-----是字母之间的间隙
word-spacing------是单词之间的间隙

   p{
        word-spacing: 20px;
    }
    <p>你 们 真 的 很 棒！</p>   
    <div>You are really great!</div>

注意：对于汉字来说，如果要想用word-spacing，必须文字和文字之间有一定的间隙，代表他们是独立的单词，不然word-spacing 不起作用。

透明度的兼容性处理

.opacity{
filter:alpha(opacity=50); /* IE */

opacity: 0.5; /* 支持opacity的浏览器*/
}

高斯模糊

<style>
      img{
          filter: blur(50px);
      }
</style>

出现灰度，值0-1

例如哀悼日页面全灰

filter: grayscale(1);

4、块级格式上下文：

> 定义：块级格式上下文全称Block Formatting Contexts ，简称BFC，它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。不同的BFC它们在进行渲染时互不干扰。

常规流块盒，在水平方向上，必须撑满包含块（也就是继承父级的宽度）
常规流块盒，在排列方式上，是上下排列（块级元素的特点）
常规流块盒，如果无缝相邻，则进行外边距合并（margin值穿透）
常规流块盒的自动高度和摆放位置，会无视浮动元素。

BFC 产生的条件

1.根元素：html

2. 浮动和定位的元素（定位固定定位和绝对定位）
3. overflow 不等于visible
4. display 为以下其中之一的值 inline-block，table-cell，table-caption；