用css實(shí)現(xiàn)一個(gè)空心圓，并始終放置在瀏覽器窗口左下角
div{
position:fixed;
bottom:0;
left:0;
100px;
height:100px;
border:2px solid #000;
border-radius:100px;
}
如何讓圓水平，垂直居中
div{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
100px;
height:100px;
border:2px solid #000;
border-radius:100px;
}
IE7以下不支持position:fixed;的bug

1. 利用 Javascript 計(jì)算出需要的 top 值
<!--[if IE lt 7]>
<link rel="stylesheet" href="style.css" type="text/css" />
<![endif]-->
在style.css樣式表中針對(duì)目標(biāo)定位元素樣式中寫入：
position:absolute;
top:expression(eval(document.body.scrollTop + 50));
防止?jié)L動(dòng)條滾動(dòng)時(shí)的閃動(dòng)，需要定義HTMl的屬性為：
html {
background-image: url(about: blank); /*用瀏覽器空白頁(yè)面作為背景*/
background-attachment: fixed; /*確保滾動(dòng)條滾動(dòng)時(shí)，元素不閃動(dòng)*/
}
在 IE 中特有的 CSS 運(yùn)算符 expression中我們可以利用 Javascript 計(jì)算出需要的 top 值，這樣就達(dá)到了與 position: fixed 同樣的效果。
2.利用容器對(duì)溢出內(nèi)容的處理方式來(lái)實(shí)現(xiàn)
定義body內(nèi)外邊距為0，實(shí)現(xiàn)html和瀏覽器窗口相同大小，使body出現(xiàn)滾動(dòng)條，元素相對(duì)于html相對(duì)定位。
body { padding: 0; margin: 0; }
html { overflow: hidden; }
body { height: 100%; overflow: auto; }
針對(duì)IE6定義元素屬性:
position: absolute;
top: 50% ;
left: 50% ;
margin-top: -140px;
margin-left: -168px;
讓元素固定于瀏覽器
分別讓元素定位于瀏覽器左側(cè)、右側(cè)、頂部、底部綜合樣式演示：
position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop));/* IE6 頭部固定 */

position:absolute;
right:auto;
left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)0)-(parseInt(this.currentStyle.marginRight, 10)0));/* IE6 固定右側(cè) */

position:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)0)-(parseInt(this.currentStyle.marginBottom, 10)0)));/* IE6 固定底部*/

position:absolute;
right:auto;
left:expression(eval(document.documentElement.scrollLeft));/* IE6 左側(cè)固定 */

總結(jié)

以上是生活随笔為你收集整理的css 空心圆的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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