position屬性實現絕對定位
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
width:100%;
height:100%;
}
#block{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute; /* absolute絕對定位 */
left:20px; /* 塊的左邊框離頁面左邊界20px */
top:40px; /* 塊的上邊框離頁面上邊界40px */
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block">absolute</div>
</div>
</body>
</html>
以上的代碼我們可以看出父塊#father沒有設置position屬性,而子塊#block采用的是絕對定位,經過測試發現子塊#block參照瀏覽窗口左上角
為原點,子塊左邊框相對頁面<body>左邊的距離為20px,子塊的上邊框相對頁面<body>上面的距離為40px
為父塊這是position屬性
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
position:relative;
width:100%;
height:100%;
}
我們發現子塊的參照物為父塊的#father,距左側20px,距上端40px
注意top、right、bottom、left這4個CSS屬性,它們都是配合position屬性使用的,表示的是塊的各個邊界離頁面邊框(position設置為absolute時)
或者原來的位置(position設置為relative)的距離。只有當position屬性設置為absolute或者relative時才能生效;
用position屬性實現相對定位
<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
margin:10px;
font-family:Arial;
font-size:13px;
}
#father{
background-color:#a0c8ff;
border:1px dashed #000000;
width:100%; height:100%;
padding:5px;
}
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:relative; /* relative相對定位 */
left:15px; /* 子塊的左邊框距離它原來的位置15px */
top:10%;
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block1">relative</div>
</div>
</body>
</html>
我們可以看到字塊的左邊框相對于其父塊的左邊框(它原來所在的位置)距離為15px,上邊框也是一樣的道理,為10%;
理解"它原來的位置":子塊和父塊原先的位置的是一致的(因為父塊包含字塊,視覺上看是幾乎重疊的)
此時子塊的寬度依然是未移動前的寬度,撐滿未移動前父塊的內容。只是由于向右移動了,因此右邊框超出了父塊。
如果希望子塊的寬度僅僅為其內容加上自己的padding值,可以將它的float屬性設置為left,或者指定其寬度width;
案例: 文本在圖片上顯示
表中的數字指定完全支持該屬性的第一個瀏覽器版本。
數字后面的 -webkit- 或者 -moz- 使用時需要指定前綴。
屬性ChromeFirefoxSafariOperaIEborder-radius5.0 4.0 -webkit-9.04.0 3.0 -moz-5.0 3.1 -webkit-10.5
CSS3中,可以使用border-radius屬性,為元素指定圓角顯示。
代碼如下:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>項目</title>
<head>
<style>
#rcorners1 {
border-radius: 25px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(img/fy_indexBg.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>The border-radius property allows you to add rounded corners to elements.</p>
<p>Rounded corners for an element with a specified background color:</p>
<!--1.具有指定背景色的圓角元素-->
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<!--2.帶邊框的圓角元素:-->
<p id="rcorners2">Rounded corners!</p>
<!--3.帶背景圖的圓角元素-->
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>
提示:
border-radius屬性實際是border-top-left-radius, border-top-right-radius, border-bottom-right-radius 和 border-bottom-left-radius 屬性的簡寫。
如果只為border-radius屬性指定一個值,則此半徑將應用于所有4個角。
另外可以根據自己開發的需求,分別指定每個角。以下是規則:
四個值: 第一個值適用于左上角,第二個值適用于右上方,第三值應用于右下角,第四值適用于左下角。
三個值: 第一個值適用于左上,二值適用于右上和左下,右下第三值適用于。
兩個值: 第一個值適用于左上和右下角,和二值適用于右上和左下角。
一個值: 所有的四個角都是圓的。
1.四個值 - border-radius: 15px 50px 30px 5px
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
2.三個值 - border-radius: 15px 50px 30px
#rcorners5 {
border-radius: 15px 50px 30px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
3.兩個值 - border-radius: 15px 50px
#rcorners6 {
border-radius: 15px 50px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
完整代碼 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
<style>
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #f00;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>四個值 - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners4"></p>
<p>三個值 - border-radius: 15px 50px 30px:</p>
<p id="rcorners5"></p>
<p>兩個值 - border-radius: 15px 50px:</p>
<p id="rcorners6"></p>
</body>
</html>
創建橢圓形的圓角
創建橢圓形的圓角
橢圓邊框 :border-radius: 50px/15px
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
橢圓邊框 : border-radius: 15px/50px
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
橢圓邊框 : border-radius: 50%
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
<style>
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>橢圓邊框 - border-radius: 50px/15px:</p>
<p id="rcorners7"></p>
<p>橢圓邊框 - border-radius: 15px/50px:</p>
<p id="rcorners8"></p>
<p>橢圓邊框 - border-radius: 50%:</p>
<p id="rcorners9"></p>-->
</body>
</html>
1、本文主要講解了CSS3圓角,通過一些屬性的演示,豐富的案例,幫助大家理解CSS知識。希望大家可以耐心的去學習,同時希望碰到問題主動搜索,嘗試一下,總會有解決方法。
2、代碼很簡單,希望能幫到你。
想學習更多Python網絡爬蟲與數據挖掘知識,可前往專業網站:http://pdcfighting.com/
段時間在寫組件,頁面有一個輸入框,點擊輸入框,彈出一個國家控件或者是城市控件。但是這個控件的位置該如何放一直是一個頭疼的問題??赡苁情_始沒有沉下心來想,總覺得這是個技術難題,還在網上和群里 向很多高手請教,他們給出的答案也并不是我想要的。最后不得不自己想想該如何解決這個問題了,現在把自己的一些思考寫出來,一來防止忘記,二來也算個分享。
思路:
前提條件:只能拿到一個輸入框對象。
1、position的取值:absolute、relative和fixed三種。relative是相對定位,很明顯不適合,因為在實際操作中,根本不確定input是否有父節點,以及父節點的定位是什么,那么相對定位,相對的對象是不可知的,所以可以排除relative。其次是固定定位fixed,這個也是不可行的。舉個簡單的例子,如果把控件定位到(100,100)的位置,那么如果有滾動條,該控件不會跟著頁面滾動,要是還是不明白,想想博客園頁面上回到頂部的功能就應該明白了。
2、經過以上思考,至少可以確定,控件的position一定是absolute了,那么它的left值和top值該怎么計算呢?肯定要先從input輸入框入手。
3、由于在開發中用的jquery庫,那么首先想到的就是$.offset方法,查看API得知,offset是用于設置或返回當前匹配元素相對于當前文檔的偏移,也就是相對于當前文檔的坐標,說白了就是獲取當前元素的絕對位置。且該位置是相對于當前文檔(頁面)的。既然是這樣,控件的left就應該是當前元素的left值,控件的top就應該是當前元素的top值加上當前元素的自身高度了。為了驗證,立馬寫了一個例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="demo/jquery-1.9.1.js" ></script> <style type="text/css"> .layer{width:400px; height:300px; background:red;position: absolute;} </style> </head> <body style="height:2000px;"> <input type="text" id="input1" placeholder="請選擇 " style="margin-top:100px;" onclick="addLayer;"/> </body> </html> <script type="text/javascript"> function addLayer{ var pointer = $("#input1").offset; var $div = $("<div class='layer'></div>"); $div.css({left:pointer.left, top:pointer.top+$("#input1").height}); $("body").append($div); } </script>
運行正常,也不會隨著滾動條的變動而變動位置,很不錯。
4、然而由于我的整個項目是用的angular的路由來控制的,左邊是導航,右邊是內容區,發現異常了,控件和input輸入框分離了,找了半天原因,也沒找到,開始懷疑自己寫的控件有問題,亦或計算位置的思路不正確?糾結了半天,沒找到問題的原因,最后不得不用那萬能的排除法了。
5、怎么排除呢?首先在網上找了一個日歷控件(My97 datepicker),引用進來,發現還是存在這個問題。非常開心,看來不是控件寫的有問題,那到底是啥原因呢?繼續找。。。。。
6、然后各種實驗,最后終于找到原因了:滾動條的問題,如果不是body的滾動條或者是iframe的滾動條,就會遇到這個問題。其實沉下心來想想,很容易就想通,因為offset是根據document計算的相對偏移量,雖然input框所在的區域包含滾動條,但是這個滾動條不是屬于document的,所以在滾動的時候,input會隨著走,而控件始終留在相對于document的位置。另外,input會跟著動,是因為input并不是根據document來定位的。也就是說,我控件的位置是根據input相對于document的偏移量來獲取的,但是并不代表input的位置就是按照這個偏移量來設置的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="demo/jquery-1.9.1.js" ></script> 7 <style type="text/css"> 8 .layer{width:400px; height:300px; background:red;position: absolute;} 9 .wrap{height:500px;overflow: auto;} 10 .inner{height:1000px;} 11 </style> 12 </head> 13 <body style="height:2000px;"> 14 <div class="wrap"> 15 <div class="inner"> 16 <input type="text" id="input1" placeholder="請選擇 " style="margin-top:100px;" onclick="addLayer;"/> 17 </div> 18 </div> 19 </body> 20 </html> 21 <script type="text/javascript"> 22 function addLayer{ 23 var pointer = $("#input1").offset; 24 var $div = $("<div class='layer'></div>"); 25 $div.css({left:pointer.left, top:pointer.top+$("#input1").height}); 26 $("body").append($div); 27 } 28 </script>
7、看來這個問題真是沒辦法解決了,真的沒有辦法呢?不死心,接著想。。。。。
8、一不小心,又發現了jquery的position方法,那就用這個方法試試,思路是先用position方法獲取input相對父元素的偏移量,然后給控件設置位置。另外用遞歸查找input的所有父元素中第一個position為relative的的父元素,把控件append上去。實驗表明,如果input的父節點直接是relative的,沒有問題,但是要是input的所有父節點都沒有,最后還是找到body上去了。結果和上面一樣的。
最后結論:最初的方法應該就是正確的方法。所以有時候真的沒有必要把問題想的太復雜了,否則進入死巷子出不來。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。