CSS屬性
一、寬和高
width屬性可以為元素設置寬度。
height屬性可以為元素設置高度。
塊級標簽才能設置寬度，內聯標簽的寬度由內容來決定。
div {width: 1000px;background-color: red} /*塊級標簽設置了width會生效*/
span {width: 1000px;background-color: red} /*內聯標簽設置了width不生效*/
二、字體屬性
1、文字字體：font-family
font-family可以把多個字體名稱作為一個“回退”系統來保存。
如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。
body {
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}
2、字體大小：font-size(默認字體大小是12px或者100%)
p {
font-size: 14px;
}
p {
font-size: 100%;
}
3、字體粗細：font-weight
| 值 |
描述 |
| normal |
默認值，標准粗細 |
| bold |
粗體 |
| bolder |
更粗 |
| lighter |
更細 |
| 100~900 |
設置具體粗細，400等同於normal，而700等同於bold |
| inherit |
繼承父元素字體的粗細值 |
div {
font-weight: bold;
font-weight: 800;
}
4、文本顏色
三種方式：
1.顏色的名稱-如：red
2.十六進制值-如: ＃FF0000
3.一個RGB值 - 如: RGB(255,0,0)
還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間。
div {
color: green;
color: #00FF00;
color: rgb(251,97,19);
}
三、文字屬性
1、文字對齊：text-align 屬性規定元素中的文本的水平對齊方式。
| 值 |
描述 |
| left |
左邊對齊 默認值 |
| right |
右對齊 |
| center |
居中對齊 |
| justify |
兩端對齊 |
div {
text-align: center;
}
2、文字裝飾
text-decoration 屬性用來給文字添加特殊效果。
| 值 |
描述 |
| none |
默認。定義標准的文本。 |
| underline |
定義文本下的一條線。 |
| overline |
定義文本上的一條線。 |
| line-through |
定義穿過文本下的一條線。 |
| inherit |
繼承父元素的text-decoration屬性的值。 |
常用的為去掉a標簽默認的自划線：
a {
text-decoration: none;
}
3、首行縮進
text-indent 屬性用來縮進
將段落的第一行縮進 32像素：
p {
text-indent: 32px;
}
四、背景屬性
1、背景相關屬性
1.背景顏色
background-color: red;
2.背景圖片
background-image: url('1.jpg');
3.背景重復
background-repeat: no-repeat;
repeat(默認):背景圖片重復排滿整個網頁
repeat-x：背景圖片只在水平方向上重復
repeat-y：背景圖片只在垂直方向上重復
no-repeat：背景圖片不重復
4.背景位置
background-position: right top;
background-position: 200px 200px;
5.簡寫(背景顏色、圖片地址、重復次數、位置)
上面背景屬性可以直接簡寫成：
background:red url('xx.jpg') no-repeat right top;
6.背景圖片大小background-size
background-size:100% 100%; 讓背景圖片填充滿整個容器(自適應)
7.雪碧圖
有些網站會把很多小圖標放在一張圖片上，然后根據位置去顯示圖片。減少頻繁的圖片請求。
8.background-attachment
background-attachment屬性的默認值是 scroll，也就是說，在默認的情況下，背景會隨文檔滾動，
如果將圖像background-attachment屬性設置為fixed，圖片會相對於當前窗口固定住，因此不會受到滾動的影響
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.box {
width: 100%;
height: 500px;
background: url("pic.JPG") no-repeat center center;
background-attachment: fixed;
background-size:100%;
}
.c1 {
height: 500px;
background-color: red;
}
.c2 {
height: 500px;
background-color: blue;
}
.c3 {
height: 500px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="box"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
背景固定
五、邊框
1、邊框屬性
border-width：邊框粗細
border-style：邊框樣式
border-color：邊框顏色
/*CSS樣式*/
#d1 {
border-width: 2px;
border-style: solid;
border-color: red;
}
可以簡寫：
#d1 {
border: 2px solid red;
}
2、邊框樣式style可取的值
| 值 |
描述 |
| none |
無邊框。 |
| dotted |
點狀虛線邊框。 |
| dashed |
矩形虛線邊框。 |
| solid |
實線邊框。 |
3、除了可以統一設置邊框外還可以單獨為某一個邊框設置樣式
border是對整個邊框進行統一的樣式修改，
我們也可以對某條邊框進行樣式的修改，如下：
#d1 {
border-top-style:dotted;
border-top-color: red;
border-top-width: 100px;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
某一邊框也是可以簡寫：
#d1 {
border-left:solid black 10px;
}
4、border-radius
這個屬性能實現圓角邊框的效果
例如：
向div元素添加圓角邊框：
div {
border:2px solid;
border-radius:25px;
}
圓形邊框：將border-radius設置為長或高的一半即可得到一個圓形。
div {
border:2px solid;
border-radius:50%;
}
六、display屬性
用於控制HTML元素的顯示效果。
| 值 |
意義 |
| display:"none" |
此元素不會被顯示 |
| display:"block" |
此元素將顯示為塊級元素，此元素前后會帶有換行符。 |
| display:"inline" |
此元素會被顯示為內聯元素，元素前后沒有換行符。 |
| display:"inline-block" |
行內塊元素，使元素同時具有行內元素和塊級元素的特點。 |
特點： inline: 1.使元素變成行內元素，擁有行內元素的特性，即可以與其他行內元素共享一行，不會獨占一行. 2.不能更改元素的height，width的值，大小由內容撐開. 3.可以使用padding，margin的left和right產生邊距效果，但是top和bottom就不行. block: 1.使元素變成塊級元素，獨占一行，在不設置自己的寬度的情況下，塊級元素會默認填滿父級元素的寬度. 2.能夠改變元素的height，width的值. 3.可以設置padding，margin的各個屬性值，top，left，bottom，right都能夠產生邊距效果. inline-block: 1.結合了inline與block的一些特點，結合了上述inline的第1個特點和block的第2,3個特點. 2.用通俗的話講，就是不獨占一行的塊級元素，或者說是可以設置寬高的行內元素。
注意： display:"none"與visibility:hidden的區別： visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。 display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
七、CSS盒子模型
1、幾個概念
margin:用於控制盒子與盒子之間的距離
padding:用於控制盒子內容與邊框之間的距離
Border(邊框):圍繞在內邊距和內容外的邊框
Content(內容):盒子的內容，顯示文本和圖像
2、margin外邊距
2-1、具體寫法
.c1 {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
2-2、簡寫
1.四個參數的順序分別是：上 右 下 左(順時針)
.c1 {
margin: 5px 10px 15px 20px;
}
2.三個參數，第一個用於上，第二個用於左 右，第三個用於下
.c1 {
margin: 10px 20px 30px;
}
3.兩個參數的順序：第一個用於上下，第二個用於左右
.c1 {
margin: 10 20;
}
上下外邊距0，左右自動適應
.c1 {
margin: 0 auto;
}
4.一個參數：應用於四邊
.c1 {
margin:10px;
}
3、padding內填充
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
簡寫：四個參數的順序分別是：上 右 下 左
.padding-test {
padding: 5px 10px 15px 20px;
}
padding的簡寫方式和margin類似：
提供一個參數，用於四邊；
提供兩個參數，第一個用於上－下，第二個用於左－右；
如果提供三個參數，第一個用於上，第二個用於左－右，第三個用於下；
提供四個參數值，將按上－右－下－左的順時針順序作用於四邊；
八、float浮動
在CSS 中，任何元素都可以浮動。
浮動元素會生成一個塊級框，而不論它本身是何種元素。
關於浮動的兩個特點：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
1、float的三種取值
left：向左浮動
right：向右浮動
none：默認值，不浮動
2、浮動的副作用
3、clear清除浮動
clear屬性規定元素的哪一側不允許其他浮動元素
| 值 |
描述 |
| left |
在左側不允許浮動元素。 |
| right |
在右側不允許浮動元素。 |
| both |
在左右兩側均不允許浮動元素。 |
| none |
默認值。允許浮動元素出現在兩側。 |
| inherit |
規定應該從父元素繼承 clear 屬性的值。 |
注意：clear屬性只會對自身起作用，而不會影響其他元素。
解決float副作用：要解決哪個盒子的浮動就給哪個盒子應用這個樣式
.clearfix:after {
content: "";
display: block;
clear: both;
}
4、display:"inline-block"布局和float浮動布局區別：
a.不同之處：對元素設置display：inline-block ，元素不會脫離文本流，而float就會使得元素脫離文本流，且還有父元素高度坍塌的效果
b.相同之處：能在某程度上達到一樣的效果
使用場景：
a.對於橫向排列東西來說，我更傾向與使用inline-block來布局，因為這樣清晰，也不用再像浮動那樣清除浮動，害怕布局混亂等等。
b.對於浮動布局就用於需要文字環繞的時候，畢竟這才是浮動真正的用武之地，水平排列的是就交給inline-block了。
5、清除浮動例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
margin: 0;
}
.c1{
border:1px black solid;
}
.c2,.c3{
height:100px;
width:200px;
background-color:red;
border:solid 1px black;
}
.c4{
width:100%;
height:200px;
background-color:deeppink;
}
.left{
float:left;
}
.right{
float:right;
}
.clearfix:after{
content:'';
display:block;
clear:both;
}
</style>
</head>
<body>
<!--可以嘗試第一個div不用clearfix樣式的時候，進行對比-->
<div class="c1 clearfix">
<div class="c2 left"></div>
<div class="c3 right"></div>
</div>
<div class="c4"></div>
</body>
</html>
清除浮動
九、overflow溢出
overflow屬性
| 值 |
描述 |
| visible |
默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden |
內容會被修剪，並且其余內容是不可見的。 |
| scroll |
內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto |
如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit |
規定應該從父元素繼承 overflow 屬性的值。 |
注意：
overflow（水平和垂直均設置）
overflow-x（設置水平方向）
overflow-y（設置垂直方向）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
margin: 0;
}
/*把div設置成一個圓形框*/
.avatar{
height:110px;
width:110px;
border:2px solid red;
border-radius:50%;
overflow:hidden;
}
/*讓圖片填充這個圓框*/
.avatar>img{
width:100%;
}
</style>
</head>
<body>
<div class="avatar">
<img src="pic.JPG">
</div>
</body>
</html>
圓形頭像例子
十、position定位
1、static
static 默認值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。
2、relative（相對定位）：相對標簽原來的位置做的定位，原來的位置還占着。
相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。
要注意的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。
對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
3、absolute(絕對定位)：相對已經定位過的祖先標簽做參照物進行定位，原來的位置會關閉，元素定位后生成一個塊級框，且元素是脫離文檔的(浮起來)
定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素， 那么它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。
元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。
這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
4、fixed（固定）：固定在屏幕的某個位置，固定定位的元素也是脫離文檔的(浮起來)
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考物進行定位，當出現滾動條時，對象不會隨着滾動。
而其層疊通過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，
因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上，被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。
5、例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
margin:0;
}
.c1,.c2,.c3{
height:200px;
width:200px;
}
.c1{
background: red;
}
.c2{
background-color: green;
position: relative;
left: 200px;
top: -200px;
}
.c3{
background: blue;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
相對定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
margin: 0;
}
.c0, .c2, .c3 {
height: 200px;
width: 200px;
}
.c0 {
background-color: blue;
}
.c1 { /*若注釋c1的相對定位，則c2的父元素(c1)沒有進行定位，那么c2就會根據body來定位，c2就會把c3覆蓋了*/
position: relative;
left: 200px
}
.c2 {
background-color: red;
position: absolute;
top: 200px;
}
.c3 {
background-color: green;
}
</style>
</head>
<body>
<div class="c0"></div>
<div class="c1">
<div class="c2"></div>
</div>
<div class="c3"></div>
</body>
</html>
絕對定位
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c1 {
color:red;
background-color: deeppink;
border: 1px solid black;
width: 80px;
height: 40px;
line-height: 40px; /*將行高設置成標簽的高度可以實現垂直居中*/
text-align: center;
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<div class="c1">返回頂部</div>
</body>
</html>
fixed
十一、z-index和opacity
1、z-index
設置對象的層疊順序，數值大的會覆蓋在數值小的標簽之上。z-index 僅能在定位元素上奏效(relative absolute fixed)。 2、opacity：設置透明度
3、例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-color: rgb(0,0,0);*/
background-color: rgba(0,0,0,0.4);
z-index: 99;
/*opacity: 0.4;*/
}
.modal {
background-color: white;
height: 300px;
width: 400px;
z-index: 1000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
}
</style>
</head>
<body>
<div>嘿嘿嘿。</div>
<div class="cover"></div>
<div class="modal">
<form action="">
<p>用戶名<input type="text"></p>
<p>密碼<input type="password"></p>
<p><input type="submit" value="提交"></p>
</form>
</div>
</body>
</html>
模態框
4、rgba(0,0,0,0.4)和 opacity: 0.4的區別
.c1 {
height: 100px;
width: 100%;
color: red;
background-color: rgba(0,0,0,0.4); <!--rgba應用在哪里就只有那里生效，這里只有背景顏色會有透明度-->
}
.c2 {
height: 100px;
width: 100%;
color: red;
background-color: rgb(0,0,0);
opacity: 0.4; <!--整個c2內的所有元素都生效，都有透明度-->
}
總結：絕對定位、固定定位、浮動可以脫離文檔流(但是background-attachment:fixed不可以)
