本節內容:CSS相關屬性2

1、CSS盒子模型 .
2、float浮動
3、overflo溢位屬性
4、position(定位)

一、CSS盒子模型

1、margin:外邊距,控制元素間的距離,整個模型實際佔的大小;
2、border:邊框,文字的邊框,在內邊距和外邊距之間;
3、padding:內邊距,內容到邊框的距離;
4、content:內容,盒子的內容,顯示文字和影象。

1、margin外邊距的寫法

1、普通寫法:

.margin-test{ # 選擇器選擇這個
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
一般瀏覽器會預設給加上一個margin,
所以我們一般寫CSS樣式的時候,都會先寫一個body的上下左右的margin都設定為0.

2、如果將上下兩個標籤都設定了margin是什麼效果

3、推薦使用簡寫:

順序:上右下左
.margin-test {
margin: 5px 10px 15px 20px;
}

4、常見居中:

.mycenter {
margin: 0 auto; #上下0畫素,左右自適應,居中的效果
}
如果你寫的是三個:margin: 10px 20px 10px;意思是上為10,左右為20,下為10

2、padding內填充

寫法跟margin相同:
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}

1、推薦使用簡寫:

順序:上右下左
.padding-test {
padding: 5px 10px 15px 20px;
}
 
補充padding的常用簡寫方式:
提供一個,用於四邊;
提供兩個,第一個用於上-下,第二個用於左-右;
如果提供三個,第一個用於上,第二個用於左-右,第三個用於下;
提供四個引數值,將按上-右-下-左的順序作用於四邊;

二、float浮動

脫離了標準文件流,

1、寫法

.div1{
float: left;
}
 
三種取值
    left:向左浮動
    right:向右浮動

 

    none:預設值,不浮動
先後順序,一般按html寫的順序排,也可以自己寫左右
效果:

2、標籤浮起後,出現的副作用

浮動元素會生成一個塊級框,而不論它本身是何種元素。
 
若父標籤也沒有,設定任何高度
將無法撐起自己的父標籤,會被下面的標籤頂上來,然後浮起的標籤,蓋在便籤上

fe:浮起的副作用(浮起標籤和下面的標籤重疊)

 

解決辦法:

3、浮動元素特點介紹:

浮動元素會生成一個塊級框,而不論它本身是何種元素。
 
浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
 
由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

4、clear清除浮動

為什麼要用清除浮動:
把一個塊級標籤變成一個類似內斂標籤的感覺,不好操控,容易混亂,
所以一般都用浮動來進行佈局。
 
clear屬性規定元素的哪一側不允許其他浮動元素。

 

clear屬性只會對自身起作用,而不會影響其他元素。

1、清除浮動的三種方式

浮動的副作用(父標籤塌陷問題),所以要清除浮動
主要有三種方式:
 
1、固定高度 就是我們剛才的示例,在父標籤裡面加一個其他的標籤
2、偽元素清除法 css來解決
3、overflow:hidden(用溢位屬性解決)

fe1:第一種

fe2:第二種,偽元素清除法(使用較多):

.clearfix:after {
content: "";
display: block;
clear: both;}
CSSCopy

四、overflow溢位屬性 (先看下面的例子)

設定方向
overflow(水平和垂直均設定)
overflow-x(設定水平方向,只出現x軸的滾動條)
overflow-y(設定垂直方向,只出現y軸的滾動條)

1、防止溢位,文字不顯示或者超出文字框

fe1:運用overflow示例,做圓形頭像

運用overflow,做圓形頭像
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圓形的頭像示例</title>
<style>
* {
margin: 0;
padding: 0;
 
}
.header-img {
width: 150px; #如果這個高度和寬度比圖片的畫素小怎麼辦,圖片顯示不全啊,因為使用者上傳的頭像沒準多大畫素的,就需要設定下面哈格.header-mg>img,裡面寫上max-width:100%了
height: 150px;
border: 3px solid white;
border-radius: 50%; #圓形的邊框
overflow: hidden; #溢位的內容隱藏
}
.header-img>img {
max-width: 100%; #相當於將圖片的大小設定為父級標籤的大小來顯示了,因為使用者上傳的頭像的畫素我們是不知道的,就讓它按照父級標籤的大小來,就能放下整個頭像了,就不會出現頭像顯示不全的問題了
    #直接寫width:100%就行,上面寫max-width的意思是如果圖片大於咱們設定的標籤高寬的時候,就按照父級標籤的大小來,比父級標籤的高寬小的時候,就不需要按照父級標籤的大小來了,瞭解一下就行了
 
}
</style>
</head>
<body>
 
<div class="header-img">
</div>
 
</body>
</html>
HTMLCopy

五、position定位

小範圍的佈局一般都是定位做的,大範圍的佈局一般都是用float來做的

1、幾種基本的相關定位

1、static(無定位,咱就不說了,主要看相對和絕對定位)
 
2、relative(相對定位):
相對定位是相對於該元素在文件流中的原始位置,即以自己原始位置左上角為參照物。
元素還佔據著原來文件流的空間,不會出現父級標籤塌陷的問題。
移動方向:
往右移動:right:100px
都是按照元素自己的左上角進行計算的
 
3、absolute(絕對定位)
設定為絕對定位的元素框從文件流完全刪除,也會有父級標籤塌陷的問題
不佔位置,

2、fixed(固定):回到頂部的示例

不管頁面怎麼動,都在整個螢幕的某個位置
物件脫離正常文件流,使用top,right,bottom,left等屬性以視窗為參考點進行定位,當出現滾動條時,物件不會隨著滾動。
 
注意點: 一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。
這 是一個常識性的知識點,因為這是兩個不同的流,一個是浮動流,另一個是“定位流”。
但是 relative 卻可以。因為它原本所佔的空間仍然佔據文件流。

fe:定位程式碼示例

定位程式碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>返回頂部示例</title>
<style>
* {
margin: 0;
}
 
.d1 {
height: 1000px;
 
}
 
.scrollTop {
 
padding: 10px;
text-align: center; #水平居中
position: fixed;
right: 10px; #距離視窗右邊框的距離
bottom: 20px; #距離視窗下邊框的距離
/*height:20px;
    line-height:20;當line-height等於height的值的時候,就能實現一個文字居中的效果 */
}
</style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回頂部</div>
</body>
</html>
HTMLCopy

3、z-index(確定層疊關係,就是誰在前面)

結論:
1、z-index 值表示誰壓著誰,數值大的壓蓋住數值小的,
 
2、只有定位了的元素,才能有z-index,也就是說,不管相對定位,絕對定位,固定定位,
都可以使用z-index,而浮動元素float不能使用z-index
 
3、z-index值沒有單位,就是一個正整數,預設的z-index值為0如果大家都沒有z-index值,
或者z-index值一樣,那麼誰寫在HTML後面,誰在上面壓著別人,定位了元素,永遠壓住沒有定位的元素。
 
4、從父現象:父親慫了,兒子再牛逼也沒用

fe:position的示例,用來定義模態對話方塊

position的示例,用來定義模態對話方塊
#自定義的一個模態對話方塊示例程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定義模態框</title>
<style>
.cover {
#rgba的最後一個引數就是透明度的意思,所以如果我們這樣寫,就不需要寫下面那個opcity了,但是這個只表示的背景顏色的透明度,opcity是標籤的透明度及標籤的內容(包括裡面的文字)及標籤下面的子標籤的透明度
position: fixed;
top: 0;
right: 0; top\right\bottom\left都設定為0,意思就是全屏,這個標籤把全屏都覆蓋了
bottom: 0;
left: 0;
z-index: 998;
#opcity:0.4; #設定元素的透明度
}
 
.modal {
 
position: fixed;
width: 600px;
height: 400px;
left: 50%; #設定了left:50%和top:50%,你就會發現,你這個標籤的左上角相對於頁面的左面是50%,上面是50%,所以我們還要移動視窗,往左移動標籤寬度的一半,往上移動高度的一半就行了。就是下面的margin設定
top: 50%;
margin: -200px 0 0 -300px; #左下右上,別忘了,往左移動要負值,往上移動要負值,因為它的移動是按照自己標籤的左上角來移動的。
z-index: 1000;
}
</style>
</head>
<body>
 
<div class="cover"></div>
<div class="modal"></div>
</body>
</html>
HTMLCopy

六、綜合示例

1、頂部導航選單

頂部導航選單
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>li標籤的float示例</title>
<style>
/*清除瀏覽器預設外邊距和內填充*/
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none; /*去除a標籤預設的下劃線*/
}
 
.nav {
 
height: 40px;
width: 100%;
position: fixed;
top: 0;
}
 
ul {
list-style-type: none; /*刪除列表預設的圓點樣式*/
margin: 0; /*刪除列表預設的外邊距*/
padding: 0; /*刪除列表預設的內填充*/
}
/*li元素向左浮動*/
li {
float: left;
}
 
li > a {
display: block; /*讓連結顯示為塊級標籤*/
padding: 0 15px; /*設定左右各15畫素的填充*/
color: #b0b0b0; /*設定字型顏色*/
line-height: 40px; /*設定行高*/
}
/*滑鼠移上去顏色變白*/
li > a:hover {
color: #fff;
}
 
/*清除浮動 解決父級塌陷問題*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 頂部導航欄 開始 -->
<div class="nav">
<ul class="clearfix">
<li><a href="">玉米商城</a></li>
<li><a href="">MIUI</a></li>
<li><a href="">ioT</a></li>
<li><a href="">雲服務</a></li>
<li><a href="">水滴</a></li>
<li><a href="">金融</a></li>
<li><a href="">優品</a></li>
</ul>
</div>
<!-- 頂部導航欄 結束 -->
</body>
</html>
HTMLCopy

2、小米商城的示例,

按照紅框--黃框--子框--藍框來看整個佈局:

 

產品經理需求–>UI(視覺、互動等各種UI)將這些頁面做成圖片(包括裡面的文字大小圖片大小等都給你準備好,標的很清楚)–>
前端工程師(通過前端程式碼來實現UI的頁面)–>後端工程師(寫提供資料、處理資料的邏輯)–>DBA管理資料

fe:給大家一個css只做動畫效果的方式:

滑鼠移動到標籤上的時候,出現動態效果和陰影的效果:
滑鼠移動到標籤上,出現動態和陰影效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*給標籤加上滑鼠移動上去的一些效果*/
#test{
height: 200px;
border: 1px solid black;
 
}
#test:hover{
box-shadow: 0 5px 10px; /*給標籤加陰影的效果,引數1是水平方向的陰影,引數2的5px是垂直方向上的陰影,引數3是陰影的範圍*/
transform: translate3d(3px,-2px,0); /*滑鼠移動上去之後有個標籤往上臺的效果,三個引數是:x軸,y軸,z軸,現在的效果是y軸方向往上移動2px,x軸往右移動3px*/
transition:all,.2s linear; /*這個的意思是所有的新樣式改變,在0.2秒內慢慢的顯示出來*/
}
 
</style>
</head>
<body>
 
<div id="test"></div>
 
</body>
</html>
HTMLCopy