菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 张锐杰-20221018-06CSS [打印本页]

作者: 张锐杰 时间: 2022-10-19 10:00
标题: 张锐杰-20221018-06CSS
元素的显示和隐藏
display 显示与隐藏
      属性值：
         none 隐藏对象
         block 显示元素

      display隐藏元素之后不占有原来的位置，后期经常与js在一起连用。

visibility 显示与隐藏
      visibility属性用于指定一个元素的显示与隐藏
         属性：
            visible  元素可见
            hidden  元素隐藏

      使用visibility:hidden;来隐藏元素时，元素仍然占有原来的位置

overflow 溢出显示与隐藏
      overflow: visible; 不剪切内容也不添加滚动条
      overflow: hidden; 将超出盒子的内容隐藏掉
      overflow: scroll; 不管盒子里面的内容有没有超过父盒子的高度，都显示滚动条
      overflow: auto; 超过盒子的高度显示滚动条，不超出则不显示

CSS其他技巧
精灵图
      为什么要用精灵图
         多张小的图片整合到一张大的图片例返回给浏览器，避免重复请求，减轻服务器的压力。

      精灵图的使用步骤
         1、获取所需要的小图标大小
         2、设置一个盒子来放我们需要的小图标，尺寸和我们所需的小图标大小一致
         3、background-image：url（）；将背景图片引入盒子
         4、利用background-positionlai  来调整背景图片的位置，以显示我们所需要的图标，注意，x和y轴的像素值一般都是负值，最大是0

输入框删除外框
      代码 outline:none;

文本域取消拖拽
      代码 resize:none;

鼠标样式
      属性及样式

对齐方式
      vertical-align目的：为了让行内元素或者行内块元素按照不同的方式来进行对齐。
      文字的各个线的说明
      vertical-align属性可以设置元素的对齐方式
         vertical-align: baseline；基线对齐（默认）
         vertical-align: bottom; 底线对齐
         vertical-align: middle; 中线对齐
         vertical-align: top; 顶线对齐

      备注：
         图片的底部有空白的原因：图片默认是和文字保持基线对齐，所以下方的空白是为了给文字底部预留的空间
         想让图片与文字沿中线对齐，可以使直接使用vertical-align: middle;来实现

CSS三角制作
      制作三角的步骤
         1、设置边框的宽度，样式，颜色设置为透明
         2、将所需要的边框的颜色设置为所需的颜色即可

CSS省略号的制作
      步骤
         1、将文字强制一行显示
         2、将超出盒子的文字给切掉
         3、将切掉的文字用省略号来代替

CSS滑动门制作
      步骤：
         1、a标签来实现精灵图的左边
         2、span标签来实现精灵图的右边
         3、指定padding来撑开盒子即可

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)