常用的css樣式集錦
在前端開發過程中，css層疊樣式表的規范特別重要，有經驗的前端開發人員會自己記錄一些常用的css代碼，比如通用的css reset代碼，常見的布局，表單，搜索框，按鈕等css代碼。

當然現在這些我們都有現成的ui框架，比如bootstrap，sui,mui等ui框架，但是假如現在然你自己開發呢，你會怎么辦呢？

下面是一些常見的css樣式大全，初學者可以學習下，老手略過。

一、css reset代碼
*{word-wrap:break-word}
html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0}
ul,ol,dl{list-style-type:none}
html,body{*position:static}
html{font-family: sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button{overflow: visible;vertical-align:middle;outline:none}
body,th,td,button,input,select,textarea{font-family:“Microsoft Yahei”,“Hiragino Sans GB”,“Helvetica Neue”,Helvetica,tahoma,arial,Verdana,sans-serif,“WenQuanYi Micro Hei”,"\5B8B\4F53";font-size:12px;color: #333;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale}
body{line-height:1.6}
h1,h2,h3,h4,h5,h6{font-size:100%}
a,area{outline:none;blr:expression(this.onFocus=this.blur())}
a{text-decoration:none;cursor: pointer}
a:hover{text-decoration:underline;outline:none}
a.ie6:hover{zoom:1}
a:focus{outline:none}
a:hover,a:active{outline:none}:focus{outline:none}
sub,sup{vertical-align:baseline}
button,input[type=“button”], input[type=“submit”] {line-height:normal !important}
/img/
img{border:0;vertical-align:middle}
a img,img{-ms-interpolation-mode:bicubic}
.img-responsive{max-width: 100%;height: auto}

/*IE下a:hover 背景閃爍*/ *html{overflow:-moz-scrollbars-vertical;zoom:expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}(this))}/*HTML5 reset*/ header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend{display:block;margin:0;padding:0}time{display:inline} audio,canvas,video{display:inline-block;*display:inline;*zoom:1} audio:not([controls]){display:none} legend{width:100%;margin-bottom:20px;font-size:21px;line-height:40px;border:0;border-bottom:1px solid #e5e5e5} legend small{font-size:15px;color:#999} svg:not(:root) {overflow: hidden} fieldset {border-width:0;padding: 0.35em 0.625em 0.75em;margin: 0 2px;border: 1px solid #c0c0c0} input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto} input[type="search"] {-webkit-appearance: textfield; /* 1 */-moz-box-sizing: content-box;-webkit-box-sizing: content-box; /* 2 */box-sizing: content-box} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none} /* Name: style_clearfix Example: class="clearfix|cl" Explain: Clearfix（簡寫cl）避免因子元素浮動而導致的父元素高度缺失能問題 */ .cl:after,.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.cl,.clearfix{zoom:1}

二、美化復選框




記住賬號密碼

.hidden {
display: none;
}
.checkbox:checked ~.icon-checkbox {
background: url(…/images/yes_15.png) no-repeat;
background-size: 0.3rem 0.25rem;
}
.icon-checkbox {
width: 0.3rem;
height: 0.3rem;
margin-right: 0.1rem;
border: 0.02rem solid #d7d7d7;
border-radius: 0.06rem;
}
.icon {
display: inline-block;
vertical-align: middle;
}

三、中間文字，兩邊橫線居中
效果

學生信息 /*中間文字兩邊橫線效果*/ .title-center { position:relative; width:100%; text-align: center; height: 100px; line-height: 100px; font-size: 28px; color: #4d72e2; } .title-center div{ display: inline-block; padding:0 20px; } .title-center:before ,.title-center:after{ display: inline-block; position: relative; content:""; height:2px; width:48px; top:-6px; background-color:#4d72e2; } 當設置rem為單位時，1px，會顯示偏大，將.title-center:before ,.title-center:after修改為如下： .title-center:before, .title-center:after { display: inline-block; position: relative; content: ""; height: 1px; width: 1.88rem; top: -.1rem; background-color: #fd734f; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } 終極版，rem單位，橫線自適應長度！！！！ 我要居中，兩邊橫線對齊 .border-center{ /*display:inline-block; 使用flexchild布局的時候，不能給元素設置這個屬性，不然， -webkit-box-flex: 1;會失效*/ height: 1px; background-color: #fd734f; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }

四、怎么實現圖標水平垂直居中（rem單位）

利用background-size來設置背景圖的本身大小尺寸，然后利用background-position:center center;來設置背景圖相對元素的水平垂直居中,其中元素的寬是背景圖的寬，高就是原來的高

首頁 css: a{display:inline-block;} .foot-nav1{ width: .66rem; height: .66rem; display: block; margin: 0 auto; background:url(); } span { display: block; line-height: .24rem; text-align: center; font-size: .24rem; height: .24rem; margin-bottom: .8rem; color: #666; }

五、常用表單布局

請認真填寫以下信息

• 收貨地址:

.section2 li { list-style: none; position: relative; width: 500px; margin: 0 auto; border: 1px solid #ffd6b9; box-sizing: border-box; padding: 17px 30px; background-color: #fff; margin-top: 20px; border-radius: 40px; } .section2 li input { background-color: transparent; border: 0 none; color: #333; outline: none; position: relative; font-size: 26px; width: 435px; z-index: 102; }

六、答題進度條
就是用來展示答題進度的進度條，效果如下

其中img是形狀底色（小圓圈是透明的）。而recommend-jd-bg是進度條背景色，recommend-jd-ks是控制進度的顏色！！，其中img的z-index>recommend-jd-bg>recommend-jd-ks

.recommend-jd { width: 6.43rem; position: absolute; top: 1.59rem; left: .54rem; } .recommend-jd-bg { width: 100%; height: .31rem; background: #fff; position: absolute; top: 0; z-index: 97; } .recommend-jd-ks { width: 12.5%; //這個是js控制，根據題數的進度來控制！ height: .31rem; background: #4a90ff; position: absolute; top: 0; z-index: 98; } .recommend-jd img { width: 100%; display: block; position: absolute; top: 0; z-index: 99; height: .31rem; } 進度條2  ￥0.01 .progressBar { margin: .3rem auto .1rem; width: 6.3rem; height: .1rem; background-color: rgb(72, 11, 29); } .progressPer { position: relative; top: 0; left: 0; display: inline-block; width: 0; height: .1rem; background-color: #efc283; } .moneyBox { position: absolute; right: -.53rem; top: .3rem; display: inline-block; width: 1.06rem; height: .4rem; background: url(../images/moneyBox.png)no-repeat; background-size: 100% 100%; } .moneyBox .moneyText { position: absolute; bottom: 0; left: 0; width: 1.04rem; height: .34rem; line-height: .34rem; text-align: center; color: #efc283; font-size: .26rem; }

七、修改input的placeholder樣式
.detail-page input::-webkit-input-placeholder { /* WebKit, Blink, Edge /
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}
.detail-page input:-moz-placeholder { / Mozilla Firefox 4 to 18 /
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}
.detail-page input::-moz-placeholder { / Mozilla Firefox 19+ /
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}
.detail-page input:-ms-input-placeholder { / Internet Explorer 10-11 */
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}

八、input中增加disabled會自帶灰色，修改顏色如下
input:disabled{
border:1px solid #DDD;
background-color:#F5F5F5;
color:#ACA899;
}

九、多行文字左右對齊：
p {
text-align: justify;
text-justify: inter-ideograph;
}

十、實現單行文字兩端對齊，例如要實現下列單行文字對齊

方法一，使用偽類：

姓名 : 林小 身份證 : 111111111111 手機號碼 : 141000000 .line{ width:100%; height:15px; margin:5px; } .public{ width:80px; height:100%; display:inline-block; text-align: justify; vertical-align:top; } .public::after{ content:""; display: inline-block; width:100%; overflow:hidden; height:0; } 方法二使用letter-spacing來解決：

熱門搜索

電視機

性感漂亮

高跟鞋

手機

對齊

牛仔褲

小家碧玉

家居

css:

.hotsearch dd{
float: left;
line-height: 24px;
margin-right: 30px;
overflow: hidden;
text-align: center;
width: 4em; /這個值是看最長能顯示幾個文字，如x，則為x em/
}
.hotsearch dd a{
display:block;
}
.w2{
letter-spacing:2em; /*如果需要y個字兩端對齊，則為(x-y)/(y-1),這里是（4-2）/(2-1)=2em */
margin-right:-2em; /同上/
}
.w3{
letter-spacing:0.5em; /*如果需要y個字兩端對齊，則為(x-y)/(y-1),這里是（4-3）/(3-1)=0.5em */
margin-right:-0.5em; /同上/
}
效果：

十一、實現圖片加載過程高度自適應
應用情景：在頁面布局過程中，遇到輪播圖或者大張圖片，當圖片下面還有其它塊內容，在圖片加載過程中，由于高度是0，下面的元素會往上跑，圖片加載完。元素會往下跑，給用戶感覺抖動。

解決方法：在圖片最外層設置一個div，給這個div設置如下樣式

.img-box {
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 52%;
/方法二/
width:100%;
/高度相對父級寬度比例/
height: 52%vw;
background:#eee;
}

十二、實現文字超出省略…
（需要設置寬度，當父級元素使用flex布局時，需要在display：flex；這邊設置min-width：0；不然ellipsis會失效！！）

.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ellipsis-2l {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //第幾行
}

十三、豎向時間軸
效果，每次點都要與時間對齊，可以把小圓點放在跟日期同一個div上，然后橫線做成整個記錄的背景圖

html:

今天 2元優惠券，無門檻可用去使用> 已簽到，獲得1個白鴿幣 今天 2元優惠券，無門檻可用去使用> 請在愛奇藝APP兌換，兌換碼：testPw5079 已簽到，獲得1個白鴿幣 2018-09-28 已簽到，獲得1個白鴿幣 今天 2元優惠券，無門檻可用去使用> 請在愛奇藝APP兌換，兌換碼：testPw5079 已簽到，獲得1個白鴿幣 css：

.list {
padding-top: .1rem;
padding-bottom: .1rem;
font-size: .3rem;
color: #333;
background-color: #fff;
}
.list-item {
width: 100%;
margin-left: .32rem;
margin-top: -.15rem;
padding-bottom: .4rem;
background: url("…/images/border.png") no-repeat .1rem .21rem;
background-size: 1px 100%;
}
.progres2-item {
display: inline-block;
margin-right: .25rem;
width: .21rem;
height: .21rem;
background-color: #4d72e2;
border-radius: 50%;
}
/最后一個沒有直線也就是沒有背景，只有一個的時候也沒有/
.list-item:last-of-type{
background:transparent;
}
.list-item-award,.list-item-text {
margin-left: .5rem;
}
.list-item-award{
padding-left: .53rem;
margin-bottom: .12rem;
margin-top: .22rem;

}
.list-item-text {
width: 100%;
padding-left: .46rem;
padding-bottom: .16rem;
background: url("…/images/sign-icon.png") no-repeat left .05rem;
background-size: .32rem .25rem;
font-size: .26rem;
color: #808080;
box-sizing: border-box;
border-bottom: 1px solid #f4f4f4;
}
.list-item:last-of-type .list-item-text {
border-bottom: 0 none;
}
.list-item .list-btn {
padding-left: .1rem;
text-decoration: underline;
font-size: .28rem;
color: #316cec;
}

十四、文字底部橫線背景

讓小白鴿知道您不是機器人哦！ .login-title { position: relative; height: .39rem; margin-top: .4rem; font-size: .34rem; color: #fff; text-align: center; } .login-title:after { content: ""; position: absolute; width: 5.05rem; height: .21rem; background-color: #fe923f; z-index: -1; left: 0; right: 0; margin: 0 auto; bottom: 0; }

另外我們常用的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 : 1px solid #6699cc; /上框線/
border-bottom : 1px solid #6699cc; /下框線/
border-left : 1px solid #6699cc; /左框線/
border-right : 1px solid #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濾鏡屬性

Filter：在樣式中加上濾鏡特效。由于此屬性內容比較多，我們將到下一章單獨對濾鏡介紹。
1.Alpha：設置透明度
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity：透明度級別，范圍是0-100，0代表完全透明，100代表完全不透明。FinishOpacity：設置漸變的透明效果時，用來指定結束時的透明度，范圍也是0 到 100。Style：設置漸變透明的樣式，值為0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。StartX和StartY：代表漸變透明效果的開始X和Y坐標。 FinishX和FinishY：代表漸變透明效果結束X和Y 的坐標。
2.BlendTrans：圖像之間的淡入和淡出的效果
BlendTrans(Duration=?) Duration：淡入或淡出的時間。注意：這個濾鏡必須配合JS建立圖片序列，才能做出圖片間效果。
3.Blru：建立模糊效果
Blur(Add=?, Direction=?, Strength=?) Add：是否單方向模糊，此參數是一個布爾值，true（非0）或false（0）。 Direction：設置模糊的方向，其中0度代表垂直向上，然后每45度為一個單位。 Strength：代表模糊的象素值。
4.Chroma：把指定的顏色設置為透明
Chroma(Color=?) Color：是指要設置為透明的顏色。
5.DropShadow：建立陰影效果
DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color：指定陰影的顏色。OffX：指定陰影相對于元素在水平方向偏移量，整數。 OffY：指定陰影相對于元素在垂直方向偏移量，整數。 Positive：是一個布爾值，值為true（非0）時，表示為建立外陰影；為false(0)，表示為建立內陰影。
6.FlipH：將元素水平反轉
7.FlipV：將元素垂直反轉
8.Glow：建立外發光效效果
Glow(Color=?, Strength=?)
Color：是指定發光的顏色。
Strength：光的強度，可以是1到255之間的任何整數，數字越大，發光的范圍就越大。
9.Gray：去掉圖像的色彩，顯示為黑白圖象
10.　　Invert：反轉圖象的顏色，產生類似底片的效果
11.　　Light：放置光源的效果，可以用來模擬光源在物體上的投影效果 注意：此效果需要用JS設置光的位置和強度。
12.　　Mask：建立透明遮罩
Mask(Color=?) Color：設置底色，讓對象遮住底色的部分透明。
13.　　RevealTrans：建立切換效果
RevealTrans(Duration=?, Transition=?)
Duration：是切換時間，以秒為單位。
Transtition：是切換方式，可設置為從0到23。
注意：如果做頁面間的切換效果，可以在區加上一行代碼：<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >。如果用在頁面里的元素必須配合JS使用。
14.　　Shadow：建立另一種陰影效果 Shadow(Color=?, Direction=?) Color：是指陰影的顏色。
Direction：是設置投影的方向，0度代表垂直向上，然后每45度為一個單位。
15.　　Wave：波紋效果
Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add：表示是否顯示原對象，0表示不顯示，非0表示要顯示原對象。 Freq：設置波動的個數。LightStrength：設置波浪效果的光照強度，從0到100。0表示最弱，100表示最強。 Phase：波浪的起始相角。從0到100的百分數值。（例如：25相當于90度，而50相當于180度。） Strength：設置波浪搖擺的幅度。
16.　　Xray：顯現圖片的輪廓，X光片效果
注意：在使用CSS濾鏡時，必須使用在有區域的元素，比如表格，圖片等。而文本，段落這樣沒有區域的元素不能使用CSS濾鏡，對這樣的元素我們可以設置元素的Height和Width樣式或坐標來實現。"

總結

以上是生活随笔為你收集整理的css常用样式大全集锦的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。