一、初識盒模型
html中所有的元素都被視為一個矩形盒子岔霸，從中心到外部依次包含：內(nèi)容區(qū)域薛躬、內(nèi)邊距padding、邊框border呆细、外邊距margin型宝。
盒模型圖
二八匠、內(nèi)、外邊距
| 屬性 | 定義 |
|---|---|
| magin-top | 上-外邊距 |
| margin-right | 右-外邊距 |
| margin-bottom | 下-外邊距 |
| margin-left | 左-外邊距 |
| 屬性 | 定義 |
|---|---|
| padding-top | 上-內(nèi)邊距 |
| padding-right | 右-內(nèi)邊距 |
| padding-bottom | 下-內(nèi)邊距 |
| padding-left | 左-內(nèi)邊距 |
- 內(nèi)趴酣、外邊距只有大小梨树，沒有顏色及樣式
- 設(shè)置上右下左等值的內(nèi)、外邊距
padding: 20px; /*上右下左為20像素的內(nèi)邊距*/
margin: 20px; /*上右下左為20像素的外邊距*/
- 單獨設(shè)置某一邊的內(nèi)岖寞、外邊距大小
margin-top: 10px; /*上-外邊距為10像素*/
margin-right: 20px; /*右-外邊距為20像素*/
margin-bottom: 30px; /*下-外邊距為30像素*/
margin-left: 40px; /*左-外邊距為40像素*/
--
padding-top: 10px; /*上-內(nèi)邊距為10像素*/
padding-right: 20px; /*右-內(nèi)邊距為20像素*/
padding-bottom: 30px; /*下-內(nèi)邊距為30像素*/
padding-left: 40px; /*左-內(nèi)邊距為40像素*/
- 內(nèi)抡四、外邊距只有大小，沒有顏色及樣式仗谆，他們是透明的指巡。但會呈現(xiàn)背景色和背景圖像。
- 元素的背景顏色（或背景圖像）會延伸到內(nèi)邊距下隶垮，但不會延伸到外邊距下藻雪。
三、邊框——border
- 邊框樣式
border-style: solid; /*實線*/
border-style: double; /*雙線*/
border-style: groove; /*槽線*/
border-style: outset; /*外凸*/
border-style: dotted; /*虛線或點線*/
border-style: dashed; /*破折線*/
border-style: inset; /*內(nèi)凹*/
border-style: ridge; /*脊線*/
效果圖
- 邊框?qū)挾?br>
使用
border-width屬性來控制邊框?qū)挾壤晖蹋瑢傩灾禐殛P(guān)鍵字或像素勉耀。
關(guān)鍵字為：thin，medium蹋偏，thick
border-widht: thin; /*細(xì)*/
border-widht: medium; /*中等*/
border-widht: thick; /*粗*/
border-widht: 5px;
- 邊框顏色
使用border-color屬性指定邊框顏色便斥，跟字體顏色設(shè)定一樣，使用顏色名威始、rgb值枢纠、十六進(jìn)制碼都可以。
border-color: red;
border-color: rgb(100%, 0%, 0%);
border-color: #ff0000;
- 指定某一邊的邊框樣式字逗、寬度京郑、顏色
單獨設(shè)置某一邊的邊框同單獨設(shè)置某一邊的內(nèi)外邊距一樣，只是邊框涉及到樣式葫掉、寬度、顏色跟狱。
使用border-top俭厚、border-bottom、border-left驶臊、border-right加上style挪挤、width、color來分別表示上关翎、下扛门、左、右邊框的樣式纵寝、寬度论寨、和顏色莺奔。
例子：
border-top-style: solid;
border-top-width: thin;
border-top-color: red;
--
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: red;
--
border-left-style: solid;
border-left-width: thin;
border-left-color: red;
--
border-right-style: solid;
border-right-width: thin;
border-right-color: red;
- 指定邊框圓角
- 指定邊框四周為圓角
border-radius: 15px;
四周圓角效果圖
- 指定某一邊邊框為圓角
border-top-left-radius: 3em;
border-top-right-radius: 3em;
border-bottom-right-radius: 3em;
border-bottom-left-radius: 3em;
效果圖
border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 0;
效果圖
- 增加背景圖片
background-image: url(image/background.gif);
- 調(diào)整背景圖片的位置
background-image: url(image/background.gif);
background-position: top left; /*背景圖放在左上角*/
- 背景圖是否重復(fù)
默認(rèn)背景圖是“平鋪”的方式顯示蠢熄，可設(shè)置不重復(fù)或在某一方向重復(fù)
background-image: url(image/background.gif);
background-position: top left; /*背景圖放在左上角*/
--
background-repeat: repeat; /*默認(rèn)平鋪*/
background-repeat: no-repeat; /*不重復(fù)*/
background-repeat: repeat-x; /*水平方向重復(fù)*/
background-repeat: repeat-y; /*垂直方向重復(fù)*/
background-repeat: inherit; /*按父元素的設(shè)置來處理*/
四、class屬性和id屬性
-
class屬性
首先要在HTML中加入一個類，需要使用<class>屬性噩死，再為其提供一個值。
例子：
<p class="greentea">
示例段落...
</p>
然后再在CSS中創(chuàng)建一個類選擇器今布。
例子：
p.greentea{
color:green;
}
先選擇元素p,再選擇它的類名greentea凌那，中間用一個.隔開。這樣就會選擇greentea類中的所有段落的文本為綠色昌简。
- 使用
".classname"可以選擇屬性這個類的所有元素
例子：
.greentea{
color:greet;
}
此規(guī)則中占业，所有屬性值（屬性的類名）為greentea的元素的文本都會成為綠色
- 可以在一個
class屬性中放入多個類名，中間用空格隔開纯赎，這個元素就屬于多個類谦疾。
例子：
<p class="greentea raspberry blueberry">
2.id屬性
為元素增加一個id屬性
<p id="footer">greentea raspberry blueberry</p>
在CSS中選擇這個值為：footer的id,需要在footerid前加#字符
#footer{ /* 選擇id為footer的任意元素*/
color: greet;
}
--
p#footer{ /* 選擇id為footer的<p>元素*/
color: greet;
}
id選擇器只于頁面一個元素相匹配，id必須是唯一性址否！
五餐蔬、在HTML中引用多個樣式表
- 下面html中引用了3個樣式表，從上到下順序很重要佑附，最下面的樣式表優(yōu)先級最高樊诺。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
--
<link type="text/css" rel="stylesheet" href="lounge.css" media="screen and (min-width: 481px)">
--
<link type="text/css" rel="stylesheet" href="lounge-mobile.css" media="screen and (max-width: 480px)">
--
<link type="text/css" rel="stylesheet" href="lounge-print.css" media="print">
--
</head>
<body>
......
</body>
</html>
- 為多個設(shè)備設(shè)定不一樣的樣式
- 在HTML中使用
media屬性，創(chuàng)建媒體查詢來指定設(shè)備音同，如手機(jī)词爬、平板等。
<link href="lounge.css" rel="stylesheet"
media="screen and (max-device-width: 480p) ">
/*此規(guī)則應(yīng)用到屏幕寬度不超過480px的設(shè)備*/
- 在css中增加創(chuàng)建媒體查詢
@media screen and (min-device-width: 481px) /*設(shè)備屏幕寬度大于481px*/ {
#guarantee{
margin-right: 250px;
}
}
/*@media+媒體查詢+{應(yīng)用于此設(shè)備的規(guī)則}*/
