超出两行显示省略号display:-webkit-box;/*-webkit-box-orient:vertical;*//*!autoprefixer:off*/-webkit-box-orient:vertical;/*autoprefixer:on*/-webkit-line-clamp:2;overflow:hidden;word-break:break-all;//文字超宽度必须换行white-space:pre-wrap;纵向滚动不显示滚动条overflow:hidden;text-overflow:ellipsis;overflow-y:auto;下拉展开的关键代码@keyframesslide-down{0%{transform:scaleY(0);}100%{transform:scaleY(1);}}.selectData{animation:slide-down0.3s;transform-origin:100%00;}flex快速让文字图片垂直居中display:flex;/*子元素靠中间排列*/justify-content:center;/*子元素垂直对齐*/align-items:center;盒阴影box-shadow:04rpx8rpx0#999;flex最小显示宽度和默认显示宽度flex-grow:1;min-width:32%;时间单位转时间戳1s=60*10001h=60*60*60*1000flex让其中一项占据剩余空间（需要其他元素的值都是固定的）flex:1;按钮底部固定,留个窗口滚动.import-cd-hscode-body{width:100%;height:100%;box-sizing:border-box;padding-bottom:44px;position:relative;.scroll-window{width:100%;//height:calc(100%-44px);height:100%;overflow-y:auto;}.bottom-buttons{position:absolute;bottom:0;left:0;width:100%;}}Pre样式 .preStyle{white-space:pre-line;/*保留换行符，设置溢出换行*/white-space:pre-wrap;/*保留换行符，不换行*/all:initial;/*清除继承样式*/}
上周，研发频道发表了一篇“Web开发者不容错过的20段CSS代码”，大家一致觉得很实用。该文是笔者对后30个的翻译，希望对大家有帮助。1.花式连字符（&）这个类应该在span元素里使用，并且里面包括&字符。它使用经典的serif字体和斜体来增强&符号。.amp{font-family:Baskerville,'GoudyOldStyle',Palatino,'BookAntiqua',serif;font-style:italic;font-weight:normal;}2.段落首字符下沉通常，这种效果会出现在印刷媒体上，如报纸或书籍。同样，如果网页布局合理，它也可以使用在Web页面上，它仅针对段落使用，但你也可以与单个元素绑定。p:first-letter{display:block;margin:5px005px;float:left;color:#ff3366;font-size:5.4em;font-family:Georgia,TimesNewRoman,serif;}3.内层CSS3盒阴影盒阴影（boxshadow）属性几乎可以运用在任何元素上，它们看起来都非常好看。下面这段代码主要聚焦内层阴影的设计。#mydiv{-moz-box-shadow:inset2px04px#000;-webkit-box-shadow:inset2px04px#000;box-shadow:inset2px04px#000;}4.外层CSS3盒阴影下面介绍一段外层阴影代码设计，注意，代码里的第三个参数表示模糊距离（blurdistance），而第四个参数表示铺开的（spread）距离。关于这些值的设计，你可以前往W3Schools学习。#mydiv{-webkit-box-shadow:02px2px-2pxrgba(0,0,0,0.52);-moz-box-shadow:02px2px-2pxrgba(0,0,0,0.52);box-shadow:02px2px-2pxrgba(0,0,0,0.52);}5.三角形列表符号该符号只能在CSS3里生成，在主流浏览器中，这是一项非常酷的技术。而其唯一的潜在问题是缺乏对后退方法的支持。 ul{margin:0.75em0;padding:01em;list-style:none;}li:before{content:"";border-color:transparent#111;border-style:solid;border-width:0.35em00.35em0.45em;display:block;height:0;width:0;left:-1em;top:0.9em;position:relative;}6.居中对齐并设置固定宽度#page-wrap{width:800px;margin:0auto;}7.CSS3列文本#columns-3{text-align:justify;-moz-column-count:3;-moz-column-gap:12px;-moz-column-rule:1pxsolid#c4c8cc;-webkit-column-count:3;-webkit-column-gap:12px;-webkit-column-rule:1pxsolid#c4c8cc;}8.固定页脚在网页里添加固定的页脚其实非常简单，并且也很实用。有些网站的页脚设计得很漂亮，可以给网站呈现出一个完美的结尾。#footer{position:fixed;left:0px;bottom:0px;height:30px;width:100%;background:#444;}/*IE6*/*html#footer{position:absolute;top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop))+'px');}9.IE6下修复PNG格式的透明度在网站里使用透明的图像已成为一种很普遍的做法，其始于.gif图片格式，但现在也涉及到.png图片格式。而一些老版本的IE不支持透明度，下面这段代码会很好地解决这一问题。.bg{width:200px;height:100px;background:url(/folder/yourimage.png)no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');}/*1pxgifmethod*/img,.png{position:relative;behavior:expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName=="IMG"&&this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage="none",this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"',sizingMethod='image')",this.src="images/transparent.gif"):(this.origBg=this.origBg?this.origBg:this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.origBg+"',sizingMethod='crop')",this.runtimeStyle.backgroundImage="none")),this.pngSet=true));}10.跨浏览器设置最小高度有时开发者需要对HTML元素设置最小高度，然而，这个效果却无法兼容IE和老版本的Firefox，下面这段代码可以修复这个问题。#container{min-height:550px;height:auto!important;height:550px;}#p#11——20#e#11. CSS3发光输入框下面的这段代码重写了浏览器的默认行为，可以让Chrome和Safari浏览器下普通的表单输入框产生发光效果。input[type=text],textarea{-webkit-transition:all0.30sease-in-out;-moz-transition:all0.30sease-in-out;-ms-transition:all0.30sease-in-out;-o-transition:all0.30sease-in-out;outline:none;padding:3px0px3px3px;margin:5px1px3px0px;border:1pxsolid#ddd;}input[type=text]:focus,textarea:focus{box-shadow:005pxrgba(81,203,238,1);padding:3px0px3px3px;margin:5px1px3px0px;border:1pxsolidrgba(81,203,238,1);}12.基于文件类型来创建链接样式下面这段代码通过使用CSS选择器和图像图标来实现各种类型的链接样式，可能会用到各种协议（HTTP、FTP、IRC,mailto），或者是文件本身的类型（mp3、avi、pdf）。/*externallinks*/a[href^="http://"]{padding-right:13px;background:url('external.gif')no-repeatcenterright;}/*emails*/a[href^="mailto:"]{padding-right:20px;background:url('email.png')no-repeatcenterright;}/*pdfs*/a[href$=".pdf"]{padding-right:18px;background:url('acrobat.png')no-repeatcenterright;}13.pre标签封装代码pre标签常用来对代码进行布局，可以解决因为行太多带来的滚动条问题。下面这段代码就使用pre来封装代码，让内容直接显示在页面中。pre{white-space:pre-wrap;/*css-3*/white-space:-moz-pre-wrap;/*Mozilla,since1999*/white-space:-pre-wrap;/*Opera4-6*/white-space:-o-pre-wrap;/*Opera7*/word-wrap:break-word;/*InternetExplorer5.5+*/}14.鼠标指向时变成手型网页中有许多item在点击时，鼠标不会变成小手的形状。这套CSS选择器会强迫鼠标越过一些关键元素和其他对象一起来使用.pointer这个类。a[href],input[type='submit'],input[type='image'],label[for],select,button,.pointer{cursor:pointer;}15.页面顶部阴影简单地把下面这段代码拷贝到页面里，它会在body元素之前产生黑色的，渐渐变淡的阴影。这种效果通常用来给一个文本框或网页元素加阴影。body:before{content:"";position:fixed;top:-10px;left:0;width:100%;height:10px;-webkit-box-shadow:0px0px10pxrgba(0,0,0,.8);-moz-box-shadow:0px0px10pxrgba(0,0,0,.8);box-shadow:0px0px10pxrgba(0,0,0,.8);z-index:100;}16.气泡引用效果这种效果常出现在论坛、创建公告牌或者是文本引用上。你只需把下面这段代码拷贝到样式表文件即可。这里（需翻墙）提供了许多关于语音泡泡的代码片段和使用技巧，欢迎去围观。.chat-bubble{background-color:#ededed;border:2pxsolid#666;font-size:35px;line-height:1.3em;margin:10pxauto;padding:10px;position:relative;text-align:center;width:300px;-moz-border-radius:20px;-webkit-border-radius:20px;-moz-box-shadow:005px#888;-webkit-box-shadow:005px#888;font-family:'Bangers',arial,serif;}.chat-bubble-arrow-border{border-color:#666transparenttransparenttransparent;border-style:solid;border-width:20px;height:0;width:0;position:absolute;bottom:-42px;left:30px;}.chat-bubble-arrow{border-color:#edededtransparenttransparenttransparent;border-style:solid;border-width:20px;height:0;width:0;position:absolute;bottom:-39px;left:30px;}17.指定标题样式该模板提供了所有头元素的主要样式，从H1到H5。h1,h2,h3,h4,h5{color:#005a9c;}h1{font-size:2.6em;line-height:2.45em;}h2{font-size:2.1em;line-height:1.9em;}h3{font-size:1.8em;line-height:1.65em;}h4{font-size:1.65em;line-height:1.4em;}h5{font-size:1.4em;line-height:1.25em;}18.利用CSS生成纹理图案背景通过CSS来为背景图片添加噪点，从而形成漂亮的纹理图案。你可以使用NoiseTextureGenerator生成器自定义噪点的纹理图案。body{background-image:url(data:image/png;base64,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);background-color:#0094d0;}19.ListOrdering你可能会遇到这种列表情况，需要把这个列表拆分成两个UL元素，你不妨看看下面这段代码。ol.chapters{list-style:none;margin-left:0;}ol.chapters>li:before{content:counter(chapter)".";counter-increment:chapter;font-weight:bold;float:left;width:40px;}ol.chaptersli{clear:left;}ol.start{counter-reset:chapter;}ol.continue{counter-reset:chapter11;}20.为文本添加悬停提示框把这段代码拷贝到样式表中，使用新的HTML5数据属性，通过使用data-tooltip你就可以给文本添加悬停提示框了。a{border-bottom:1pxsolid#bbb;color:#666;display:inline-block;position:relative;text-decoration:none;}a:hover,a:focus{color:#36c;}a:active{top:1px;}/*Tooltipstyling*/a[data-tooltip]:after{border-top:8pxsolid#222;border-top:8pxsolidhsla(0,0%,0%,.85);border-left:8pxsolidtransparent;border-right:8pxsolidtransparent;content:"";display:none;height:0;width:0;left:25%;position:absolute;}a[data-tooltip]:before{background:#222;background:hsla(0,0%,0%,.85);color:#f6f6f6;content:attr(data-tooltip);display:none;font-family:sans-serif;font-size:14px;height:32px;left:0;line-height:32px;padding:015px;position:absolute;text-shadow:01px1pxhsla(0,0%,0%,1);white-space:nowrap;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;}a[data-tooltip]:hover:after{display:block;top:-9px;}a[data-tooltip]:hover:before{display:block;top:-41px;}a[data-tooltip]:active:after{top:-10px;}a[data-tooltip]:active:before{top:-42px;}21.创建暗灰色的按钮样式下面这段代码创建了CSS3按钮类，并根据按钮颜色命名为.graybtn。当然你也可以根据自己的网站风格对颜色进行更改。.graybtn{-moz-box-shadow:inset0px1px0px0px#ffffff;-webkit-box-shadow:inset0px1px0px0px#ffffff;box-shadow:inset0px1px0px0px#ffffff;background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#ffffff),color-stop(1,#d1d1d1));background:-moz-linear-gradient(centertop,#ffffff5%,#d1d1d1100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#d1d1d1');background-color:#ffffff;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1pxsolid#dcdcdc;display:inline-block;color:#777777;font-family:arial;font-size:15px;font-weight:bold;padding:6px24px;text-decoration:none;text-shadow:1px1px0px#ffffff;}.graybtn:hover{background:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.05,#d1d1d1),color-stop(1,#ffffff));background:-moz-linear-gradient(centertop,#d1d1d15%,#ffffff100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1',endColorstr='#ffffff');background-color:#d1d1d1;}.graybtn:active{position:relative;top:1px;}22.打印的页面上显示URL这条规则会使打印出来的页面在超链接文字后面加上URL，URL会被放在一组括号里面,前后各留一个空格。@mediaprint{a:after{content:"["attr(href)"]";}}23.屏蔽Webkit移动浏览器中元素高亮效果在访问移动网站时，你会发现，在选中的元素周围会出现一些灰色的框框，而下面这段代码即可屏蔽这种样式。body{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}24.利用CSS生成小圆点图案通过下面的代码，可以让你的网站背景上产生一些小圆点装饰图案。默认情况下，它是使用在body元素上，但你也可以把它使用在网页里的其他容器上。body{background:radial-gradient(circle,white10%,transparent10%),radial-gradient(circle,white10%,black10%)50px50px;background-size:100px100px;}25.CSS3棋盘格效果和上面的小圆点设计一样，这个效果需要一些额外的语法才可以工作，它需要在支持CSS3的浏览器上运行，效果很艳丽。当然，你可以根据需要自定义颜色。body{background-color:white;background-image:linear-gradient(45deg,black25%,transparent25%,transparent75%,black75%,black),linear-gradient(45deg,black25%,transparent25%,transparent75%,black75%,black);background-size:100px100px;background-position:00,50px50px;}26.GithubFork红丝带下面这段代码是利用CSS3的transform属性生成ForkmeonGithub红丝带效果。.ribbon{background-color:#a00;overflow:hidden;/*topleftcorner*/position:absolute;left:-3em;top:2.5em;/*45degccwrotation*/-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);/*shadow*/-moz-box-shadow:001em#888;-webkit-box-shadow:001em#888;}.ribbona{border:1pxsolid#faa;color:#fff;display:block;font:bold81.25%'HelvetivaNeue',Helvetica,Arial,sans-serif;margin:0.05em00.075em0;padding:0.5em3.5em;text-align:center;text-decoration:none;/*shadow*/text-shadow:000.5em#444;}27.字体压缩在样式表里使用如下代码能够帮你节省许多网页空间。p{font:italicsmall-capsbold1.2em/1.0emArial,Tahoma,Helvetica;}28.纸页面卷曲效果这种效果可以被广泛的使用在多种容器中，查看demopage页面来更好地掌握该函数的使用吧。ul.box{position:relative;z-index:1;/*preventshadowsfallingbehindcontainerswithbackgrounds*/overflow:hidden;list-style:none;margin:0;padding:0;}ul.boxli{position:relative;float:left;width:250px;height:150px;padding:0;border:1pxsolid#efefef;margin:030px30px0;background:#fff;-webkit-box-shadow:01px4pxrgba(0,0,0,0.27),0040pxrgba(0,0,0,0.06)inset;-moz-box-shadow:01px4pxrgba(0,0,0,0.27),0040pxrgba(0,0,0,0.06)inset;box-shadow:01px4pxrgba(0,0,0,0.27),0040pxrgba(0,0,0,0.06)inset;}ul.boxli:before,ul.boxli:after{content:'';z-index:-1;position:absolute;left:10px;bottom:10px;width:70%;max-width:300px;/*avoidrotationcausinguglyappearanceatlargecontainerwidths*/max-height:100px;height:55%;-webkit-box-shadow:08px16pxrgba(0,0,0,0.3);-moz-box-shadow:08px16pxrgba(0,0,0,0.3);box-shadow:08px16pxrgba(0,0,0,0.3);-webkit-transform:skew(-15deg)rotate(-6deg);-moz-transform:skew(-15deg)rotate(-6deg);-ms-transform:skew(-15deg)rotate(-6deg);-o-transform:skew(-15deg)rotate(-6deg);transform:skew(-15deg)rotate(-6deg);}ul.boxli:after{left:auto;right:10px;-webkit-transform:skew(15deg)rotate(6deg);-moz-transform:skew(15deg)rotate(6deg);-ms-transform:skew(15deg)rotate(6deg);-o-transform:skew(15deg)rotate(6deg);transform:skew(15deg)rotate(6deg);}29.发光的锚链接下面这段代码可以创建自定义的锚链接，鼠标悬浮在上面会发光。a{color:#00e;}a:visited{color:#551a8b;}a:hover{color:#06e;}a:focus{outline:thindotted;}a:hover,a:active{outline:0;}a,a:visited,a:active{text-decoration:none;color:#fff;-webkit-transition:all.3sease-in-out;}a:hover,.glow{color:#ff0;text-shadow:0010px#ff0;}30.创建CSS3Banner在支持CSS3的浏览器中，下面的代码可以生成漂亮的纯CSS图案。这种效果常见于电子商务网站的产品图片、缩略图、视频预览等。.featureBanner{position:relative;margin:20px}.featureBanner:before{content:"Featured";position:absolute;top:5px;left:-8px;padding-right:10px;color:#232323;font-weight:bold;height:0px;border:15pxsolid#ffa200;border-right-color:transparent;line-height:0px;box-shadow:-0px5px5px-5px#000;z-index:1;}.featureBanner:after{content:"";position:absolute;top:35px;left:-8px;border:4pxsolid#89540c;border-left-color:transparent;border-bottom-color:transparent;}
1. white-space属性，这个属性有以下几个用法：normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承white-space属性的值。2、word-break 属性规定自动换行的处理方法 提示：通过使用word-break属性，可以让浏览器实现在任意位置的换行。normal使用浏览器默认的换行规则。break-all允许在单词内换行。keep-all只能在半角空格或连字符处换行。.word-break:break-all;只对英文起作用，以字母作为换行依据.word-wrap:break-word;只对英文起作用，以单词作为换行依据.white-space:pre-wrap;只对中文起作用，强制换行.white-space:nowrap;强制不换行，都起作用.white-space:nowrap;overflow:hidden;text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现，这个在网页中用的也是比较多的一个属性注意。一定要指定容器的宽度，不然是没有效果的要注意word-break是IE5+专有属性3、出现文字省略号，使用这四个属性即可text-overflow：表示当文本溢出时是否显示省略标记，ellipsis表示省略号效果，clip表示截取的效果。overflow:hidden;将文本溢出的内容隐藏。white-space:nowrap;是禁止文字换行。width：（可选）可以写固定值，也可以根据宽度自适应显示效果。
1、overflow-y:设置当对象的内容超过其指定高度时如何管理内容；overflow-x:设置当对象的内容超过其指定宽度时如何管理内容。参数:visible：扩大面积以显示所有内容auto：仅当内容超出限定值时添加滚动条hidden：总是隐藏滚动条scroll：总是显示滚动条2、height:设置滚动条的高度（修改其后数值即可）。3、滚动条颜色参数设置：scrollbar-3d-light-color设置或检索滚动条亮边框颜色scrollbar-highlight-color设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色scrollbar-arrow-color设置或检索滚动条方向箭头的颜色scrollbar-shadow-color 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色scrollbar-dark-shadow-color设置或检索滚动条暗边框（ThreedDarkShadow）颜色scrollbar-base-color设置或检索滚动条基准颜色设置滚动条样式在原来的html的时候，我们可以这样定义整个页面的滚动条body{scrollbar-3dlight-color:#D4D0C8;/*-最外左-*/scrollbar-highlight-color:#fff;/*-左二-*/scrollbar-face-color:#E4E4E4;/*-面子-*/scrollbar-arrow-color:#666;/*-箭头-*/scrollbar-shadow-color:#808080;/*-右二-*/scrollbar-darkshadow-color:#D7DCE0;/*-右一-*/scrollbar-base-color:#D7DCE0;/*-基色-*/scrollbar-track-color:#;/*-滑道-*/}但是同样的代码，我们应用在xhtml下就不起作用了，我相信好多朋友也遇到过同样的问题那么怎么才能在xhtml下应用滚动条样式呢？看下列代码html{scrollbar-3dlight-color:#D4D0C8;/*-最外左-*/scrollbar-highlight-color:#fff;/*-左二-*/scrollbar-face-color:#E4E4E4;/*-面子-*/scrollbar-arrow-color:#666;/*-箭头-*/scrollbar-shadow-color:#808080;/*-右二-*/scrollbar-darkshadow-color:#D7DCE0;/*-右一-*/scrollbar-base-color:#D7DCE0;/*-基色-*/scrollbar-track-color:#;/*-滑道-*/}这段代码和上一段唯一的不同就是在CSS定义的元素上，一个是body一个是html。我们再测试一下，把html页面的"body"修改成"html"测试一下，发现依然可以实现效果。那到底是为什么呢？从字面上来看，xhtml比html多一个x,那么这个x其实也就是xml,为什么要加一个xml在里面？其实最根本的原因就是要让html更加结构化标准化（因为html实在是太烂）。我们在html里面定义的是body，因为html不是很标准所以这样可以生效，而在xhtml里面这样就不行了，我看看那个图很明显，body标签本身不是根元素，只有html才是根元素，而页面的滚动条也是属于根元素的，所以这就是我们为什么定义body没有效果的原因，因为我们定义的只是一个子原素。ok，我们知道了原理，来做一个试验如果把定义"body"或"xhtml"换成*，*{scrollbar-3dlight-color:#D4D0C8;scrollbar-highlight-color:#fff;scrollbar-face-color:#E4E4E4;scrollbar-arrow-color:#666;scrollbar-shadow-color:#808080;scrollbar-darkshadow-color:#D7DCE0;scrollbar-base-color:#D7DCE0;scrollbar-track-color:#;}在html和xhtml都通过，因为*就是定义页面上的任何标签当然也包括了“html”这个标签。(ps:其实与其说是html与xhtml的区别到不如说是有无XHTML1.0transitionaldoctype的区别，但是如果你把页面的XHTML1.0transitionaldoctype去掉的话，那么这个页面就没有doctype，默认的显示方式就是html4.01,不过你要把XHTML1.0transitionaldoctype修改成HTML4.01doctype同样页面定义body也不会有效果的，虽然这个页面的标准是html4.01) CSS隐藏滚动条(横向,坚向)网上都说使用overflow-y:hidden可以隐藏滚动条，但是只能针对div元素，并不能隐藏浏览器，而一些资料说<boby>里加入scroll="no"，可隐藏滚动条；在<boby>里加入style="overflow-x:hidden"，可隐藏水平滚动条；加入style="overflow-y:hidden"，可隐藏垂直滚动条。1、完全隐藏 在里加入scroll="no"，可隐藏滚动条;2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条;反之，则显示;3、样式表方法 在里加入style="overflow-x:hidden"，可隐藏水平滚动条; 加入style="overflow-y:hidden"，可隐藏垂直滚动条。body{overflow-x:hidden;}在标准DTD下是不可以的html{overflow:scroll;}强制隐藏滚动条:html{overflow:hidden;}隐藏IE的水平滚动条:html{overflow-x:hidden;}隐藏IE的垂直滚动条:html{overflow-y:hidden;}强制显示IE的水平滚动条:html{overflow-x:scroll;}强制显示IE的垂直滚动条:html{overflow-y:scroll;}强制显示Mozilla的水平滚动条:html{overflow:-moz-scrollbars-horizontal;}注意:仅仅强制显示水平滚动条.也就是说,即使需要显示垂直滚动条时,垂直滚动条也不会出现.强制显示Mozilla的垂直滚动条:html{overflow:-moz-scrollbars-vertical;}注意:仅仅强制显示垂直滚动条.也就是说,即使需要显示水平滚动条时,水平滚动条也不会出现.最终的解决办法：在页面添加:<style>html{overflow-x:hidden;//隐藏水平滚动条overflow-y:hidden;//隐藏垂直滚动条}</style>CSS怎么美化滚动条各种浏览器对CSS滚动条的支持情况：这里说的Webkit浏览器包括谷歌浏览器，苹果公司的Safari浏览器，以及最新的Opera浏览器。这些浏览器加起来占有超过半数的桌面浏览器市场份额。对于移动端浏览器，基本上是谷歌浏览器和Safari浏览器的天下。唯一的遗憾是火狐浏览器，至今没有对CSS滚动条属性做任何的改进。至于IE浏览器，我们期待吧。鉴于目前浏览器市场的格局，我们很有信心相信CSS滚动条美化功能会有很好的很光明的前景。很多年前谷歌浏览器就已经开始支持对滚动条的CSS美化。这些Webkit浏览器专属的CSS属性需要使用-webkit-浏览器引擎前缀，我们在这里将只会使用一些基本的CSS滚动条属性，在代码里会增加一些必要的解释说明。::-webkit-scrollbar{width:15px;}/*这是针对缺省样式(必须的)*/当CSS中出现伪元素样式时，Webkit引擎将会关闭它的缺省滚动条样式输出，只使用CSS里提供的样式信息。这里是其它一些伪元素样式：::-webkit-scrollbar-track{background-color:#b46868;}/*滚动条的滑轨背景颜色*/::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.2);}/*滑块颜色*/::-webkit-scrollbar-button{background-color:#7c2929;}/*滑轨两头的监听按钮颜色*/::-webkit-scrollbar-corner{background-color:black;}/*横向滚动条和纵向滚动条相交处尖角的颜色*/加上了这些CSS属性，你将会看到下面的效果(再次提醒：你需要使用Webkit浏览器，比如谷歌浏览器才能看到效果)。谷歌浏览器的用户是最幸福的。但我们也不能放弃火狐浏览器和IE浏览器用户。对于这些浏览器，有一个非常有效的补救方案，就是使用javascript插件。网上有不少人推荐一个由KelvinLuck开发的一个jQuery插件：jScrollPane。但也有人评论这个插件是“PITA”，我翻了一下字典，发现“PITA”中文意思是“让人蛋疼”。经过试用，感到它的确是让人蛋疼。不推荐使用它。我发现了另外一个插件malihu-custom-scrollbar-plugin，感觉相当不错，它的用法是：<linkrel="stylesheet"href="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css"><!--latestjQuerydirectfromgoogle'sCDN--><scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script><scripttype="text/javascript"src="js/jquery-migrate-1.2.1.min.js"></script><scriptsrc="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script><script>if(!$.browser.webkit){$.mCustomScrollbar.defaults.scrollButtons.enable=true;//enablescrollingbuttonsbydefault$.mCustomScrollbar.defaults.axis="yx";//enable2axisscrollbarsbydefault$(".container").mCustomScrollbar({theme:"dark"});}</script>火狐浏览器中的效果截图：已经有很多网站都使用了这些滚动条的CSS美化技巧，特别是谷歌的一些应用和网站上，比如Gmail和Google+。相信很快火狐浏览器和IE浏览器也会提供自己的解决方案。用CSS调整滚动条配色IE浏览器可以通过调整CSS的方式，来给滚动条换色。代码如下：.uicss-cn{height:580px;overflow-y:scroll;scrollbar-face-color:#EAEAEA;scrollbar-shadow-color:#EAEAEA;scrollbar-highlight-color:#EAEAEA;scrollbar-3dlight-color:#EAEAEA;scrollbar-darkshadow-color:#697074;scrollbar-track-color:#F7F7F7;scrollbar-arrow-color:#666666;}具体样式对应的滚动条区域如图所示：
一.文本溢出1.overflow:hidden; 超出文本会被剪裁隐藏不可见scroll;超出文本会被剪裁，显示滚动条auto;如果文本超出会显示滚动条，没超出不会显示，overflow-x:设置横向滚动条hidden|scrolloverflow-y:设置纵向滚动条inherit;从父级继承overflow属性2.white-space:如何处理元素内的空白pre:保留空白，在编译器中文本是怎样排版，浏览器中就怎样排版nowrap:不换行，直到遇到<br>pre-warp:保留空白，正常换行pre-line:不保留空白，正常换行3.text-overflow:有超出的文本时怎样显示clip:不显示省略号，仅裁切ellipsis:当文本溢出时显示省略号标记二.文本溢出显示省略号效果1.定义盒子的宽度2.强制文本在一行内显示3.溢出内容设为隐藏 4.溢出文本显示为省略号 三.文本溢出显示渐变消失效果/*先设置盒子相关属性*/div{height:18px;50px;overflow:hidden;white-space:nowrap;text-overflow:clip;position:relative;}/*在盒子里面靠右位置添加一个渐变的白色透明背景*/div::before{content:'';height:15px;10px;position:absolute;right:0;padding-left:10px;background:linear-gradient(toright,rgba(255,255,255,0.5),rgba(255,255,255,1));}四.滚动条样式设置注意：在IE和Edge浏览器下可能不会生效！::-webkit-scrollbar：滚动条整体部分，其中的属性有width,height,background,border等。::-webkit-scrollbar-button：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。::-webkit-scrollbar-track：外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。::-webkit-scrollbar-track-piece：内层轨道，需要注意的就是它会覆盖第三个属性的样式。::-webkit-scrollbar-thumb：滚动条里面可以拖动的那部分::-webkit-scrollbar-corner：边角，两个滚动条交汇处::-webkit-resizer：两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）滚动条显示在class为box的一个盒子里/*滚动条整体*/.box::-webkit-scrollbar{8px;height:100px;background-color:white;}/*滚动条滑块*/.box::-webkit-scrollbar-thumb{10px;height:50px;background-color:#D6D6D6;border-radius:5px;}
<!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></head><style>.wave{margin-left:auto;margin-right:auto;width:100px;height:100px;border-radius:100px;border:2pxsolid#fff;text-align:center;line-height:100px;color:#fff;background:#06curl(http://p3g4ahmhh.bkt.clouddn.com/me.jpg)no-repeatcentercenter;background-size:100%;animation:wave4slinearinfinite;}@keyframeswave{0%{box-shadow:0000rgba(245,226,226,1),0000rgba(250,189,189,1);}50%{box-shadow:00020pxrgba(245,226,226,.5),0000rgba(250,189,189,1);}100%{box-shadow:00040pxrgba(245,226,226,0),00020pxrgba(245,226,226,0);}}</style><divclass="wave"></div></html>
前端项目开发中，需要根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验，这里就需要使用css奇数偶数选择器。主要用的：:nth-of-type或者:nth-child。方式一:nth-childdiv:nth-child(odd){}//奇数行div:nth-child(even){}//偶数行:nth-child(n)选择器匹配属于其父元素的第N个子元素，不论元素的类型。方式二:nth-of-typediv:nth-of-type(odd){//奇数行}div:nth-of-type(even){//偶数行}nth-of-type(n):匹配同类型中的第n个同级兄弟元素。区别：nth-child() 与nth-of-type()nth-child(n):匹配父元素中的第n个子元素，元素类型没有限制。nth-of-type(n):匹配同类型中的第n个同级兄弟元素。n可以是一个数字，一个关键字，或者一个公式，比如：nth-child(odd)奇数,nth-child(even)偶数。nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素，后者是查找同类型元素中某个绝对位置的元素。相同之处是，两者都是找到元素之后再与前面的选择符进行匹配，这里的匹配方式是一样的。稍微往下延伸，清楚了查找方式，那么不管前面的选择符怎么变，最后都是先查找到元素再与前面的选择符进行匹配。也就是说选择符与他们的查找方式没有关系。延伸：选中最后一个奇数和偶数这里以nth-child为例：//选中最后一个奇数div:nth-child(odd):last-child{margin-bottom:0;}//选中最后一个偶数div:nth-child(even):last-child{margin-bottom:0;}
方法：background-color+backdrop-filter来配合实现backdrop-filtercss属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。例：<divclass="container"><divclass="box"><p>backdrop-filter:blur(10px)</p></div></div>html,body{height:100%;width:100%;}body{background-image:url(https://picsum.photos/id/1080/6858/4574),linear-gradient(rgb(219,166,166),rgb(0,0,172));background-position:centercenter;background-repeat:no-repeat;background-size:cover;}.box{/*重点设置下面两个属性*/background-color:rgba(255,255,255,0.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(5px);border-radius:5px;font-family:sans-serif;text-align:center;line-height:1;max-width:50%;max-height:50%;padding:20px40px;color:#fff;}.container{align-items:center;display:flex;justify-content:center;height:100%;width:100%;}效果图：可自行设置想要的背景色和blue数值来达到想要的模糊效果~
行内元素1、水平居中text-align:center;<divclass="parent"><spanclass="child">content</span></div>.parent{background-color:red;text-align:center;}fit-content;.parent{background-color:red;width:fit-content;}2、垂直居中line-height(单行文本）.parent{height:200px;line-height:200px;background-color:red;}块级元素1、水平居中margin:0auto;<divclass="parent"><divclass="child"></div></div>.parent{background-color:red;}.child{width:100px;margin:0auto;background-color:blue;}2、水平垂直居中定位.parent{position:relative;height:200px;background-color:red;}.child{weight:100px;height:100px;position:absolute;background:blue;left:calc(50%-50px);top:calc(50%-50px);}.parent{position:relative;height:200px;background-color:red;}.child{weight:100px;height:100px;position:absolute;background:blue;left:50%;top:50%;margin-top:-50px;margin-left:-50px;}定位+transform.parent{position:relative;height:200px;background-color:red;}.child{position:absolute;background:blue;left:50%;top:50%;transform:translate(-50%,-50%);}定位+margin.parent{position:relative;height:200px;background-color:red;}.child{width:100px;height:100px;position:absolute;left:0;right:0;top:0;botttom:0;margin:auto;background:blue;}padding.parent{padding:20px;background-color:red;}.child{height:200px;background:blue;}flex.parent{height:200px;display:flex;align-items:center;//垂直居中justify-content:center;//水平居中background-color:red;}.child{width:100px;height:100px;background-color:blue;}伪元素.parent{height:200px;text-align:center;background-color:red;}.child{width:100px;height:100px;display:inline-block;vertical-align:middle;background-color:blue;}.parent::before{content:"";width:20px;height:200px;display:inline-block;vertical-align:middle;background-color:yellow;}calc（宽高相等）.parent{width:600px;height:600px;background-color:red;}.child{width:100px;height:100px;padding:calc((100%-100px)/2);background-clip:content-box;background-color:blue;}
一、行内样式别名：行间样式、内联样式写法：在网页元素上通过style=""属性<divstyle="color:pink;margin-top:10px;border:1pxsolidblue">行内样式</div>二、内部样式表写法：在网页创建嵌入的样式表，写在里面<head><style>p{color:pink;border:blue1pxsolid;}</style></head>三、链入外部样式表写法：网页引入外部样式表，外部创建一个css文件，在html中通过连接这个css文件，一般写在css前面<linkrel="stylesheet"type="text/css"herf="1.css">四、导入外部样式表写法：通过@import引入，不建议开发使用<style>@import"1.css";</style>五、css引用的优先级记住就近原则内部样式、、@import都出现在HTML的里面，就近原则，距离修改元素近的优先级高行内样式>内部样式>link>@import建议开发中链入外部样式，无需改动HTML结构，有利于代码的维护，开发效率高六、link和@import的区别1、引入的内容不同link引入样式文件、图片资源等，而@import只引入样式文件2、加载的顺序不同link在页面加载的同时加载，@import在页面加载以后加载3、兼容性不同link是XHTML标签，没有兼容性问题，@import在css2.1提出，低版本的浏览器不支持4、对js的支持不同link支持js控制dom去改变样式，@import则不能支持
中国互联网举报中心