26個(gè)CSS小技巧開發(fā)各種炫酷網(wǎng)頁效果必備

1、26個(gè)css小技巧，開發(fā)各種炫酷網(wǎng)頁效果必備本文總結(jié)日常開發(fā)中26個(gè)css實(shí)現(xiàn)辦法解決inline-block元素設(shè)置overflow:hidden屬性導(dǎo)致相鄰行內(nèi)元素向下偏移.wrap display: inline-block; overflow: hidden vertical-align: bottom 超出部分顯示省略號(hào)/ 單行文本.wrap overflow:hidden;/*超出部分躲藏*/ text-overflow:ellipsis;/*超出部分顯示省略號(hào)*/ white-space:nowrap;/*規(guī)定段落中的文本不舉行換行 */ / 多行文本.wrap width: 1

2、00%; overflow: hidden; display: -webkit-box; /將對(duì)象作為彈性伸縮盒子模型顯示 *必需結(jié)合的屬性* -webkit-box-orient: vertical; /設(shè)置伸縮盒對(duì)象的子元素的羅列方式 *必需結(jié)合的屬性* -webkit-line-clamp: 3; /用來限制在一個(gè)塊元素中顯示的文本的行數(shù) word-break: break-all; /讓掃瞄器實(shí)現(xiàn)在隨意位置的換行 *break-all為允許在單詞內(nèi)換行* web前端開發(fā)學(xué)習(xí)q-q-u-n： 784783012 ，共享學(xué)習(xí)的辦法和需要注重的小詳情，不停更新最新的教程和學(xué)習(xí)辦法（具體的前端

3、項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，pdf）css實(shí)現(xiàn)不換行、自動(dòng)換行、強(qiáng)制換行/不換行.wrap white-space:nowrap; /自動(dòng)換行.wrap word-wrap: break-word; word-break: normal; /強(qiáng)制換行.wrap word-break:break-all; css實(shí)現(xiàn)文本兩端對(duì)齊.wrap text-align: justify; text-justify: distribute-all-lines; /ie6-8 text-align-last: justify; /一個(gè)塊或行的最后一行對(duì)齊方式 -moz-text-align-last: justify

4、; -webkit-text-align-last: justify; 實(shí)現(xiàn)文字豎向排版/ 單列展示時(shí).wrap width: 25px; line-height: 18px; height: auto; font-size: 12px; padding: 8px 5px; word-wrap: break-word;/*英文的時(shí)候需要加上這句，自動(dòng)換行*/ / 多列展示時(shí).wrap height: 210px; line-height: 30px; text-align: justify; writing-mode: vertical-lr; /從左向右 writing-mode: tb-l

5、r; /ie從左向右 /writing-mode: vertical-rl; - 從右向左 /writing-mode: tb-rl; - 從右向左 使元素鼠標(biāo)大事失效.wrap / 假如按tab能選中該元素，如button，然后按回車還是能執(zhí)行對(duì)應(yīng)的大事，如click。 pointer-events: none; cursor: default; 禁止用戶挑選.wrap -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-us

6、er-select: none; user-select: none; cursor屬性.wrap cursor：pointer; /小手指； cursor：help; /箭頭加問號(hào)； cursor：wait; /轉(zhuǎn)圈圈； cursor：move; /移動(dòng)光標(biāo)； cursor：crosshair; /十字光標(biāo) 用法硬件加速.wrap transform: translatez(0); web前端開發(fā)學(xué)習(xí)q-q-u-n： 784783012 ，共享學(xué)習(xí)的辦法和需要注重的小詳情，不停更新最新的教程和學(xué)習(xí)辦法（具體的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，pdf）寬度自適應(yīng)img max-width: 100%tex

7、t-transform和font variantp text-transform: uppercase / 將全部字母變成大寫字母p text-transform: lowercase / 將全部字母變成小寫字母p text-transform: capitalize / 首字母大寫p font-variant: small-caps / 將字體變成小型的大寫字母將一個(gè)容器設(shè)為透亮.wrap filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; 消退transition閃屏.wrap -we

8、bkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; 自定義滾動(dòng)條overflow-y: scroll;囫圇滾動(dòng)條:-webkit-scrollbar width: 5px; 滾動(dòng)條的軌道:-webkit-scrollbar-track background-color: ffa336; border-radius: 5px; 滾動(dòng)條的滑塊:-webkit-scrollbar-thumb background-color: ffc076; border

9、-radius: 5px; 讓 html 識(shí)別 string 里的 &39;n&39; 并換行body white-space: pre-line; 實(shí)現(xiàn)一個(gè)三角形.wrap border-color: transparent transparent green transparent; border-style: solid; border-width: 0px 300px 300px 300px; height: 0px; width: 0px; 移除被點(diǎn)鏈接的邊框a outline: nonea outline: 0用法css顯示鏈接之后的urla:aftercontent:"

10、 (" attr(href) ") "select內(nèi)容居中顯示、下拉內(nèi)容右對(duì)齊select text-align: center; text-align-last: center; select option direction: rtl; 修改input輸入框中光標(biāo)的色彩不轉(zhuǎn)變字體的色彩input color: fff; caret-color: red; 修改input 輸入框中 placeholder 默認(rèn)字體樣式/webkit內(nèi)核的掃瞄器input:-webkit-input-placeholder color: c2c6ce; /firefox版本4-1

11、8input:-moz-placeholder color: c2c6ce; /firefox版本19+input:-moz-placeholder color: c2c6ce; /ie掃瞄器input:-ms-input-placeholder color: c2c6ce; 子元素固定寬度 父元素寬度被撐開/ 父元素下的子元素是行內(nèi)元素.wrap white-space: nowrap; / 若父元素下的子元素是塊級(jí)元素.wrap white-space: nowrap; / 子元素不被換行 display: inline-block; 讓div里的和文字同時(shí)上下居中.wrap height

12、: 100, line-height: 100 img vertival-align：middle / vertical-align css的屬性vertical-align用來指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對(duì)齊方式。只對(duì)行內(nèi)元素、表格單元格元素生效，不能用它垂直對(duì)齊塊級(jí)元素/ vertical-align：baseline/top/middle/bottom/sub/text-top;實(shí)現(xiàn)寬高等比例自適應(yīng)矩形 .scale width: 100%; padding-bottom: 56.25%; height: 0; position: relative; .item position: absolute; width: 100%; height: 100%; background-color: 499e56; 這里是全部子元素的容器 transfrom的rotate屬性在span標(biāo)簽下失效span display: inline-block web前端開發(fā)學(xué)習(xí)q-q-u-n： 78478301