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

标题: 陈玉-20221018-CSS5 [打印本页]

作者: polaris123 时间: 2022-10-19 10:46
标题: 陈玉-20221018-CSS5
一、今日学习内容
  1.定位（1）position:fixed;（固定定位）          （2）position:sticky;（粘性定位）
   特点：1、以浏览器的可视窗口为参照点移动元素                   不跟父元素有任何关系                   不随滚动条滚动             2、固定定位不再占有原来的位置（脱标）
   粘性定位特点 1、以浏览器的可视窗口为参照点移动元素 2、不占有位置（脱标）
2.定位叠放次序
可以使用z-index来控制盒子的前后顺序（网页里的Z轴）数值可以是正整数、负整数、0，默认值是auto，数值越大，越靠上如果属性值相同，则按照书写顺序，后来者居上数字后面不加单位只有定位的盒子才有z-index属性
3.定位的拓展：绝对定位的盒子居中
加了绝对定位的盒子不能听过margin:0 auto; 水平居中，但可以通过计算来实现
脱标的盒子不会触发外边距塌陷的问题
浮动、绝对定位/固定定位  元素都不会触发外边距塌陷的问题。
3.定位的拓展：绝对定位的盒子居中加了绝对定位的盒子不能听过margin:0 auto; 水平居中，但可以通过计算来实现脱标的盒子不会触发外边距塌陷的问题浮动、绝对定位/固定定位  元素都不会触发外边距塌陷的问题。4.元素的显示和隐藏  （1）display：none/block  （2）visibility：visible/hideen  （3）overflow：visible/hidden/scroll/auto
5.CSS其他技巧
（1）精灵图
步骤：a.获取所需要的小图标大小b.设置一个盒子来放我们需要的小图标，尺寸和我们所需的小图标大小一致c.background-image：url（）；将背景图片引入盒子d.利用background-positionlai  来调整背景图片的位置，以显示我们所需要的图标，注意，x和y轴的像素值一般都是负值，最大是0

  （2）输入框删除外框outline:none;
  （3）（4）文本域取消拖拽 resize:none;
  （5）鼠标样式 cursor：default/pointer/text/move/not-allowed
  （6）对齐方式vertical-align：baseline/bottom/midddle/top
  （7）CSS三角制作
   步骤1、设置边框的宽度，样式，颜色设置为透明
      2、将所需要的边框的颜色设置为所需的颜色即可
  （8）CSS省略号制作
   步骤：1、while-space：nowrap；
         2、overflow：hidden；
         3、text-overflow：ellipsis；
  （9）CSS滑动门制作
   步骤1、a标签来实现精灵图的左边
         2、span标签来实现精灵图的右边
         3、指定padding来撑开盒子即可

二、今日问题
今日课程已掌握
三、解决方案
今日课程已掌握

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