cssDay10

时间:2021-09-10
本文章向大家介绍cssDay10,主要包括cssDay10使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

显示与隐藏元素

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;

原文地址:https://www.cnblogs.com/sucheng/p/15250614.html