屬性—文本
- text-indent:2em; 設(shè)置首行縮進(jìn)漱挚。
- text-align: 設(shè)置文本的位置
- center:設(shè)置內(nèi)容在容器的水平方向上居中同辣。
- left:設(shè)置內(nèi)容在窗口的水平方向上靠左
- right:設(shè)置內(nèi)容在容器的水平方向上靠右
- text-decoration: 設(shè)置文本的裝飾
- none:沒有任何裝飾
- underline:下劃線
- margin: 0 auto; 設(shè)置容器自身水平居中。
font-weight:bold;
font-style:italic;
text-decoration:underline;
屬性—背景
background-color: 設(shè)置背景顏色
background-image: 設(shè)置背景圖片
background-image:url(圖片的路徑);
默認(rèn)情況下圖片如果比容器要小，它會平鋪滿盒子叛拷。并且padding區(qū)域有背景圖
background-repeat: 設(shè)置背景是否平鋪：
no-repeat:不平鋪
repeat-x：在水平方向上平鋪
repeat-y:在垂直方向上平鋪
repeat:平鋪
background-position: 設(shè)置背景圖片的位置
background-attachment:fixed; 設(shè)置背景否固定
fixed：背景會被固定住腾窝，即不會被滾動條滾走
background-postion: x y;
注意：x,y可以是具體的數(shù)值，也可以是一些英文單詞盈匾。
x軸（水平方向）: left 左 center 中 right 右
y軸（垂直方向）: top 上 center 中 bottom下
定位屬性可以是負(fù)數(shù)：背景的連寫方式：
background: background-color background-image background-repeatbackground-position;
比如：background:blue url(images/wuyifan.jpg) no-repeat 100px 100px;
元素與元素之間的嵌套
1.行內(nèi)元素
代表標(biāo)簽：a,span,b,u,i,s,strong,em,ins,del
特點(diǎn)：
一行里面可以顯示多個(gè)
無法設(shè)置寬高
大小由內(nèi)容來決定
缺點(diǎn)：不能設(shè)置寬高
屬性：display: inline
2.塊級元素
代表標(biāo)簽：p,h1-h6,div,ul,li,ol,li,dl,dt,dd
特點(diǎn)：獨(dú)占一行
可以設(shè)置寬高
默認(rèn)寬度一整行
缺點(diǎn)：獨(dú)占一行腾务。
屬性： display:block
3.行內(nèi)塊級元素
代表標(biāo)簽：img,input
特點(diǎn)：可以設(shè)置寬高
一行內(nèi)可顯示多個(gè)
屬性：display:inline-block
元素之間顯示方式切換：修改display屬性！
比如：想設(shè)置塊級元素在同一行顯示威酒，可以設(shè)置display: inline窑睁。行內(nèi)塊元素與行內(nèi)塊元素之間有間隙，為了讓他們之間緊挨著葵孤，可是給他們都添加浮動：float：left
4.元素之間的嵌套
標(biāo)簽之間是不能夠隨意嵌套的担钮。
如果一定要嵌套，要滿足下面幾條：行內(nèi)元素只能包含行內(nèi)元素塊級元素可以包含所有的行內(nèi)元素和部分塊級元素尤仍。p標(biāo)簽箫津，h標(biāo)簽都不能包含塊級元素
5.偽類
1.錨偽類：
- a:link 給a標(biāo)簽設(shè)置沒有被訪問過的樣式
- a:visited 給a標(biāo)簽設(shè)置被訪問過的樣式
- a:hover 給a標(biāo)簽設(shè)置鼠標(biāo)懸停時(shí)的樣式
- a:active 給a標(biāo)簽設(shè)置被點(diǎn)擊的樣式
代碼：
a: link {
color: red;
font-size: 30px;
}
注意：
- 在使用的時(shí)候一定遵守這樣的順序: a:link,a:visited,a:hover,a:active，否則會失效宰啦！
- 記憶方法：愛恨原則：love-hate
- 有些錨偽類除了可以作用在a標(biāo)簽上還可以作用來其它標(biāo)簽上：
- :link 只能用于a標(biāo)簽
- :visited只能用于a標(biāo)簽
- :hover 其它標(biāo)簽也可以使用這個(gè)偽類
- :active 其它標(biāo)簽也可以使用這個(gè)偽類
- 超鏈接的美化
- a標(biāo)簽在使用的時(shí)候苏遥，非常的難。因?yàn)椴粌H僅要控制a這個(gè)盒子赡模，也 要控制它的偽類田炭。
- 我們一定要將a標(biāo)簽寫在前面，:link漓柑、:visited教硫、:hover、:active這些偽類寫在后面辆布。
- a標(biāo)簽中瞬矩，描述盒子；偽類中描述文字的樣式锋玲、背景
.nav ul li a{
display: block;這里必須設(shè)成塊級景用！
width: 120px;
height: 40px;
}
.nav ul li a:link ,.nav ul li a:visited{
text-decoration: none;
background-color: yellowgreen;
color:white;
}
.nav ul li a:hover{
background-color: purple;
font-weight: bold;
color:yellow;
}
記住，所有的a不繼承text惭蹂、font這些東西伞插。因?yàn)閍自己有一個(gè)偽類的權(quán)重割粮。
最標(biāo)準(zhǔn)的，就是把link媚污、visited穆刻、hover都要寫。但是前端開發(fā)工程師在大量的實(shí)踐中杠步，發(fā)現(xiàn)不寫link氢伟、visited瀏覽器也挺兼容。所以可以把就把a(bǔ)標(biāo)簽簡化：
a:link幽歼、a:visited都是可以省略的朵锣，簡寫在a標(biāo)簽里面。也就是說甸私，a標(biāo)簽涵蓋了link诚些、visited的狀態(tài)。
.nav ul li a{
display: block;
width: 120px;
height: 50px;
text-decoration: none;
background-color: purple;
color:white;
}
.nav ul li a:hover{
background-color: orange;
}
6.行高：line-height
定義：兩行文本之間基線的距離就是做行高皇型。
- 默認(rèn)情況下一行文本的行高分為：上間距+文本的高度+下間距诬烹，并且上間距是等于下間距的。所以如果行高等于容器的高度那么元素在父容器中垂直居中弃鸦！
- 行高是可以繼承的绞吁。
- 行高的單位：
a.具體的像素值
b.使用em：em指的是當(dāng)前標(biāo)簽設(shè)置的字體大小。如果當(dāng)前標(biāo)簽字體大小為16px唬格，那么2em=32px家破，如果當(dāng)前標(biāo)簽字體大小為20px，那么3em=60px;
c.使用%百分號：與em一樣购岗，如果當(dāng)前字體大小為18px汰聋，那么 line-height:200%=36px;
d.可以什么單位都不帶：與em一樣，也是當(dāng)前標(biāo)簽的字體大小為基數(shù)喊积。
注意 - 在設(shè)置行高的時(shí)候烹困，如果單位是em或%，將來行高會先計(jì)算出來結(jié)果再繼承給子元素乾吻。
- 在設(shè)置行高的時(shí)候髓梅，如果單位是沒有，將來行高會先繼承給子元素再計(jì)算出行高溶弟。
- font屬性
font連寫：font: font-style font-weight font-size/line-heightfont-family
為了防止用戶電腦里面女淑，沒有微軟雅黑這個(gè)字體瞭郑。就要用英語的逗號辜御，隔開備選字體，就是說如果用戶電腦里面屈张，沒有安裝微軟雅黑字體擒权，那么就是宋體：
font-family: "微軟雅黑","宋體";
- 備選字體可以有無數(shù)個(gè)袱巨，用逗號隔開。
- 我們要將英語字體碳抄，放在最前面愉老，這樣所有的中文，就不能匹配英語字體剖效，就自動的變?yōu)楹竺娴闹形淖煮w：
font-family: "Times New Roman","微軟雅黑","宋體";
- 所有的中文字體嫉入，都有英語別名，我們也要知道：
微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
- 宋體的英語別名：
font-family: "SimSun";
- font屬性能夠?qū)ont-size璧尸、line-height咒林、font-family合三為一：
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
7.盒子模型
- 在寫一個(gè)html頁面的時(shí)候，其實(shí)就相當(dāng)于在這個(gè)頁面中疊盒子爷光！
- 思想：萬物皆盒子垫竞。
- 具體內(nèi)容：
盒子的擋板---------border
盒子的泡沫---------padding
盒子中的物品--------內(nèi)容：width、height
盒子與盒子之間的距離---------margin
border
１.1 border-color:邊框的顏色
border-top-color
border-right-color
border-bottom-color
border-left-color
１.2 border-width:邊框的寬度
border-top-width
border-right-width
border-bottom-width
border-left-width
１.3 border-style:邊框的樣式
border-top-style
border-right-style
border-bottom-style
border-left-style
取值：solid：實(shí)線 dashed：虛線 dotted：點(diǎn)線
１.4 邊框的連寫方法：border:border-width border-style border-color;
１.5 去掉單元格之間的間隙border-collapse: collapse;
padding
作用：設(shè)置盒子的內(nèi)容與邊框之間的距離蛀序。
取值：
padding: 40px;給上右下左所有的內(nèi)邊距都設(shè)置了40像素的距離
padding: 40px 80px;給上下內(nèi)邊距設(shè)置了40像素欢瞪，下左右邊距設(shè)置了80像素
padding: 40px 60px 80px;給上邊距設(shè)置了40像素，左右設(shè)置60像素徐裸，下設(shè)置80像素
padding: 40px 60px 80px 100px;以順時(shí)針方向進(jìn)行設(shè)置遣鼓，依次為上右下左
padding-top padding-right padding-bottom padding-lef
注意：
小屬性層疊大屬性，不要把小屬性寫在大屬性上面重贺，會被大屬性層疊
padding: 20px;
padding-left: 30px;
- 這種寫法是錯(cuò)誤的
padding-left: 30px;
padding: 20px;
- padding（盒子中的填充物）會改變盒子的大衅┱（跟日常生活中有區(qū)別），特殊情況下padding不會改變盒子的大忻世选：
- 當(dāng)一個(gè)大盒子包含一個(gè)小盒子曾我，并且大小盒子都是塊級元素，而且小盒子的寬是繼承自大盒子的話健民，那么設(shè)置小盒子的padding-left和padding-right不會改變小盒子的大小抒巢。
- 小盒子的寬度會繼承自大盒子，但是小盒子的高度不會繼承自大盒子秉犹！
<style>
.father{
background:red;
width:500px;
height:300px;
}
.son{
background:blue;
height:150px;
padding-left:10px;
}
</style>
<div class="father">
<divclass="son">追命</div>
</div>
3.margin
作用：設(shè)置盒子與盒子之間的距離蛉谜。
取值：
margin: 10px;給上右下左所有的外邊距都設(shè)置了10像素的距離。
margin: 10px 20px;給上下外邊距設(shè)置了10像素崇堵，左右外邊距設(shè)置了20像素
margin: 10 px 20px 40px;上10px型诚，左右20px，下40
margin:10px 20px 40px 80px;上10鸳劳，右20狰贯，下40，左80
maring-top margin-right margin-bottom margin-left
** 注意**：很多標(biāo)簽?zāi)J(rèn)帶有margin和padding涵紊，所以將來進(jìn)行頁面的布局的時(shí)候一定要清除這些標(biāo)簽的默認(rèn)的margin和padding.
例如：
1)body標(biāo)簽?zāi)J(rèn)帶有margin: 8px的屬性
2)p標(biāo)簽?zāi)J(rèn)帶有margin: font-size 0;
3)h標(biāo)簽也默認(rèn)帶有margin-top和margin-bottom
4)ul默認(rèn)帶有上下的margin以及左邊的padding
......
清除的方法：
- {
margin: 0;
padding: 0;
}
注：width和height指的是內(nèi)容的寬和高摸柄，background指的是內(nèi)容的填充padding的顏色驱负！
