1.显示和隐藏元素的目的是使某个元素在页面上消失或显示类似于网站广告的场景。当我们点击关闭时，它就消失了，但是当我们刷新页面时，它又会重新出现！1.1displaydisplay(emphasis)display设置或获取对象是否显示以及如何显示。display:none隐藏对象display:block除了转换为块级元素外，还有显示元素的意思。特点：隐藏后位置不再保留。实际开发场景：配合js做特效，比如下拉菜单，以前没有用过，鼠标经过时显示下拉菜单，应用广泛。能见度：可见； 对象可见性可见性：隐藏； 物体隐藏特性：隐藏后，原来的位置会继续保留。1.3溢出（强调）检索或设置当对象的内容超过其指定的高度和宽度时如何管理内容。属性值说明visible不剪切内容不添加滚动条hidden不显示超出对象大小的内容，超出部分隐藏。scroll无论内容是否超出内容，始终显示滚动条。实际开发场景：清除float隐藏超出内容的内容，隐藏，不允许内容超出父框。1.4显示和隐藏汇总属性的区别。使用displayHiddenobjects，不预留位置，配合下面的js做特效，比如下拉菜单，以前用不到，鼠标经过时显示下拉菜单，广泛使用用过的。超出尺寸的部分1.可以清除浮动2.保证盒子里的内容不超出盒子的范围2.CSS用户界面样式所谓界面样式就是改变一些用户操作样式在为了改善更好的用户体验。改变用户的鼠标样式（滚动条因为兼容性很差，我们不研究）表单轮廓等防止拖动表单域2.1鼠标样式光标设置或检索鼠标指针移动时使用的系统预定义光标形状物体。属性值说明default小白defaultpointersmallhandmovemobiletexttextnot-allowed禁止鼠标在我身上看效果：
2.2Outlineoutline是围绕元素绘制的一条线，位于border边缘的外围，可以起到突出显示的作用元素。轮廓：轮廓颜色||轮廓样式||outline-width但是我们不关心可以设置多少，一般我们会去掉。li最直接的写法是：outline:0;或大纲：无；
2.3防止拖放文本域调整大小在实际开发中，我们的文本域右下角是不允许拖放的：
2.4UserInterfaceStyleSummary属性用途MouseStyle改变MouseStyle光标样式有很多种，要记住指针轮廓形式默认outlineoutline轮廓，我们一般直接去掉，border是边框，我们常用的反拖主要是针对textfieldresize，防止用户随意拖动textfield，造成页面布局混乱，我们resize:none3.对齐是margin:0auto;使文本居中，它是text-align:center;但是我们从来没有谈过垂直居中的属性。vertical-align垂直对齐方式，仅对行内元素或行内块元素有效，vertical-align:baseline|top|middle|bottom设置或获取对象内容的垂直对齐方式。注意：vertical-align不影响块级元素中内容的对齐方式。它仅针对行内元素或行内块元素，尤其是行内块元素，通常用于控制图像/表格和文本的对齐方式。3.1图片、表格和文字对齐所以我们知道可以通过vertical-align来控制图片和文字的垂直排列关系。默认情况下，图像将与文本基线对齐。3.2去掉图片底部的空白空隙原因：图片或表格等内联块元素的底线会与父框的基线对齐。也就是图片的底部会有一个空白的空隙。解决方法是：给imgvertical-align:middle|顶部|底部等等。使图像不与基线对齐。添加显示：块到img；转换成块级元素就没有问题了。4、溢出文本省略号显示4.1white-spacewhite-space设置或获取对象中的文本显示方法。通常我们使用white-space:normal强制一行显示内容；默认的处理方式是white-space:nowrap； 强制所有文本显示在同一行，直到文本结束或遇到br标签对象时才换行。4.2text-overflow设置或获取是否使用省略号(...)来标记对象中文本的溢出text-overflow:clip;不显示省略号(...)，只是简单地删除text-overflow:ellipsis；当对象中的文本溢出时，将显示省略号(...)。注意：一定要先强制显示在一行，然后再配合overflow属性使用。4.3总结三个步骤/*1.空白：nowrap；/*2。多余部分隐藏*/overflow:hidden;/*3。文本替换为省略号*/text-overflow:ellipsis;5。CSS精灵技术（sprite）重点5.1为什么需要精灵技术当用户访问一个网站时，需要向服务器发送一个请求，而网页上的每张图片都必须请求一次，然后才能显示给用户。然而，许多小的背景图像经常被用作网页中的装饰。当网页中的图片过多时，服务器会频繁的接受和发送请求，这会大大降低页面的加载速度。为什么需要sprite技术：为了有效减少服务器接受和发送请求的次数，提高页面的加载速度。CSS精灵技术（也称为CSSSprites，CSSSprite）出现了。5.2Sprite技术讲解CSSsprites实际上是将网页中的一些背景图片整合成一张大图（spriteimage）。然而，每个网页元素通常只需要在sprite图像中不同位置的小图像。精灵表中的小图像。这样，当用户访问页面时，只需要向服务发送一次请求，就可以显示网页中的所有背景图片。我们需要使用CSS的background-image、background-repeatbackground-position属性进行背景定位，其中最关键的是使用background-position属性进行精确定位。5.3sprite技术使用核心总结首先我们知道csssprite技术主要针对背景图片，插入的图片img不需要这个技术。精确测量每个小背景图像的大小和位置。当给盒子分配一个小背景图片时，背景定位基本上是一个负值。5.4制作sprites（理解）CSSsprites其实就是将网页中的一些背景图片整合成一张大图（sprite图），所以我们要做的就是将小图组合成一张大图。我们将小的装饰性背景图像放在我们的精灵上。插入图片不能朝上放置。我们可以横放也可以竖放，但是每张图片之间要留有适当的空隙。在我们精灵贴图的最低端，留出空隙，方便我们以后添加其他精灵贴图。结论：对于背景图很少的小公司，没必要使用sprite技术，维护成本太高。如果背景图片较多，建议使用精灵技术。6、推拉门的背景制作网页时，为了美观，往往需要为网页元素设置异形背景，比如微信导航栏，有凸起和凹陷之分感觉。最大的问题就是里面的字数不一样很多，怎么办？为了让各种特殊形状的背景适应元素中文本内容的多少，出现了CSS滑门技术。以全新的视角构建页面，让各种异形背景可以自由伸缩滑动，以适应元素内部的文字内容，使用起来更加方便。最常见于各种导航栏的滑动门。http://weixin.qq.com/核心技术核心技术是利用CSSsprites（主要是背景位置）和boxpadding来扩展宽度，以适应不同字数的导航栏。一般的经典布局是这样的：导航栏内容cssstyle*{padding:0;保证金：0；}body{背景：url(images/wx.jpg)repeat-x;}.father{padding-top:20px;}li{padding-left:16px;高度：33px；向左飘浮;行高：33px；边距：010px；背景：url(./images/to.png)不重复左；}a{padding-right:16px;高度：33px；显示：内联块；颜色：#fff；背景：url(./images/to.png)无重复权；文字修饰：无；}li:hover,li:hovera{background-image:url(./images/ao.png);}总结：a设置背景左边，padding拉伸到合适的宽度。span设置背景右侧，padding扩大适当宽度，留下文字继续扩大宽度。containsspan的原因是因为整个导航是可点击的。7.其他7.1负边距值之美1).负边距+定位：水平居中，垂直居中。前面我们说过，一个绝对定位的盒子使用父盒子的50%，然后向左（向上）走自己宽度的一半，盒子就可以水平和垂直居中了。2).按下框的相邻边框7.2CSS三角形之美div{width:0;高度：0；行高：0；字体大小：0；border-top:10px纯红色；border-right:10pxsolidgreen;border-bottom:10px纯蓝色;border-left:10pxsolid#000;}一张图，你就知道css三角形是怎么来的了，方法如下：我们可以用cssborder模拟宽高为0的三角形效果，4个border都要写，只保留需要的边框颜色，其他不能省略，改成透明即可。为了照顾兼容性低的浏览器，添加font-size:0;行高：0；
