CSS的冷门样式太多了，但是你想记住，可以看看这篇文章，这篇文章包含了一些需要记忆的CSS属性，不包括经常使用的伪类选择器（相信你接触的太多了）：linkunvisited:visitedvisited:hovermousemovedtothelink:activeSelectedlinktextshadowabbreviation:text-shadow:horizo??ntalpositionVertical位置模糊距离阴影颜色；text-indent：首行缩进；word-spacing：字间距；letter-spacing：字间距；linkanswertype="text/css"链接中可以忽略，写一个比较规范，rel定义了当前文档和链接文档的关系，这里需要指定为"stylesheet"，表示链接文档是样式文件内联元素&块级元素内联元素：高宽无效，水平padding和margin有效，但垂直方向无效常见内联元素：块级元素：高度和宽度有效，可以自定义定义选择器交集选择器p.one{color:red;font-size:14px;}为"meaning...and...",p.one选择类名.one和Set选择器（逗号分隔）.one,p,#test{color:red;}伪元素选择器E的段落标签::first-letter文本的第一个简单或字符E::first-line文本的第一行E::selection改变文本选择的样式（有点好用）E::befor和E::after这个element是与content结合的内联元素用“:”和“::”来区分伪类和伪元素background(背景)background-image:none/url(url)属性函数background-color背景色颜色值/inherit（继承父元素）/transparent（默认）background-image背景图片地址none/url()background-repeattilerepeat/no-repeat/repeat-y/repeat-xbackground-positionbackgroundpositionlengthlength(百分比)/positonposition(top/center/bottom/left/right)background-attachment背景固定或滚动滚动(scrolling)固定(fixed)背景合写(复合属性)背景：背景颜色、背景图片地址、背景瓦片背景滚动背景位置；背景：透明url(*1111.jpg*)无重复滚动50%0；background-size设置图片大小px百分比/cover（保证填满背景区域，隐藏溢出部分）/contain（保证图片始终完全显示在背景区域）例如：background-size:50%;比原来小一半一般使用习惯（参考）：.img{width:400px;高度：400px；边框：1px实心#fff；背景：#fffurl(1111.jpg)不重复；背景位置：30px50px；背景尺寸：200px210px；underline自带的overline定义了文本上的一条线line-through定义了一条穿过文本的线框模型应该很熟悉，只有几个容易忘记的属性border-style属性函数none没有边框solidborder是单条实线（常用）。虚线边框是虚线。虚线边框是虚线。双边框是双实线。表示边框合并在一起，边距居中，实现框居中。盒子可以水平居中：.容易出现的bug）1、上下相邻的元素，upper:margin-bottom,lower:margin-top，会合并（margincollapse），合并后的margin值等于大的那个。解决方案：避免2。合并嵌套元素垂直外边距的解决方法：1.为父元素定义一个1像素的上边框2.可以加上：overflow:hidden(triggerBFC)CSS盒模型box-sizing:content-box;父元素默认为box-sizing:border-box;盒子的大小是width，也就是说padding和border都包含在盒子阴影里面box-shadow:horizo??ntalandverticalblurdistanceshadowsizecolorinner/outershadow;如果你想要内部阴影，使用insetactual用法：box-shadow:015px30pxrgba(0,0,0,.4);CSS定位CSS有三种定位机制：普通流（标准流）、浮动、定位和清除浮动，解决父元素因子浮动导致的内容内部高度为0的应用场景：如文章、瀑布流布局等等。很多时候，我们不需要给父框的高度，因为比如你无法测量文章内容的高度，我们需要自适应地扩展它的Box。所以浮动将被清除。解决方法：1.选择器{clear:both;}2.添加overflow:hidden;到父级触发BFC清除浮动效果3.:after案例：百度淘宝网易.clearfix::after{content:".";显示：块；高度：0；明确：两者；可见性：隐藏；}.clearfix{*缩放：1；}4.beforeandaftercase：小米腾讯代码更简洁。clearfix::after,.clearfix:before{display:table;/*这句话可以触发BFC*/}.clearfix::after{clear:both;}.clearfix{*缩放：1;}添加到父框的class属性clearfix可以使用定位值来描述是否脱离标签、占据位置、移动位置基准、静态自动定位（默认）、不脱离标记、普通模式、相对定位、notoff-marking，占位相对于自身位置移动（自恋型）absolute定位完全off-label，不占位。Movepositionrelativetothepositioningparent(scratchtype)fixed固定定位（相对于浏览器窗口定位）完全脱离标签，不占位置。相对于浏览器移动位置（识别类型）提示：“孩子和父亲的样子”牢记水平/垂直居中绝对定位的框绝对定位的框边距无效解决方案：左：50%取自己外边距的负一半：margin-leftz-index默认为0，属性值越大，定位元素的位置越高。只有relative、absolute和fixed可以使用该属性来显示和隐藏元素。溢出显示可见性更常见。displaynone隐藏对象块并将块级元素转换为显示元素。visibilityvisible对象可见，hidden对象可见。hidden不显示超出对象大小的内容，超出部分隐藏scroll无论内容是否超出内容，始终显示滚动条CSS高级技巧mousecursorcursor:defaultXiaobai|支持指针：ie6及以上支持outlineoutlineoutline:outline-color||大纲样式||outline-width一般不关心设置多少，去掉即可：outline:0;或大纲：无；（比如点击表单输入时，会默认有黑色的轮廓，我们可以去掉，或者使用outline-color:red;来改变轮廓颜色）防止拖动文本框resizeresize:none即可防止Firefox、Google等浏览器随意拖动textarea破坏布局vertical-align使其垂直对齐不影响块级元素的内容对齐，只针对inline和inline-block元素，通常用于控制对齐图像/表格和文本MDN文档描述此属性非常棒：链接：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align](https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align)去除图片底部的空白，图片或表格等内联元素，其底线与父框的基线对齐。这会导致一个问题，图像底部会出现空白。解决方法：给imgvertical-align:middle|顶部;ETC。图片不要对齐基线添加display:blocktoimg;隐藏溢出文本word-break主要处理英文单词属性函数normal使用浏览器默认的换行规则或者在连字符处换行white-space属性函数normaldefaultnowrap强制所有文本显示在同一文本内直到结束文本溢出或者遇到
时text-overflow文本溢出设置一个省略号(...)来显示文本溢出属性功能clip不显示(...)，简单裁剪省略号显示省略号(...)当对象中的文字溢出时注意一定要先强制一行显示，然后再用overflow:hidden;对多张图片使用CSSsprites将它们收集到一个页面中，减少服务器接受和发送请求的次数，提高页面加载速度。使用：使用CSSbackground-image,background-repeat,background-position进行背景定位，也可以缩写字体图标icon。优点：有文字属性，体积小，几乎支持所有浏览器，移动端必备格式：.svg程序员推荐图标字体网站：http://iconmoon.io（iconmoon字体库，允许用户自定义选择图标制作它们生成字体，种类很多，国外网站打开速度比较慢）怎么介绍？创建一个fonts文件夹，其中包含字体文件Declarefontsinstyles@font-face{/*Declarefonts*/font-family:'icomoon';/*自己声明字体包*/src:url('../fonts/icomoon.eot?8qhwk5');/*路径*/src:url('../fonts/icomoon.eot?8qhwk5#iefix')format('embedded-opentype'),url('../fonts/icomoon.ttf?8qhwk5')format('truetype'),url('../fonts/icomoon.woff?8qhwk5')格式('woff'),url('../fonts/icomoon.svg?8qhwk5#icomoon')格式('svg');字体粗细：普通的;font-style:normal;}为方框使用字体font-family:"icomoon";addstructurespan::before{content:"\e900";}or□/*□是从网站上复制的（看不到）*/Slidingdoortechnology设置导航栏时，字数不一样的，比如图中的那个，怎么适配内部的文字内容呢？方法：使用CSS（backgroundposition）和boxpadding扩展宽度
