CSS精靈圖
作用：CSS精靈圖是一種圖像合成技術(shù)，可以減少請求的次數(shù)环葵，以及降低服務(wù)器處理壓力察皇。
使用：需要配合背景圖片和背景圖片定位來操作使用。
利用fireworks查看圖片像素及位置時凌净，需要打開圖層界面進(jìn)行鎖定后再進(jìn)行查詢。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
<style>
.container{
width: 300px;
height: 150px;
background-color: #e8e2d4;
}
.box1{
width: 162px;
height: 126px;
display: inline-block;
background: url(../images/a-z.jpg) -425px -535px no-repeat;
}
.box2{
width: 127px;
height: 139px;
display: inline-block;
background: url(../images/a-z.jpg) -167px -376px no-repeat;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
邊框?qū)傩?/h3>
邊框就是環(huán)繞在標(biāo)簽寬度和高度周圍的線條屋讶；
格式：
- 連寫（同時設(shè)置4條邊的邊框）：
border：邊框的寬度 邊框的樣式 邊框的顏色冰寻；
注意點(diǎn)：
1. 連寫中顏色可以省略，省略后默認(rèn)的顏色是黑色皿渗；
2.連寫中的樣式不能省略斩芭，省略后無法看到邊框轻腺；
3.連寫中的寬度可以省略，省略后還是可以看到邊框划乖。
2.1 連寫（分別設(shè)置4條邊的邊框）：
border-top：邊框的寬度 邊框的樣式 邊框的顏色贬养；
border-right：邊框的寬度 邊框的樣式 邊框的顏色；
border-bottom：邊框的寬度 邊框的樣式 邊框的顏色迁筛；
border-left：邊框的寬度 邊框的樣式 邊框的顏色煤蚌；
2.2 連寫（分別設(shè)置4條邊的邊框）：
border-width：上 右 下 左
border -style：上 右 下 左
border-color：上 右 下 左
注意點(diǎn)：
1. 屬性賦值的順序都是按照順時針賦值耕挨，即： 上 右 下 左细卧。
2. 這三個屬性的取值省略時的規(guī)律：
上 右 下 左 >上 右 下 >左邊的取值與右邊一致；
上 右 下 左>上 右 >左邊與右邊取值相同筒占，下邊和上邊的取值相同贪庙；
上 右 下 左>上 >其它方向的屬性均與上邊一致。
3.非連寫(方向+要素):
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>邊框?qū)傩?lt;/title>
<style>
.box{
width: 100px;
height: 100px;
background-color:palevioletred ;
/*border: 5px solid cornflowerblue; */
/*border-top:5px solid cornflowerblue;*/
/*border-right:5px solid red;*/
/*border-bottom:5px solid deepskyblue;*/
/*border-left:5px solid yellow;*/
/*border-width: 5px;*/
/*border-style:solid;*/
/*border-color: cornflowerblue red deepskyblue yellow ;*/
border-left-width: 20px;
border-left-style: double;
border-left-color:deepskyblue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
內(nèi)邊距
定義：邊框和內(nèi)容之間的距離就是內(nèi)邊距
格式：
- 非連寫:
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ; - 連寫:
padding: 上 右 下 左;
這三個屬性的取值省略時的規(guī)律 - 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣;
- 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣;
3.上 右 下 左 > 上 > 右下左邊取值和上邊一樣;
注意點(diǎn):
- 給標(biāo)簽設(shè)置內(nèi)邊距之后, 標(biāo)簽占有的寬度和高度會發(fā)生變化;
- 給標(biāo)簽設(shè)置內(nèi)邊距之后, 內(nèi)邊距也會有背景顏色翰苫。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>內(nèi)邊距</title>
<style>
.box1{
width: 150px;
height: 80px;
border: 5px solid palevioletred;
padding-top:5px;
background-color: deepskyblue;
}
.box2{
width: 150px;
height: 80px;
padding: 5px 10px 20px 40px;
border: 5px solid palevioletred;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="box1">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr/>
<div class="box2">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
</body>
</html>
外邊距
定義：標(biāo)簽和標(biāo)簽之間的距離就是外邊距
格式：
- 非連寫
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ; - 連寫
margin: 上 右 下 左;
3.這三個屬性的取值省略時的規(guī)律： - 上 右 下 左 > 上 右 下 > 左邊的取值和右邊的一樣止邮；
- 上 右 下 左 > 上 右 > 左邊的取值和右邊的一樣 下邊的取值和上邊一樣；
- 上 右 下 左 > 上 > 右下左邊取值和上邊一樣奏窑；
注意點(diǎn):外邊距的那一部分是沒有背景顏色的导披。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>內(nèi)邊距</title>
<style>
.box1{
width: 150px;
height: 80px;
border: 5px solid palevioletred;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 40px;
margin-left: 80px;
background-color: deepskyblue;
}
.box2{
width: 150px;
height: 80px;
border: 5px solid palevioletred;
margin: 10px 20px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div class="box1">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr/>
<div class="box2">我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
<hr/>
</body>
</html>
外邊距合并現(xiàn)象：
外邊距在水平方向會出現(xiàn)疊加，但是在垂直方向不會埃唯，外邊距的大小以較大的那個來顯示撩匕。
外邊距合并
CSS盒模型
定義：CSS盒子模型僅僅是一個形象的比喻, HTML中所有的標(biāo)簽都是盒子。
結(jié)論：
- 在HTML中所有的標(biāo)簽都可以設(shè)置(以裝有手機(jī)的機(jī)盒為例):
寬度/高度 == 指定可以存放內(nèi)容的區(qū)域;
內(nèi)邊距 == 填充物;
邊框 == 盒子自己本身;
外邊距 == 盒子和盒子之間的間隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒模型</title>
<style>
span,a,b,strong{
display: inline-block;
width: 100px;
height: 100px;
border: 6px solid #000;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<span>我是span</span>
<a href="#">我是超鏈接</a>
<b>我是加粗</b>
<strong>我是強(qiáng)調(diào)</strong>
</body>
</html>
- 盒模型的寬帶和高度：
- 內(nèi)容的寬度和高度：
就是通過width/height屬性設(shè)置的寬度和高度- 元素的寬度和高度
寬度 = 左邊框 + 左內(nèi)邊距 + width + 右內(nèi)邊距 + 右邊框
高度 同理可證- 元素空間的寬度和高度
寬度 = 左外邊距 + 左邊框 + 左內(nèi)邊距 + width + 右內(nèi)邊距 + 右邊框 + 右外邊距
高度 同理可證
- box-sizing:
- CSS3中新增了一個box-sizing屬性, 這個屬性可以保證我們給盒子新增padding和border之后, 盒子元素的寬度和高度不變墨叛。
- box-sizing屬性是如何保證增加padding和border之后, 盒子元素的寬度和高度不變止毕。和我們前面學(xué)習(xí)的原理一樣, 增加padding和border之后要想保證盒子元素的寬高不變, 那么就必須減去一部分內(nèi)容的寬度和高度。
- box-sizing取值：
- content-box
元素的寬高 = 邊框 + 內(nèi)邊距 + 內(nèi)容寬高
- content-box
- border-box
元素的寬高 = width/height的寬高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-sizing屬性</title>
<style>
.content{
width: 300px;
height: 300px;
background-color: red;
}
.aside{
width: 100px;
height: 200px;
background-color: green;
float: left;
}
.article{
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: blue;
float: right;
border: 20px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
</body>
</html>
注意點(diǎn)1:
- 如果兩個盒子是嵌套關(guān)系, 那么設(shè)置了里面一個盒子頂部的外邊距, 外面一個盒子也會被頂下來漠趁；
- 如果外面的盒子不想被一起頂下來,那么可以給外面的盒子添加一個邊框?qū)傩裕?/li>
- 在企業(yè)開發(fā)中, 一般情況下如果需要控制嵌套關(guān)系盒子之間的距離, 應(yīng)該首先考慮padding, 其次再考慮margin扁凛，margin本質(zhì)上是用于控制兄弟關(guān)系之間的間隙的。
注意點(diǎn)2:
1.在嵌套關(guān)系的盒子中, 我們可以利用margin: 0 auto;的方式來讓里面的盒子在外面的盒子中水平居中闯传；
2.margin: 0 auto; 只對水平方向有效, 對垂直方向無效谨朝。
盒子居中和內(nèi)容居中
1.text-align:center;和margin:0 auto;區(qū)別:
text-align:center:用于設(shè)置盒子中存儲文字和圖片水平居中；
margin:0 auto：用于設(shè)置盒子水平居中甥绿。
清空默認(rèn)邊距
在企業(yè)開發(fā)中為了更好的控制盒子的寬高字币，一般會清除系統(tǒng)默認(rèn)的邊距*{margin:0;padding:0;}
注意點(diǎn)：通配符選擇器一般會遍歷所有的標(biāo)簽，性能不好妹窖。
