前端CSS

本文轉載自查看原文 2018-12-07 14:05 4195

CSS介紹

　　CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素，給HTML設置樣式，讓它更加美觀。

　　當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。

CSS語法

　　CSS實例

　　　　每個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之后用分號結束。

　　CSS注釋

/*這是注釋*/

CSS的幾種引入方式

　　行內樣式

　　　　行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。

<p style="color: red">Hello world.</p>

　　內部樣式

　　　　嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

　　外部樣式

　　　　外部樣式就是將css寫在一個單獨的文件中，然后在頁面進行引入即可。推薦使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>  #現在寫的這個.css文件是和你的html是一個目錄下，如果不是一個目錄，href里面記得寫上這個.css文件的路徑

　　　　文件內容是：

p {color:blue;}
/*注釋*/

注釋一般都使用來描述后面這段css代碼是給頁面上哪一個板塊用的
/*標題樣式*/
xxxxx

/*個人中心設置*/

CSS選擇器（如何找到對應的標簽）

　　基本選擇器

　　　　元素選擇器（標簽名）

p {color: "red";}

　　那如果有多個p標簽，我像把其中一個p標簽中的文字顏色改為紅了，或者背景改成紅色怎么辦？看下面的選擇器：

　　　　ID選擇器

#i1 {   #號表示id屬性，后面的i1表示id屬性的值
  background-color: red;  #背景色，color:red是字體顏色，這個簡單知道一下就行了，明天我們再學這些具體的css樣式
}

　　id不能重復，如果想給多個p標簽同時添加一個css樣式怎么辦？挨個添加id屬性嗎？並且，如果是不同的標簽，但是他們的css樣式要一樣，怎么辦？看下面

　　類選擇器

.c1 {  .表示class屬性，c1表示class的值
  font-size: 14px;
}
p.c1 {  找到所有p標簽里面含有class屬性的值為c1的p標簽，注意他倆之間沒有空格昂
  color: red;
}

　　　　效果：

　　注意：

　　　　　　樣式類名不要用數字開頭（有的瀏覽器不認）。

　　　　　　標簽中的class屬性如果有多個，要用空格分隔。

　　　　通用選擇器

* {  *表示所有的標簽
  color: white;
}

　　　　來吧，大家練習一波，然后我們重新創建一個html文件，再學下面的內容。

　　組合選擇器

　　　　后代選擇器（子子孫孫）

/*li內部的a標簽設置字體顏色*/
li a {
  color: green;
}

　　　　兒子選擇器（只找兒子）

/*選擇所有父級是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

　　　　毗鄰選擇器

/*選擇所有緊接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

　　　　弟弟選擇器

/*i1后面所有的兄弟p標簽*/
#i1~p {
  border: 2px solid royalblue;
}

　　　　找id為d2的div標簽下的兄弟標簽中的p標簽，往下找

　　來吧，兄弟們，練習一波，然后我們再重新創建一個html文件，再學下面的內容。

　　屬性選擇器

/*用於選取帶有指定屬性的元素。*/
p[title] {
  color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
  color: green;
}

　　通過屬性或者屬性的值來查找，這個屬性是我們自己定義的，不是id啊class啊這種html自帶的屬性

　　每個標簽里面都可以可一個title屬性，這個屬性就是鼠標移動到這個標簽上，就顯示出一個title屬性的值

　　還有下面這些不太常用的，正則的寫法，屬性值以什么開頭，以什么結尾等

/*找到所有title屬性以hello開頭的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title屬性以hello結尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title屬性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：*/
[title~="hello"] {
  color: green;
}

　　　　看示例：title*='hello'

　　　　看示例：title~=’hello‘

　　　　上面這個屬性選擇器不常用，簡單了解一下就行了。

　　分組和嵌套

　　　　分組（多個選擇器逗號分隔）

　　　　　　當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。

　　　　　　例如：

div, p {
  color: red;
}

　　　　　　上面的代碼為div標簽和p標簽統一設置字體為紅色。

　　　　　　通常，我們會分兩行來寫，更清晰:

div, #如果你這樣寫，千萬別忘了逗號，不然就成了div下的子子孫孫里面找p標簽
p {
  color: red;
}

　　　　嵌套

　　　　　　多種選擇器可以混合起來使用，比如：.c1類內部所有p標簽設置字體顏色為紅色。

.c1 p {
  color: red;
}

　　偽類選擇器（比較特殊，CSS3版本新加的特性）

　　　　可以根據標簽的不同狀態再進行進一步的區分，比如一個a標簽，點擊前，點擊時，點擊后有不同的三個狀態。

/* 未訪問的鏈接 */
a:link {
  color: #FF0000
}

/* 已訪問的鏈接 */
a:visited {
  color: #00FF00
} 

/* 鼠標移動到鏈接上 */  這個用的比較多
a:hover {
  color: #FF00FF
} 

/* 選定的鏈接 */ 就是鼠標點下去還沒有抬起來的那個瞬間，可以讓它變顏色
a:active {
  color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {   #input默認的有個樣式，鼠標點進去的時候，input框會變淺藍色的那么個感覺
  #outline: none;
  background-color: #eee; #框里面的背景色
}

　　hover的用法

用法1：這個表示的是：當鼠標懸浮在a這個樣式上的時候，a的背景顏色設置為黃色

a:hover
    {
        background-color:yellow;
    }
用法2:

使用a 控制其他塊的樣式：

　　使用a控制a的子元素 b：

.a:hover .b {
        background-color:blue;
    }
使用a控制a的兄弟元素 c(同級元素)：
.a:hover + .c {
        color:red;
    }
使用a控制a的就近元素d：
.a:hover ~ .d {
        color:pink;
    }

　　偽元素選擇器（通過css來造標簽，不推薦使用）

　　　　first-letter

　　　　　　常用的給首字母設置特殊樣式：

#將p標簽中的文本的第一個字變顏色變大小

p:first-letter { 
  font-size: 48px;
  color: red;
}

　　　　before

/*在每個<p>元素之前插入內容*/
p:before {
  content:"*";
  color:red;
}

　　　　after

/*在每個<p>元素之后插入內容*/
p:after {
  content:"[?]";
  color:blue;
}

　　　　　　上面的這些前后添加的文本內容在頁面上是無法選中的，正常的標簽或者文字是可以選中的。

　　　　　　before和after多用於清除浮動。后面講

　　選擇器的優先級（難點）

　　　　CSS繼承

　　　　　　我們通過上面的學習可以發現，我們可以通過很多種選擇器來選擇標簽，如果有不同的選擇器選中了相同的標簽，並且賦予了不同的css樣式，那么該按照哪個css樣式來進行渲染呢？首要瀏覽器拿到我們給他的HTML文件的時候，它是從上到下加載我們的文件內容的，這也是為什么你會先看到head標簽里面的內容，比如那個title標簽。再看下面的例子：我在style里面寫了兩個#p1並且設置了不同的css樣式，還有一個10.css文件，文件里面也寫了一個#p1，對應一個其他的css樣式，最后頁面渲染的時候是選擇的最后一個link那個文件中的#p1對應的那個css樣式來渲染的，是因為按照順序加載導致的，一個把一個覆蓋了

　　　　　　10.css文件里的內容：

　　　　　　最終效果：為藍色

　　　　　　總結：當選擇器相同的時候，按照順序來看css樣式，誰最后就按照誰渲染。那如果是不同的選擇器的時候呢？就要學習我們下面的優先級了，首先看一下繼承：

　　　　　　繼承是CSS的一個主要特征，它是依賴於祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的后代。例如一個body定義了的字體顏色值也會應用到段落的文本中。

body {
  color: red;
}

　　　　　　此時頁面上所有標簽都會繼承body的字體顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的，他的權重是0。

　　　　　　我們只要給對應的標簽設置字體顏色就可覆蓋掉它繼承的樣式。

p {
  color: green;
}

　　　　　　此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

　　選擇器的優先級

　　　　我們上面學了很多的選擇器，也就是說在一個HTML頁面中有很多種方式找到一個元素並且為其設置樣式，那瀏覽器根據什么來決定應該應用哪個樣式呢？

　　　　其實是按照不同選擇器的權重來決定的，具體的選擇器權重計算方式如下圖：

　　　　注：內聯樣式的意思是把css樣式寫在標簽里面：

　　　　　　　　其他的權重：但是有一點說一下，就是上面那個權重計算永不進位的意思是：我們看上面知道class的權重是10，但是即便是11個class相加起來大於id的100權重，也還是id生效，也就是說，不會進位，class組合起來也無法超過id的權重

　　　　除此之外還可以通過添加 !important方式來強制讓樣式生效，不講道理的操作，但並不推薦使用。因為如果過多的使用!important會使樣式文件混亂不易維護，使用方法：

　　　　萬不得已可以使用!important

　　好了同志們，練習一下吧，沒啥捷徑，就是多練。。。練習一下在繼續學習下面的內容~~

CSS屬性相關

　　寬和高

　　　　width屬性可以為元素設置寬度。

　　　　height屬性可以為元素設置高度。

　　　　塊級標簽才能設置寬度，內聯標簽的寬度由內容來決定。

　　字體屬性

　　　　文字字體

　　　　　　font-family可以把多個字體名稱作為一個“回退”系統來保存。如果瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。

　　　　　　簡單實例：

body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

　　　　字體大小

p {
  font-size: 14px;
}

　　　　　　如果設置成inherit表示繼承父元素的字體大小值。

　　　　字重（粗細）

　　　　　　font-weight用來設置字體的字重（粗細）。

值	描述
normal	默認值，標准粗細
bold	粗體
bolder	更粗
lighter	更細
100~900	設置具體粗細，400等同於normal，而700等同於bold
inherit	繼承父元素字體的粗細值

　　文本顏色

　　　　　　顏色屬性被用來設置文字的顏色。

　　　　　　顏色是通過CSS最經常的指定：

　　　　　　　　1.十六進制值 - 如: ＃FF0000 #前兩位是表示紅，中間兩位表示綠，后面兩位表示藍，F是最高級別，0表示最低級別（無色）

　　　　　　　　2.一個RGB值 - 如: RGB(255,0,0) #紅綠藍就是RGB的意思，第一個參數是紅，最高255，最低0

　　　　　　　　3.顏色的名稱 - 如: red

　　　　　　還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間。

　　文字屬性

　　　　文字對齊

　　　　　　text-align 屬性規定元素中的文本的水平對齊方式。（letter-spacing）

值	描述
left	左邊對齊默認值
right	右對齊
center	居中對齊
justify	兩端對齊

　　　　文字裝飾

　　　　　　text-decoration 屬性用來給文字添加特殊效果。

值	描述
none	默認。定義標准的文本。
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。
inherit	繼承父元素的text-decoration屬性的值。

　　　　　　常用的為去掉a標簽默認的自划線：

a {
  text-decoration: none;
}

　　　　首行縮進

　　　　　　將段落的第一行縮進 32像素：

p {
  text-indent: 32px; #首行縮進兩個字符，因為我記得一個字在頁面上的默認大小為16px
}

　　背景屬性

/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url('1.jpg');  #url里面是圖片路徑，如果和你的html文件在一個目錄下，使用這種相對路徑就行了，來個葫蘆娃圖片試一下

background-repeat: no-repeat;

/*
 背景重復
 repeat(默認):背景圖片沿着x軸和y軸重復平鋪，鋪滿整個包裹它的標簽
 repeat-x：背景圖片只在水平方向上平鋪
 repeat-y：背景圖片只在垂直方向上平鋪
 no-repeat：背景圖片不平鋪
*/

/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/ #200px 200px 是距離父級標簽的左邊和上邊的距離，以前大家都用雪碧圖，就是將很多的網頁上需要的小圖片組合成一個大圖，用這個圖中哪個位置的小圖片，就通過這個參數來調整，看下面的示例操作，現在很少用這個了

　　　　注意，qq截圖的時候可以給你顯示像素，這個是200px*200px

　　　　下面是瀏覽器的坐標系：

　　　　no-repeat 和 right top：

　　　　效果：

　　　　background-position：200px 200px；這種參數的示例：

　　　　在抽屜上還可以找到這個圖片：

　　　　然后：

　　　　你就會看到它：好多個小圖片組成的

　　　　那么有同學會疑問，為什么要將這些小圖片做成一個大圖呢？因為其實頁面在加載到img標簽之后，會單獨的往后端發請求，來請求這個圖，如果小圖很多的話，頁面要發好多個請求，那么頁面加載的就慢，所以放到一個大圖上，每個用這個大圖上面的小圖的地方，img里面的url都指向這個一個圖片的url，這樣加載就很快了，因為只需要請求一次，你的網頁就拿到了這個圖片，其他的請求都可以直接用這個圖，而不需要多次請求這個圖了，然后通過這個background-position的值來調整。

　　　　點擊小燈泡的第一個，就看到效果了，自動幫你優化寫法，這個小燈泡就是pycharm幫你提供的一些幫助吧算是

　　　　支持簡寫：

background:#ffffff url('1.png') no-repeat right top;

　　　　使用背景圖片的一個常見案例就是很多網站會把很多小圖標放在一張圖片上，然后根據位置去顯示圖片。減少頻繁的圖片請求，就是我們剛才說的雪碧圖。

參考鏈接點我

　　　　一個有趣的例子：鼠標滾動但是背景不動，就是最近發現的，很多電商都在這么搞，你們看過這種效果沒有。下面是我模仿着寫的一個小例子

<!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 {
            width: 100%;  #凡是這種使用百分比的，都是按照你父標簽的寬度的百分之多少來顯示
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; #這個圖片好像沒有了，自己找一個網上的圖片，把這個url路徑換一下，可以到攝圖網去看看，國內免費的一個圖片網站
            background-attachment: fixed;  #就是這個屬性，讓你的背景圖片固定住的意思，attachment是附屬、依附的意思
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

　　邊框

　　　　邊框屬性

　　　　　　1.border-width 寬度

　　　　　　2.border-style 樣式

　　　　　　3.border-color 顏色

#i1 {
  border-width: 2px;  
  border-style: solid;
  border-color: red;
}

　　　　通常使用簡寫方式：

#i1 {
  border: 2px solid red;
}

　　　　邊框樣式

值	描述
none	無邊框。
dotted	點狀虛線邊框。
dashed	矩形虛線邊框。
solid	實線邊框。

　　　　除了可以統一設置邊框外還可以單獨為某一個邊框設置樣式，如下所示：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

　　　　單獨設置一下左邊的邊框：

　　　　只顯示左邊的邊框：

　　border-radius

　　　　用這個屬性能實現圓角邊框的效果。

　　　　將border-radius設置為長或高的一半即可得到一個圓形。

　　　　效果：

　　　　還可在調試窗口調整顏色來測試（調試窗口：頁面上右鍵--檢查，或者f12）

　　　　調整好之后，把調整后的值復制到我們的css屬性里面就行了

　　　　還可以通過hover來設置鼠標移動上去變顏色：

　　　　　　你會看到之前的background-color有了一個橫線，這是不生效的效果，因為你查看的hover的樣式

　　　　　　還可以看到class

　　　　　　把對勾去了，這個class的樣式就不顯示了

　　　　　　通過調試窗口還可以玩一個神奇的東西：document.body.contentEditable=true

　　　　　　不用ps就能夠改了：注意昂，只能改當前頁面的顯示內容，改不了真實的值，並且頁面一刷新，這個指令就失效了，需要重新輸入

　　display屬性

　　　　用於控制HTML元素的顯示效果。

值	意義
display:"none"	HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript代碼使用。
display:"block"	默認占滿整個頁面寬度，如果設置了指定寬度，則會用margin填充剩下的部分。
display:"inline"	按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什么影響。
display:"inline-block"	使元素同時具有行內元素和塊級元素的特點。

　　　　display:"none"與visibility:hidden的區別：

　　　　visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。

　　　　display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

　　　　教大家一些創建標簽時的簡寫方法：

　　　　看效果：

　　　　或者簡寫：

　　　　然后按一下tab鍵：

　　　　然后看div里面套一個a標簽

　　　　然后一回車

　　　　這些都是編輯器幫你提供的快捷方式。有興趣的同學可以去研究研究，有好多，一個nb的前端工程師，寫一個頁面非常快速

　　　　在加一個$符號：

　　　　按delete刪除：

　　　　一下就刪除了三個了：

　　注意一點昂：塊級標簽不管你設置的寬度是多少，都會占用你整個頁面寬度的空間，看下面

　　　　然后我們看一下display的效果inline-block，高度寬度還可以設置，包含內聯和塊級標簽的屬性

　　　　還可以通過display：block將內聯標簽改為塊級標簽的效果

　　　　看效果：

　　　　看效果　　　　

　　　　不占用位置，也不顯示

　　　　來吧，大家練習一下，然后再繼續學習~~~

　　CSS盒子模型

　　　　在css里面，每個標簽可以稱為一個盒子模型，看下面的圖：

　　　　1.margin: 外邊距：用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。

　　　　2.padding: 內邊距：用於控制內容與邊框之間的距離；

　　　　3.Border(邊框): 圍繞在內邊距和內容外的邊框。

　　　　4.Content(內容): 盒子的內容，顯示文本和圖像。

　　　　看圖吧：

　　margin外邊距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

　　　　所以在寫css樣式的時候，都會先寫一個

　　　意思是說，body的上下左右的margin都設置為0.

　　　　在看一個，如果將上下兩個標簽都設置了margin是什么效果

　　　　推薦使用簡寫：

.margin-test {
  margin: 5px 10px 15px 20px;
}

　　　　順序：上右下左

　　　　常見居中：

.mycenter {
  margin: 0 auto;  #上下0像素，左右自適應，居中的效果
}
如果你寫的是三個：margin: 10px 20px 10px;意思是上為10，左右為20，下為10

　　padding內填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

　　　　推薦使用簡寫：

.padding-test {
  padding: 5px 10px 15px 20px;
}

　　　　順序：上右下左

　　　　補充padding的常用簡寫方式：

提供一個，用於四邊；
提供兩個，第一個用於上－下，第二個用於左－右；
如果提供三個，第一個用於上，第二個用於左－右，第三個用於下；
提供四個參數值，將按上－右－下－左的順序作用於四邊；

　　接下來我們來學一下浮動：

　　float

　　　　在 CSS 中，任何元素都可以浮動。最開始出現浮動這個東西是為了什么呢，記不記得一個word文檔里面，插入圖片的時候，有一個文字環繞的效果啊：

　　　　最開始浮動這個東西是想要做上面這種效果用的，現在多數用來做網頁布局的。你記不記得很多的網站都是左邊一個菜單欄，右邊一堆的其他內容啊

　　　　你看昂：我們如果這樣寫

　　　　看效果：

　　　　那怎么讓綠色的這個跑到紅色的左邊呢？

　　　　上面是浮動的一個最簡單的用法，但是浮動有一個副作用，看：

　　　　重新創建一個htnl文件，我們寫上下面的內容

　　　　css樣式：

　　　　效果是這樣的：

　　　　怎么讓下面這個粉色的跑到右邊去啊

　　　　刷新看看效果：

　　　　發現是不是有問題啊，兩個紅色的設置了一個往左浮動一個往右浮動，c3那個標簽沒有設置浮動之后，發現紅色的兩個雖然浮動了，但是粉色的這個跑上去了，兩個紅色的壓在這個粉色的標簽上了。

　　　　先看這個問題昂：在給c2的div標簽加上浮動之前是下面這樣的效果：

　　　　我並沒有給c1那個div標簽設置高度，但是你發現c1這個div標簽是有高度的，這是因為里面兩個c2div我設置了高度了，這兩個div將c1這個div標簽撐起來了

　　　　當我們加上浮動之后，你再看這個c1的div標簽的高度：發現c1這個div的高度沒有了，顯示的高度是1.99，是因為我給它設置了邊框，上下邊框加起來正好2px，這里顯示了個約等的值，別在意昂

　　　　這就看到了浮動的副作用，浮動起來以后脫離了你整個頁面文檔，然后兩個c1的div標簽，一個往左靠，一個往右靠，無法撐起自己的父級標簽了，也就是那個c1的div標簽，那么粉色的c3那個標簽就上去了。影響了我們頁面的整個布局。

　　　　我們不想讓粉色的這個標簽頂上去怎么辦，看一下c1這個標簽的子標簽的高度(內邊距+外邊距+邊框寬度+標簽高度)，然后給c1這個父標簽的高度設置成這個值，當然是可以的，但是如果兩個子標簽的高度不相等呢，你按照哪一個來算高度啊，並且將來這樣的標簽要是很多怎么辦，沒法算對不對，所以我們一般不用這種方法來解決浮動的問題，看下面我們要學的clear，清除浮動。

　　　　浮動元素會生成一個塊級框，而不論它本身是何種元素。

　　　　關於浮動的兩個特點：

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

　　三種取值

　　　　left：向左浮動

　　　　right：向右浮動

　　　　none：默認值，不浮動

參考示例

　　clear

　　　　clear屬性規定元素的哪一側不允許其他浮動元素。

值	描述
left	在左側不允許浮動元素。
right	在右側不允許浮動元素。
both	在左右兩側均不允許浮動元素。
none	默認值。允許浮動元素出現在兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。

　　　　注意：clear屬性只會對自身起作用，而不會影響其他元素。按照我們上面那個例子的意思就是說，我們可以給粉色的那個c3屬性的div標簽設置一個clear：both，意思是說，這個標簽的左右都不能有浮動的標簽，那么它只能跑到兩個浮動的c2div標簽的下面，但是一般我們都會再c2和c3的中間加一個別的標簽，給這個標簽設置一個clear屬性，並且高度設置為0，或者不給高度，因為浮動的標簽是你自己c1里面的，所以你要自己解決，才能撐起你自己的高度，並且再用其他的標簽的時候，我們就不需要再考慮浮動的問題了，直接寫自己的樣式就可以了，不然你每次加其他的標簽都要去看看上面的標簽有沒有浮動的啊，對不對。

　　　　接着看上面這個示例，如果我們這樣設置：

　　　　這樣粉色的這個標簽就上不去了

　　清除浮動

　　　　浮動的副作用（父標簽塌陷問題），所以要清除浮動

　　　　主要有三種方式：

固定高度就是我們剛才的示例，在父標簽里面加一個其他的標簽
偽元素清除法 css來解決
overflow:hidden 給塌陷的父級標簽設置這個屬性就可以清除浮動。

　　　　偽元素清除法（使用較多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

　　我們通過微元素清除法來清除一下浮動：

　　　　效果是一樣的：

　　　　一般業內約定成俗，都把這個清除浮動的class屬性命名為clearfix，而不是cc，如果你在別的網頁看到了這個clearfix，這個一定是用來清除浮動的。

　　　　總結一下：為什么要有浮動啊，是想做頁面布局，但是浮動有副作用，父級標簽塌陷，所以要想辦法去掉這個副作用，使用了clear來清除浮動帶來的副作用，我們當然也可以通過設置標簽為inline-block來實現這種布局效果，但是把一個塊級標簽變成一個類似內斂標簽的感覺，不好操控，容易混亂，所以一般都用浮動來進行布局。

　　　　來吧，大家試試把，然后我們再繼續學習~~

　　overflow溢出屬性（先看下面的例子）

值	描述
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

overflow（水平和垂直均設置）
overflow-x（設置水平方向，只出現x軸的滾動條）
overflow-y（設置垂直方向，只出現y軸的滾動條）

　　舉個例子：

　　　　比如我們在一個標簽里面寫了一堆的文字，然后把標簽的高度和寬度設置的比較小的時候，文字就溢出了：

　　　　然后我們就可以設置一下，如果文字溢出了，溢出的部分怎么辦，設置一個overflow為hidden：

　　　　再看效果，溢出的文字就不顯示了。

　　　　如果設置成overflow為scroll，就會出現滾動條，我們改動一個下標簽的高度和寬度昂，要不然不好看出效果：

　　　　看效果：

　　圓形頭像示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圓形的頭像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      background-color: #eeeeee;
    }
    .header-img {
      width: 150px;  #如果這個高度和寬度比圖片的像素小怎么辦，圖片顯示不全啊，因為用戶上傳的頭像沒准多大像素的，就需要設置下面哈格.header-mg>img，里面寫上max-width:100%了
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;  #圓形的邊框
      overflow: hidden;    #溢出的內容隱藏
    }
    .header-img>img {
      max-width: 100%; #相當於將圖片的大小設置為父級標簽的大小來顯示了，因為用戶上傳的頭像的像素我們是不知道的，就讓它按照父級標簽的大小來，就能放下整個頭像了，就不會出現頭像顯示不全的問題了
　　　　#直接寫width:100%就行，上面寫max-width的意思是如果圖片大於咱們設置的標簽高寬的時候，就按照父級標簽的大小來，比父級標簽的高寬小的時候，就不需要按照父級標簽的大小來了，了解一下就行了

    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
</div>

</body>
</html>

　　下面我們來學習定位：也是用來布局的，一般用來做一些小的布局，例如小米商城：

　　　　還有網站右上角這個東西：

　　　　這些小范圍的布局一般都是定位做的，大范圍的布局一般都是用float來做的

　　　　下面我們來看看定位的用法

　　定位（position）

　　　　static（無定位，咱就不說了，主要看相對和絕對定位）

　　　　　　static 默認值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。

　　　　relative（相對定位）

　　　　　　相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置左上角為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。對象遵循正常文檔流，所以不會出現像浮動那種父級標簽塌陷的副作用，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。往上移動:top:-100px（注意是負值）或者bottom：-100px（負值），往左移動：left:-100px（也是負值）或者right：-100px，往下移動:bottom：100px（正值）或者top：100px（正值），往右移動：right:100px（正值）或者left：100px。大家記住一點昂，凡是標簽要進行移動，不管是float還是relative還是線面的absolute，都是按照元素自己的左上角進行計算的

　　　　　　注意：position：relative的一個主要用法：方便下面要學的絕對定位元素找到參照物。可以將元素設置成relative，不設置任何的top、left、right、bottom等，它還是它原來的位置

　　　　absolute（絕對定位）

　　　　　　定義：設置為絕對定位的元素框從文檔流完全刪除，也會有父級標簽塌陷的問題，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

　　　　　　重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。

　　　　　　另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。

　　　　fixed（固定）不管頁面怎么動，都在整個屏幕的某個位置

　　　　　　fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊通過z-index屬性定義。注意點：一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。

　　　　　　在理論上，被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。

　　　　　　示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回頂部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;  #水平居中
      position: fixed;
      right: 10px;  #距離窗口右邊框的距離
      bottom: 20px; #距離窗口下邊框的距離
      /*height：20px；
　　　 line-height：20；當line-height等於height的值的時候，就能實現一個文本居中的效果 */
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回頂部</div>
</body>
</html>

　　　　z-index

#i2 {
  z-index: 999;
}

　　　　　　設置對象的層疊順序。一般用在模態對話框上：

　　　　　那么誰在上面顯示，誰被壓在下面的呢，就是通過這個z-index來設置的。

z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素float不能使用z-index
z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
從父現象：父親慫了，兒子再牛逼也沒用

　　#自定義的一個模態對話框示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定義模態框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65); #rgba的最后一個參數就是透明度的意思，所以如果我們這樣寫，就不需要寫下面那個opcity了，但是這個只表示的背景顏色的透明度，opcity是標簽的透明度及標簽的內容(包括里面的文字)及標簽下面的子標簽的透明度
      position: fixed;
      top: 0;
      right: 0;  top\right\bottom\left都設置為0，意思就是全屏，這個標簽把全屏都覆蓋了
      bottom: 0;
      left: 0;
      z-index: 998;
      #opcity:0.4; #設置元素的透明度
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;  #設置了left：50%和top：50%，你就會發現，你這個標簽的左上角相對於頁面的左面是50%，上面是50%，所以我們還要移動窗口，往左移動標簽寬度的一半，往上移動高度的一半就行了。就是下面的margin設置
      top: 50%;
      margin: -200px 0 0 -300px; #左下右上，別忘了，往左移動要負值，往上移動要負值，因為它的移動是按照自己標簽的左上角來移動的。
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

　　　　來再教大家一個pycharm的用法，自定義快捷鍵：

　　　　　　然后點擊apply和ok：

　　　　在到html頁面中也一個hya：

　　　　就看到了這些文字：

　　　　在pycharm的使用秘籍里面都有昂，自己去學吧~~~，網上一搜pycharm的使用，就有

　　opacity

　　　　　　用來定義透明效果。取值范圍是0~1，0是完全透明，1是完全不透明。

綜合示例

　　頂部導航菜單

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li標簽的float示例</title>
  <style>
    /*清除瀏覽器默認外邊距和內填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a標簽默認的下划線*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*刪除列表默認的圓點樣式*/
      margin: 0; /*刪除列表默認的外邊距*/
      padding: 0; /*刪除列表默認的內填充*/
    }
    /*li元素向左浮動*/
    li {
      float: left;
    }

    li > a {
      display: block; /*讓鏈接顯示為塊級標簽*/
      padding: 0 15px; /*設置左右各15像素的填充*/
      color: #b0b0b0; /*設置字體顏色*/
      line-height: 40px; /*設置行高*/
    }
    /*鼠標移上去顏色變白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮動 解決父級塌陷問題*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 頂部導航欄 開始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">雲服務</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">優品</a></li>
  </ul>
</div>
<!-- 頂部導航欄 結束 -->
</body>
</html>

　　上面的導航欄的效果：

　　將來我們在寫一個頁面的時候，首先寫頁面的整體結構，就是布局，大塊先搞出來，再大塊的基礎上來來寫小塊，然后一級一級的這么寫。看下面的小米商城的示例，按照紅框--黃框--子框--藍框來看整個布局：

　　產品經理需求-->UI（視覺、交互等各種UI）將這些頁面做成圖片（包括里面的文字大小圖片大小等都給你准備好，標的很清楚）-->前端工程師（通過前端代碼來實現UI的頁面）-->后端工程師（寫提供數據、處理數據的邏輯）-->DBA管理數據

　最后給大家一個css只做動畫效果的方式：鼠標移動到標簽上的時候，出現動態效果和陰影的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*給標簽加上鼠標移動上去的一些效果*/
        #test{
            height: 200px;
            border: 1px solid black;

        }
        #test:hover{
            box-shadow: 0 5px 10px;  /*給標簽加陰影的效果，參數1是水平方向的陰影，參數2的5px是垂直方向上的陰影，參數3是陰影的范圍*/
            transform: translate3d(3px,-2px,0); /*鼠標移動上去之后有個標簽往上台的效果，三個參數是：x軸，y軸，z軸，現在的效果是y軸方向往上移動2px,x軸往右移動3px*/
            transition:all,.2s linear; /*這個的意思是所有的新樣式改變，在0.2秒內慢慢的顯示出來*/
        }

    </style>
</head>
<body>

<div id="test"></div>

</body>
</html>

　有一個做網頁的時候的一個圖片示例的網址：https://dummyimage.com/

　　如果在這個網址后面輸入下面的內容：

　　　　一回車，你就看到下面的這個圖：

　　注意一點：

　　　　當你們寫了新的css樣式的時候，如果自己調試的時候發現頁面上刷新不出來怎么辦，是因為瀏覽器有可能還在使用你之前的樣式，教大家一個方法，讓你寫的新的css生效的方法：

　　　　f12打開瀏覽器調試窗口，找到下面這個設置：

　　　　然后刷新頁面就可以了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端之：css 前端CSS 前端——CSS 前端基礎之CSS 前端學習（九）：CSS基礎前端編碼規范之CSS 前端基礎之CSS樣式前端基礎-- CSS 前端學習（八）：CSS 前端 -- css浮動

前端CSS

CSS介紹

CSS語法

CSS實例

CSS注釋

CSS的幾種引入方式

行內樣式

內部樣式

外部樣式

文件內容是 ：

CSS選擇器（如何找到對應的標簽）

基本選擇器

元素選擇器（標簽名）

ID選擇器

類選擇器

通用選擇器

組合選擇器

后代選擇器（子子孫孫）

兒子選擇器（只找兒子）

毗鄰選擇器

弟弟選擇器

屬性選擇器

分組和嵌套

分組（多個選擇器逗號分隔）

嵌套

偽類選擇器（比較特殊，CSS3版本新加的特性）

偽元素選擇器（通過css來造標簽，不推薦使用）

first-letter

before

after

選擇器的優先級（難點）

CSS繼承

選擇器的優先級

CSS屬性相關

寬和高

字體屬性

文字字體

字體大小

字重（粗細）

文本顏色

文字屬性

文字對齊

文字裝飾

首行縮進

背景屬性

邊框

border-radius

display屬性

CSS盒子模型

margin外邊距

padding內填充

float

三種取值

clear

清除浮動

overflow溢出屬性 （先看下面的例子）

圓形頭像示例

定位（position）

static（無定位，咱就不說了，主要看相對和絕對定位）

relative（相對定位）

absolute（絕對定位）

fixed（固定）不管頁面怎么動，都在整個屏幕的某個位置

z-index

opacity

綜合示例

頂部導航菜單

免責聲明！

　　CSS實例

　　CSS注釋

　　行內樣式

　　內部樣式

　　外部樣式

　　　　文件內容是：

　　基本選擇器

　　　　元素選擇器（標簽名）

　　　　ID選擇器

　　類選擇器

　　　　通用選擇器

　　組合選擇器

　　　　后代選擇器（子子孫孫）

　　　　兒子選擇器（只找兒子）

　　　　毗鄰選擇器

　　　　弟弟選擇器

　　屬性選擇器

　　分組和嵌套

　　　　分組（多個選擇器逗號分隔）

　　　　嵌套

　　偽類選擇器（比較特殊，CSS3版本新加的特性）

　　偽元素選擇器（通過css來造標簽，不推薦使用）

　　　　first-letter

　　　　before

　　　　after

　　選擇器的優先級（難點）

　　　　CSS繼承

　　選擇器的優先級

　　寬和高

　　字體屬性

　　　　文字字體

　　　　字體大小

　　　　字重（粗細）

　　文本顏色

　　文字屬性

　　　　文字對齊

　　　　文字裝飾

　　　　首行縮進

　　背景屬性

　　邊框

　　border-radius

　　display屬性

　　CSS盒子模型

　　margin外邊距

　　padding內填充

　　float

　　三種取值

　　clear

　　清除浮動

　　overflow溢出屬性（先看下面的例子）

　　圓形頭像示例

　　定位（position）

　　　　static（無定位，咱就不說了，主要看相對和絕對定位）

　　　　relative（相對定位）

　　　　absolute（絕對定位）

　　　　fixed（固定）不管頁面怎么動，都在整個屏幕的某個位置

　　　　z-index

　　opacity

　　頂部導航菜單