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

标题: 张建斌-2022.11.17 [打印本页]

作者: IT5353 时间: 2022-11-17 00:14
标题: 张建斌-2022.11.17

一．定位拓展

1. 绝对定位的盒子居中问题

1.加了绝对定位的盒子不能通过margin：0 auto 进行水平居中，但是可以通过计算的方式的进行水平和垂直居中

2.水平居中的方法：先将左边偏移50%；；是用margin-left让盒子往左偏移自己宽的一半

2. 不论是什么元素，使用固定定位或者绝对定位之后都可以设置宽高：；；

3. 脱标的盒子不会发生外边距塌陷的问题；；；；

4. 固定定位和绝对定位都会完全压住下面的盒子。。

5. 元素的显示和隐藏:

1. display显示与隐藏：除了转化块，还能将元素显示出来：；；属性值：none 隐藏；；；；display 来隐藏元素时，隐藏的元素不在占有原来的位置一般会在js一起搭配使用

2. visibility显示与隐藏：属性值：hidden 隐藏但是元素还是占着原来的位置；；；；visible：元素可视

3. overflow显示与隐藏：属性值：visible：不剪切内容，也不添加滚动条；；；；hidden：将超出盒子的内容给隐藏掉；；；；scroll：不管盒子里面的内容有没有超出盒子，都显示滚动条；；；auto：内容超出盒子的话会有滚动条，不超出就不会显示

6. CSS常用技巧

1. 精灵图：使用原因;将多张小的图片整合到一张大的图片中返回给浏览器，可以减少服务器的重复请求，以减轻服务器的压力

2. 使用方法，利用背景图片的方法把精灵图插入；；；将精灵图移动到指定位置即可，理由的属性时bacground-position，，一般移动的都是负值。

7. 鼠标样式

1. 属性cursor：default：默认的鼠标样式

2. pointer：小手的鼠标样式；；；

3. text ：文本鼠标样式；；

4. move：拖动的鼠标样式；；；；

5. not-allowed：禁止标签

9. 输入框：删除输入外框：outline：none

1. 文本域取消拖拽：热死则：none；

2. 行内元素对齐：vertical-align：top-顶线对齐；middle-中线对齐；；baseline-基线对齐；；botton-底线对齐

10. 三角制作：

11. 省略号：

1. 让文字一行显示

2. 将多余的文字隐藏掉

3. 用省略号代替隐藏的文字

12. CSS的滑动门：行内块居中 text-algin：center

13.

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