目錄
Css第二天
本章要點：
l Css盒模型介紹和使用；
l Css元素溢出介紹及使用；
l 內聯元素、塊元素、內聯塊元素；
l 浮動、定位、Css對齊方式；
一、CSS 的盒子模型介紹和使用
1．盒子模型解釋
元素在頁面中顯示成一個方塊，類似一個盒子，CSS 盒子模型就是使用現實中盒 子來做比喻，幫助我們設置元素對應的樣式。盒子模型示意圖如下：
把元素叫做盒子，設置對應的樣式分別爲：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>英萊特科技</title>
<style type="text/css">
.continer{
width: 200px;
height: 200px;
background: pink;
margin: 100px auto;
border: 10px solid black;
padding: 20px;
}
</style>
</head>
<body>
<div class="continer"></div>
</body>
</html>
2．設置邊框
設置一邊的邊框，比如頂部邊框，可以按如下設置：
border-top-color:red;/* 設置頂部邊框顏色爲紅色 */
border-top-width:10px; /* 設置頂部邊框粗細爲 10px */
border-top-style:solid; /* 設置頂部邊框的線性爲實線，常用的有：solid(實線)
dashed(虛線) dotted(點線); */
上面三句可以簡寫成一句：
border-top:10px solid red;
設置其它三個邊的方法和上面一樣，把上面的'top'換成'left'就是設置左邊，換成'right'就是設置右邊，換成'bottom'就是設置底邊。
四個邊如果設置一樣，可以將四個邊的設置合併成一句：
border:10px solid red;
3．設置內間距 padding
設置盒子四邊的內間距，可設置如下：
padding-top：20px;/* 設置頂部內間距 20px */
padding-left:30px;/* 設置左邊內間距 30px */
padding-right:40px;/* 設置右邊內間距 40px */
padding-bottom:50px; /* 設置底部內間距 50px */
上面的設置可以簡寫如下：
padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設置的是 上 右 下 左
四個方向的內邊距值。 */
padding 後面還可以跟 3 個值，2 個值和 1 個值，它們分別設置的項目如下：
padding：20px 40px 50px; /* 設置頂部內邊距爲 20px，左右內邊距爲 40px，底部內邊距爲 50px
*/
padding：20px 40px; /* 設置上下內邊距爲 20px，左右內邊距爲 40px*/ padding： 20px; /* 設置四邊內邊距爲 20px */
4．設置外間距 margin
外邊距的設置方法和 padding的設置方法相同，將上面設置項中的
'padding'換成'margin'就是外邊距設置方法。盒子模型的尺寸
按照下面代碼製作頁面：
實例代碼_07:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box01{
width: 50px;
height: 50px;
background-color: gold;
}
.box02 {
width: 50px;
height: 50px;
background-color: gold;
border: 50px solid #000
}
.box03 {
width: 50px;
height: 50px;
background-color: gold;
border: 50px solid #000;
padding: 50px;
}
</style>
</head>
<body>
<div class="box01">1</div>
<br />
<div class="box02">2</div>
<br />
<div class="box03">3</div>
</body>
</html>
頁面顯示效果如下：
通過上面的頁面得出結論：盒子的 width 和height 設置的是盒子內容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：
思考題型：
1.在佈局中，如果我想增大內容和邊框的距離，又不想改變盒子顯示的尺寸，應該怎麼做？
練習
請製作圖中所示的標題：
5．margin 相關技巧
-
設置元素水平居中: margin:x auto;
-
margin 負值使元素位置及邊框合併
6．外邊距合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
實例代碼_08:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實例代碼_08</title>
<style type="text/css">
.div_01{
width: 200px;
height: 200px;
background-color: orange;
margin-bottom: 100px;
}
.div_02{
width: 200px;
height: 200px;
background-color: gray;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="div_01"></div>
<div class="div_02"></div>
</body>
</html>
7．margin-top 塌陷
在兩個盒子嵌套時候，內部的盒子設置的margin-top 會加到外邊的盒子上，導致內部的盒子 margin-top 設置失敗，解決方法如下：
1、外部盒子設置一個邊框
2、外部盒子設置overflow:hidden
3、使用僞元素類：
.clearfix:before{ conten t: '';
display:table;
}
實例代碼_09:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實例代碼_09</title>
<style type="text/css">
.continer{
width: 400px;
height: 400px;
background-color: deepskyblue;
/*解決方式:*/
/*(1)給父元素設置overflow:hidden*/;
/*overflow:hidden;*/
/*(2)給父元素添加邊框屬性*/
/*border: 1px solid black;*/
}
/*(3)使用僞類元素 解決*/
.continer:before{
content: '';
display: table;
}
.iner{
width: 200px;
height: 200px;
background-color: pink;
/*產生margin-top塌陷問題*/
margin-top: 100px;
}
</style>
</head>
<body>
<div class="continer">
<div class="iner"></div>
</div>
</body>
</html>
二、CSS 元素溢出
當子元素的尺寸超過父元素的尺寸時，需要設置父元素顯示溢出的子元素的方式， 設置的方法是通過 overflow 屬性來設置。
overflow 屬性介紹：
1、visible 默認值。內容不會被修剪，會呈現在元素框之外。
2、hidden 內容會被修剪，並且其餘內容是不可見的，此屬性還有清除浮動、清除margin-top 塌陷的功能。
3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
4、auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。
5、inherit 規定應該從父元素繼承 overflow 屬性的值。
實例代碼_10:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實例代碼_10</title>
<style type="text/css">
.continer{
width: 300px;
height: 200px;
margin: 100px auto;
background-color: hotpink;
/*解決方式:使用overflow屬性*/
/*overflow: hidden;*/
overflow: auto;
/*overflow: scroll;*/
}
</style>
</head>
<body bgcolor="gainsboro">
<div class="continer">
學的不僅是技術更是夢想,再牛逼的夢想也抵不住你傻逼似的堅持.
元素溢出是指子元素的尺寸超出父元素時,需要設置父元素顯示溢出的子元素的方式
設置的方式是通過overflow屬性
overflow 的設置項：
1、visible 默認值。內容不會被修剪，會呈現在元素框之外。
2、hidden 內容會被修剪，並且其餘內容是不可見的，此屬性還有清除浮動、清除margin-top 塌陷的功能。
3、scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
4、auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。
5、inherit 規定應該從父元素繼承 overflow 屬性的值。
</div>
</body>
</html>
三、塊元素、內聯元素、內聯塊元素
元素就是標籤，佈局中常用的有三種標籤，塊元素、內聯元素、內聯塊元素，瞭解這三種元素的特性，才能熟練的進行頁面佈局。
1．**塊元素**
塊元素，也可以稱爲行元素，佈局中常用的標籤如：div、p、ul、li、h1~h6、dl、
dt、dd 等等都是塊元素，它在佈局中的行爲：
支持全部的樣式
如果沒有設置寬度，默認的寬度爲父級寬度 100% 盒子佔據一行、即使設置了寬度同樣也是父級寬度100%。
實例代碼_11:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div_01{
width: 500px;
height: 200px;
background: plum;
}
.inner{
/*子元素沒有設置寬度,其寬度爲 父元素的100%*/
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div class="div_01">父級div元素
<div class="inner">子級div元素</div>
</div>
</body>
</html>
2．**內聯元素**
內聯元素，也可以稱爲行內元素，佈局中常用的標籤如：a、span、em、b、strong、
i 等等都是內聯元素，它們在佈局中的行爲：
Ø 支持部分樣式（不支持寬、高、margin上下、padding 上下）
Ø 寬高由內容決定
Ø 盒子並在一行
Ø 代碼換行，盒子之間會產生間距
Ø 子元素是內聯元素，父元素可以用text-align 屬性設置子元素水平對齊方式，用line-height 屬性值設置垂直對齊方式
解決內聯元素間隙的方法
1、去掉內聯元素之間的換行
2、將內聯元素的父級設置 font-size 爲 0，內聯元素自身再設置 font-size
實例代碼_12:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實例代碼_12</title>
<style type="text/css">
a{
background: pink;
width: 200px;
height: 200px;
border: 2px solid red;
}
span{
/*元素span設置寬高失效,因爲是內聯元素*/
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body
style="font-size: 0px;">
<!--內聯元素並在文檔流的一行顯示,不會獨佔一行. 並且設置寬高不起作用-->
<!--重點: 內聯元素 之間的縫隙問題?
解決方案:
(1)取消內聯元素的之間的換行: 如下顯示-->
<!--<a href="http://www.yltedu.com">英萊特科技</a><span>span標籤也是內聯元素,設置寬高失效</span>-->
<!--(2)給其父元素添加font-size:0px 就可解決 縫隙問題 但是要給其單獨設置字體樣式-->
<a href="http://www.yltedu.com"
style="font: normal 20px 仿宋;">英萊特科技</a>
<span style="font: normal 20px 仿宋;">span標籤也是內聯元素,設置寬高失效</span>
</body>
</html>
3．**內聯塊元素**
內聯塊元素，也叫行內塊元素，是新增的元素類型，現有元素沒有歸於此類別的，img 和input元素的行爲類似這種元素，但是也歸類於內聯元素，我們可以用 display 屬性將塊元素或者內聯元素轉化成這種元素。它們在佈局中表現的行爲：
Ø 支持全部樣式
Ø 如果沒有設置寬高，寬高由內容決定
Ø 盒子並在一行
Ø 代碼換行，盒子會產生間距
子元素是內聯塊元素，父元素可以用 text-align 屬性設置子元素水平對齊方式，用 line-height 屬性值設置子元素垂直對齊方式
這三種元素，可以通過 display 屬性來相互轉化，不過實際開發中，塊元素用得比較多，所以我們經常把內聯元素轉化爲塊元素，少量轉化爲內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了。
display 屬性
display 屬性是用來設置元素的類型及隱藏的，常用的屬性有：
1、none 元素隱藏且不佔位置
2、block 元素以塊元素顯示
3、inline 元素以內聯元素顯示
4、inline-block 元素以內聯塊元素顯示
實例代碼_13:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實例代碼_13</title>
<style type="text/css">
/*實現將內聯元素a轉換爲塊元素以及行內塊元素*/
a{
width: 180px;
height: 30px;
background: orangered;
color: black;
text-decoration: none;
/*(1)使用display:block轉換爲塊元素*/
/*display: block;*/
/*(2)使用display:inline-block轉換爲行內塊元素*/
/*display: inline-block;*/
}
/*ul和li都是塊元素: 所以佔據一行顯示*/
ul li{
list-style: none;
border: 1px solid cornflowerblue;
width: 100px;
height: 30px;
/*使用display:inline-block轉換爲內聯塊元素*/
display: inline-block;
}
</style>
</head>
<body>
<!--內聯元素a-->
<a href="http://www.yltedu.com">點擊進入英萊特官方網站(1)</a>
<a href="http://www.yltedu.com">點擊進入英萊特官方網站(2)</a>
<!--塊元素h1~h6/ p / ul和li等-->
<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>
</body>
</html>