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

标题: 赵强-20221018-CSS05 [打印本页]

作者: BlueFlame 时间: 2022-10-19 00:36
标题: 赵强-20221018-CSS05
一、今日所学内容
position：fixde(固定定位)
      固定定位是元素固定于浏览器可视区域的位置，主要的使用场景：在浏览器页面中某个元素需要固定在一个位置，不随屏幕滚动
      特点：
1.一浏览器的可视窗口为参照移动元素
不跟随父元素有任何关系
不随滚动条滚动
1.固定位置不再占有原来位置（脱标）
position：sticky；（粘性定位）
      粘性定位是为了网页中的元素达到一定的边偏移条件时，停止随屏幕滚动
      粘性定位特点：
1.一浏览器的可视窗口为参照点移动元素
2.不占有位置（脱标）
  定位模式          是否脱标          移动位置                                                                                           是否脱标
static                不脱标             不能使用边偏移                                                                                  很少
relative             不脱标             相对于自身原来的为位置进行位移                                                          常用
absolute             脱标                相对于最近一级的有定位的父元素，如果父元素没有，以浏览器为准          常用
fixed                   脱标                浏览器的可视区域
sticky                   脱标                浏览器的可视区域

定位的叠放次序
   可以使用z-index来控制盒子的前后顺序（网页例的z轴）
数值可以是正整数、负数、0、默认值是auto、数值越大、越靠上
如过属性值相同，则按找书写顺序，后来者居上
数字后面不加单位
只有定位的盒子才有z-index属性
定位的拓展
   绝对定位的和子居中
加了绝对定位的盒子不能经过margin：0 auto；水平居中，但可以通过计算来实现
1.left：50%；让盒子的左侧移动父级元素的水平中心
2.margin-left:-150px;让盒子向左移动自身宽度的一半
3.垂直居中
定位的特殊性：
   1.行内元素添加绝对定位或者固定定位，可以直接设高度和宽度
   2.块级元素添加绝对定位或者固定定位，如果不给宽高，默认大小是内容本身大小
脱标的盒子不会触发外边距塌陷的问题
   浮动、绝对定位、固定定位、元素都不会触发外边距塌陷的问题
元素的显示和隐藏
   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-position 来调整背景图片的位置，以显示

   鼠标样式：
      属性及样式
      属性                                                 样式
  cursor:default;                                  默认的鼠标样式
  cursor：pointer；                               小手鼠标样式
  cursor:text;                                        输入文本时的鼠标样式
  cursor：move；                                  拖动时的鼠标样式
  cursor：not-allowed；                      禁止的鼠标样式

对齐方式：
   文字的各个线的说明
      /* 保持中线对齐 */
         vertical-align: middle;
         /* 保持基线对齐(默认值) */
         vertical-align: baseline;
         /* 保持底线对齐 */
         vertical-align: bottom;
         /* 保持顶线对齐 */
         vertical-align: top;
备注：图片的底部有空白原因：图片默认是和文字基线对齐，所以下方的空白是为了给文字底部预留的空间
      想让图片与文字眼中线对齐，可以使用vertical-align：middle;来实现
CSS三角制作
   步骤：
1.设置边框的宽度、样式、颜色设置为透明
2.将所需要的边框颜色设置为所需要的颜色即可
CSS省略号的制作
   步骤：
1.将文字强制一行显示
2.将超出盒子的文字给切掉
3.将切掉的文字用省略号来替代
CSS滑动门制作
   步骤：
1.a标签来实现精灵图的左边
2.span标签来实现精灵图的移动
3.指定padding来撑开盒子即可

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