CSS樣式更改-用戶界面和指針類型

言

上篇文章主要講述了CSS樣式更改中的多列、元素是否可見、圖片透明度基礎(chǔ)知識，這篇文章我們來介紹下CSS樣式更改中用戶界面和指針類型基礎(chǔ)用法。

1.用戶界面 UserGui

1).重設(shè)元素大小 resize

div
{
resize:both
}
none           不調(diào)整
both           調(diào)整元素的高度和寬度
horizontal     調(diào)整元素的寬度
vertical       調(diào)整元素的高度

2).規(guī)定兩個并排的帶邊框的框 box-sizing

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
content-box  寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
border-box 為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。

3).對輪廓進(jìn)行偏移outline-offset

div
{
outline-offset:15px  輪廓與邊框邊緣的距離
}

2.指針類型Cursor

div{
  cursor:auto
}
光標(biāo)形狀：
default       默認(rèn)光標(biāo)（箭頭）
auto        瀏覽器設(shè)置的光標(biāo)。
crosshair           十字線
pointer             一只手
move                指示某對象可被移動。
e-resize            指示矩形框的邊緣可被向右（東）移動
ne-resize           指示矩形框的邊緣可被向上及向右移動（北/東）
nw-resize           指示矩形框的邊緣可被向上及向左移動（北/西）
n-resize            指示矩形框的邊緣可被向上（北）移動
se-resize           指示矩形框的邊緣可被向下及向右移動（南/東）
sw-resize           指示矩形框的邊緣可被向下及向左移動（南/西）
s-resize            指示矩形框的邊緣可被向下移動（南）
w-resize            指示矩形框的邊緣可被向左移動（西）
text                指示文本
wait                指示程序正忙（通常是一只表或沙漏）
help                指示可用的幫助（通常是一個問號或一個氣球）

參考文檔：W3C官方文檔（CSS篇）

總結(jié)

這篇文章主要介紹了CSS樣式更改篇中的用戶界面和指針類型基礎(chǔ)知識，希望讓大家對CSS樣式更改有個簡單的認(rèn)識和了解。
想要學(xué)習(xí)更多，請前往Python爬蟲與數(shù)據(jù)挖掘?qū)Ｓ镁W(wǎng)站：http://pdcfighting.com/

素的定位（方式五種定位方式）:

靜態(tài)定位: position:static;
相對定位: position:relative;
絕對定位: position:absolute;
固定定位: position: fixed;
浮動定位: float:left/right

靜態(tài)定位(文檔流定位)

格式: position:static; (默認(rèn)的定位方式)
特點(diǎn): 元素以左上為基準(zhǔn), 塊級元素從上往下排列,行內(nèi)元素從左向右依次排列, 默認(rèn)情況下無法實現(xiàn)元素的層疊效果
如何控制元素的位置? 通過外邊距控制元素的位置

相對定位

格式: position:relative;
特點(diǎn): 元素不脫離文檔流(仍然占著原來的位置) ,可以實現(xiàn)元素的層疊效果
如何控制元素的位置? 通過left/right/top/bottom 控制元素的顯示位置,參照物是初始位置
應(yīng)用場景: 當(dāng)希望移動某一個元素其它元素不受影響時使用相對定位, 相對定位可以實現(xiàn)元素的層疊

<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>

絕對定位

格式: position:absolute;
特點(diǎn): 元素脫離文檔流(不占原來的位置),可以實現(xiàn)元素層疊
如何控制元素的位置?通過left/right/top/bottom控制位置,參照物為窗口或某一個上級元素(需要在上級元素中添加position:relative作為參照物)
應(yīng)用場景: 當(dāng)需要往頁面中添加一個元素并且不影響其它元素的顯示位置,并且可以實現(xiàn)層疊效果

<style>
     div{
        width: 300px;padding: 10px;
        background-color: rgba(0,0,0,0.3);
        position: relative;/*參照物*/
      }
    input{
      width: 260px;/*300-20*2內(nèi)邊距*/
      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>

固定定位

格式: position:fixed;
特點(diǎn): 脫離文檔流
如何控制元素的位置?通過left/right/top/bottom相對于窗口做偏移
應(yīng)用場景: 當(dāng)需要將元素固定在窗口的某個位置時使用

<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>

浮動定位

格式: float:left/right;
特點(diǎn): 脫離文檔流, 元素從當(dāng)前所在行向左或向右浮動,當(dāng)撞到上級元素邊緣或其它元素時停止.
浮動元素一行裝不下時會自動折行, 折行時有可能被卡住
當(dāng)元素的所有子元素全部浮動時,自動識別的高度會為0,后面元素會頂上來導(dǎo)致顯示異常,通過給元素添加overflow:hidden可以解決此問題
應(yīng)用場景: 當(dāng)需要將縱向排列的元素改成橫向排列時使用.

<style>
    body>div{
      width: 200px; border: 1px solid red;
      /*當(dāng)元素的所有子元素全部浮動時 自動識別的高度為0
              后面的元素會頂上來導(dǎo)致顯示異常,添加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>

溢出設(shè)置overflow

visible超出部分顯示(默認(rèn))
hidden超出部分隱藏
scroll 超出部分滾動顯示

行內(nèi)元素垂直對齊方式vertical-align

top 上對齊
middle中間對齊
bottom下對齊
baseline基線對齊(默認(rèn))

<style>   /* 塊元素居中  margin */
  div{
    width: 200px;height: 200px;
    border: 1px solid red;
    /*設(shè)置超出部分的顯示方式*/
    overflow: scroll;
  }
img{
  width: 100px;
  /*設(shè)置行內(nèi)元素的垂直對齊方式
            top上對齊
            middle中間對齊
            bottom下對齊
            baseline基線對齊(默認(rèn))*/
  vertical-align: bottom;
}
</style>

元素的顯示層級

當(dāng)兩個元素非靜態(tài)定位時可能存在層疊的問題通過z-index樣式控制顯示層級, 值越大顯示越靠前

<style>
    #d1{
      width: 50px;height: 100px;
      background-color: red;
      position: absolute;
      /*設(shè)置顯示層級 值越大顯示越靠前
              只對非靜態(tài)定位的元素有效*/
      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>

綜合布局練習(xí)（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內(nèi)存<br>
                    英特爾HD顯卡620含共享顯卡內(nèi)存
                </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內(nèi)存
                    <br>
                    英特爾HD顯卡620含共享顯卡內(nèi)存
                </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>電腦整機(jī)</p>
                <ul>
                    <li><a href="#">筆記本</a></li>
                    <li><a href="#">游戲機(jī)</a></li>
                    <li><a href="#">臺式機(jī)</a></li>
                    <li><a href="#">一體機(jī)</a></li>
                    <li><a href="#">服務(wù)器</a></li>
                    <li><a href="#">聯(lián)想</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="#">機(jī)箱</a></li>
                </ul>
                <p>外設(shè)/游戲</p>
                <ul>
                    <li><a href="#">鍵盤</a></li>
                    <li><a href="#">鼠標(biāo)</a></li>
                    <li><a href="#">U盤</a></li>
                    <li><a href="#">移動硬盤</a></li>
                    <li><a href="#">游戲設(shè)備</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>

學(xué)習(xí)記錄，如有侵權(quán)請聯(lián)系刪除

望收藏了我寫的文章的你同時可以關(guān)注一下“小海前端”，因為這些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。

【技術(shù)等級】初級

【承接文章】《CSS這樣處理HTML列表，三個簡單的CSS屬性，美化你的頁面》

本文小海老師為大家詳細(xì)講解有關(guān)CSS定位方面的知識。相信許多有經(jīng)驗的朋友一定會經(jīng)常在布局時遇到與定位有關(guān)的問題，今天咱們就共同來看一看CSS定位都具有哪些屬性以及它們的用法。本文屬于前端開發(fā)的初級教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。

定位屬性是指對HTML中的元素進(jìn)行位置確定的一系列方式。CSS總共提供了以下四種定位方式：

流式定位
絕對定位
相對定位
固定定位

與定位相關(guān)的CSS屬性包括以下11個：

width
height
display
position
top
right
bottom
left
z-index
visibility
overflow

一、利用position屬性設(shè)置定位方式：

CSS技術(shù)使用 position 屬性設(shè)置HTML元素的定位方式

CSS技術(shù)使用position設(shè)置HTML元素的定位方式。

首先，我們先來了解一下這四種定位方式的特點(diǎn)：

流式定位：HTML元素默認(rèn)采用該種定位方式。這是指所有的HTML元素從上到下、從左向右按照代碼的書寫順序依次出現(xiàn)。
絕對定位：所有的HTML元素的位置都是相對于頁面左上角來實現(xiàn)定位的。
相對定位：所有的HTML元素的位置都是相對于上一個元素來實現(xiàn)定位的。
固定定位：HTML元素相對于頁面指定位置固定不變，不受垂直滾動條的影響。同時，HTML元素在固定定位的前提下，其元素位置是相對于頁面左上角。

我們一般將上述四種定位方式歸納為兩種：“流式定位”和“非流式定位”。

具體的HTML元素采用哪種定位方式，是通過position屬性來實現(xiàn)的，該屬性有以下四種取值。

static，默認(rèn)值，HTML元素采用“流式定位”。
absolute，HTML元素采用“絕對定位”。
relative，HTML元素采用“相對定位”。
fixed，HTML元素采用“固定定位”。

二、HTML元素的位置屬性：

CSS技術(shù)使用四個屬性設(shè)置HTML非流式定位元素的位置

當(dāng)HTML元素采用“非流式定位”時，可以使用以下四個位置屬性來設(shè)置該元素具體的位置。

left，設(shè)置元素左側(cè)的位置。
right，設(shè)置元素右側(cè)的位置。
top，設(shè)置元素頂部的位置。
bottom，設(shè)置元素底部的位置。

注意：這四個屬性必須使用在“非流式定位”下，“流式定位”是不能使用的。

這四個屬性的取值都可以是帶有單位的數(shù)值。

三、HTML塊級元素的尺寸屬性：

CSS技術(shù)使用兩個屬性設(shè)置塊級元素的尺寸

當(dāng)HTML元素為“塊級元素”時，可以使用以下兩個尺寸屬性來設(shè)置該塊級元素的寬度和高度。

width，設(shè)置塊級元素的寬度。
height，設(shè)置塊級元素的高度。

注意：這兩個屬性必須使用在“塊級元素”之上，“內(nèi)聯(lián)元素”是不能使用的。

這兩個屬性包括以下幾種取值：

auto，自動，塊級元素的寬度和高度隨元素內(nèi)部的內(nèi)容多少而自動變化。
帶有單位的數(shù)值，指定塊級元素的寬度和高度為明確的數(shù)值。
百分比，指定塊級元素的寬度和高度為父元素的百分比。

四、設(shè)置HTML元素的顯示特性：

CSS技術(shù)利用 display 屬性來設(shè)置CSS元素的顯示特性

CSS技術(shù)利用display屬性來設(shè)置CSS元素的顯示特性。

該屬性有多種取值：

none，將HTML元素隱藏。
block，將HTML元素中的內(nèi)聯(lián)元素或其他元素轉(zhuǎn)換為塊級元素。
inline，將HTML元素中的塊級元素或其他元素轉(zhuǎn)換為內(nèi)聯(lián)元素。
inline-block，將HTML元素中的任意元素轉(zhuǎn)換為內(nèi)聯(lián)塊元素。

1、塊級元素（display:block）的特點(diǎn)：

塊級元素獨(dú)占一行。
可以利用width和height屬性為塊級元素設(shè)置寬度和高度。

2、內(nèi)聯(lián)元素（display:inline）的特點(diǎn)：

內(nèi)聯(lián)元素可以在一行內(nèi)顯示多個。
不能利用width和height屬性設(shè)置內(nèi)聯(lián)元素的寬度和高度。

3、內(nèi)聯(lián)塊元素（display:inline-block）的特點(diǎn)：

內(nèi)聯(lián)塊元素結(jié)合了“塊級元素”和“內(nèi)聯(lián)元素”各自的優(yōu)點(diǎn)：

可以利用width和height屬性為內(nèi)聯(lián)塊元素設(shè)置寬度和高度。
內(nèi)聯(lián)塊元素可以在一行內(nèi)顯示多個。

定位屬性還包括三個屬性，小海老師會在下一篇文章中為大家介紹剩下的屬性以及定位功能的具體用法。

文章預(yù)告

下一篇文章中，小海老師會繼續(xù)為大家向下講解CSS定位屬性，下一次我們講解CSS中剩余的三個定位屬性以及定位技術(shù)的使用，希望大家千萬不要錯過！

小海教材

如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。

小海聲明

在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費(fèi)小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關(guān)注一下“小海前端”，因為這些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。

關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅持的走下去。

在線咨詢

上一篇：JavaScript學(xué)習(xí) - 字符編碼
下一篇：CSS寫樣式時，為什么要避免使用標(biāo)簽名

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商