前端|css高级技巧


css高级技巧

    • 1 元素隐藏与显示
      • 1.1 display: none (重点)
      • 1.2 visibility可见性 (了解)
      • 1.3 overflow 溢出(重点)
      • 1.4 显示与隐藏总结
      • 1.5 案例:仿b站播放
    • 2 CSS用户界面样式
      • 2.1 鼠标样式cursor
      • 2.2 轮廓 outline
      • 2.3 防止拖拽文本域resize
    • 3 vertical-align 垂直对齐
      • 3.1 图片表单和文字对齐
      • 3.2 去除图片底侧空白缝隙
    • 4 溢出文字省略号显示
    • 5 精灵技术
      • 5.1 为什么要学习精灵技术
      • 5.2使用精灵技术
    • 6 margin负值之美
      • 6.1 负边距+定位:水平垂直居中
      • 6.2 压住盒子相邻边框
      • 6.3 压住盒子相邻边框,并且浮动的盒子共用一条边框

1 元素隐藏与显示 1.1 display: none (重点)
display: none 元素隐藏 (隐藏之后不保留原来位置)
display: block 除了转化为块级元素外,还有显示元素的意思
特点:隐藏之后不再保留位置
1.2 visibility可见性 (了解)
visibility: visible; 对象可见
visibility: hidden; 对象隐藏 (隐藏之后继续保留原来位置)
1.3 overflow 溢出(重点)
可能的值
  • visible 默认值。内容不会被修剪,会呈现在元素框之外。
  • hidden 内容会被修剪,并且其余内容是不可见的。
  • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。不管内容超不超出都出滚动条(太丑了,一般不用)
  • auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。(太丑了,一般不用)
1.4 显示与隐藏总结
前端|css高级技巧
文章图片

1.5 案例:仿b站播放
当鼠标悬浮出现阴影和播放按钮
前端|css高级技巧
文章图片

鼠标悬浮后
前端|css高级技巧
文章图片

思路:原来盒子里面装有一个黑色半透明盒子,刚开始看不见,当鼠标经过时,这个黑色半透明盒子就显示出来。
可以将有播放按钮的盒子作为子盒子,没有播放按钮的作为父盒子,用“父绝子相”定位,然后把子盒子隐藏。等鼠标悬浮父盒子时显示

"text/css"> /*原来盒子里面装有一个黑色半透明盒子,刚开始看不见,当鼠标经过时,这个黑色半透明盒子就显示出来*/ .box { height: 177px; width: 307px; margin: 100px auto; position: relative; } .mask { height: 177px; width: 307px; background: rgba(0, 0, 0, 0.3) url("img/bo.png") no-repeat bottom right; position: absolute; top: 0; left: 0; display: none; }/*鼠标经过的时候 a里面的黑色半透明盒子就显示出来了*/ .box a:hover .mask{ display: block; }

2 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如
  • 更改用户的鼠标样式(滚动条由于兼容性太差不研究)
  • 表单轮廓等
  • 防止表单域拖拽
2.1 鼠标样式cursor
cursor : default 小白 | pointer 小手 | move 移动 | text 文本 | not-allowed 禁止
不同li有不同的鼠标样式
  • 默认的
  • 默认的
  • 默认的
  • 默认的
  • 默认的

2.2 轮廓 outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少,我们平时都是去掉的。
最直接的写法是 : outline: 0; 或者 outline: none;

2.3 防止拖拽文本域resize
resize:none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。
默认右下角可以拖拽
3 vertical-align 垂直对齐 3.1 图片表单和文字对齐
让带有宽度的块级元素居中对齐,是margin: 0 auto;
让文字居中对齐,是 text-align: center;
让文字垂直居中 ,是 line-height: height;
vertical-align 不影响块级元素中的内容对齐,它只针对于 行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐。
?前端|css高级技巧
文章图片

前端|css高级技巧
文章图片
你要多读书
前端|css高级技巧
文章图片
你要多读书
前端|css高级技巧
文章图片
你要多读书

.one { /*默认基线对其*/ vertical-align: baseline; }.two { /*居中对齐*/ vertical-align: middle; }.three { /*让图片的顶线对其文字的顶线*/ vertical-align: top; }

前端|css高级技巧
文章图片

所以我们知道,我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
3.2 去除图片底侧空白缝隙
有个很重要特性你要记住: 图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。这样会造成一个问题,就是图片底侧会有一个空白缝隙。
前端|css高级技巧
文章图片

解决的方法就是:
  • 给img vertical-align:middle | top等等。 让图片不要和基线对齐。 给img 添加
  • display:block; 转换为块级元素就不会存在问题了。
4 溢出文字省略号显示 三部曲
/*强制一行显示*/ white-space: nowrap; /*超出部分隐藏*/ overflow: hidden; /*省略号提到超出隐藏部分*/ text-overflow: ellipsis;

前端|css高级技巧
文章图片

Title - 锐客网 type="text/css"> div { width: 150px; height: 25px; border: 1px solid pink; /*强制一行显示*/ white-space: nowrap; /*超出部分隐藏*/ overflow: hidden; /*省略号提到超出隐藏部分*/ text-overflow: ellipsis; }
hi,来自星星的你,欢迎你登录京东

5 精灵技术 5.1 为什么要学习精灵技术
当一个用户访问一个网站时,需要网页向服务器发送请求,网页上的每张图片都要经过一次请求才能展现给用户。
然而,一个网页中往往会应用很多小的背景图当做修饰,当网页中图像过多时,服务器就会频繁的接受和发送请求,这将大大降低页面的加载速度。
为了有效减少服务器接受和发送请求的次数,提高页面加载速度,css精灵技术出现了。
精灵技术其实是将页面中的一些背景图整合到一张大图中,然而,各个网页元素通常只需要精灵图中不同位置的么某个小图,要精确定位到精灵图中的每个小图。就需要使用CSS的 background-image、background-repeatbackground-position属性进行背景定位
在这里插入图片描述
前端|css高级技巧
文章图片

前端|css高级技巧
文章图片

5.2使用精灵技术
Title - 锐客网 type="text/css"> .icon1 { height: 43px; width: 36px; background: url("img/index.png") no-repeat 0 -192px; }

背景图片很少的情况,没有必要使用精灵技术,维护成本太高。 如果是背景图片比较多,可以建议使用精灵技术。
6 margin负值之美 6.1 负边距+定位:水平垂直居中
原理:一个绝对定位的盒子, 利用 父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中
前端|css高级技巧
文章图片

6.2 压住盒子相邻边框
原理:在盒子float浮动的同时,加上margin-left: -1px; 可以压住盒子相邻的边框。
前端|css高级技巧
文章图片

下面代码顺利解决
div { height: 400px; width: 400px; border: 1px solid pink; float: left; margin-left: -1px; margin-top: -1px; }

margin-left: -1px; 最左边第一个盒子左移1px,由于浮动具有紧凑收缩的效果,后面的盒子会依次左移1px, 然后各自的margin再左移1px ,压住重复边框
6.3 压住盒子相邻边框,并且浮动的盒子共用一条边框
【前端|css高级技巧】原理:基于6.2,再在鼠标经过时候的盒子层级提升到最高级
前端|css高级技巧
文章图片

div { height: 400px; width: 400px; border: 1px solid #ccc; float: left; margin-left: -1px; margin-top: -1px; } div:hover { border: 1px solid #f40; position: relative; }

    推荐阅读