一.讓盒子在網(wǎng)頁(yè)中居中的方法

讓已知寬度和高度的盒子居中的兩種方法，通過(guò)絕對(duì)定位實(shí)現(xiàn)，會(huì)跟著瀏覽器窗口的縮放不斷調(diào)整位置，一直居中

方法一：通過(guò)絕對(duì)定位，定位時(shí)上邊距與左邊距都給50%，在利用margin減去當(dāng)前盒子的一半寬度與高度

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 #box{
 6     position: absolute;
 7     top: 50%;
 8     left: 50%;
 9     width: 100px;
10     height: 100px;
11     margin: -50px 0 0 -50px;
12     background: #f00;
13 }

方法二：通過(guò)絕對(duì)定位，left:50%,top:50%，css3 transform:translate(-50%,-50%)，但有弊端，顯示文字等可能造成模糊，

解決：這是因?yàn)閠ransform時(shí)div的寬度或者高度并不是偶數(shù)，移動(dòng)50%之后，像素點(diǎn)并不是整數(shù)，出了小數(shù)，和顯示像素沒(méi)有對(duì)上。

解決方案是使用flex完成垂直居中，設(shè)置排列方向?yàn)閏olumn，并設(shè)置justify-content: center，最后用text-align: center完成水平居中。方能保證文字顯示清晰。

1 position:absolute;
2 left:50%;
3 transform:translate(-50%,0);
4 balabala;
5 height:balabala;
6 //左右居中

方法三：通過(guò)絕對(duì)定位給4個(gè)方向都為0；用margin自動(dòng)，實(shí)現(xiàn)居中

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 #box {
 7     position: absolute;
 8     top: 0;
 9     right: 0;
10     bottom: 0;
11     left: 0;
12     width: 100px;
13     height: 100px;
14     margin: auto;
15     background: #f00;
16 }

二.百分比大小取決于誰(shuí)

類型一：元素的margin-top、bottom及padding-top、bottom使用百分比作為單位時(shí)，其是相對(duì)父元素的寬度width來(lái)計(jì)算，而不是我們想象的高度height；

類型二：元素的height使用百分比作為單位時(shí)，其是相對(duì)父元素高度height來(lái)計(jì)算，min-height及max-height也適用這條規(guī)律。

類型三：含有定位屬性的元素top、bottom使用百分比作為單位時(shí)，其是相對(duì)父元素高度height來(lái)計(jì)算，left、right相對(duì)父元素寬度width。

類型四：當(dāng)子元素設(shè)置100%分兩種情況：

1.子元素絕對(duì)定位，100% // width=父元素（padding×2+content:width）

2.子元素非絕對(duì)定位，100% // width=父元素（contene:width）

類型五：1.只父元素設(shè)置line-height:150%，子元素繼承，與子元素字體大小無(wú)關(guān)；

2.只父元素設(shè)置line-height:1.5，子元素line-height=子元素（font-size）×父元素（line-height）；//推薦

三.動(dòng)畫等

　　類型一：animation

 1 div{
 2   animation:d 3s;          
 3 }
 4 @keyframes d{
 5   0%{transform:scale(0)}
 6   50%{transform:scale(0.5)}
 7   100%{transform:scale(0.9)}  
 8 }
 9 或
10 p{
11   animation:g 3s;    
12 }
13 @keyframes g{
14   from{background:red}
15   to{background:blue}
16 }

　　類型二：transform應(yīng)用于2D或3D轉(zhuǎn)換

　　類型三：transition

四.高度塌陷

解法一：下個(gè)元素clear:both

 1 <style type="text/css">
 2     *{margin:0px;padding:0px;}
 3     .div1{
 4         width:300px;
 5         background:red;
 6         border:2px solid red;
 7         margin:100px auto;
 8     }
 9     .left{
10         float:left;
11         width:100px;
12         height:100px;
13         background:yellow;
14     }
15     .right{
16         float:right;
17         width:100px;
18         height:100px;
19         background:yellow;
20     }
21     .clearfloat{clear:both}
22 </style>
23 <div class="div1">
24     <div class="left">Left</div>
25     <div class="right">Right</div>
26     <div class="clearfloat"></div>
27 </div>

View Code

解法二：給父級(jí)定義偽類:after

 1 <style type="text/css">
 2     .div1{
 3         width:300px;
 4         background:red;
 5         border:2px solid red;
 6         margin:100px auto;
 7     }
 8     .left{
 9         float:left;
10         width:100px;
11         height:100px;
12         background:yellow;
13     }
14     .right{
15         float:right;
16         width:100px;
17         height:100px;
18         background:yellow;
19     }
20     .clearfloat:after{
21         display:block;
22         clear:both;
23         content:"";
24     }
25 </style>
26 <div class="div1 clearfloat">
27     <div class="left">Left</div>
28     <div class="right">Right</div>
29 </div>

View Code

解法三：給父級(jí)定義overflow:hidden或auto

 1 <style type="text/css">
 2     .div1{
 3         background:red;
 4         border:2px solid red;
 5         width:300px;
 6         margin:100px auto;
 7         /*解決代碼*/
 8         overflow:hidden
 9     }
10     .left{
11         float:left;
12         width:100px;
13         height:100px;
14         background:yellow;
15     }
16     .right{
17         float:right;
18         width:100px;
19         height:100px;
20         background:yellow;
21     }
22 </style>
23 <div class="div1">
24     <div class="left">Left</div>
25     <div class="right">Right</div>
26 </div>

View Code

五.css

字體模糊

color: transparent;
text-shadow: #111 0 0 5px;

多重邊框

/*CSS Border with Box-Shadow Example*/
div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}

總結(jié)

以上是生活随笔為你收集整理的CSS/css3奇淫技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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