整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
上篇文章主要講述了CSS樣式更改中的多列、元素是否可見、圖片透明度基礎知識，這篇文章我們來介紹下CSS樣式更改中用戶界面和指針類型基礎用法。
1).重設元素大小 resize
div
{
resize:both
}
none 不調整
both 調整元素的高度和寬度
horizontal 調整元素的寬度
vertical 調整元素的高度2).規定兩個并排的帶邊框的框 box-sizing
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
content-box 寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框。
border-box 為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。3).對輪廓進行偏移outline-offset
div
{
outline-offset:15px 輪廓與邊框邊緣的距離
}div{
cursor:auto
}
光標形狀：
default 默認光標（箭頭）
auto 瀏覽器設置的光標。
crosshair 十字線
pointer 一只手
move 指示某對象可被移動。
e-resize 指示矩形框的邊緣可被向右（東）移動
ne-resize 指示矩形框的邊緣可被向上及向右移動（北/東）
nw-resize 指示矩形框的邊緣可被向上及向左移動（北/西）
n-resize 指示矩形框的邊緣可被向上（北）移動
se-resize 指示矩形框的邊緣可被向下及向右移動（南/東）
sw-resize 指示矩形框的邊緣可被向下及向左移動（南/西）
s-resize 指示矩形框的邊緣可被向下移動（南）
w-resize 指示矩形框的邊緣可被向左移動（西）
text 指示文本
wait 指示程序正忙（通常是一只表或沙漏）
help 指示可用的幫助（通常是一個問號或一個氣球）參考文檔：W3C官方文檔（CSS篇）
這篇文章主要介紹了CSS樣式更改篇中的用戶界面和指針類型基礎知識，希望讓大家對CSS樣式更改有個簡單的認識和了解。
想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/
素的定位（方式五種定位方式）:
靜態定位(文檔流定位)
相對定位
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red
}
div:hover {
/*margin: 20px 0 0 20px;*/
/*修改為相對定位*/
position: relative;
top: 20px;
left: 20px;
}
</style>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>絕對定位
<style>
div{
width: 300px;padding: 10px;
background-color: rgba(0,0,0,0.3);
position: relative;/*參照物*/
}
input{
width: 260px;/*300-20*2內邊距*/
padding: 10px 20px;border: none;
}
img{
position: absolute;
top: 14px;right: 40px;
}
p{margin: 0;font-size: 12px; color: red;}
</style>
<body>
<div>
<input type="text" placeholder="請輸入用戶名">
<img src="http://celinf.org/yhm.png" alt="">
<p>用戶名不能為空!</p>
</div>
</body>固定定位
<style>
#d1{
width: 1000px; height: 100px; background-color: red;
position: fixed; top:0;
}
body{
padding-top: 100px;
}
#d2{
width: 50px;height: 200px;
background-color: blue;
position: fixed;
padding-top: 200px;right: 0;
}
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
<img src="../bee.png" alt="">
</body>浮動定位
<style>
body>div{
width: 200px; border: 1px solid red;
/*當元素的所有子元素全部浮動時 自動識別的高度為0
后面的元素會頂上來導致顯示異常,添加overflow:hidden解決此異常*/
overflow: hidden;
}
#d1{
width: 50px; height: 50px;
background-color: red;
float: left;
}
#d2{
width: 50px; height: 50px;
background-color: green;
float: left;
}
#d3{
width: 50px;height: 50px;
background-color: blue;
float: left;
}
</style>
<body>
<div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>溢出設置overflow
行內元素垂直對齊方式vertical-align
<style> /* 塊元素居中 margin */
div{
width: 200px;height: 200px;
border: 1px solid red;
/*設置超出部分的顯示方式*/
overflow: scroll;
}
img{
width: 100px;
/*設置行內元素的垂直對齊方式
top上對齊
middle中間對齊
bottom下對齊
baseline基線對齊(默認)*/
vertical-align: bottom;
}
</style>元素的顯示層級
當兩個元素非靜態定位時可能存在層疊的問題 通過z-index樣式控制顯示層級, 值越大顯示越靠前
<style>
#d1{
width: 50px;height: 100px;
background-color: red;
position: absolute;
/*設置顯示層級 值越大顯示越靠前
只對非靜態定位的元素有效*/
z-index: 1;
}
#d2{
width: 100px;height: 50px;
background-color: blue;
position: absolute;
z-index: 2;
}
</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>綜合布局練習（Demo）
Demo的效果圖
<style>
body{
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
}
body>div{
width: 1000px;margin: 0 auto;
}
#t_l_div{
width: 611px; height: 376px;
float: left; position: relative;
}
#t_r_div{
width: 375px; height: 376px;
float: right;position: relative;
}
#t_div{
overflow: hidden;margin-bottom: 10px;
}
#t_div>div,#b_l_div,#b_r_div>div{
background-color: #e8e8e8;
}
#b_div{
overflow: hidden;
}
#b_l_div{
width: 366px;height: 233px;
float: left;
}
#b_r_div{
overflow: hidden;float: right;
}
#b_r_div>div{
width: 198px;height: 233px;
float: left;margin-left: 10px;
}
#ls_d1{
margin: 25px 0 0 50px;width: 245px;
height: 232px; padding: 5px;
}
.title_p{
color: #333333; font-size: 32px;
font-weight: lighter;
}
.intro_p{
ont-size: 12px;font-weight: lighter;
}
.price_p{
margin-bottom: 12px;font-weight: bold;
color: #0AA1ED;font-size: 24px;
}
.a_title{
display: block;
background-color: #0aa1ed;
color: white;width: 132px;
height: 40px; text-align: center;
line-height: 40px;font-size: 20px;
text-decoration: none;border-radius: 2px;
}
#t_l_div>img{
position: absolute;
right: 20px;bottom: 15px;
}
#lr_d1{
width: 253px;height: 232px;
padding: 4px;text-align: left;
margin: 39px 0 0 25px;
}
#t_r_div>img{
position: absolute;
right: 10px;bottom: 3px;
}
.s_title{
font-size: 12px;width: 100px;
height: 24px; line-height: 24px;
margin: 0 auto;
}
.s_info{
font-size: 12px;text-align: center;
color: #333333;padding-top: 0;
margin-top: 0;
}
.s_price{
text-align: center;font-size: 12px;
font-weight: bold;margin: 6px auto;
color: #0aa1ed;
}
#b_l_div>p,ul{
padding: 0;margin: 0;
}
#top_div{
color: white; font-size: 16px;
background-color: #0aa1ed;
line-height: 35px;border-radius: 2px;
bottom: 5px;
}
#top_div>img{
float: left;margin: 10px 5px 0 10px;
}
.c_div{
padding-left: 10px;
}
.c_div>p{
color: #62B5EC; margin: 17px 0 9px 0;
}
.c_div>ul{
list-style-type: none;overflow: hidden;
}
.c_div>ul>li{
float: left;margin-right: 10px;
}
.c_div>ul>li>a{
text-decoration: none;color: #0aa1ed;
}
</style>
<body>
<div>
<div id="t_div">
<div id="t_l_div">
<div id="ls_d1">
<p class="title_p">靈越 燃7000系列</p>
<p class="intro_p">
酷睿雙核i5處理器|256GB SSD| 8GB內存<br>
英特爾HD顯卡620含共享顯卡內存
</p>
<p class="price_p">￥4999.00</p>
<a href="#" class="a_title">查看詳情</a>
</div>
<img src="http://celinf.cn/study_computer_img1.png" alt="圖1">
</div>
<div id="t_r_div">
<div id="lr_d1">
<p class="title_p">顏值 框不住</p>
<p class="intro_p">
酷睿雙核i5處理器|256GB SSD| 8GB內存
<br>
英特爾HD顯卡620含共享顯卡內存
</p>
<p class="price_p">￥6888.00</p>
<a href="#" class="a_title">查看詳情</a>
</div>
<img src="http://celinf.cn/study_computer_img2.png" alt="圖二">
</div>
</div>
<div id="b_div">
<div id="b_l_div">
<div id="top_div">
<img src="http://celinf.cn/computer_icon1.png" alt="圖三">
<span>電腦,辦公/1F</span>
</div>
<div class="c_div">
<p>電腦整機</p>
<ul>
<li><a href="#">筆記本</a></li>
<li><a href="#">游戲機</a></li>
<li><a href="#">臺式機</a></li>
<li><a href="#">一體機</a></li>
<li><a href="#">服務器</a></li>
<li><a href="#">聯想</a></li>
</ul>
<p>電腦配件</p>
<ul>
<li><a href="#">CPU</a></li>
<li><a href="#">SSD硬盤</a></li>
<li><a href="#">顯示器</a></li>
<li><a href="#">顯卡</a></li>
<li><a href="#">組裝電腦</a></li>
<li><a href="#">機箱</a></li>
</ul>
<p>外設/游戲</p>
<ul>
<li><a href="#">鍵盤</a></li>
<li><a href="#">鼠標</a></li>
<li><a href="#">U盤</a></li>
<li><a href="#">移動硬盤</a></li>
<li><a href="#">游戲設備</a></li>
<li><a href="#">智能單車</a></li>
</ul>
</div>
</div>
<div id="b_r_div">
<div class="s_list">
<img src="http://celinf.cn/study_computer_img3.png" alt="圖四">
<p class="s_info">戴爾(DELL)XPS13-9360-R1609 13.3英寸微邊框筆記本電腦</p>
<p class="s_price">￥4600.00</p>
<a href="#" class="a_title s_title">查看詳情</a>
</div>
<div class="s_list">
<img src="http://celinf.cn/study_computer_img3.png" alt="圖四">
<p class="s_info">戴爾(DELL)XPS13-9360-R1609 13.3英寸微邊框筆記本電腦</p>
<p class="s_price">￥4600.00</p>
<a href="#" class="a_title s_title">查看詳情</a>
</div>
<div class="s_list">
<img src="http://celinf.cn/study_computer_img3.png" alt="圖四">
<p class="s_info">戴爾(DELL)XPS13-9360-R1609 13.3英寸微邊框筆記本電腦</p>
<p class="s_price">￥4600.00</p>
<a href="#" class="a_title s_title">查看詳情</a>
</div>
</div>
</div>
</div>
</body>學習記錄，如有侵權請聯系刪除
【技術等級】初級
【承接文章】《CSS這樣處理HTML列表，三個簡單的CSS屬性，美化你的頁面》
本文小海老師為大家詳細講解有關CSS定位方面的知識。相信許多有經驗的朋友一定會經常在布局時遇到與定位有關的問題，今天咱們就共同來看一看CSS定位都具有哪些屬性以及它們的用法。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。
定位屬性是指對HTML中的元素進行位置確定的一系列方式。CSS總共提供了以下四種定位方式：
流式定位
絕對定位
相對定位
固定定位
與定位相關的CSS屬性包括以下11個：
width
height
display
position
top
right
bottom
left
z-index
visibility
overflow
一、利用position屬性設置定位方式：
CSS技術使用 position 屬性設置HTML元素的定位方式
CSS技術使用position設置HTML元素的定位方式。
首先，我們先來了解一下這四種定位方式的特點：
流式定位：HTML元素默認采用該種定位方式。這是指所有的HTML元素從上到下、從左向右按照代碼的書寫順序依次出現。
絕對定位：所有的HTML元素的位置都是相對于頁面左上角來實現定位的。
相對定位：所有的HTML元素的位置都是相對于上一個元素來實現定位的。
固定定位：HTML元素相對于頁面指定位置固定不變，不受垂直滾動條的影響。同時，HTML元素在固定定位的前提下，其元素位置是相對于頁面左上角。
我們一般將上述四種定位方式歸納為兩種：“流式定位”和“非流式定位”。
具體的HTML元素采用哪種定位方式，是通過position屬性來實現的，該屬性有以下四種取值。
static，默認值，HTML元素采用“流式定位”。
absolute，HTML元素采用“絕對定位”。
relative，HTML元素采用“相對定位”。
fixed，HTML元素采用“固定定位”。
二、HTML元素的位置屬性：
CSS技術使用四個屬性設置HTML非流式定位元素的位置
當HTML元素采用“非流式定位”時，可以使用以下四個位置屬性來設置該元素具體的位置。
left，設置元素左側的位置。
right，設置元素右側的位置。
top，設置元素頂部的位置。
bottom，設置元素底部的位置。
這四個屬性的取值都可以是帶有單位的數值。
三、HTML塊級元素的尺寸屬性：
CSS技術使用兩個屬性設置塊級元素的尺寸
當HTML元素為“塊級元素”時，可以使用以下兩個尺寸屬性來設置該塊級元素的寬度和高度。
width，設置塊級元素的寬度。
height，設置塊級元素的高度。
這兩個屬性包括以下幾種取值：
auto，自動，塊級元素的寬度和高度隨元素內部的內容多少而自動變化。
帶有單位的數值，指定塊級元素的寬度和高度為明確的數值。
百分比，指定塊級元素的寬度和高度為父元素的百分比。
四、設置HTML元素的顯示特性：
CSS技術利用 display 屬性來設置CSS元素的顯示特性
CSS技術利用display屬性來設置CSS元素的顯示特性。
該屬性有多種取值：
none，將HTML元素隱藏。
block，將HTML元素中的內聯元素或其他元素轉換為塊級元素。
inline，將HTML元素中的塊級元素或其他元素轉換為內聯元素。
inline-block，將HTML元素中的任意元素轉換為內聯塊元素。
塊級元素獨占一行。
可以利用width和height屬性為塊級元素設置寬度和高度。
內聯元素可以在一行內顯示多個。
不能利用width和height屬性設置內聯元素的寬度和高度。
內聯塊元素結合了“塊級元素”和“內聯元素”各自的優點：
可以利用width和height屬性為內聯塊元素設置寬度和高度。
內聯塊元素可以在一行內顯示多個。
定位屬性還包括三個屬性，小海老師會在下一篇文章中為大家介紹剩下的屬性以及定位功能的具體用法。
下一篇文章中，小海老師會繼續為大家向下講解CSS定位屬性，下一次我們講解CSS中剩余的三個定位屬性以及定位技術的使用，希望大家千萬不要錯過！
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
