1元素隐藏和显示
1.1显示:无
显示:无元素隐藏；border-left: 3px纯色rgb孤儿:2名；文本缩进:0px文本转换:无；空白:正常；寡妇:2名；字间距:0px-WebKit-text-stroke-width:0px；背景色:rgb文字-装饰-粗细:初始；文字-装饰-风格:初始；text-decoration-color:initial " data-from-paste = " 1 " data-diagnose-> visibility:visible；可见对象可见性:隐藏；对象隐藏；断字:首字母；溢出-换行:初始；溢出:自动；背景:rgbborder-radius:4px " data-from-paste = " 1 " data-diagnose-->
.box { height: 177px; width: 307px; margin: 100px auto; position: relative; } .mask { height: 177px; width: 307px; background: rgba url no-repeat bottom right; position: absolute; top: 0; left: 0; display: none; } .box a:hover .mask{ display: block; } 2 CSS用户界面风格所谓界面风格就是改变一些用户操作风格，比如
更改用户的鼠标样式
表格轮廓等
防止表单域被拖动
2.1鼠标式光标
光标:默认白色|指针的小手|移动移动|文本文本|不允许禁止不同的李有不同的鼠标样式。
默认的
它是围绕元素绘制的线，位于边框边缘的外围，可以突出显示元素。
轮廓:轮廓-颜色||轮廓-样式| |轮廓-宽度
但我们不在乎能设置多少。我们通常会移除它们。
最直接的写法是:大纲:0；或者大纲:无；
2.3防止拖放文本字段调整大小
单词resize:none可以阻止Firefox和Google等浏览器随意拖动文本字段。
右下角默认可以拖动。
3垂直对齐垂直对齐
3.1图像形式和文本对齐
使宽度居中对齐的块级元素，即margin:0 auto；使文本居中对齐，这就是text-align:center；使文本垂直居中，即line-height:height；
垂直对齐不影响块级元素中的内容对齐。它仅适用于内联元素或内联块元素，尤其是内联块元素，通常用于控制图片/表单与文本的对齐。
你要多读书你应该多读书。
你要多读书你应该多读书。
你要多读书 你应该多读书。
3.2去掉图片底部的空空白。
您应该记住一个重要的特性:内嵌块元素(如图片或表单)的底线将与父框的基线对齐。这样会造成图片底部会有空白空白的问题。
解决方案是:
给img vertical-align:middle | top等等。 让图片不要和基线对齐。 给img 添加给img vertical-align:middle | top以此类推。让图片不与基线对齐。添加到img
显示:块；转换成块级元素不会有问题。
4溢出文本省略号显示
三部曲
white-space:nowrap；溢出:隐藏； text-overflow:省略号；
标题p {宽度:150px高度:25px边框:1px纯粉色；white-space:nowrap；溢出:隐藏； text-overflow:省略号；你好，来自星星的你，欢迎来到JD.COM。
5 Elf技术5.1为什么要学习精灵科技？
当用户访问一个网站时，网页需要向服务器发送请求，网页上的每一张图片都要经过请求才能显示给用户。然而，一个网页通常用许多小的背景图片来装饰。当网页中的图片过多时，服务器会频繁地接收和发送请求，这会大大降低页面的加载速度。
为了有效减少服务器收发请求的次数，提高页面加载速度，css wizard技术出现了。
其实sprite的技术就是把一个页面中的一些背景图片整合成一个大图。但是，每个网页元素通常只需要sprite图像中不同位置的一个小图像，需要精确定位sprite图像中的每个小图像。您需要使用CSS的背景图像、背景重复和背景位置属性来定位背景。
在此插入图片描述。
5.2使用Elf技术
title . icon 1 { height:43px；宽度:36px背景:url不重复0-192 px；}
图片少的时候没必要用sprite技术，维护成本太高。如果有很多背景图片，可以建议使用向导技术。6边际负价值之美
6.1负边距+定位:水平和垂直居中。
原理:一个绝对定位的盒子，可以用父盒的50%水平和垂直居中，然后向左走自己宽度的一半。
6.2按下箱子的相邻框架。
原理:当box float浮动时，添加margin-left:-1px；您可以按下框的相邻边框。
以下代码成功求解。
p {身高:400px宽度:400px边框:1px纯粉色；浮动:左；左边距:-1px；边距-顶部:-1px；}
左边距:-1px；左边的第一个框向左移动1px。由于浮动具有紧凑收缩的效果，下面的方框将依次向左移动1px，然后它们的边距向左移动1px以压住重复的边框。
6.3按下箱子的相邻框，浮动箱共用一个框。
原理:在6.2的基础上，鼠标经过时箱子等级会升级到最高等级。
p {身高:400px宽度:400px边框:1px纯色# ccc浮动:左；左边距:-1px；边距-顶部:-1px；} p:hover { border: 1px固体# f40位置:相对；}
