在CSS中，可以使用word-wrap或overflow-wrap属性来实现英文自动换行。word-wrap:break-word;：这个属性允许长单词或URL在必要时进行换行。.container{word-wrap:break-word;}overflow-wrap:break-word;：这个属性与word-wrap的功能类似，也可以实现英文的自动换行。.container{overflow-wrap:break-word;}需要注意的是，这两个属性的兼容性较好，但在一些特定情况下可能会产生不同的效果。根据具体需求和浏览器兼容性要求，选择合适的属性来实现英文的自动换行。如果word-wrap或overflow-wrap属性没有起作用，可以尝试使用word-break属性来实现英文的自动换行。word-break:break-all;：这个属性会在单词内部进行换行，即使单词中间也可以断开。.container{word-break:break-all;}word-break:break-word;：这个属性会在单词边界处进行换行，只有在必要时才会进行断开。.container{word-break:break-word;}如果以上属性仍然没有起作用，可能是其他样式或父容器的限制导致的。请确保没有其他样式或布局约束影响到自动换行的效果。如果问题仍然存在，可以提供更详细的代码和问题描述，以便更好地帮助解决。
Bootstrap：最流行的前端框架之一，提供了丰富的组件和样式，易于使用和定制。AntDesign：由阿里巴巴团队开发的UI框架，提供了丰富的组件和模板，适用于企业级应用。Element：由饿了么团队开发的UI框架，提供了丰富的组件和样式，易于使用和定制。Vant：由有赞团队开发的UI框架，提供了丰富的移动端组件和样式，适用于移动端应用。WeUI：由腾讯团队开发的UI框架，提供了丰富的移动端组件和样式，适用于微信公众号和小程序。MintUI：由饿了么团队开发的UI框架，提供了丰富的移动端组件和样式，适用于Vue.js框架。iView：由TalkingData团队开发的UI框架，提供了丰富的组件和样式，适用于Vue.js框架。Muse-UI：由codex-team团队开发的UI框架，提供了丰富的组件和样式，适用于Vue.js框架。CubeUI：由滴滴出行团队开发的UI框架，提供了丰富的移动端组件和样式，适用于Vue.js框架。Fish-UI：由鱼塘团队开发的UI框架，提供了丰富的组件和样式，适用于React框架。Material-UI：由Google团队开发的UI框架，提供了丰富的组件和样式，适用于React框架。SemanticUI：提供了丰富的组件和样式，易于使用和定制。Foundation：提供了丰富的组件和样式，适用于响应式设计。Bulma：提供了丰富的组件和样式，易于使用和定制。TailwindCSS：提供了丰富的样式工具，易于使用和定制。Pure：提供了轻量级的CSS样式，适用于快速开发。Spectre.css：提供了轻量级的CSS样式，适用于快速开发。Tachyons：提供了丰富的CSS样式，易于使用和定制。UIKit：提供了丰富的组件和样式，适用于响应式设计。Materialize：提供了丰富的组件和样式，适用于响应式设计。MetroUICSS：提供了丰富的组件和样式，适用于Windows风格设计。AmazeUI：提供了丰富的组件和样式，适用于响应式设计。MUI：提供了丰富的移动端组件和样式，适用于Vue.js和React框架。QuasarFramework：提供了丰富的组件和样式，适用于Vue.js框架。Framework7：提供了丰富的移动端组件和样式，适用于Vue.js和React框架。OnsenUI：提供了丰富的移动端组件和样式，适用于Vue.js和React框架。IonicFramework：提供了丰富的移动端组件和样式，适用于Angular框架。PrimeNG：提供了丰富的组件和样式，适用于Angular框架。CarbonDesignSystem：由IBM团队开发的UI框架，提供了丰富的组件和样式，适用于企业级应用。FluentUI：由Microsoft团队开发的UI框架，提供了丰富的组件和样式，适用于企业级应用。以上是我为您推荐的30个常用的CSSUI框架，希望能够帮助到您。
1.页面中新建div：<divclass="shaky">抖动文字</div>2.style中写：.shaky{display:inline-block;padding:0px;font-size:60px;-webkit-transform-origin:centercenter;-ms-transform-origin:centercenter;transform-origin:centercenter;-webkit-animation-name:shaky-slow;-ms-animation-name:shaky-slow;animation-name:shaky-slow;-webkit-animation-duration:4s;-ms-animation-duration:4s;animation-duration:4s;-webkit-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;-ms-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-delay:0s;-ms-animation-delay:0s;animation-delay:0s;-webkit-animation-play-state:running;-ms-animation-play-state:running;animation-play-state:running;}@-webkit-keyframesshaky-slow{0%{-webkit-transform:translate(0px,0px)rotate(0deg);}2%{-webkit-transform:translate(-1px,1.5px)rotate(1.5deg);}4%{-webkit-transform:translate(1.3px,0px)rotate(-0.5deg);}6%{-webkit-transform:translate(1.4px,1.4px)rotate(-2deg);}8%{-webkit-transform:translate(-1.3px,-1px)rotate(-1.5deg);}10%{-webkit-transform:translate(1.4px,0px)rotate(-2deg);}12%{-webkit-transform:translate(-1.3px,-1px)rotate(-2deg);}14%{-webkit-transform:translate(1.5px,1.3px)rotate(1.5deg);}16%{-webkit-transform:translate(1.5px,-1.5px)rotate(-1.5deg);}18%{-webkit-transform:translate(1.3px,-1.3px)rotate(-2deg);}20%{-webkit-transform:translate(1px,1px)rotate(-0.5deg);}22%{-webkit-transform:translate(1.3px,1.5px)rotate(-2deg);}24%{-webkit-transform:translate(-1.4px,-1px)rotate(2deg);}26%{-webkit-transform:translate(1.3px,-1.3px)rotate(0.5deg);}28%{-webkit-transform:translate(1.6px,-1.6px)rotate(-2deg);}30%{-webkit-transform:translate(-1.3px,-1.3px)rotate(-1.5deg);}32%{-webkit-transform:translate(-1px,0px)rotate(2deg);}34%{-webkit-transform:translate(1.3px,1.3px)rotate(-0.5deg);}36%{-webkit-transform:translate(1.3px,1.6px)rotate(1.5deg);}38%{-webkit-transform:translate(1.3px,-1.6px)rotate(1.5deg);}40%{-webkit-transform:translate(-1.4px,-1px)rotate(-0.5deg);}42%{-webkit-transform:translate(-1.4px,1.3px)rotate(-0.5deg);}44%{-webkit-transform:translate(-1.6px,1.4px)rotate(0.5deg);}46%{-webkit-transform:translate(-2.1px,-1.3px)rotate(-0.5deg);}48%{-webkit-transform:translate(1px,1.6px)rotate(1.5deg);}50%{-webkit-transform:translate(1.6px,1.6px)rotate(1.5deg);}52%{-webkit-transform:translate(-1.4px,1.6px)rotate(0.5deg);}54%{-webkit-transform:translate(1.6px,-1px)rotate(-2deg);}56%{-webkit-transform:translate(1.3px,-1.6px)rotate(-2deg);}58%{-webkit-transform:translate(-1.3px,-1.6px)rotate(0.5deg);}60%{-webkit-transform:translate(1.3px,1.6px)rotate(-0.5deg);}62%{-webkit-transform:translate(0px,0px)rotate(-1.5deg);}64%{-webkit-transform:translate(-1.6px,-1.6px)rotate(-2deg);}66%{-webkit-transform:translate(1.6px,-1.6px)rotate(0.5deg);}68%{-webkit-transform:translate(0px,-1.6px)rotate(-2deg);}70%{-webkit-transform:translate(-1.6px,1px)rotate(1.5deg);}72%{-webkit-transform:translate(-1.6px,1.6px)rotate(2deg);}74%{-webkit-transform:translate(1.3px,-1.6px)rotate(-0.5deg);}76%{-webkit-transform:translate(1.4px,1px)rotate(-0.5deg);}78%{-webkit-transform:translate(-1px,1.4px)rotate(2deg);}80%{-webkit-transform:translate(1.4px,1.6px)rotate(2deg);}82%{-webkit-transform:translate(-1.6px,-1.6px)rotate(-0.5deg);}84%{-webkit-transform:translate(-1.4px,1.4px)rotate(-2deg);}86%{-webkit-transform:translate(1px,1.4px)rotate(-2deg);}88%{-webkit-transform:translate(-1.4px,1.4px)rotate(-1.5deg);}90%{-webkit-transform:translate(-1.6px,-1.6px)rotate(-2deg);}92%{-webkit-transform:translate(-1.6px,1.6px)rotate(2deg);}94%{-webkit-transform:translate(-1.6px,-1.6px)rotate(-2deg);}96%{-webkit-transform:translate(-1.4px,1.3px)rotate(-2deg);}98%{-webkit-transform:translate(1.3px,1px)rotate(-0.5deg);}}@keyframesshaky-slow{0%{transform:translate(0px,0px)rotate(0deg);}2%{transform:translate(-1px,1.5px)rotate(1.5deg);}4%{transform:translate(1.3px,0px)rotate(-0.5deg);}6%{transform:translate(1.4px,1.4px)rotate(-2deg);}8%{transform:translate(-1.3px,-1px)rotate(-1.5deg);}10%{transform:translate(1.4px,0px)rotate(-2deg);}12%{transform:translate(-1.3px,-1px)rotate(-2deg);}14%{transform:translate(1.5px,1.3px)rotate(1.5deg);}16%{transform:translate(1.5px,-1.5px)rotate(-1.5deg);}18%{transform:translate(1.3px,-1.3px)rotate(-2deg);}20%{transform:translate(1px,1px)rotate(-0.5deg);}22%{transform:translate(1.3px,1.5px)rotate(-2deg);}24%{transform:translate(-1.4px,-1px)rotate(2deg);}26%{transform:translate(1.3px,-1.3px)rotate(0.5deg);}28%{transform:translate(1.6px,-1.6px)rotate(-1.5deg);}30%{transform:translate(-1.3px,-1.3px)rotate(-1.5deg);}32%{transform:translate(-1px,0px)rotate(2deg);}34%{transform:translate(1.3px,1.3px)rotate(-0.5deg);}36%{transform:translate(1.3px,1.6px)rotate(1.5deg);}38%{transform:translate(1.3px,-1.6px)rotate(1.5deg);}40%{transform:translate(-1.4px,-1px)rotate(-0.5deg);}42%{transform:translate(-1.4px,1.3px)rotate(-0.5deg);}44%{transform:translate(-1.6px,1.4px)rotate(0.5deg);}46%{transform:translate(-2.1px,-1.3px)rotate(-0.5deg);}48%{transform:translate(1px,1.6px)rotate(1.5deg);}50%{transform:translate(1.6px,1.6px)rotate(1.5deg);}52%{transform:translate(-1.4px,1.6px)rotate(0.5deg);}54%{transform:translate(1.6px,-1px)rotate(-2deg);}56%{transform:translate(1.3px,-1.6px)rotate(-2deg);}58%{transform:translate(-1.3px,-1.6px)rotate(0.5deg);}60%{transform:translate(1.3px,1.6px)rotate(-0.5deg);}62%{transform:translate(0px,0px)rotate(-1.5deg);}64%{transform:translate(-1.6px,-1.6px)rotate(-2deg);}66%{transform:translate(1.6px,-1.6px)rotate(0.5deg);}68%{transform:translate(0px,-1.6px)rotate(-2deg);}70%{transform:translate(-1.6px,1px)rotate(1.5deg);}72%{transform:translate(-1.6px,1.6px)rotate(2deg);}74%{transform:translate(1.3px,-1.6px)rotate(-0.5deg);}76%{transform:translate(1.4px,1px)rotate(-0.5deg);}78%{transform:translate(-1px,1.4px)rotate(2deg);}80%{transform:translate(1.4px,1.6px)rotate(2deg);}82%{transform:translate(-1.6px,-1.6px)rotate(-0.5deg);}84%{transform:translate(-1.4px,1.4px)rotate(-2deg);}86%{transform:translate(1px,1.4px)rotate(-2deg);}88%{transform:translate(-1.4px,1.4px)rotate(-1.5deg);}90%{transform:translate(-1.6px,-1.6px)rotate(-2deg);}92%{transform:translate(-1.4px,1.6px)rotate(2deg);}94%{transform:translate(-1.6px,-1.6px)rotate(-2deg);}96%{transform:translate(-1.4px,1.3px)rotate(-2deg);}98%{transform:translate(1.3px,1px)rotate(-0.5deg);}}3.效果展示：
应用场景：在音乐类的项目，会有让图片当背景模糊的效果如下图：毛玻璃效果一、使用filter:blur()二、backdrop-filter:blur()补充：filter、backdrop✨✨一、使用filter:blur()⭐⭐⭐filter:blur()，把图片变模糊的同时，四周也会模糊，没有边界，就不好看哈哈给它一个父级元素，父元素控制宽高，超出部分隐藏css.bg{position:fixed;width:450px;height:253px;overflow:hidden;}.bg-image{width:100%;filter:blur(5px);}.bg-image::after{content:"";display:block;background:rgba(0,0,0,0.5);z-index:1;}html:<divclass="bg"><imgsrc="./images/动漫.jpg"alt=""class="bg-image"/></div>预览效果：虽然四周是清晰了，但是还是会看见白色的边边。二、backdrop-filter:blur()⭐⭐⭐⭐⭐原本图片，想要毛玻璃效果，给它加滤镜（注意，并不是图片模糊化，是给它加滤镜）1.背景固定，背景的宽高要和图片一致在添加另外一个元素（即为滤镜），给它设透明度和模糊值给背景和滤镜设置z-index:-1,使用负值降低优先级,防止添加在模糊图片上的文字图片模糊代码：css：.bg-image,.inner{position:fixed;top:0;left:0;width:450px;height:253px;z-index:-1;}.inner{background:rgba(0,0,0,0.5);backdrop-filter:blur(5px);}html：<divclass="bg-image"><imgsrc="./images/动漫.jpg"alt=""class="img"width="100%"/><divclass="inner"></div></div>预览效果：这样就是我们要的效果了，nice~补充：filter、backdrop✨✨✨✨推荐去mdn官网看哦:MDNfiltermdn文档这样介绍：CSS属性filter将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。blurfilter:blur()单位是px越大越模糊opacityfilter:opacity()透明度，设置元素的透明度在0~1之间0:完全透明1:无效grayscalefilter:grayscale()使图片变灰blablabla~~和我我下面总结的属性都是一致的（太累了，不想打了，用到啥就去搜吧嘿嘿）2.backdrop-filtermdn文档这样介绍：backdrop-filterCSS属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。也就是说给图片加了一层滤镜（我是这样理解的）常见属性：backdrop-filter:blur();//高斯模糊滤镜backdrop-filter:brightness();//图片明亮度滤镜backdrop-filter:contrast();//对比度滤镜backdrop-filter:drop-shadow();//阴影滤镜backdrop-filter:grayscale();//灰度滤镜backdrop-filter:hue-rotate();//色相滤镜backdrop-filter:invert();//反转滤镜backdrop-filter:opacity();//透明度滤镜backdrop-filter:sepia();//深褐色滤镜backdrop-filter:saturate();//饱和度滤镜示例：括号里面为他们所用的值和单位backdrop-filter:blur(2px);backdrop-filter:brightness(60%);backdrop-filter:contrast(40%);backdrop-filter:drop-shadow(4px4px10pxblue);backdrop-filter:grayscale(30%);backdrop-filter:hue-rotate(120deg);backdrop-filter:invert(70%);backdrop-filter:opacity(20%);backdrop-filter:sepia(90%);backdrop-filter:saturate(80%);
垂直居中是布局中十分常见的效果之一，在进行编辑过程中经常遇到，如何在已知元素的宽度和高度及未知的情况下，css快速实现水平垂直居中呢?站三界导航小编为您分享如下，有需要的快点学起来吧。html结构：<divclass="parent"><divclass="item"></div></div>1.已知元素的宽度和高度：.item{position:absolute;top:50%;left:50%;margin-top:-75px;/*设置margin-left/margin-top为自身高度的一半*/margin-left:-75px;}.item{position:absolute;margin:auto;left:0;top:0;right:0;bottom:0;}/*这个方法可以实现自适应*/2.未知元素的高度和宽度：.item{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);/*使用css3的transform来实现*/}.parent{display:flex;justify-content:center;align-items:center;background:#AAA;height:300px;/*注意这里需要设置高度来查看垂直居中效果*/}
1、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度）p{width:200rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}多行文本溢出显示省略号p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}2、中英文自动换行word-break:break-all;只对英文起作用，以字母作为换行依据word-wrap:break-word;只对英文起作用，以单词作为换行依据white-space:pre-wrap;只对中文起作用，强制换行white-space:nowrap;强制不换行，都起作用p{word-wrap:break-word;white-space:normal;word-break:break-all;}/*不换行*/.wrap{white-space:nowrap;}/*自动换行*/.wrap{word-wrap:break-word;word-break:normal;}/*强制换行*/.wrap{word-break:break-all;}3、文字阴影text-shadow为网页字体添加阴影，通过对text-shadow属性设置相关的属性值。属性与值的说明如下：text-shadow:[X-offset,Y-offset,Blur,Color];X-offset:指阴影居于字体水平偏移的位置。Y-offset:指阴影居于字体垂直偏移的位置。Blur:指阴影的模糊值。color:指阴影的颜色；h1{text-shadow:5px5px5px#FF0000;}4、设置placeholder的字体样式input::-webkit-input-placeholder{/*Chrome/Opera/Safari*/color:red;}input::-moz-placeholder{/*Firefox19+*/color:red;}input:-ms-input-placeholder{/*IE10+*/color:red;}input:-moz-placeholder{/*Firefox18-*/color:red;}5、不固定高宽div垂直居中的方法方法一：伪元素和inline-block/vertical-align（兼容IE8）.box-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em;//微调整空格}.box{display:inline-block;vertical-align:middle;}方法二：flex(不兼容ie8以下).box-wrap{height:300px;justify-content:center;align-items:center;display:flex;background-color:#666;}方法三：transform(不兼容ie8以下).box-wrap{width:100%;height:300px;background:rgba(0,0,0,0.7);position:relative;}.box{position:absolute;left:50%;top:50%;transform:translateX(-50%)translateY(-50%);-webkit-transform:translateX(-50%)translateY(-50%);}方法四：设置margin:auto（该方法得严格意义上的非固定宽高，而是50%的父级的宽高。）.box-wrap{position:relative;width:100%;height:300px;background-color:#f00;}.box-content{position:absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:#ff0;}6、解决IOS页面滑动卡顿body,html{-webkit-overflow-scrolling:touch;}7、设置滚动条样式.test::-webkit-scrollbar{/*滚动条整体样式*/width:10px;/*高宽分别对应横竖滚动条的尺寸*/height:1px;}.test::-webkit-scrollbar-thumb{/*滚动条里面小方块*/border-radius:10px;background-color:skyblue;background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.2)25%,transparent25%,transparent50%,rgba(255,255,255,0.2)50%,rgba(255,255,255,0.2)75%,transparent75%,transparent);}.test::-webkit-scrollbar-track{/*滚动条里面轨道*/box-shadow:inset005pxrgba(0,0,0,0.2);background:#ededed;border-radius:10px;}8、实现隐藏滚动条同时又可以滚动.demo::-webkit-scrollbar{display:none;/*ChromeSafari*/}.demo{scrollbar-width:none;/*firefox*/-ms-overflow-style:none;/*IE10+*/overflow-x:hidden;overflow-y:auto;}9、css绘制三角形div{width:0;height:0;border-width:040px40px;border-style:solid;border-color:transparenttransparentred;}实现带边框的三角形：<divid="blue"><div>#blue{position:relative;width:0;height:0;border-width:040px40px;border-style:solid;border-color:transparenttransparentblue;}#blue:after{content:"";position:absolute;top:1px;left:-38px;border-width:038px38px;border-style:solid;border-color:transparenttransparentyellow;}注:如果想绘制右直角三角，则将左border设置为0；如果想绘制左直角三角，将右border设置为0即可（其它情况同理）。10、Table表格边框合并table,tr,td{border:1pxsolid#666;}table{border-collapse:collapse;}11、css选取第n个标签元素first-childfirst-child表示选择列表中的第一个标签。last-childlast-child表示选择列表中的最后一个标签nth-child(3)表示选择列表中的第3个标签nth-child(2n)这个表示选择列表中的偶数标签nth-child(2n-1)这个表示选择列表中的奇数标签nth-child(n+3)这个表示选择列表中的标签从第3个开始到最后。nth-child(-n+3)这个表示选择列表中的标签从0到3，即小于3的标签。nth-last-child(3)这个表示选择列表中的倒数第3个标签。使用方法：li:first-child{}12、移动端软键盘变为搜索方式默认情况下软键盘上该键位为前往或者确认等文字，要使其变为搜索文字，需要在input上加上type声明：<formaction="#"><inputtype="search"placeholder="请输入..."name="search"/></form>需要一个form标签套起来,并且设置action属性,这样写完之后输入法的右下角就会自动变成搜索,同时，使用了search类型后，搜索框上会默认自带删除按钮。13、onerror处理图片异常使用onerror异常处理时，若onerror的图片也出现问题，则图片显示会陷入死循环，所以要在赋值异常图片之后，将地址置空<imgοnerrοr="this.src='url;this.οnerrοr=null'"/>14、背景图片的大小.bg-img{background:url(../img/find_pw_on_2.png)no-repeatcentercenter!important;background-size:27pxauto!important;/*background-size:100%100%;*//*background-size:50px100px*/}15、文字之间的间距单词text-indent抬头距离，letter-spacing字与字间距p{text-indent：10px；/*单词抬头距离*/letter-spacing：10px；/*间距*/}16、元素占满整个屏幕heigth如果使用100%，会根据父级的高度来决定，所以使用100vh单位。.dom{width:100%;height:100vh;}17、CSS实现文本两端对齐.wrap{text-align:justify;text-justify:distribute-all-lines;/*ie6-8*/text-align-last:justify;/*一个块或行的最后一行对齐方式*/-moz-text-align-last:justify;-webkit-text-align-last:justify;}18、实现文字竖向排版/*单列展示时*/.wrap{width:25px;line-height:18px;height:auto;font-size:12px;padding:8px5px;word-wrap:break-word;/*英文的时候需要加上这句，自动换行*/}/*多列展示时*/.wrap{height:210px;line-height:30px;text-align:justify;writing-mode:vertical-lr;/*从左向右*/writing-mode:tb-lr;/*IE从左向右*//*writing-mode:vertical-rl;--从右向左*//*writing-mode:tb-rl;--从右向左*/}19、使元素鼠标事件失效.wrap{/*如果按tab能选中该元素，如button，然后按回车还是能执行对应的事件，如click。*/pointer-events:none;cursor:default;}20、禁止用户选择.wrap{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}21、使用硬件加速在浏览器中用css开启硬件加速，使GPU(GraphicsProcessingUnit)发挥功能，从而提升性能。硬件加速在移动端尤其有用，因为它可以有效的减少资源的利用。目前主流浏览器会检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。如果不使用3D变形，我们可以通过下面方式来开启：.wrap{transform:translateZ(0);}22、页面动画出现闪烁问题在ChromeandSafari中，当我们使用CSStransforms或者animations时可能会有页面闪烁的效果，下面的代码可以修复此情况：.cube{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;perspective:1000;/*Othertransformpropertieshere*/}在webkit内核的浏览器中，另一个行之有效的方法是.cube{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);/*Othertransformpropertieshere*/}23、字母大小写转换p{text-transform:uppercase}/*将所有字母变成大写字母*/p{text-transform:lowercase}/*将所有字母变成小写字母*/p{text-transform:capitalize}/*首字母大写*/p{font-variant:small-caps}/*将字体变成小型的大写字母*/24、将一个容器设为透明.wrap{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;}25、消除transition闪屏.wrap{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-perspective:1000;}26、识别字符串里的‘\n’并换行一般在富文本中返回换行符不是<br>的标签，而且\n。不使用正则转换的情况下，可通过下面样式实现换行。body{white-space:pre-line;}27、移除a标签被点链接的边框a{outline:none；/*或者outline:0*/text-decoration:none;/*取消默认下划线*/}28、CSS显示链接之后的URL<ahref="//www.zhansanjie.com">站三界导航</a><style>a:after{content:"("attr(href)")";}</style>29、select内容居中显示、下拉内容右对齐select{text-align:center;text-align-last:center;}selectoption{direction:rtl;}30、修改input输入框中光标的颜色不改变字体的颜色input{color:#fff;caret-color:red;}31、子元素固定宽度父元素宽度被撑开/*父元素下的子元素是行内元素*/.wrap{white-space:nowrap;}/*若父元素下的子元素是块级元素*/.wrap{white-space:nowrap;/*子元素不被换行*/display:inline-block;}32、让div里的图片和文字同时上下居中这里不使用flex布局的情况。通过vertival-align.wrap{height:100,line-height:100}img{vertival-align：middle}vertical-aligncss的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素ertical-align：baseline/top/middle/bottom/sub/text-top;33、实现宽高等比例自适应矩形.scale{width:100%;padding-bottom:56.25%;height:0;position:relative;}.item{position:absolute;width:100%;height:100%;background-color:499e56;}<divclass="scale"><divclass="item">这里是所有子元素的容器</div></div>34、transfrom的rotate属性在span标签下失效span{display:inline-block}35、CSS加载动画主要是通过css旋转动画的实现：.dom{-webkit-animation:circle1sinfinitelinear;}@keyframescircle{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}实现如下效果：<divclass="loader"></div><style>.loader{border:16pxsolid#f3f3f3;border-radius:50%;border-top:16pxsolid#3498db;width:80px;height:80px;-webkit-animation:spin2slinearinfinite;animation:spin2slinearinfinite;}@-webkit-keyframesspin{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}@keyframesspin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}</style>36、文字渐变效果实现<divclass="text_signature">文字渐变效果</div><style>.text_signature{-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-image:linear-gradient(toright,#ec2239,#40a4e2,#ea96f5);width:320px;}</style>37、好看的边框阴影<divclass="text_shadow"></div><style>.text_shadow{width:500px;height:100px;box-shadow:0px0px13px1pxrgba(51,51,51,0.1);}</style>38、好看的背景渐变<divclass="text_gradient"></div><style>.text_gradient{width:500px;height:100px;background:linear-gradient(25deg,rgb(79,107,208),rgb(98,141,185),rgb(102,175,161),rgb(92,210,133))rgb(182,228,253);}</style>39、实现立体字的效果<divclass="text_solid">立体字效果</div><style>.text_solid{font-size:32px;text-align:center;font-weight:bold;line-height:100px;text-transform:uppercase;position:relative;background-color:#333;color:#fff;text-shadow:0px1px0px#c0c0c0,0px2px0px#b0b0b0,0px3px0px#a0a0a0,0px4px0px#909090,0px5px10pxrgba(0,0,0,0.6);}</style>40、全屏背景图片的实现.swper{background-image:url(./img/bg.jpg);width:100%;height:100%;/*父级高不为100%请使用100vh*/zoom:1;background-color:#fff;background-repeat:no-repeat;background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-position:center0;}41、实现文字描边的2种方法方式一：.stroke{-webkit-text-stroke:1pxgreenyellow;text-stroke:1pxgreenyellow;}方式二：.stroke{text-shadow:#0001px00,#00001px0,#000-1px00,#0000-1px0;-webkit-text-shadow:#0001px00,#00001px0,#000-1px00,#0000-1px0;-moz-text-shadow:#0001px00,#00001px0,#000-1px00,#0000-1px0;*filter:Glow(color=#000,strength=1);}42、元素透明度的实现.dom{opacity:0.4;filter:alpha(opacity=40);/*IE8及其更早版本*/}使用rgba()设置颜色透明度。.demo{background:rgba(255,0,0,1);}说明：RGBA是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha（不透明度）三个单词的缩写。43、解决1px边框变粗问题.dom{height:1px;background:#dbdbdb;transform:scaleY(0.5);}Ps：出现1px变粗的原因，比如在2倍屏时1px的像素实际对应2个物理像素。44、CSS不同单位的运算css自己也能够进行简单的运算，主要是用到了calc这个函数。实现不同单位的加减运算：.div{width:calc(100%-50px);}45、CSS实现文字模糊效果.vague_text{color:transparent;text-shadow:#111005px;}46、通过滤镜让图标变灰一张彩色的图片就能实现鼠标移入变彩色，移出变灰的效果。<ahref=''class='icon'><imgsrc='01.jpg'/></a><style>.icon{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray;}.icon:hover{filter:none;-webkit-filter:grayscale(0%);}</style>47、图片自适应object-fit当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。css3中可使用object-fit属性来解决图片被拉伸或是被缩放的问题。使用的提前条件：图片的父级容器要有宽高。img{width:100%;height:100%;object-fit:cover;}fill:默认值。内容拉伸填满整个contentbox,不保证保持原有的比例。contain:保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，短的那条等比缩放，可能会有留白。cover:保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，长的那条等比缩放。可能会有部分区域不可见。（常用）none:保持原有尺寸比例。同时保持替换内容原始尺寸大小。scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。48、行内标签元素出现间隙问题方式一：父级font-size设置为0.father{font-size:0;}其它方案：1将行内元素写为1行(影响阅读)；2使用浮动样式（会影响布局）。49、解决vertical-align属性不生效在使用vertical-align:middle实现垂直居中的时候，经常会发现不生效的情况。这里需要注意它生效需要满足的条件：**作用环境：**父元素设置line-height。需要和height一致。或者将display属性设置为table-cell，将块元素转化为单元格。**作用对象：**子元素中的inline-block和inline元素。<divclass="box"><imgsrc=".\test.jpg"/><span>内部文字</span></div><style>.box{width:300px;line-height:300px;font-size:16px;}.boximg{width:30px;height:30px;vertical-align:middle}.boxspan{vertical-align:middle}</style>PS：vertical-align不可继承，必须对子元素单独设置。同时需要注意的是line-height的高度基于font-size（即字体的高度），如果文字要转行会出现异常哦。
使用CSSSprites是在你尽可能地使用其他的优化策略后最后的一招。它将你的所有图片放在一张图中，即你的一张CSSSprites由10张图片组成，那将避免9次HTTP请求，这减少的9次请求时延，正是加速的加载时间。这也有问题，跟每个HTTP请求的服务器开销一样，需由Apache的子进程管理，占用20MB的内存。你最好帮你的服务器进程减少HTTP请求：卸载媒体到Web前端AmazonS3，诸如此类。 下面是两个CSSSprites，一个是Google的，一个是PaulStamatiou的。 照猫画虎，把你网站上经常使用的web图片元素打包——比如你的logo，RSS图标，还有其他不会经常变更的东西。用Photoshop或者你的图片编辑工具，把它们放在单个的图片里。你可以尽贴着放置图片，但要是你稍微留点白再下一步选中会更简单些，然后保存图片。 编写CSS代码 有了CSSSprites，你将要用CSS选择器对每个只显示精灵中部分图片的链接进行处理：只要你需要的那部分。你需要知道待显示图片的精确大小以及位置。这步用到Photoshop中的切片工具并选出你要用的那部分的图。对新切片右键单击，选择编辑切片。在弹出的窗口会有图片的分辨率和位置。 在这个示例中，我选用大小为42×42px的图，它有336px的偏移（译注：是指左偏移）并紧贴着顶部。这样便形成了相应的CSS：a.stammy,a.stammy:hover{ background:#fffurl(path/to/sprites.png)-336px0no-repeat; display:block; height:42px; width:42px; text-indent:-9999px; overflow:hidden;}CSS选择器对所有含class="stammy"属性的链接都有效。背景属性载入精灵图片，然后设置背景图位置为负值（其必为负）。如果图片离顶部有10个像素，那背景位置应该是“-336px-10px”。之后在CSS中设置了宽和高。我对悬停伪类（hoverpseudoclass）也进行了设置，因为有一次当我悬停在该类的链接上时，会改变链接的悬停状态的颜色，从而背景图会消失。 设置溢出隐藏“解决当你选择要替换的文本的时候，那高亮部分会一直延伸到屏幕左侧的烦人问题”，正如Rob所说。对其他所有图片如法炮制，并对每个选择器命名。 编写HTML代码 目今你已经对每个图片有一些CSS选择器。至此你已经搞定了大问题，还差最后一步。现在只需对每个选择器创建链接。<aclass="stammy"href="http://www.zhansanjie.com"title="站三界导航">站三界导航</a>相当简单吧？用CSS和链接设置类，将精灵的信息组合起来，只显示精灵的一部分。虽此，因为我们甚至没使用一个img标签，我们不能设置alt属性，而这对移动用户、搜索引擎、屏幕阅读器之类的来说至关重要。将文字写在链接中，再用CSS文本缩进将其移出屏幕范围，这样你就无需吧文字叠在图片上而同样具有可用性。
一、grid布局是什么？grid即网格布局，是css中功能最强大的布局。二、grid布局中的基本概念容器：包裹子元素的元素称为容器项目：被父元素包裹的子元素称为项目<divclass="container"><divstyle="background-color:darkgreen;">1</div><divstyle="background-color:darkgreen;">2</div><divstyle="background-color:darkgreen;">3</div><div>4</div><div>5</div><divstyle="background-color:darkgreen;">6</div><div>7</div><div>8</div><div>9</div><div>7</div><div>8</div><divstyle="background-color:darkgreen;">9</div></div>如上具有container类名的div就是容器行(row)和列(column)：与屏幕x轴正方向相同的方向称为x方向与y轴正方向相同的方向称为y方向单元格：行和列的交叉处就是单元格，单元格也是我们主要关心的对象，使用grid布局就是创建和操作单元格引用阮一峰老师一张图，单元格如下三、grid布局的具体使用使用css当然是设计各种css样式，接下来详解grid布局常用样式1.设置给容器的样式display:grid;直接给父元素声明使用grid布局grid-template-rows和grid-template-columns这两个属性用来设置容器的行列宽高，用法类似都是设置个数和宽度grid-template-rows接若干个参数，参数个数为行的个数，参数大小为行的高度。示例代码grid-template-columns:100px100px100px;得到三列，每列宽100px为避免重复书写大小，grid-template-columns可设置repeat语法糖,示例代码grid-template-columns:repeat(3,100px)与grid-template-columns:100px100px100px;效果相同grid-template-columns:repeat(4,1fr)按父元素的宽度平分为4份，每份宽度相同，1fr就是一个片段。grid-template-columns:1fr2fr1fr;得到三个，中间一列是其他两列的2倍。lign-items和justify-items这两个属性设置子元素在划分的网格中的位置，可选参数为start和center、end。column-gap和row-gap设置列间距和间距设置间距后，如果原先子盒子是固定宽高当父盒子空间不足时子元素的宽高会被压缩。当设置fr单位时子元素高度会变小（此时平分的父元素减去间距之后的值。如父盒子宽375px,设置column:24px;有4列则每列宽度为(375-24*3)/4,除以3是因为4列只有3个间距）grid-template-areas是非常重要的属性，用来划分区域。<divclass="layout"><header>头部</header><aside>侧边栏</aside><main>内容</main><footer>底部</fooetr></div>grid-template-areas:"headerheaderheader""sidebarcontentcontent""footerfooterfooter"header{grid-area:header;}main{grid-area:content;}aside{grid-area:sidebar;}footer{grid-area:footer;}附上一段区域划分示例代码（主要就是先给某个区域起一个名，然后让某元素占据该区域）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>*{padding:0;margin:0;}#container{display:grid;width:100px;height:100px;row-gap:3px;column-gap:3px;grid-template-areas:"mainmainright""mainmainright""footerfooterfooter";}.main{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);grid-area:main;}.right{grid-area:right;}.footer{grid-area:footer;}</style></head><body><divid="container"><divclass="main"><div></div></div><divclass="right"></div><divclass="footer"></div></div></body></html>
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示，取值有：normal：默认，忽略文本中所有的空白、换行符；只有文本存在<br>或文本达到框的约束时，文本才会换行nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有br时才会换行pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在<br>或文本中有换行符时，文本才会换行pre-wrap：和pre类似，保留文本中的空白、换行符；文本存在<br>或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行pre-line：会略文本中的空白符；文本存在<br>或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行示例：.container{background-color:lightgreen;width:300px;}.normal{white-space:normal;}.no-wrap{white-space:nowrap;}.pre{white-space:pre;}.pre-line{white-space:pre-line;}.pre-wrap{white-space:pre-wrap;}html模板：<divclass="container">Loremipsumdolorsitametconsecteturadipisicingelit.Undevelitullamistelaboreearum.Nameaexercitationem<br>aspernatur<br>ipsum</div>1、white-space:normalwhite-spaces:normal isthedefaultvalue.Allthesourcelinebreak,extrawhitespace/tabiscollapsed.Thetextwillonlybreakintonewlinewhenthereis <br> orifthetexthittheconstraintofthebox.效果：2、white-space:nowrapAlltheextraspacing/linebreakiscollapsed.Donotautomaticallybreakintonewlinewhenhitthewidthconstraintofthebox.Textwillonlybreakintonewlinewhenithas br效果3、white-space:preSequencesofwhitespacearepreserved.Linesareonlybrokenatnewlinecharactersinthesourceandat <br> elements.Thetextdonotbreakintonewlineevenwhenithitthewidthconstraintofthebox.Itwillonlybreakintonewlineifthesourcehasnewlineorwhenithas <br>效果4、white-space:pre-wrapSequencesofwhitespacearepreserved.Linesarebrokenatnewlinecharacters,at <br>,andasnecessarytofilllineboxes.pre-wrap isverysimilarto pre Theonlydifferencesisthetextwillautomaticallybreakintoanewlinewhenithitthewidthconstraintofthebox.效果5、white-space:pre-lineSequencesofwhitespacearecollapsed.Linesarebrokenatnewlinecharacters,at <br>,andasnecessarytofilllineboxes.Sourcelinebreakispreserved linebreak1–6 xtraspacingiscollapsedintosinglespacing.Textwillautomaticallybreakintonewlinewhenhitthewidthconstraintofthebox,ithas<br> andthesourcehasnewline.效果
常用css样式大全字体属性：(font)大小{font-size:x-large;}(特大)xx-small;(极小)一般中文用不到，只要用数值就可以，单位：PX、PD样式{font-style:oblique;}(偏斜体)italic;(斜体)normal;(正常)行高{line-height:normal;}(正常)单位：PX、PD、EM粗细{font-weight:bold;}(粗体)lighter;(细体)normal;(正常)变体{font-variant:small-caps;}(小型大写字母)normal;(正常)大小写{text-transform:capitalize;}(首字母大写)uppercase;(大写)lowercase;(小写)none;(无)修饰{text-decoration:underline;}(下划线)overline;(上划线)line-through;(删除线)blink;(闪烁)常用字体{font-family:"MicrosoftYaHei"}(微软雅黑),"MicrosoftJhengHei"(华文细黑),"STHeiti","MingLiu","CourierNew","Courier,monospace","TimesNewRoman","Times","serif","Arial","Helvetica","sans-serif","Verdana"背景属性：(background)色彩{background-color:#FFFFFF;}图片{background-image:url();}重复{background-repeat:no-repeat;}滚动{background-attachment:fixed;}(固定)scroll;(滚动)位置{background-position:left;}(水平)top(垂直);简写方法{background:#000url(..)repeatfixedlefttop;}/*简写·这个在阅读代码中经常出现，要认真的研究*/区块属性：(Block)/这个属性第一次认识，要多多研究/字间距{letter-spacing:normal;}数值/*这个属性似乎有用，多实践下*/对齐{text-align:justify;}(两端对齐)left;(左对齐)right;(右对齐)center;(居中)缩进{text-indent:数值px;}垂直对齐{vertical-align:baseline;}(基线)sub;(下标)super;(下标)top;text-top;middle;bottom;text-bottom;词间距{word-spacing:normal;数值}空格{white-space:pre;(保留)}nowrap;(不换行)显示{display:block;}(块)inline;(内嵌)list-item;(列表项)run-in;(追加部分)compact;(紧凑)marker;(标记)table;inline-table;table-raw-group;table-header-group;table-footer-group;table-raw;table-column-group;table-column;table-cell;table-caption;(表格标题)/*display属性的了解很模糊*/盒子属性：(Box)width:;height:;float:;clear:both;margin:;padding:;顺序：上右下左边框属性：(Border)border-style:dotted;(点线)dashed;(虚线)solid;double;(双线)groove;(槽线)ridge;(脊状)inset;(凹陷)outset;border-width:;边框宽度border-color:#;简写方法:border：widthstylecolor;/*简写*/列表属性：(List-style)类型list-style-type:disc;(圆点)circle;(圆圈)square;(方块)decimal;(数字)lower-roman;(小罗码数字)upper-roman;lower-alpha;upper-alpha;位置list-style-position:outside;(外)inside;图像list-style-image:url(..);定位属性：(Position)Position:absolute;relative;static;visibility:inherit;visible;hidden;overflow:visible;hidden;scroll;auto;clip:rect(12px,auto,12px,auto)(裁切)css属性代码大全一、CSS文字属性：color:#999999;/*文字颜色*/font-family:宋体,sans-serif;/*文字字体*/font-size:9pt;/*文字大小*/font-style:itelic;/*文字斜体*/font-variant:small-caps;/*小字体*/letter-spacing:1pt;/*字间距离*/line-height:200%;/*设置行高*/font-weight:bold;/*文字粗体*/vertical-align:sub;/*下标字*/vertical-align:super;/*上标字*/text-decoration:line-through;/*加删除线*/text-decoration:overline;/*加顶线*/text-decoration:underline;/*加下划线*/text-decoration:none;/*删除链接下划线*/text-transform:capitalize;/*首字大写*/text-transform:uppercase;/*英文大写*/text-transform:lowercase;/*英文小写*/text-align:right;/*文字右对齐*/text-align:left;/*文字左对齐*/text-align:center;/*文字居中对齐*/text-align:justify;/*文字分散对齐*/**vertical-align属性**vertical-align:top;/*垂直向上对齐*/vertical-align:bottom;/*垂直向下对齐*/vertical-align:middle;/*垂直居中对齐*/vertical-align:text-top;/*文字垂直向上对齐*/vertical-align:text-bottom;/*文字垂直向下对齐*/二、CSS边框空白padding-top:10px;/*上边框留空白*/padding-right:10px;/*右边框留空白*/padding-bottom:10px;/*下边框留空白*/padding-left:10px;/*左边框留空白*/三、CSS符号属性：list-style-type:none;/*不编号*/list-style-type:decimal;/*阿拉伯数字*/list-style-type:lower-roman;/*小写罗马数字*/list-style-type:upper-roman;/*大写罗马数字*/list-style-type:lower-alpha;/*小写英文字母*/list-style-type:upper-alpha;/*大写英文字母*/list-style-type:disc;/*实心圆形符号*/list-style-type:circle;/*空心圆形符号*/list-style-type:square;/*实心方形符号*/list-style-image:url(/dot.gif);/*图片式符号*/list-style-position:outside;/*凸排*/list-style-position:inside;/*缩进*/四、CSS背景样式：background-color:#F5E2EC;/*背景颜色*/background:transparent;/*透视背景*/background-image:url(/image/bg.gif);/*背景图片*/background-attachment:fixed;/*浮水印固定背景*/background-repeat:repeat;/*重复排列-网页默认*/background-repeat:no-repeat;/*不重复排列*/background-repeat:repeat-x;/*在x轴重复排列*/background-repeat:repeat-y;/*在y轴重复排列*/指定背景位置background-position:90%90%;/*背景图片x与y轴的位置*/background-position:top;/*向上对齐*/background-position:buttom;/*向下对齐*/background-position:left;/*向左对齐*/background-position:right;/*向右对齐*/background-position:center;/*居中对齐*/五、CSS连接属性：a/*所有超链接*/a:link/*超链接文字格式*/a:visited/*浏览过的链接文字格式*/a:active/*按下链接的格式*/a:hover/*鼠标转到链接*/鼠标光标样式：链接手指CURSOR:hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6)p{cursor:url("光标文件名.cur"),text;}六、CSS框线一览表：border-top:1pxsolid#6699cc;/*上框线*/border-bottom:1pxsolid#6699cc;/*下框线*/border-left:1pxsolid#6699cc;/*左框线*/border-right:1pxsolid#6699cc;/*右框线*/以上是建议书写方式,但也可以使用常规的方式如下:border-top-color:#369/*设置上框线top颜色*/border-top-width:1px/*设置上框线top宽度*/border-top-style:solid/*设置上框线top样式*/其他框线样式solid/*实线框*/dotted/*虚线框*/double/*双线框*/groove/*立体内凸框*/ridge/*立体浮雕框*/inset/*凹框*/outset/*凸框*/七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式：margin-top:10px;/*上边界*/margin-right:10px;/*右边界值*/margin-bottom:10px;/*下边界值*/margin-left:10px;/*左边界值*/CSS属性：字体样式(FontStyle)序号||中文说明||标记语法1||字体样式||{font:font-stylefont-variantfont-weightfont-sizefont-family}2||字体类型||{font-family:"字体1","字体2","字体3",...}3||字体大小||{font-size:数值|inherit|medium|large|larger|x-large|xx-large|small|smaller|x-small|xx-small}4||字体风格||{font-style:inherit|italic|normal|oblique}5||字体粗细||{font-weight:100-900|bold|bolder|lighter|normal;}6||字体颜色||{color:数值;}7||阴影颜色||{text-shadow:16位色值}8||字体行高||{line-height:数值|inherit|normal;}9||字间距||{letter-spacing:数值|inherit|normal}10||单词间距||{word-spacing:数值|inherit|normal}11||字体变形||{font-variant:inherit|normal|small-cps}12||英文转换||{text-transform:inherit|none|capitalize|uppercase|lowercase}13||字体变形||{font-size-adjust:inherit|none}14||字体||{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(TextStyle)序号||中文说明||标记语法1||行间距||{line-height:数值|inherit|normal;}2||文本修饰||{text-decoration:inherit|none|underline|overline|line-through|blink}3||段首空格||{text-indent:数值|inherit}4||水平对齐||{text-align:left|right|center|justify}5||垂直对齐||{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6||书写方式||{writing-mode:lr-tb|tb-rl}背景样式序号||中文说明||标记语法1||背景颜色||{background-color:数值}2||背景图片||{background-image:url(URL)|none}3||背景重复||{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4||背景固定||{background-attachment:fixed|scroll}5||背景定位||{background-position:数值|top|bottom|left|right|center}6||背影样式||{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(BoxStyle)序号||中文说明||标记语法1||边界留白||{margin:margin-topmargin-rightmargin-bottommargin-left}2||补白||{padding:padding-toppadding-rightpadding-bottompadding-left}3||边框宽度||{border-width:border-top-widthborder-right-widthborder-bottom-widthborder-left-width}宽度值||thin|medium|thick|数值4||边框颜色||{border-color:数值数值数值数值} 数值：分别代表top、right、bottom、left颜色值5||边框风格||{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6||边框||{border:border-widthborder-stylecolor}上边框||{border-top:border-top-widthborder-stylecolor}右边框||{border-right:border-right-widthborder-stylecolor}下边框||{border-bottom:border-bottom-widthborder-stylecolor}左边框{border-left:border-left-widthborder-stylecolor}7||宽度||{width:长度|百分比|auto}8||高度||{height:数值|auto}9||漂浮||{float:left|right|none}10||清除||{clear:none|left|right|both}分类列表序号||中文说明||标记语法1||控制显示||{display:none|block|inline|list-item}2||控制空白||{white-space:normal|pre|nowarp}3||符号列表||{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}4||图形列表||{list-style-image:URL}5||位置列表||{list-style-position:inside|outside}6||目录列表||{list-style:目录样式类型|目录样式位置|url}7||鼠标形状||{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}css布局九决一、IE边框若显若无，须注意，定是高度设置已忘记；二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；三、三像素文本慢移不必慌，高度设置帮你忙；四、兼容各个浏览须注意，默认设置行高可能是隐患；五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。八、图片链接排版须小心，图片链接文字链接若对对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。九、IE浮动双边距，请用display：inline。
中国互联网举报中心