透明度、文本省略号、圣杯布局、双飞翼布局、

一、透明度

1.1 opacity 透明

 opacity:0.3;   值 0-1 之间的数  0 全透明   1不透明
 
 兼容性：支持标准浏览器、和ie9及以上（ie8以下，包含ie8不支持）
 想要让ie8及以下也支持  就加ie专属透明属性：filter：alpha（opacity=30）

            background-color: red;
            /* opacity:0-1 之间的值 透明 */
            opacity:0.3;
            /* ie专属属性  ie9以上废除了 */
            filter: alpha(opacity=30);  
            标准浏览器支持、ie低版本也支持

1.2 rgba 透明

 background-color: rgba(0, 0, 0,0.3); 前三个值是颜色，第四个值是透明度
​
注意：rgba是让盒子自身透明的，如果考虑ie的兼容，那么就给子元素加 position:relative;

1.3 区别

opacity  盒子全都透明（包含子元素）
rgba     只让盒子自己透明（不影响子元素）

二、文本省略号

2.1 单行文本溢出显示省略号

    p{
            width:500px;
            /* border: 1px solid red; */
            /* 强制设置文本不换行 */
            white-space: nowrap;
            /* 设置一个溢出隐藏 */
            overflow: hidden;
            /* 隐藏的文本以省略号形式显示 */
            text-overflow:ellipsis;
        }
        
        
    <p>
        文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
        文本文本文本文本文本文本文本文本文本文本文本文本
    </p>

2.2 多行文本溢出显示省略号

方法一：旧版弹性盒子实现  
       p{
            width:500px;
            /* border: 1px solid red; */
            /* 声明旧版弹性盒子 */
            display: -webkit-box;
            /* 决定显示几行 */
            -webkit-line-clamp:4;
            /* 设置弹性盒子的伸缩方向：垂直 */
            -webkit-box-orient:vertical;
            overflow: hidden;
        }

方案二： 借助伪元素 和 行高实现
​
​
  /* 超出“4”行时 显示省略号 */
        p{
            /*借助行高  决定三行的高度 */
            width:500px;
            border: 1px solid red;
            line-height: 25px;
            height: 100px;
            position: relative;
            overflow: hidden;
            text-align: justify; /*文本两端对齐*/
​
        }
        /* 借助伪元素把... 写出来 */
        p::after{
            content: "....";
            /* 借助定位 改变... 的位置 */
            position:absolute;
            right: 0;
            bottom: 0;
            background-color: #fff;
            padding: 3px;
        }
    

三、圣杯布局

自适应三栏布局  左右固定  中间自适应
外国人发明的，
​
技术点：margin负值、浮动、定位

步骤

1、写结构  注意结构的顺序是 中 左 右
2、给三个盒子设置浮动（别忘记请浮动）
3、给左侧盒子设置margin-left：-100%； （让左侧盒子移动到最左边）
4、给右侧盒子设置margin-left：负的右侧盒子的宽度；（让右侧盒子移动到最右边）
5、给父元素设置padding：0 右侧盒子的宽度 0 左侧盒子的宽度；（把内容挤出来）
6、给左侧盒子设置position：relative；left：负的左侧盒子的宽度 （让左侧盒子归位）
7、给右侧盒子设置position：relative；left：正的右侧盒子的宽度（让右侧盒子归位）
8、给父盒子设置min-width：XXXpx；（缩小屏幕时 防止盒子掉下来）
​

四、双飞翼布局

自适应三栏布局  左右固定  中间自适应
淘宝 UED 团队发明的，
UED（user experience design） 用户体验设计团队

步骤

前四步和圣杯一样
5、给最大的盒子（自适应的盒子）添加一个子元素，给儿子设置margin：0 右侧盒子的宽度 0 左侧盒子的宽度；
6、给父元素加min-width：600px； （防止盒子掉下来）