當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

css编写的技巧效果总结

發(fā)布時(shí)間：2023/12/10 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 css编写的技巧效果总结小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. 垂直對(duì)齊

如果你之前遇到過(guò)這個(gè)問(wèn)題，你就應(yīng)該知道它是多么的煩人，幸運(yùn)的是，現(xiàn)在你可以使用CSS3變換來(lái)解決這個(gè)問(wèn)題：

.vc{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
2. 只在一側(cè)或者兩側(cè)具有投影

.box-shadow {
background-color: #AC92EC;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}
3. 漸變背景動(dòng)畫(huà)效果

從CSS3開(kāi)始，動(dòng)畫(huà)變得非常的酷了，但是切不可過(guò)分的使用它們。下面這一技巧巧妙地的移動(dòng)背景位置，使其看起來(lái)像動(dòng)畫(huà)一樣：

button {
padding: 15px;
background-image: linear-gradient(#FC6E51, #FFF);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}
4. 將文本分成多列

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
5. 表格自動(dòng)寬度

td {
white-space: nowrap;
}
6. 像出版物一樣，第一個(gè)字變得大些

p:first-child::first-letter{
font-family: "papyrus";
font-size: 28px;
font-weight: bold;
}
7. 特定瀏覽器的CSS Hacks的完整列表

有時(shí)候解決跨瀏覽器兼容性可能會(huì)非常的棘手，但這些特定瀏覽器的技巧可能會(huì)幫你解決問(wèn)題。

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

8. 創(chuàng)建模糊文本

.blurry-text {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

9. 不使用表格實(shí)現(xiàn)跨瀏覽器垂直水平居中圖片

這段代碼可以在一個(gè)已知寬高的容器內(nèi)垂直水平居中一個(gè)未知大小的圖片，這是 IE 的一個(gè)hack：

<figure class='logo'>
<span></span>
<img class='photo'/>
</figure>
.logo {
display: block;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px; }
.logo * {
display: inline-block;
height: 100%;
vertical-align: middle; }
.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }

10. 高亮選中的 input

// HTML
<input id="mycheck1" type="checkbox" />
<label for="mycheck1">Check box label here</label>
<br />
<input id="mycheck2" type="checkbox" checked/>
<label for="mycheck2">Check box label here</label>
<br />
<input id="mycheck3" type="checkbox" />
<label for="mycheck3">Check box label here</label>

// CSS
input:checked + label{
background: yellow;
}
11. 跨瀏覽器透明度

selector {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}
12. CSS投影

// 外投影
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}

// 內(nèi)投影
.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}
13. 跨瀏覽器最小高度

#div {
min-height: 500px;
height:auto !important;
height: 500px;
}
14. 固定 Footer

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}

/* IE 6 */
* 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');
}
15. 清除浮動(dòng) Clearfix

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
16. 給可點(diǎn)擊元素添加手型光標(biāo)

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}
17. iPad 定向CSS

@media only screen and (max-device-width: 1024px) and (orientation:portrait) {
.landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) {
.portrait { display: none; }
}


<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>
18. Pre 標(biāo)簽內(nèi)文本換行

pre{
height: 120px;
overflow: auto;
font-family: “Consolas”,monospace;
font-size: 9pt;
text-align:left;
background-color: #FCF7EC;
overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
margin: 0px 0px 0px 0px;
padding:5px 5px 3px 5px;
white-space : normal; /* crucial for IE 6, maybe 7? */
}
19. CSS3媒體查詢

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
20. 重置加載

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
21. 多邊框

元素必須是相對(duì)定位，且具有足夠的padding來(lái)顯示多余的邊框：

#borders {
position:relative;
z-index:1;
padding:30px;
border:5px solid #f00;
background:#ff9600;
}
#borders:before {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:5px solid #ffea00;
background:#4aa929;
}

#borders:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:15px;
bottom:15px;
border:5px solid #00b4ff;
background:#fff;
}
22. 移除IE中textarea的滾動(dòng)條

textarea { overflow: auto; }
23. 簡(jiǎn)單但好看的引用樣式

css-blockquote

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}
24. :-moz-placeholder

<!doctype html>
<html>
<head>
<title>Placeholder demo</title>
<style type="text/css">
input:-moz-placeholder {
color: green;
}
</style>
</head>
<body>
<input id="test" placeholder="Placeholder text!">
</body>
</html>
25. 另一種固定footer的方式

* { margin:0; padding:0; }

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 150px; } /* must be same height as the footer */

#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
<div id="wrap">

<div id="main" class="clearfix">

</div>

</div>

<div id="footer">

</div>

26. 背景透明

.rgba {
background-color: transparent;
background-color: rgba(200,200,200,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
}

27. 居中未知寬度的DIV元素

.content {
margin: 0 auto 8px;
display: table;
}

.content div {
display: table-cell;
}


28. 根據(jù)文件類型設(shè)置樣式

/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}

29. 解決IE6/7雙倍margin/padding問(wèn)題

ul li
{
float: right;
margin-right: 10px;
*display: inline; /*Target IE7 and bellow*/
_display: inline; /*Target IE6 and bellow*/
}
/* This example fixes the double right margin bug */

30. 更改選中文本的樣式

::selection
{
color: white;
background-color: red;
}

::-moz-selection /* Firefox needs an extra attention for this */
{
color: white;
background-color: red;
}

31. 首字下沉

p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#FF3366;
font-size:60px;
font-family:Georgia;
}

32、如何清除圖片下方出現(xiàn)幾像素的空白間隙？

方法1：
img{display:block;}
方法2：
img{vertical-align:top;}
除了top值，還可以設(shè)置為text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以
方法3：
#test{font-size:0;line-height:0;}
#test為img的父元素

33、如何讓文本垂直對(duì)齊文本輸入框？
方法：
input{vertical-align:middle;}

34、為什么Standard mode下IE無(wú)法設(shè)置滾動(dòng)條的顏色？
方法：
html{
scrollbar-3dlight-color:#999;
scrollbar-darkshadow-color:#999;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eee;
scrollbar-arrow-color:#000;
scrollbar-face-color:#ddd;
scrollbar-track-color:#eee;
scrollbar-base-color:#ddd;
}

35、如何讓未知尺寸的圖片在已知寬高的容器內(nèi)水平垂直居中？
方法：
#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}
#test是img的祖父節(jié)點(diǎn)，p是img的父節(jié)點(diǎn)。Know More：未知尺寸的圖片如何水平垂直居中

36、如何容器透明，內(nèi)容不透明？
方法1：
.outer{width:200px;height:200px;background:#000;filter:alpha(opacity=20);opacity:.2;}
.inner{width:200px;height:200px;margin-top:-200px;}

<div class="outer"></div>
<div class="inner">我是不透明的內(nèi)容</div>
原理是容器層與內(nèi)容層并級(jí)，容器層設(shè)置透明度，內(nèi)容層通過(guò)負(fù)margin或者position絕對(duì)定位等方式覆蓋到容器層上
方法2：
.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}

<div class="outer">
<div class="inner">我是不透明的內(nèi)容</div>
</div>
高級(jí)瀏覽器直接使用rgba顏色值實(shí)現(xiàn)；IE瀏覽器在定義容器透明的同時(shí)，讓子節(jié)點(diǎn)相對(duì)定位，也可達(dá)到效果

37、如何做1像素細(xì)邊框的table？

方法：
#test{border-collapse:collapse; border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}

38、如何使頁(yè)面文本行距始終保持為n倍字體大小的基調(diào)？
方法：
body{line-height:n;}

39、如何解決IE6下當(dāng)li內(nèi)部元素是定義了display:block的內(nèi)聯(lián)元素時(shí)底部產(chǎn)生空白的問(wèn)題？

a,span{display:block;background:#ddd;}

<ul>
<li><a href="http://css.doyoe.com/">CSS參考手冊(cè)</a></li>
<li><a href="http://blog.doyoe.com/">CSS探索之旅</a></li>
<li><a href="http://demo.doyoe.com/">web前端實(shí)驗(yàn)室</a></li>
<li><span>測(cè)試li內(nèi)部元素為設(shè)置了display:block的內(nèi)聯(lián)元素時(shí)底部產(chǎn)生空白</span></li>
</ul>

如上代碼，IE6及更早瀏覽器每個(gè)li內(nèi)部的內(nèi)聯(lián)元素底部都會(huì)產(chǎn)生空白。解決方案是給li內(nèi)部的內(nèi)聯(lián)元素再加上zoom:1

40、如何區(qū)別display:none與visibility:hidden？

方法：
相同的是display:none與visibility:hidden都可以用來(lái)隱藏某個(gè)元素；不同的是display:none在隱藏元素的時(shí)候，將其占位空間也去掉；而visibility:hidden只是隱藏了內(nèi)容而已，其占位空間仍然保留。

41、如何解決IE7及更早瀏覽器下當(dāng)li中出現(xiàn)2個(gè)或以上的浮動(dòng)時(shí)，li之間產(chǎn)生的空白間隙的BUG？
方法：
li{vertical-align:top;}
除了top值，還可以設(shè)置為text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以

轉(zhuǎn)載于:https://www.cnblogs.com/design-engineer/p/5377759.html

總結(jié)

以上是生活随笔為你收集整理的css编写的技巧效果总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： string类的实现（构造函数，析构函数
下一篇：代码走查内容