前端
前端
任何與用戶直接打交道的操做界面均可以稱之爲前端
好比:電腦界面 手機界面 平板界面
什麼是後端
後端相似於幕後操做者(都是代碼)
不直接跟用戶打交道
爲何學前端css
要求看懂基本前端代碼以及可以搭建一些簡單的頁面便可 先打基礎 爲後續可能擴展作準備
學習歷程html
HTML 網頁的骨架 沒有任何樣式 CSS 給骨架添加各類樣式 變得好看 美化HTML JS 控制網頁的動態效果 前端框架：BOOTSTRAP JQuery Vue
瀏覽器窗口輸入網址 回車 發生了什麼前端
1.瀏覽器朝服務端發送請求 2.服務端接收請求 3.服務端返回相應的相應(返回一個百度首頁) 4.瀏覽器接收響應 根據特定的規則渲染頁面展現給用戶看
HTTP協議python
超文本傳輸協議 用來規定服務端和瀏覽器之間的數據交互的格式。。。
該協議能夠不遵循 到那時你寫的客戶端就不能被瀏覽器正常訪問 本身跟本身玩 用戶想使用就下載你本身專門的APP便可
四大特性：
1.基於請求響應
2.基於tcp/ip做用於應用層之上的協議
3.無狀態
不保存用戶的信息
4.無/短連接
請求來一次響應一次 以後兩者就沒有任何連接和關係了
長連接：
雙方創建鏈接以後默認不斷開 websocket
#請求數據格式
請求首行(標識HTTP協議版本，當前請求方式)
請求頭(一大堆k，v鍵值對)
\r \n #不能省略
請求體(並非全部的請求方式都有,get沒有post有,存放的是post請求提交的敏感數據：用戶名 密碼等)
#響應數據模式
響應首行(標識HTTP協議版本，響應狀態碼)
響應頭(一大堆k，v鍵值對)
\r \n #不能省略
響應體(返回給瀏覽器展現給用戶看的數據)
#響應狀態碼
用一串簡單的數字來表示一些複雜的狀態或者描述性信息
1xx:服務端已經成功接收了你的數據正在處理，你能夠繼續提交額外的數據
2xx:服務端成功響應了你想要的數據(200 ok 請求成功)
3xx:重定向 訪問一個須要登陸以後才能看的頁面 自動跳轉到登陸頁面
4xx:請求錯誤 404：請求資源不存在 403：當前請求不合法或者不符合訪問資源的條件
5xx:服務器內部錯誤(500 機房着火 出bug)，與客戶端不要緊
#請求方式
1.get請求
朝服務端要數據
eg：輸入網址獲取對應的內容
2.post請求
朝服務端提交數據
eg：用戶登陸 輸入用戶名和密碼以後 提交到服務端後端作身份校驗
#url：統一資源定位符(網址)
HTML
網頁的骨架 HTML是一種標記語言，是一種用於建立網頁的標記語言，它不是一種編程語言。 若是你想要讓瀏覽器可以渲染出你寫的頁面 你就必須遵循HTML語法 咱們瀏覽器看到的頁面，內部其實都是HTML代碼 網頁文件的擴展名：.html或.htm <h1>hello baby~</h1> <a href='https://www.mzitu.com/'>AAA</a>
HTML就是書寫網頁的一套標準web
<!--單行註釋--> <!-- 多行註釋1 多行註釋2 多行註釋3 -->
HTML文檔結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>聲明爲HTML文檔。
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。
<!DOCTYPE> 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。
<html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。
<head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。
包含了文檔的元（meta）數據。head內的標籤不是給用戶看的 而是定義一些配置主要是給瀏覽器看的
<title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。
<body>、</body>之間的文本是可見的網頁主體內容。body內的標籤 寫什麼瀏覽器就渲染什麼 用戶就能看到什麼。
注意：對於中文網頁須要使用 <meta charset="utf-8"> 聲明編碼，不然會出現亂碼。
有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲 <meta charset="gbk">。
文件的後綴名是給用戶看的，只不過對應不一樣的文件後綴名又不用的軟件來處理並添加不少功能編程
HTML文件是沒有格式的，能夠所有寫在一行都沒有問題，只不過咱們習慣了縮進來表示代後端
標籤的分類瀏覽器
1.雙標籤 <h1></h1>2.單標籤( 自閉和 標籤) <a href='https://www.mzitu.com/'></a>
幾個經常使用屬性前端框架
id：定義標籤的惟一ID，HTML文檔樹中惟一class：爲html元素定義一個或多個類名（classname）(CSS樣式類名)style：規定元素的行內樣式（CSS樣式）
head內經常使用的標籤
<title>Title</title>
定義網頁標題爲Title<style></style>
定義內部樣式表<script></script>
定義JS代碼或引入外部JS文件<link/>
引入外部樣式表文件或網站圖標 css文件<meta/>
定義網頁原信息，告訴瀏覽器要幹啥<style> h1{ color:greenyellow; }</style>
內部用來書寫CSS代碼
<script> alert(123)</script> 內部用來書寫js代碼<script scr='myjs.js'></script>
還能夠引入外部js文件<link rel='stylesheet' href='mycss.css'>
引入外部css文件<meta >
告訴瀏覽器要幹啥keywords 淘寶 商品 等等搜索關鍵字當你在用瀏覽器搜索的時候
只要輸入了keywords後面指定的關鍵字那麼該網頁都有可能被百度搜索出來展現給用戶description網頁的描述性信息簡易操做：ol>li{$}*3
結果以下<ol> <li>1</li> <li>2</li> <li>3</li></ol>
body內經常使用標籤
基本標籤<h1>我是h1</h1> 一級標題 <h2>我是h1</h2> <h3>我是h1</h3> <h4>我是h1</h4> <h5>我是h1</h5> <h6>我是h1</h6> <b>加粗</b> <i>斜體</i> <u>下劃線</u> <s>刪除</s> <p>段落標籤</p> <br>換行 <hr>水平分割線標籤的分類2 1.塊兒級標籤:獨佔一行 h1-h6 p div 2.行內標籤：自身文本多大就佔多大 i u s b span input (1)行內標籤能夠修改長寬，行內標籤不能夠 修改了也不會變 (2)塊級標籤能夠套全部的塊級標籤和行內標籤，可是p標籤不能嵌套塊級元素和p標籤，能夠套行內標籤 (3)行內標籤能夠嵌套行內標籤，可是不能嵌套塊級標籤
特殊符號服務器
空格> 大於號< 小於號& &符號¥ ¥© ©版權® ®
div標籤和span標籤
頁面佈局 先用div和span佔位而後再去調整樣式div 塊級標籤能夠把它當作一塊區域 先用div規定好區域 以後再在區域內填寫東西span 行內標籤普通文本先用span標籤塊級元素與行內元素的區別：所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。 若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門爲定義CSS樣式而生的。
img標籤
圖片標籤<img src="" alt="" title="" height="" width="">alt: 當圖片加載不出來的時候，輸出alt後面的內容title:當鼠標懸浮到圖片上後 自動展現的提示信息heightwidth高度和寬度 當只修改一個參數時 另外一個參數會等比例縮放若是修改兩個參數 而且不考慮參數的問題 圖片可能會失真
CSS:層疊樣式表，用來給網頁骨架增長樣式，使得網頁變得更加好看
a標籤
超連接標籤
所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。
什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。
舉例
http://www.sohu.com/stu/intro.html
URL地址由4部分組成
第1部分：爲協議：http://、ftp://等
第2部分：爲站點地址：能夠是域名或IP地址
第3部分：爲頁面在站點中的目錄：stu
第4部分：爲頁面名稱，例如 index.html
各部分之間用「/」符號隔開。
<a href="" target="_self"></a>
href
絕對URL - 指向另外一個站點（好比 href="http://www.jd.com）
相對URL - 指當前站點中確切的路徑（href="index.htm"）
錨URL - 指向頁面中的錨（href="#top"）
放的是url，用戶點擊就會跳轉到url頁面
放其餘標籤的id值 點擊便可跳轉到對應的標籤位置
錨點功能
點擊一個文本標題 頁面自動跳轉到標題對應的內容區域
target
默認是target="_self" 當前頁面跳轉
"_blank"新建頁面跳轉
<a href="" id="d1">頂部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中間</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中間</a>
<a href="#d111">回到中間</a>
列表標籤
無序列表（較多）
<ul type=""> 沒序號
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li>
</ul>
type屬性：
disc（實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）
有序列表（瞭解）
<ol type="1" start="5"> 序號從5開始
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
標題列表（瞭解）
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
</dl>
表格標籤
屬性:
border: 表格邊框. <table border="1">
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好經過css來設置長寬）
rowspan: 單元格豎跨多少行 <td rowspan="2">DBJ</td>
colspan: 單元格橫跨多少列（即合併單元格） <td colspan="2">egon</td>
<table border="1" cellpadding="5" cellspacing="5">
<thead>
<tr> 一個tr就表明一行
<th>username</th> 加粗文本
<th>password</th>
<th>hobby</th>
</tr>
</thead> 表頭（字段信息）
<tbody> 表單（數據信息）
<tr>
<td>jason</td> 正常文本
<td>123</td>
<td>read</td>
</tr>
<tr>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
</tr>
<tr>
<td>tank</td>
<td>123</td>
<td>tea</td>
</tr>
</tbody>
</table>
表單標籤
表單屬性 描述
accept-charset 規定在被提交表單中使用的字符集（默認：頁面字符集）。
action 規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete 規定瀏覽器應該自動完成表單（默認：開啓）。
enctype 規定被提交數據的編碼（默認：url-encoded）。
method 規定在提交表單時所用的 HTTP 方法（默認：GET）。
name 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate 規定瀏覽器不驗證表單。
target 規定 action 屬性中地址的目標（默認：_self）。
可以獲取前端用戶數據（永不輸入的、選擇的等等）基於網絡發送給後端服務器
form功能：
1.表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
2.表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。
3.表單還能夠包含textarea、select、fieldset和 label標籤。
文本框 選擇 表單分組 標籤
表單工做原理：
表單通常用來收集用戶的輸入信息
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息。
<form action=""></form>
action：控制數據提交的後端路徑
1.什麼都不寫 默認朝當前頁面所在的url提交數據
2.寫全路徑 寫哪裏提交到哪裏
3.只寫路徑後綴action='index'
自動識別出當前服務端的ip和port拼接到前面
host:port/index/
第一種 直接將input框卸載label內
<label for="d1">
username:<input type="text" id="d1">
</label>
第二種 經過id連接便可 無需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
input 能夠不跟 label 關聯
label和input都是行內標籤
input
<input> 元素會根據不一樣的 type 屬性，變化爲多種形態。
沒有指定按鈕的文本內容 不一樣的瀏覽器打開以後可能渲染的文本內容不一致
type屬性值 表現形式 對應代碼
text 單行輸入文本 <input type=text" />
password 密碼輸入框 <input type="password" />
date 日期輸入框 <input type="date" />
checkbox 複選框 <input type="checkbox" checked="checked" />
radio 單選框 <input type="radio" />
submit 提交按鈕 <input type="submit" value="提交" />
reset 重置按鈕 <input type="reset" value="重置" />
button 普通按鈕 <input type="button" value="普通按鈕" />
hidden 隱藏輸入框 <input type="hidden" />
file 文本選擇框 <input type="file" />
屬性說明:
name：表單提交時的「鍵」，注意和id的區別
value：表單提交時對應項的值
type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容
type="text","password","hidden"時，爲輸入框的初始值
type="checkbox", "radio", "file"，爲輸入相關聯的值
checked：radio和checkbox默認被選中的項
readonly：text和password設置只讀
disabled：全部input均適用
redio：單選
默認選中要加checked="checked"
<input type="radio" name="gender" checked="checked">男
當標籤的屬性名和屬性值同樣的時候能夠簡寫
<input type="radio" name="gender" checked>女
checkbox：多選
<input type="checkbox" checked>DBJ
<input type="checkbox" checked>JBD
file:獲取文件 也能夠一次性獲取多個
<input type="file" multiple>
select標籤
屬性說明：
multiple：布爾屬性，設置後爲多選，不然默認單選
disabled：禁用
selected：默認選中該項
value：定義提交時的選項值
<p>前女朋友:
<select name="" id="" multiple>
<option value="" selected>新垣結衣</option>
<option value="">斯佳麗</option>
<option value="">明老師</option>
</select>
</p>
label標籤
定義：<label> 標籤爲 input 元素定義標註（標記）。 說明： label 元素不會向用戶呈現任何特殊效果。 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。 <form action=""> <label for="username">用戶名</label> <input type="text" id="username" name="username"> </form>
textarea標籤
屬性說明： name：名稱 rows：行數 cols：列數 disabled：禁用 <textarea name="memo" id="memo" cols="30" rows="10"> 默認內容 </textarea> textarea標籤 獲取大綱文本 可以觸發form表單提交數據的按鈕有哪些 1.<input type="submit" value="註冊"> 2.<button>點我</button> 全部獲取用戶輸入的標籤 都應該有name屬性 name就相似於字典的key 用戶輸入的數據就相似於字典的value
CSS
CSS:層疊樣式表，用來給網頁骨架增長樣式，使得網頁變得更加好看
css語法結構:
css的三種引入方式
1.styke標籤直接書寫
2.link標籤引入外部css文件
3.行內式 （通常不用）
選擇器{
屬性名1：屬性值1；
屬性名2：屬性值2；
屬性名3：屬性值3；
屬性名4：屬性值4；
屬性名5：屬性值5；
}
link
hover
active
visited
基本選擇器
ID選擇器
#i1 {
background-color: red;
}
類選擇器
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
注意：
樣式類名不要用數字開頭（有的瀏覽器不認）。
標籤中的class屬性若是有多個，要用空格分隔。
元素選擇器
p {color: "red";}
通用選擇器
* {
color: white;
}
組合選擇器
後代選擇器
/*li內部的a標籤設置字體顏色*/
li a {
color: green;
}
兒子選擇器
/*選擇全部父級是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
毗鄰選擇器 （同級別緊挨着的下面第一個）
/*選擇全部緊接着<div>元素以後的<p>元素*/
div+p {
margin: 5px;
}
弟弟選擇器（同級別下面全部的p標籤）
/*i1後面全部的兄弟p標籤*/
#i1~p {
border: 2px solid royalblue;
}
屬性選擇器
屬性選擇器
/*用於選取帶有指定屬性的元素。*/
p[title] {
color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
color: green;
}
分組和嵌套
分組
當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
div, p {
color: red;
}
上面的代碼爲div標籤和p標籤統一設置字體爲紅色。
嵌套
多種選擇器能夠混合起來使用，好比：.c1類內部全部p標籤設置字體顏色爲紅色。
.c1 p {
color: red;
}
僞類選擇器
/* 未訪問的連接 */
a:link {
color: #FF0000
}
/* 鼠標移動到連接上 */ （必須記住）（鼠標懸浮態）
a:hover {
color: #FF00FF
}
/* 選定的連接 */ （激活態，點擊不鬆開的狀態）
a:active {
color: #0000FF
}
/* 已訪問的連接 */
a:visited {
color: #00FF00
}
/*input輸入框獲取焦點時樣式*/（後面會用）
input:focus {
outline: none;
background-color: #eee;
}
僞元素選擇器
first-letter
經常使用的給首字母設置特殊樣式：
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每一個<p>元素以前插入內容*/ 在文本開頭 同css添加內容 是沒法被選中的
p:before {
content:"*";
color:red;
}
after
/*在每一個<p>元素以後插入內容*/
p:after {
content:"[?]";
color:blue;
}
before和after多用於清除浮動帶來的影響：多用於處理父標籤塌陷的影響。
選擇器的優先級
選擇器相同時，就近原則
選擇器不一樣時 行內選擇器>id>類>標籤
精確度越高越有效
除此以外還能夠經過添加 !important方式來強制讓樣式生效，但並不推薦使用。由於若是過多的使用!important會使樣式文件混亂不易維護。
CSS屬性相關
width屬性能夠爲元素設置寬度。 height屬性能夠爲元素設置高度。 塊級標籤才能設置寬度，內聯標籤的寬度由內容來決定。
字體屬性
文字字體
font-family能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。
body {
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}
大白話：修改字體樣式 第一個不生效就後一個
字體大小
p {
font-size: 14px;
}
字重（粗細）
font-weight用來設置字體的字重（粗細）。
值 描述
normal 默認值，標準粗細
bold 粗體
bolder 更粗
lighter 更細
100~900 設置具體粗細，400等同於normal，而700等同於bold
inherit 繼承父元素字體的粗細值
文本顏色
顏色屬性被用來設置文字的顏色。
顏色是經過CSS最常常的指定：
十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
還有rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間。
color:rgba(255,0,0,0.3)
文字屬性
文字對齊
text-align 屬性規定元素中的文本的水平對齊方式。
值 描述
left 左邊對齊 默認值
right 右對齊
center 居中對齊
justify 兩端對齊
文字裝飾
text-decoration 屬性用來給文字添加特殊效果。
值 描述
none 默認，定義標準的文本，沒有任何樣式。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
inherit 繼承父元素的text-decoration屬性的值。
經常使用的爲去掉a標籤默認的自劃線：
a {
text-decoration: none;
}
首行縮進
將段落的第一行縮進 32像素：
p {
text-indent: 32px;
}
背景屬性
/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url('1.jpg');
/*
背景重複
repeat(默認):背景圖片平鋪排滿整個網頁
repeat-x：背景圖片只在水平方向上平鋪
repeat-y：背景圖片只在垂直方向上平鋪
no-repeat：背景圖片不平鋪
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
background-attachment:fixed; 背景圖片不動
簡寫
background:#336699 url('1.png') no-repeat left top;
邊框
邊框
border： 粗細 樣式 顏色
設置單獨一條邊框
border-top
border-bottom
border-left
border-right
取消邊框
border：none / 0
邊框粗細
border-width
border-top -width
邊框樣式
border-style：{
solid 實線
deshed 虛線
dotted 點線
double 雙線
}
border-top -style
邊框顏色
border-color
border-top -color
邊框變形
border-radius; 圓形
border-radius:200px;橢圓
border-radius:50%; 直接寫50%便可長寬同樣就是圓 不同就是橢圓
display
dispaly：none; 隱藏標籤不展現到前端頁面而且原來的位置也再也不佔有了 可是還存在於文檔上。位置也不在了 hidden:單純的隱藏，留有位置。 dispaly: inline;將標籤設置爲行內標籤的特色，沒法修改長寬 display: block;將標籤設置成塊級標籤的特色 display: inline-block讓標籤既能夠在一行顯示又能夠設置長寬
CSS盒子模型
margin: 外邊距，用於控制元素之間的距離; margin的最基本用途就是控制元素周圍空間的間隔,從視覺角度上達到相互隔開的目的
padding: 內邊距，用於控制內容與邊框之間的距離
Border(邊框):圍繞在內邊距和內容外的邊框
Content(內容):盒子的內容，顯示文本和圖像
margin外邊距
一、 margin是設置盒子與盒子之間的位置關係
二、邊框線之外的距離均可以設置margin
三、使用margin
單一方向margin
margin-left
margin-right
margin-top
margin-bottom
多個方向margin
1個值 4個方向
2個值 上下 左右
3個值 上 左右 下
4個值 上 右 下 左
margin-left:
正值 右移動
負值 左移動
margin-top
正值 下移動
負值 上移動
四、讓塊元素水平居中（內聯元素不起做用）
margin：0 auto
內邊距padding
一、控制盒子與內容之間的位置關係
二、邊框線之內的距離均可以設置padding
三、內邊框會撐大盒子，若是設置padding，讓盒子不變形，加上多少padding，盒子的寬高就須要減去多少padding
四、padding的設置
單一方向padding
padding-left
padding-right
padding-top
padding-bottom
多個方向padding
1個值 4個方向
2個值 上下 左右
3個值 上 左右 下
4個值 上 右 下 左
五、padding不能設置負值
盒模型的計算
盒子的總高度=height+上下的padding+上下的border
盒子的總寬度=width+左右的padding+左右的border
浮動（float clear）
#d1{
height:200px;
width:200px;
background-color: red;
float:left;
}
float:left;向左浮動
浮動形成的影響：
會形成父標籤塌陷的問題
clear：left 該標籤的左邊不能有浮動的元素
.clearfix:after{
content:'';
display:block;
clear:both;
}
只要標籤出現了塌陷的問題就給該塌陷的標籤加一個clearfix屬性便可
清除浮動的幾種方法：
方法一：
給浮動的盒子的父盒子添加一個高度，由於浮動盒子不能撐開父盒子，那麼咱們給父盒子加上高度就從根本上解決了這一個問題，
缺點：圖片浮動，給定圖片盒子一個寬度，致使其高度是等比例縮放的，這一個高度值有很大的概率是很難計算出來的，這種狀況就不能使用手動給定高度這一方法
方法二：
額外標籤法，
在父盒子中，全部的浮動盒子以後添加一個額外的標籤，
.clear { clear: both; } 缺點，一個頁面可能有不少地方須要清除浮動，這樣就須要使用不少無用的標籤
方法三：
給浮動盒子的父盒子也使用浮動，這樣浮動的盒子就能撐開其父盒子
缺點：雖然給父盒子使用浮動可以達到清除內部浮動元素的目的，可是總體浮動一樣會影響到頁面的佈局
方法四：
使用CSS的overflow屬性
給浮動盒子的父盒子添加overflow:hidden;或overflow:auto;能夠清除浮動，另外在 IE6 中還須要觸發 hasLayout ，例如爲父元素設置容器寬高或設置 zoom:1。
在添加overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。
方法五：
使用CSS的:after僞元素
結合 :after 僞元素（注意這不是僞類，而是僞元素，表明一個元素以後最近的元素）和 IEhack ，能夠完美兼容當前主流的各大瀏覽器，這裏的 IEhack 指的是觸發 hasLayout。
給浮動元素的容器添加一個clearfix的class，而後給這個class添加一個:after僞元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。
.clearfix:after{
content: 「」;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 觸發 hasLayout */
zoom: 1;
}
五星推薦使用
溢出
overflow溢出屬性 值 描述 visible 默認值。內容不會被修剪，會呈如今元素框以外。 hidden 內容會被修剪，而且其他內容是不可見的。 scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。 auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。 inherit 規定應該從父元素繼承 overflow 屬性的值。 overflow（水平和垂直均設置） overflow-x（設置水平方向） overflow-y（設置垂直方向）
定位(relative、absolute、fixed)
靜態 全部的標籤默認都是靜態的，沒法改變位置 relative（相對定位） position:relative 相對於標籤原來的位置作移動 absolute（絕對定位） 相對於已經定位過的父標籤移動（若是沒有父標籤name就以body爲參照） 沒有父標籤就參照body fixed（固定定位） 相對於瀏覽器窗口固定在某個位置
驗證浮動和定位是否脫離文檔流
脫離文檔流 浮動 絕對定位 固定定位 不脫離文檔流 相對定位
z-index模態框
百度登陸頁面實際上是三層結構 1.最底部是正常內容(z=0) 最遠的 2.黑色的透明區(z=99) 中間層 3.白色的註冊區域(z=100) 離用戶最近
透明度opacity
rgba智能影響顏色 opacity用來定義透明效果。取值範圍是0~1，0是徹底透明，1是徹底不透明。 opacity:0.5;
z-index模態框
百度登陸頁面實際上是三層結構 1.最底部是正常內容(z=0) 最遠的 2.黑色的透明區(z=99) 中間層 3.白色的註冊區域(z=100) 離用戶最近
透明度opacity
rgba智能影響顏色opacity用來定義透明效果。取值範圍是0~1，0是徹底透明，1是徹底不透明。opacity:0.5;
相關文章
- 1. 前端，前端
- 2. 前端，前端。。。
- 3. 前端---------瞭解前端
- 4. 前端前端，變化多端
- 5. 前端共享博客（前端導航,前端博客,前端博客推薦）
- 6. 前端
- 7. 【前端】
- 8. 前端....
- 更多相關文章...
- • WSDL 端口 - WSDL 教程
- • XSLT - 在客戶端 - XSLT 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端，前端
- 2. 前端，前端。。。
- 3. 前端---------瞭解前端
- 4. 前端前端，變化多端
- 5. 前端共享博客（前端導航,前端博客,前端博客推薦）
- 6. 前端
- 7. 【前端】
- 8. 前端....