显示与隐藏元素

display显示隐藏元素

display:none;      隐藏元素且原位置不保留
display:block;     显示隐藏元素
​

 

visibility显示隐藏元素

visibility:visible;   元素可见
visibility:hidden;    元素隐藏但会继续占有原来的元素

 

overflow溢出显示隐藏

overflow:visible;    溢出盒子的部分可见
overflow:hidden;     溢出盒子的部分隐藏
overflow:scroll;     添加滚动条
overflow:auto;       按需要添加滚动条

 

如果有定位的盒子，需要慎用

 

精灵图

为什么需要精灵图

为了有效的减少服务器接收和发送请求的次数，提高页面加载速度

核心原理：将网页中的一些小图片整合到一个大的背景图片当中，只用请求一次服务器即可

 

精灵图的使用

主要使用background-position，移动通过x，y轴，往右为正，往左为负，往上为正，往下为负

字体图标

字体图标的下载和引用

阿里巴巴字体库

用户界面样式

CSS三角

京东三角案例

.box-1 {
            position: absolute;
​
            right: 0px;
            top: -75px;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-bottom-color: #fff;
        }

鼠标样式

cursor:default;     默认样式
cursor:pointer;     小手样式
cursor:move;        移动样式
cursor:text;        文本样式
cursor:not-allowed; 禁止样式
​
​

取消表单蓝色方框

input ，textarea {
            outline: none;
        }

禁止文本框拖动

 textarea {
            resize: none;
        }
​

图片与文字对齐

 img {
vertical-align: bottom;    与图片底部对齐 
vertical-align: top;        与图片顶部对齐 
vertical-align: middle;     与图片中间对齐 
     图片底部存在空白缝隙，同样适用vertical-align调节
            
​
        }
​

 

单行文字溢出用省略号显示

        /* 如果文字显示不开也要单行显示 */
            white-space: nowrap;
            /* 溢出部分隐藏起来 */
            overflow: hidden;
            /* 溢出部分转化为省略号 */
            text-overflow: ellipsis;
        }

 

多行文字溢出用省略号显示

            overflow: hidden;
            text-overflow: ellipsis;
            /*弹性伸缩盒子模型显示*/
            display: -webkit-box;
            /*限制在一个块元素显示的文本的行数*/
            -webkit-line-clamp: 3;
            /*设置或检索伸缩盒对象的子元素的排列方式*/
            -webkit-box-orient: vertical;