一丶浮動的補充 浮動的特性: 1. 浮動的元素脫標 2.浮動的元素互相貼靠 3.浮動的元素有"字圍"效果 4.浮動的元素有收縮的效果 前提是標準文檔流,margin的垂直方向會出現塌陷問題 如果盒子居中:margin: 0 auto;如果盒子浮動了,margin 0 auto;就不起作用了 那我們如 ...
一丶浮動的補充
浮動的特性:
1. 浮動的元素脫標
2.浮動的元素互相貼靠
3.浮動的元素有"字圍"效果
4.浮動的元素有收縮的效果
前提是標準文檔流,margin的垂直方向會出現塌陷問題
如果盒子居中:margin: 0 auto;如果盒子浮動了,margin 0 auto;就不起作用了
那我們如何讓浮動的盒子居中呢?
給浮動盒子加一個父盒子,設置寬度跟浮動盒子一樣大小,並且overflow;hidden;設置該盒子margin: 0 auto;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮動盒子居中</title> <style> *{ padding: 0; margin: 0; } .father{ width: 400px; height: 300px; background-color: red; } .main{ width: 100px; overflow: hidden; margin: 0 auto; } .child{ width: 100px; height: 100px; background-color: blueviolet; margin: 0 auto; float: left; } </style> </head> <body> <div class="father"> <div class="main"> <div class="child"> </div> </div> </div> </body> </html>浮動盒子居中
二丶文本屬性和字體屬性
1.文本對齊
text-align屬性規定元素中的文本的水平對齊方式
屬性值: none | center | left | right | justify
2.文本顏色
color 屬性
3.文本首行縮進
text-indent屬性規定元素首行縮進的距離,單位建議使用em
4.文本修飾
text-decoration屬性規定文本修飾的樣式
屬性值;none | underline(下劃線) | overline(定義文本上的一條線) | line-through(定義穿過文本下的一條線) | inherit(繼承父元素的text-decoration屬性的值)
5.行高
line-height就是行高的意思,指的就是一行的高度
6.字體大小
font-size表示設置字體大小,如果設置成inherit表示繼承父元素的字體大小值
7.字體粗細
font-weight表示設置字體的粗細
屬性值: none(預設值,標準粗細) | bold(粗體) | border(更粗) | lighter(更細) | 100~900(設置具體粗細,400等同於normal,而700等同於bold) | inherit(繼承父元素字體的粗細值)
8.字體系列
font-family
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
如果瀏覽器不支持第一個字體,則會嘗試下一個.瀏覽器會使用它可識別的第一個值.如果都不支持則顯示宋體.
9.行高
line-height
單行文本垂直居中:
行高的高度等於盒子的高度,可以使當行文本垂直居中,註意只適用單行文本.
多行文本垂直居中:
行高的高度不能小於字體的大小,不然上下字之間會緊挨一起
10.font-family
字體設置需註意:
1.網頁中不是所有字體都能用哦，因為這個字體要看用戶的電腦裡面裝沒裝，
比如你設置： font-family: "華文彩雲"; 如果用戶電腦裡面沒有這個字體，
那麼就會變成宋體
頁面中，中文我們只使用： 微軟雅黑、宋體、黑體。
如果頁面中，需要其他的字體，那麼需要切圖。 英語：Arial 、 Times New Roman
2.為了防止用戶電腦裡面，沒有微軟雅黑這個字體。
就要用英語的逗號，隔開備選字體，就是說如果用戶電腦裡面，
沒有安裝微軟雅黑字體，那麼就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體可以有無數個，用逗號隔開。
3.我們要將英語字體，放在最前面，這樣所有的中文，就不能匹配英語字體，
就自動的變為後面的中文字體：
font-family: "Times New Roman","微軟雅黑","宋體";
4.所有的中文字體，都有英語別名，
我們也要知道： 微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性能夠將font-size、line-height、font-family合三為一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比，表示字型大小的百分之多少。
一般來說，都是大於100%的，因為行高一定要大於字型大小。
font:12px/200% “宋體” 等價於 font:12px/24px “宋體”;
反過來，比如： font:16px/48px “宋體”;
等價於 font:16px/300% “宋體”
字體設置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ text-decoration: underline; } div{ width: 200px; height: 240px; /*line-height: 200px;*/ background-color:red; /*text-align: right;*/ /*兩端對齊*/ /*text-align: justify;*/ /*首行縮進*/ /*text-indent: 2em;*/ /*font-size: 14px;*/ /*text-decoration: inherit;*/ /*font-weight: 800;*/ /*font-family: "Microsoft Yahei"*/ /*font-family: '華文行楷'*/ font: 12px/240px '華文行楷'; } a{ text-decoration: none; } a:hover{ text-decoration: line-through; } </style> </head> <body> <div> 武小豬武小豬 </div> <a href="#">百度一下</a> </body> </html>文本屬性和字體屬性
三丶background
background-color 屬性表示背景顏色
background-img :表示設置該元素的背景圖片,預設水平和垂直方向都上平鋪
background-repeat:表示設置該元素平鋪的方式
屬性值: repeat: 預設,背景圖像將在垂直方向和水平方向重覆
repeat-x : 背景圖像將在水平方向重覆
repeat-y : 背景圖像將在垂直方向重覆
no-repeat : 背景圖像將僅顯示一次.
inherit : 規定應該從父元素繼承 background-repeat屬性的設置
給元素設置padding之後,發現padding的區域也會平鋪背景圖片
雪碧圖技術(精靈圖技術)
CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分
CSS 雪碧圖應用原理：
只有一張大的合併圖， 每個小圖標節點如何顯示單獨的小圖標呢？
其實就是 截取 大圖一部分顯示，而這部分就是一個小圖標。
使用雪碧圖的好處：
1、利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
2、CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。
3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。
4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便
不足：
1）CSS雪碧的最大問題是記憶體使用
2）拼圖維護比較麻煩
3）使CSS的編寫變得困難
4）CSS 雪碧調用的圖片不能被列印
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ height: 100px; width: 200px; /*background-color: rgb(0,255,255);*/ /*background-color: rgba(0,0,0,.6);*/ background: #999; } </style> </head> <body> <div></div> </body> </html>background
四丶定位
相對定位
現象和使用:
1.如果對當前元素僅僅設置了相對定位,那麼與標準流的盒子什麼區別.
2.設置相對定位之後,我們才可以使用四個方向的屬性; top丶bottom丶 left丶right
特性:
1.不脫標
2.形影分離
3.老家留坑(占著茅房不拉屎,噁心人)
所以說相對定位在頁面中沒有什麼太大的作用.影響我們頁面的佈局.我們不要使用相對定位來做壓蓋效果
用途:
1.微調元素位置
2.做絕對定位的參考(父相子絕)絕對定位會說到此內容
參考點:
自己原來的位置做參考點
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>相對定位</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: green; position: relative; top: 20px; left: 100px; /*設置元素的堆疊順序*/ z-index: 5; } .box3{ width: 200px; height: 200px; background-color: blue; position: relative; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>相對定位
絕對定位
特性:
1.脫標 2.做遮蓋效果,提成了層級.設置絕對定位之後,不區分行內元素和塊級元素,都能設置寬高.
參考點:
一丶單獨一個絕對定位的盒子
1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）為參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角為參考點來調整位置。
二丶以父輩盒子作為參考點
1.父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角為參考點，這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。
2.如果父親設置了定位，那麼以父親為參考點。那麼如果父親沒有設置定位，那麼以父輩元素設置定位的為參考點
3.不僅僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素為參考點
註意了：父絕子絕，沒有實戰意義，做站的時候不會出現父絕子絕。因為絕對定位脫離標準流，影響頁面的佈局。相反‘父相子絕’在我們頁面佈局中，是常用的佈局方案。因為父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。
還要註意，絕對定位的盒子無視父輩的padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: green; position: absolute; top:40px; left:0; } .box3{ width: 250px; height: 200px; background-color: blue; } </style> </head> <body style="height: 2000px;"> <!-- --> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>絕對定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .father{ width: 992px; height: 460px; background-color: red; float: right; /*相對定位*/ position: relative; } .prev{ width: 50px; height: 50px; line-height: 50px; text-align: center; /*絕對位置*/ position: absolute; background-color: #000; color: #fff; top: 50%; left: 0px; } .next{ width: 50px; height: 50px; line-height: 50px; text-align: center; /*絕對位置*/ position: absolute; background-color: #000; color: #fff; top: 50%; right: 0; } </style> </head> <body> <div class="father"> <span class="next">></span> <span class="prev"><</span> </div> </body> </html>父相子絕
如何讓一個絕對定位的盒子居中
left:50%
margin-left: 寬度的一半
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- <link rel="stylesheet" href="header.css"> <link rel="stylesheet" href="content.css"> --> <!-- <link rel="stylesheet" href="main.css"> --> <style> *{ padding: 0; margin: 0; } body{ font-size: 14px; } ul{ list-style: none; } a{ text-decoration: none;
