閱讀目錄
回到頂部css
CSS介紹
如今的互聯網前端分三層：html
- HTML：超文本標記語言。從語義的角度描述頁面結構。
- CSS：層疊樣式表。從審美的角度負責頁面樣式。
- JS：JavaScript 。從交互的角度描述頁面行爲
CSS：Cascading Style Sheet，層疊樣式表。CSS的做用就是給HTML頁面標籤添加各類樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提升了顯示功能。前端
css的最新版本是css3，咱們目前學習的是css2.1linux
接下來咱們要講一下爲何要使用CSS。css3
HTML的缺陷：
- 不可以適應多種設備
- 要求瀏覽器必須智能化足夠龐大
- 數據和顯示沒有分開
- 功能不夠強大
CSS 優勢：
- 使數據和顯示分開
- 下降網絡流量
- 使整個網站視覺效果一致
- 使開發效率提升了（耦合性下降，一我的負責寫html，一我的負責寫css）
好比說，有一個樣式須要在一百個頁面上顯示，若是是html來實現，那要寫一百遍，如今有了css，只要寫一遍。如今，html只提供數據和一些控件，徹底交給css提供各類各樣的樣式。web
回到頂部瀏覽器
CSS的引入方式
行內樣式
行內樣式
內接樣式
<style type="text/css"> /*寫咱們的css代碼*/ span{ color: yellow; } </style>
外接樣式-連接式
<link rel="stylesheet" href="./index.css">
外接樣式-導入式
<style type="text/css"> @import url('./index.css'); </style>
回到頂部網絡
css選擇器
基本選擇器：
- 標籤選擇器
- 類選擇器
- id選擇器
標籤選擇器(標籤名)
標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個，因此說 "共性" 而不是 」特性「前端工程師
body{
color:gray;
font-size: 12px;
}
/*標籤選擇器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
類選擇器(.)
所謂類：就是class . class與id很是類似 任何的標籤均可以加類，可是類是能夠重複,屬於歸類的概念。同一個標籤中能夠攜帶多個類，用空格隔開ide
類的使用，可以決定前端工程師的css水平到底有多牛逼？在這裏必定要有」公共類「的概念。
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
<!-- 公共類 共有的屬性 --> <div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p> </div>
id選擇器(#)
同一個頁面中id不能重複。
任何的標籤均可以設置id ，id命名規範 要以字母 能夠有數字 下劃線 - 大小寫嚴格區分 aa和AA是兩個不同的屬性值
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font-size: 30px;
}
<body> <div id="box">娃哈哈</div> <div id="s1">爽歪歪</div> <div id="s2">QQ星</div> </body>
高級選擇器：
- 後代選擇器
- 子代選擇器
- 並集選擇器(組合選擇器)
- 交集選擇器
後代選擇器
使用 空格 表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）
.container p{
color: red;
}
.container .item p{
color: yellow;
}
子代選擇器
使用 > 表示子代選擇器。好比div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。
.container>p{
color: yellowgreen;
}
並集選擇器
多個選擇器之間使用 逗號 隔開。表示選中的頁面中的多個標籤。一些共性的元素，可使用並集選擇器
/*並集選擇器*/
h3,a{
color: #008000;
text-decoration: none;
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*使用此並集選擇器選中頁面中全部的標籤，頁面佈局的時候會使用*/
交集選擇器
使用 . 表示交集選擇器。第一個標籤必須是標籤選擇器，第二個標籤必須是類選擇器 語法：div.active
好比有一個<h4 class='active'></h4>這樣的標籤。那麼它表示二者選中以後元素共有的特性。
h4{
width: 100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集選擇器 */
h4.active{
background: #00BFFF;
}
更多選擇器：
- 僞類選擇器
- 僞標籤選擇器
- 屬性選擇器
僞類選擇器
僞類選擇器通常會用在超連接a標籤中，使用a標籤的僞類選擇器，咱們必定要遵循"愛恨準則" LoVe HAte
/*link表示沒有被訪問的a標籤的樣式*/
.box ul li.item1 a:link{
color: #666;
}
/*visited表示訪問事後的a標籤的樣式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*hover表示鼠標懸停時a標籤的樣式*/
.box ul li.item3 a:hover{
color: green;
}
/*active表示鼠標摁住的時候a標籤的樣式*/
.box ul li.item4 a:active{
color: yellowgreen;
}
僞元素選擇器(僞標籤選擇器)
/*設置第一個首字母的樣式*/
p:first-letter{
color: red;
font-size: 30px;
}
/* 在....以前 添加內容 這個屬性使用不是很頻繁 瞭解 使用此僞元素選擇器必定要結合content屬性*/
p:before{
content:'alex';
}
/*在....以後 添加內容，使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
屬性選擇器
屬性選擇器，字面意思就是根據標籤中的屬性，選中當前的標籤。
/*根據for屬性查找，找到全部又for屬性的，設置字體顏色爲紅色*/
/*[for]{
color: red;
}*/
/*找到for屬性的值等於username的元素 字體顏色設爲黃色*/
/*[for='username']{
color: yellow;
}*/
/*以....開頭 ^*/
/*[for^='user']{
color: #008000;
}*/
/*以....結尾 $*/
/*[for$='vvip']{
color: red;
}*/
/*包含某元素的標籤*/
/*[for*="vip"]{
color: #00BFFF;
}*/
/*指定標籤的for屬性
其中for屬性的值是以空格隔開的值列表，
user1是值列表中的一個獨立值*/
label[for~='user1']{
color: red;
}
input[type='text']{
background: red;
}
選擇器的權重
有些時候咱們可能會給同一個標籤設置多個樣式，遇到了重疊項的設置又該聽誰的呢？這裏就要用到選擇器的權重。
行內樣式 1000> id選擇器 100 > 類選擇器 10 > 標籤選擇器 1 > 繼承樣式 0
css的兩大特性 ：繼承性和層疊性
繼承性：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承。
面嚮對象語言都會存在繼承的概念，在面嚮對象語言中，繼承的特色：繼承了父類的屬性和方法。那麼咱們如今主要研究css，css就是在設置屬性的。不會牽扯到方法的層面。
記住：有一些屬性是能夠繼承下來 ： color 、 font-*、 text-*、line-* 。主要是文本級的標籤元素。
可是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。
層疊性：權重大的標籤覆蓋掉了權重小的標籤，誰的權重大，瀏覽器就會顯示誰的屬性
誰的權重大？
其實就是很是簡單的是小學生算數。數：id的數量 class的數量 標籤的數量，固然順序不能亂
/*1 0 0 */顯示紅色
#box{
color: red;
}
/*0 1 0*/
.container{
color: yellow;
}
/*0 0 1*/
p{
color: purple;
}
練習1
css樣式： #box1 #box2 p{ color: yellow; } #box2 .wrap3 p{ color: red; } div div #box3 p{ color: purple; } div.wrap1 div.wrap2 div.wrap3 p{ color: blue; } html代碼： <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再來猜猜我是什麼顏色？</p> </div> </div> </div>
黃色
練習2
css代碼： #box2 .wrap3 p{ color: yellow; } #box1 .wrap2 p{ color: red; } html代碼： <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再來猜猜我是什麼顏色？</p> </div> </div> </div>
紅色 結論：當權重同樣的時候 是之後來設置的屬性爲準，前提必須權重同樣 。‘後來者居上 ’。
練習3
css代碼： #box1 #box2 .wrap3{ color: red; } #box2 .wrap3 p{ color: green; } html代碼： <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再來猜猜我是什麼顏色？</p> </div> </div> </div>
綠色 第一條css設置的屬性值，是經過繼承性設置成的紅色，繼承來的屬性權重爲0。它沒有資格跟咱們下面選中的標籤對比。
練習4
css代碼： #box1 #box2 .wrap3{ color: red; } .wrap1 #box2{ color: green; } html代碼： <div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再來猜猜我是什麼顏色？</p> </div> </div> </div>
紅色 權重都是0:那麼就是"就近原則" ： 誰描述的近，就顯示誰的屬性。所謂描述的近，就是選中到最內層的距離越近。
!important 的使用
！important:設置權重爲無限大
!important 不影響繼承來的權重，隻影響選中的元素。不要隨便使用!important,由於使用它會影響頁面的佈局
選擇器總結
使用什麼選擇器？
- 不要去試圖用一個類將咱們的頁面寫完。這個標籤要攜帶多個類，共同設置樣式
- 每一個類要儘量的小，有公共的概念，可以讓更多的標籤使用
- id or class in css ？ 儘量的用class。除非一些特殊狀況能夠用id，id通常是用在js的。也就是說 js是經過id來獲取到標籤
選擇器的權重
- 先看標籤元素有沒有被選中，若是選中了，就數數 （id,class,標籤的數量） 誰的權重大 就顯示誰的屬性。權重同樣大，後來者居上
- 若是沒有被選中標籤元素，權重爲0。
- 若是屬性都是被繼承下來的 權重都是0 。權重都是0:"就近原則" ： 誰描述的近，就顯示誰的屬性
盒模型
在CSS中，"box model"這一術語是用來設計和佈局時使用，而後在網頁中基本上都會顯示一些方方正正的盒子。咱們稱爲這種盒子叫盒模型。
盒模型有兩種：標準模型和IE模型。咱們在這裏重點講標準模型。
盒模型示意圖
盒模型的屬性
width：內容的寬度
height: 內容的高度
padding：內邊距，邊框到內容的距離，padding的區域是有背景顏色的。而且背景顏色和內容的顏色同樣。也就是說background-color這個屬性將填充全部的border之內的區域
border: 邊框，就是指的盒子的寬度
margin：外邊距，盒子邊框到附近最近盒子的距離
若是讓你作一個寬高402*402的盒子，您如何來設計呢？答案有上萬種，甚至上億種。
盒模型的計算 ：width/height+2*padding+2*border
若是一個盒子設置了padding，border，width，height
盒子的真實寬度=width+2*padding+2*border
盒子的真實高度=height+2*padding+2*border
若是要保持盒子真實的寬度，那麼加padding就必定要減width，減padding就必定要加width。
padding的設置
padding有四個方向，分別描述4個方向的padding。描述的方法有兩種：
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;
標籤的默認padding
好比ul，ol標籤，有默認的padding-left值。
那麼咱們通常在寫網頁的時候，是要清除頁面標籤中默認的padding和margin。以便於咱們更好的去調整元素的位置。
*{
padding:0;
margin:0;
}
但這種方法效率不高。因此咱們要使用並集選擇器來選中頁面中應有的標籤（不一樣背，由於有人已經給我們寫好了這些清除默認的樣式表，reset.css）
border的設置
border:邊框的意思，描述盒子的邊框
邊框有三個要素： 粗細 線性樣式 顏色（如不寫顏色默認爲黑色。如不寫粗細不顯示邊框。只寫線性樣式，默認有上下左右 3px寬度的實體黑色邊框。）
border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/
/*設置順序 ：上 右 左 下*/
/*border-style: 實線，點狀，雙線，虛線*/
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;
border:none；
border：0；
表示border沒有設置樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div.box1{ width: 200px; height: 200px; border-radius: 20px; background-color: #f0809d; } div.box2{ width: 200px; height: 200px; border-radius: 100px; background-color: #7ef0c2; } div.box3{ width: 200px; height: 200px; border-top-left-radius: 200px; border-top-right-radius: 200px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; background-color: #b589f0; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
利用border畫三角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px;
border-color: #7ef0c2 transparent transparent transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
margin的設置
margin：外邊距的意思。表示邊框到最近盒子的距離。
/*表示四個方向的外邊距離爲20px*/
margin: 20px;
/*表示盒子向下移動了30px*/
margin-top: 30px;
/*表示盒子向右移動了50px*/
margin-left: 50px;
/*表示盒子距離右面的盒子100px*/
margin-right: 100px;
/*表示盒子距離下面的盒子100px*/
margin-bottom: 100px;
html: <div class="father"> <div class="box1"></div> <div class="box2"></div> </div> css: *{ padding: 0; margin: 0; } .father{ width: 400px; border: 1px solid gray; /*float: left;*/ } .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; /*float: left;*/ } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; /*float: left;*/ } /* 當給兩個標準流下兄弟盒子 設置垂直方向上的margin時，那麼以較大的爲準，那麼咱們稱這種現象叫塌陷。無法解決，咱們稱爲這種技巧叫「奇淫技巧」。記住這種現象，在佈局垂直方向盒子的時候注意margin的用法。 當咱們給兩個標準流下的兄弟盒子設置浮動以後，就不會出現margin塌陷的問題。 */
div{
width: 780px;
height: 50px;
background-color: red;
/*水平居中盒子*/
margin: 0px auto;
/*水平居中文字*/
text-align: center;
}
/*當一個div元素設置margin：0 auto;時就會居中盒子，那咱們知道margin:0 auto;表示上下外邊距離爲0，左右爲auto的距離，那麼auto是什麼意思呢？
設置margin-left:auto；咱們發現盒子儘量遠離左側，當設置margin-right:auto；咱們發現盒子儘量遠離右側。當兩條語句並存的時候，咱們發現盒子儘量遠離兩側，此時盒子就居中了。
若是給盒子設置浮動，那麼margin:0 auto失效。
使用margin：0 auto;注意點：
1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;
2.只有標準流下的盒子 才能使用margin:0 auto;
當一個盒子浮動了，固定定位，絕對定位(後面會講)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
*/
善於使用父親的padding，而不是margin
margin屬性是描述兄弟盒子的關係，而padding描述的是父子盒子的關係.
若是讓你們實現如圖的效果，應該有很多的同窗作不出來。
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
border: 1px solid;
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
padding-top: 30px;
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
}
由於父親沒有border，那麼兒子margin-top實際上踹的是「流」 ，踹的是行，因此父親掉下來了，一旦給父親一個border發現就行了。
標準文檔流
宏觀的將，咱們的web頁面和ps等設計軟件有本質的區別，web 網頁的製做，是個「流」，從上而下 ，像 「織毛衣」。而設計軟件 ，想往哪裏畫東西，就去哪裏畫
標準文檔流下 有哪些微觀現象？
多個空格會被合併成一個空格顯示到瀏覽器頁面中。img標籤換行寫。會發現每張圖片之間有間隙，若是在一行內寫img標籤，就解決了這個問題，可是咱們不會這樣去寫咱們的html結構。這種現象稱爲空白摺疊現象。
文字還有圖片大小不一，都會讓咱們頁面的元素出現高矮不齊的現象，可是在瀏覽器查看咱們的頁面總會發現底邊對齊
若是在一行內寫文字，文字過多，那麼瀏覽器會自動換行去顯示咱們的文字。
塊級元素和行內元素
在之前的HTML知識中，咱們已經將標籤分過類，當時分爲了：文本級、容器級。
咱們也學習了行內元素和塊級元素的分類，其實這種分類方式是從CSS的角度講的。
行內元素：
- 與其餘行內元素並排；
- 不能設置寬、高。默認的寬度，就是文字的寬度。
塊級元素：
- 霸佔一行，不能與其餘任何元素並列；
- 能接受寬、高。若是不設置寬度，那麼寬度將默認變爲父親的100%。
塊級元素和行內元素的相互轉換
咱們能夠經過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。
塊級元素能夠轉換爲行內元素：
一旦，給一個塊級元素（好比div）設置：
display: inline;
那麼，這個標籤將當即變爲行內元素，此時它和一個span無異。inline就是「行內」。也就是說：
- 此時這個div不能設置寬度、高度；
- 此時這個div能夠和別人並排了
行內元素轉換爲塊級元素：
一樣的道理，一旦給一個行內元素（好比span）設置：
display: block;
那麼，這個標籤將當即變爲塊級元素，此時它和一個div無異。block」是「塊」的意思。也就是說：
- 此時這個span可以設置寬度、高度
- 此時這個span必須霸佔一行了，別人沒法和他並排
- 若是不設置寬度，將撐滿父親
ps：
標準流裏面的限制很是多，致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高，那該怎麼辦呢？辦法是：移民！脫離標準流！
css中一共有三種手段，使一個元素脫離標準文檔流：
（1）浮動
（2）絕對定位
（3）固定定位
浮動
浮動是css裏面佈局最多的一個屬性，也是很重要的一個屬性。
float：表示浮動的意思。它有四個值。
- none: 表示不浮動，默認
- left: 表示左浮動
- right：表示右浮動
看一個例子:
html: <div class="box1"></div> <div class="box2"></div> <span>路飛學城</span> css: .box1{ width: 300px; height: 300px; background-color: red; float:left; } .box2{ width: 400px; height: 400px; background-color: green; float:right; } span{ float: left; width: 100px; height: 200px; background-color: yellow; }
效果：
咱們會發現，三個元素並排顯示，.box1和span由於是左浮動，緊挨在一塊兒，這種現象貼邊。.box2盒子由於右浮動，因此緊靠着右邊。
浮動的四大特性：
浮動的四大特色
1、浮動元素脫標
脫標：就是脫離了標準文檔流
示例：
html <div class="box1">小紅</div> <div class="box2">小黃</div> <span>小馬哥</span> <span>小馬哥</span> css: .box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; width: 300px; height: 50px; }
效果：紅色盒子壓蓋住了黃色的盒子，一個行內的span標籤居然可以設置寬高了。
說明1：小紅設置了浮動，小黃沒有設置浮動，小紅脫離了標準文檔流，其實就是它不在頁面中佔位置了，此時瀏覽器認爲小黃是標準文檔流中的第一個盒子。因此就渲染到了頁面中的第一個位置上。這種現象，也有一種叫法，浮動元素「飄起來了」，但我不建議你們這樣叫。
說明2：全部的標籤一旦設置浮動，就可以並排，而且都不區分行內、塊狀元素，都可以設置寬高
2、浮動元素互相貼靠
html： <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> css： .box1{ width: 100px; height: 400px; float: left; background-color: red; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; }
效果發現：
若是父元素有足夠的空間，那麼3哥緊靠着2哥，2哥緊靠着1哥，1哥靠着邊。
若是沒有足夠的空間，那麼就會靠着1哥，若是再沒有足夠的空間靠着1哥，本身往邊靠
3、浮動元素的字圍效果
html： <div> <img src="./images/企業1.png" alt=""> </div> <p> 123路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛 </p> css： *{ padding: 0; margin: 0; } div{ float: left; } p{ background-color: #666; }
效果發現：所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提升，可是p中的文字不會被遮蓋，此時就造成了字圍效果。
4、浮動元素的緊湊效果
收縮：一個浮動元素。若是沒有設置width，那麼就自動收縮爲文字的寬度（這點跟行內元素很像）
html： <div> alex </div> css： div{ float: left; background-color: red; }
你們必定要謹記：關於浮動，咱們初期必定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一塊兒浮動。另外，有浮動，必定要清除浮動，
浮動的問題和清除浮動
浮動的問題
在頁面佈局的時候，每一個結構中的父元素的高度，咱們通常不會設置。（爲何？）
你們想，若是我初版的頁面的寫完了，感受很是爽，忽然隔了一個月，老闆說頁面某一塊的區域，我要加點內容，或者我以爲圖片要縮小一下。這樣的需求在工做中很是常見的。真想打他啊。那麼此時做爲一個前端小白，確定是去每一個地方加內容，改圖片，而後修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是確定的。
html: <div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div> css： *{ padding: 0; margin: 0; } .father{ width: 1126px; /*子元素浮動 父盒子通常不設置高度*/ /*出現這種問題，咱們要清除浮動帶來影響*/ /*height: 300px;*/ } .box1{ width: 200px; height: 500px; float: left; background-color: red; } .box2{ width: 300px; height: 200px; float: left; background-color: green; } .box3{ width: 400px; float: left; height: 100px; background-color: blue; } .father2{ width: 1126px; height: 600px; background-color: purple; }
效果發現：若是不給父盒子一個高度，那麼浮動子元素是不會填充父盒子的高度，那麼此時.father2的盒子就會跑到第一個位置上，影響頁面佈局。
那麼咱們知道，浮動元素確實能實現咱們頁面元素並排的效果，這是它的好處，同時它還帶來了頁面佈局極大的錯亂！！！因此咱們要清除浮動
清除浮動
給父盒子設置高度
這個方法給你們上個代碼介紹，它的使用不靈活，通常會經常使用頁面中固定高度的，而且子元素並排顯示的佈局。好比：導航欄
clear:both
clear：意思就是清除的意思。
有三個值：
left：當前元素左邊不容許有浮動元素
right：當前元素右邊不容許有浮動元素
both：當前元素左右兩邊不容許有浮動元素
給浮動元素的後面加一個空的div，而且該元素不浮動，而後設置clear：both。
html: <div> <ul> <li>Python</li> <li>web</li> <li>linux</li> <!-- 給浮動元素最後面加一個空的div 而且該元素不浮動 ，而後設置clear:both 清除別人對個人浮動影響--> <!-- 內牆法 --> <!-- 平白無故加了div元素 結構冗餘 --> <div class="clear"></div> </ul> </div> <div class="box"> </div> css： *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } .clear{ clear: both; }
僞元素清除法(經常使用)
給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，而後設置
.clearfix:after{
/*必需要寫這三句話*/
content: '.';
clear: both;
display: block;
}
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
overflow:hidden
overflow屬性規定當內容溢出元素框時發生的事情。
說明：
這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也會出現滾動條。
有五個值：
| 值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈如今元素框以外。 |
| hidden | 內容會被修剪，而且其他內容是不可見的。 |
| scroll | 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。 |
| auto | 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
定位
定位有三種：相對定位、絕對定位、固定定位
相對定位：相對於本身原來的位置定位
現象和使用：
1.若是對當前元素僅僅設置了相對定位，那麼與標準流的盒子什麼區別。
2.設置相對定位以後，咱們纔可使用四個方向的屬性： top、bottom、left、right
特性：1.不脫標 2.形影分離 3.老家留坑（佔着茅房不拉屎，噁心人）
因此說相對定位在頁面中沒有什麼太大的做用。影響咱們頁面的佈局。咱們不要使用相對定位來作壓蓋效果
用途：
1.微調元素位置
2.作絕對定位的參考（父相子絕）絕對定位會說到此內容。
絕對定位
特性：1.脫標 2.作遮蓋效果，提成了層級。設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高。
參考點(重點)：
1、單獨一個絕對定位的盒子
1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。
2、以父輩盒子做爲參考點
1.父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點，這個父輩元素不必定是爸爸，它也能夠是爺爺，曾爺爺。
2.若是父親設置了定位，那麼以父親爲參考點。那麼若是父親沒有設置定位，那麼以父輩元素設置定位的爲參考點
3.不只僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素爲參考點
注意了：父絕子絕，沒有實戰意義，作站的時候不會出現父絕子絕。由於絕對定位脫離標準流，影響頁面的佈局。相反‘父相子絕’在咱們頁面佈局中，是經常使用的佈局方案。由於父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。
還要注意，絕對定位的盒子無視父輩的padding
做用：頁面佈局常見的「父相子絕」，必定要會！！！！
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: relative;
left: 50%;
margin-left: -480px;
/*設置絕對定位以後，margin:0 auto;不起任何做用，若是想讓絕對定位的盒子居中。當作公式記下來 設置子元素絕對定位，而後left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/
}
固定定位
固定當前的元素不會隨着頁面滾動而滾動
特性: 1.脫標 2.遮蓋，提高層級 3.固定不變
參考點：
設置固定定位，用top描述。那麼是以瀏覽器的左上角爲參考點
若是用bottom描述，那麼是以瀏覽器的左下角爲參考點
做用： 1.返回頂部欄 2.固定導航欄 3.小廣告
z-index
指的就是各個盒子重疊在一塊兒誰上誰下的問題。
四大特性，只要你記住了，頁面佈局就不會出現找不到盒子的狀況。
- z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
- 只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
- z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
- 從父現象：父親慫了，兒子再牛逼也沒用
文本屬性和字體屬性
文本屬性
| 屬性 | 描述 | 屬性值 | 說明 |
| text-align | 文本對齊方式 | none center left right justify |
|
| color | 文本顏色 | ||
| text-indent | 首行縮進，單位建議em | ||
| text-decoration | 規定文本修飾的樣式 | none underline overline line-through inherit |
默認 下劃線 定義文本上的一條線 定義穿過文本下的一條線 繼承父元素text-decoration屬性的值 |
| line-height | 行高 | 針對單行文本垂直居中 公式：行高=盒子高度， 使文本垂直居中，只適用單行文本。 針對多行文本垂直居中 行高不能小於字體，否則字會緊挨一塊兒。 |
|
| text-shadow | 陰影 | 5px 5px 5px #FF0000 | 水平方向偏移量 垂直方向偏移量 模糊度 陰影顏色 |
| text-overflow | 文字溢出 | clip ellipsis |
修剪文本 顯示省略號表明被修剪文本 |
| white-space | 處理元素內的空白 |
normal pre nowrap pre-wrap pre-line inherit |
默認。空白被瀏覽器忽略。 空白會被瀏覽器保留 文本不換行，直到遇到 <br> 保留空白符序列，但正常地進行換行 合併空白符序列，可是保留換行符 繼承父元素 white-space 屬性的值 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>text-overflow</title> <style type="text/css"> .div0 { width: 300px; border: 1px solid darkblue; } .div1 { width: 300px; border: 1px solid red; /*強制在一行內顯示*/ white-space: nowrap; /*超出部分隱藏*/ overflow: hidden; } .div2 { width: 300px; border: 1px solid black; /*強制在一行內顯示*/ white-space: nowrap; /*超出部分隱藏*/ overflow: hidden; /*修剪超出的文本*/ text-overflow: clip; } .div3 { width: 300px; border: 1px solid chocolate; /*強制在一行內顯示*/ white-space: nowrap; /*超出部分隱藏*/ overflow: hidden; /*顯示省略符號來表明被修剪的文本*/ text-overflow: ellipsis; } </style> </head> <body> <div class="div0">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br> <div class="div1">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br> <div class="div2">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br> <div class="div3">各國領導人感謝中方做爲東道主對各國參展給予的大力支持</div><br> </body> </html>
字體屬性
| 屬性 | 描述 | 屬性值 | 說明 |
| font-size | 字體大小 | ||
| font-weight | 字體粗細 | none bold border lighter 100~900 inherit |
默認值，標準粗細 粗體 更粗 更細 值，400=normal，700=bold 繼承父元素字體的粗細值 |
| font-family | 字體系列 | "Microsoft Yahei","微軟雅黑", "Arial", sans-serif | 瀏覽器使用它可識別的第一個值 |
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% 「宋體」
background
給元素設置padding以後，發現padding的區域背景和content部分的一致。
background-color —— 背景顏色
css: <style> .demo{ width: 50px; height: 100px; background-color: greenyellow; } </style> html: <body> <div class="demo"></div> </body>
background-image —— 背景圖片
css: <style> .demo{ width: 2000px; height: 1500px; background-image: url('./images/xxx.jpg'); } </style> html: <body> <div class="demo"></div> </body>
那麼發現默認的背景圖片，水平方向和垂直方向都平鋪
背景圖片相關配置 ：background-repeat，background-position，background-attach
| background-repeat：設置背景圖像的平鋪方式 | |
| repeat repeat-x repeat-y no-repeate inherit |
默認。背景圖像將在垂直方向和水平方向重複 背景圖像將在水平方向重複 背景圖像將在垂直方向重複 背景圖像將僅顯示一次 規定應該從父元素繼承 background-repeat 屬性的設置 |
| background-position：設置背景圖像的起始位置 | |
| 垂直位置 水平位置
|
能夠從兩個緯度上設定關鍵詞：上中下 左中右 垂直位置：top center bottom 水平位置：left center right 如僅規定了一個關鍵詞，那麼第二個值將是"center"。 默認值：0 0； 這兩個值必須挨在一塊兒。 |
| background-attachment：設置固定的背景圖像 | |
| scroll fixed inherit |
默認值。背景圖像會隨着頁面其他部分的滾動而移動。 當頁面的其他部分滾動時，背景圖像不會移動。 規定應該從父元素繼承 background-attachment 屬性的設置。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滾動背景圖示例</title> <style> * { margin: 0; } .box { height: 500px; background: url("hulu.jpg") no-repeat center center; background-attachment: fixed; } .d1 { height: 500px; background-color: rgba(132,0,255,0.2); } .d2 { height: 500px; background-color: rgba(132,255,255,0.2); } .d3 { height: 500px; background-color: rgba(0,255,0,0.2); } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html>
background屬性的簡寫
background：#ffffff url('1.png') no-repeat right top;