1. 標籤分類：
按照特性，對HTML標籤進行分類：
按照類型可以劃分爲：
a. block 塊 div, p, ul, li h1,h2, ....h6....
特性：獨佔一行；支持所有樣式；不設置width的時候，跟父元素的寬度一樣；所佔區域是一個矩形
b. inline 內聯 span, a, em, strong, img....
特性：不獨佔一行，而是挨在一起；有些樣式不支持；不寫寬度的時候，寬度由內容決定；所佔區域不一定是矩形
c. inline-block 內聯塊 input, select...
特性：即具備塊的特性，也具備內聯的特性。
2.按內容劃分標籤：
按內容劃分：
Flow: 流內容，表示網頁當中能夠感知到的一些標籤，比如，標題，塊...
Metadata: 元數據，例如設置網頁中的編碼，一部分能夠感知到，另一部分屬於輔助功能，不能感知到
Section: 分區，例如div標籤
Heading: 表示標題， h1,h2....h6
Phrasing: 措辭，即對文本的修飾，例如strong, em
Embedded: 嵌入的，例如圖片就是，audio, video
Interactive：互動的，如輸入框，下拉菜單
3.display顯示框類型：
display的屬性值：
block
inline
inline-block
none： 讓標籤不在頁面進行任何顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
display: inline; /*改變標籤的display屬性*/
}
</style>
</head>
<body>
<div id="box1">block1</div>
<div id="box2">block2</div>
</body>
</html>
display:none與visibility:hidden的區別：
display:none不佔空間的隱藏，但是visibility:hidden雖然會隱藏標籤，但是會佔空間。
4. 標籤嵌套規範：
ul/ol, li
dl, dt, dd
table, tr, td
塊標籤可以嵌套內聯標籤
塊標籤不一定能嵌套塊標籤
內聯標籤不能嵌套塊標籤
5. 溢出隱藏
overflow的屬性值（用於控制內容溢出塊的大小的時候，顯示的情況） overflow-x, overflow-y針對兩個軸分別設置
visible: 默認 （溢出的內容可見）
hidden：（溢出的內容隱藏）
scroll： 出現滾動條（x,y方向均有）
auto： 當內特溢出的時候出現滾動條，不溢出的時候沒有滾動條
在默認值下，overflow的默認值爲visibility：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
border: solid black 2px;
}
</style>
</head>
<body>
<div>
溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
溢出隱藏 溢出隱藏 溢出隱藏 溢出隱藏
</div>
</body>
</html>
overflow的值爲hidden時：
6.透明度與手勢：
opacity: 0~1 透明~不透明, 塊是半透明的，所有的子內容也會變化，成爲半透明。
要實現子內容的不變，需要使用rgba, rgba可以讓指定的樣式透明，而不影響其他的樣式。
cursor: 手勢，當鼠標放到某些內容上時，所呈現的圖標
default: 默認是箭頭，常用的還有pointer, move, help, 還可以實現自定義的圖標
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 200px;
height: 200px;
border: solid black 2px;
/*background-color: red;*/
/*opacity: 0.5;*/
background-color: rgba(255, 0, 0, 0.5);
}
#box2{
width: 100px;
height: 100px;
background-color: red;
cursor: pointer; /*手型圖標*/
}
#box3{
width: 100px;
height: 100px;
background-color: red;
cursor: move; /*十字形圖標*/
}
#box4{
width: 100px;
height: 100px;
background-color: red;
cursor: help;
}
</style>
</head>
<body>
<div id="box1">
This is a block
</div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
</body>
</html>
7. 最大最小寬高：
min-width, max-width
min-height, max-height
當內容較少的時候，塊的大小會根據內容的多少進行自適應變化，塊的尺寸最大不會超過max-width, max-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 200px;
max-height: 200px;
border: solid black 2px;
background-color: red;
}
</style>
</head>
<body>
<div id="box1">
This is a block
</div>
</body>
</html>
% 單位， 是以父容器的大小進行換算
css默認樣式：
HTML中部分標籤是帶有默認樣式的，一些是沒有默認樣式的。
沒有默認樣式：例如 div, span
有默認樣式的：body, p, h1, li
CSS樣式重置：
將一些標籤的默認樣式進行重置
在開始的時候，使用通配符：
* {margin: 0; padding: 0} , 但是會稍微影響性能。
或者將具有默認樣式的標籤單獨進行重置操作：
body, p, h1, ul {margin:0, padding: 0}
ul {list-style:none}, a{text-decoration: none}, img { display: block}
寫頁面或者一個具體的效果的時候，具體的步驟是：
1. 寫結構 (html)
2. 進行CSS重置樣式
3. 寫具體的樣式
關於樣式的重置可以參考博客，有現成的CSS文件可用
練習寫一個簡單的結構：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*重置樣式*/
*
{
margin: 0;
padding: 0;
}
ul{list-style: none;} /*去掉列表前面的點*/
img{display: block;} /**/
a{text-decoration: none; color: gray} /*a鏈接下不出現下劃線*/
h1,h2,h3,h4,h5,h6
{
font-size: 16px;
font-weight: normal;
}
/*開始設置樣式*/
#container
{
margin: 20px auto;
width: 238px;
border: #666666 solid 1px;
border-top: 3px solid #ff8400;
}
#container div a img
{
width: 200px;
height: 160px;
}
#container h2
{
line-height: 35px;
padding-left: 11px;
}
#container h2 a
{
color: black;
}
#container h2 a:hover
{
color: #ff8400;
}
#container div img
{
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 5px;
}
#container ul
{
font-size: 12px;
line-height: 24px;
}
#container ul li
{
padding: 8px;
}
#container ul li.first-line
{
border-top: 2px gray solid;
}
#container ul a:hover
{
color: #ff8400;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="container">
<h2>
<a href="#">探索趣圖</a>
</h2>
<div>
<a>
<img src="../picture/map.jpg" alt="">
</a>
</div>
<ul>
<li class="first-line">
<a href="#">測試文字測試文字</a>
</li>
<li>
<a href="#">測試文字測試文字</a>
</li>
<li>
<a href="#">測試文字測試文字</a>
</li>
</ul>
</div>
</body>
</html>
8. float浮動概念及原理：
文檔流：文檔流是文檔中可顯示對象在排列時所佔用的位置，即在寫完html結構，結構默認的排列方式，叫做文檔流。block(塊) 在文檔流中的默認排列方式是從上到下，in-line(內聯)在文檔流中的默認排列方式是從左到右。
float特性：可以脫離文檔流，即不再按照默認的排列方式去排列。加浮動的元素，會沿着父容器靠左或者靠右排列，如果之前已經有浮動的元素，則會挨着浮動的元素進行排列。
float取值： left, right, none(默認)
元素浮動起來之後，就不再佔用原來的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
border: black solid 2px;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#box2 {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
float注意點：
1. 只會影響後面的元素
2. 內容默認提升半層
3. 默認寬根據內容決定
4. 換行排列；
5. 主要給塊元素添加，也可以給內聯元素添加
清除float浮動：
如果不希望float影響後面元素的佈局，則需要清除float.
如何清除浮動：
上下排列： clear屬性，表示清除浮動， clear可選值，left, right , both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
float: left; /*元素浮動*/
}
#box2 {
width: 200px;
height: 200px;
background-color: blue;
clear: left; /*清除上面元素的浮動，使得BOX2不受影響*/
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
嵌套排列清除浮動：
通過after僞類的方式清除浮動 （clear屬性只會操作塊標籤，對內聯標籤不起作用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 200px;
border: 1px solid black;
}
#box2 {
width: 100px;
height: 200px;
background-color: blue;
float: left;
}
.clear:after{
content: "";
display: block;
clear: both;
}
/*因爲after僞類添加的內容是內聯樣式，但是clear是針對塊的，所以需要使用display轉換成塊*/
</style>
</head>
<body>
<div id="box1" class="clear">
<div id="box2"></div>
</div>
aaaaa
</body>
</html>
利用浮動實現佈局效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去掉默認樣式*/
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
img{
display: block;
}
a{
text-decoration: none;
color: grey;
}
h1,h2,h3{
font-size: 16px;
}
.l{
float: left;
}
.r{
float: right;
}
.clear:after{
content: "";
display: block;
clear: both;
}
#main{
width: 366px;
margin: 20px auto;
}
#main .title{
height: 23px;
line-height: 23px;
font-size: 12px;
font-weight: bold;
padding-left: 30px;
/*background: aqua url("../picture/sun.gif") no-repeat;*/
background: aqua;
}
#main .pic{
width: 99px;
border: 1px solid #c8c4d3;
}
#main .pic img{
margin: auto;
}
#main .content{
width: 240px;
margin-left: 13px;
}
#main .content h2{
font-size: 12px;
font-weight: bold;
line-height: 24px;
}
#main .content p{
font-size: 12px;
line-height: 20px;
}
#main ul{
overflow: hidden;
margin-top: 13px;
}
#main li{
margin-bottom: 22px;
}
#main{
background-color: aliceblue;
}
</style>
</head>
<body>
<div id="main">
<h2 class="title">外媒評論精選</h2>
<ul>
<li class="clear">
<div class="pic l">
<a href="#">
<img alt="" src="../picture/timg1.jpg" width="96px" height="58px">
</a>
</div>
<div class="content l">
<h2>測試標題</h2>
<p>測試段落的內容測試段落的內容測試段落的內容測試段落的內容測試段落的內容.....<a href="#">[詳情]</a></p>
</div>
</li>
<li class="clear">
<div class="pic l">
<a href="#">
<img alt="" src="../picture/timg1.jpg" width="96px" height="58px">
</a>
</div>
<div class="content l">
<h2>測試標題</h2>
<p>測試段落的內容測試段落的內容測試段落的內容測試段落的內容測試段落的內容.....<a href="#">[詳情]</a></p>
</div>
</li>
<li class="clear">
<div class="pic l">
<a href="#">
<img alt="" src="../picture/timg1.jpg" width="96px" height="58px">
</a>
</div>
<div class="content l">
<h2>測試標題</h2>
<p>測試段落的內容測試段落的內容測試段落的內容測試段落的內容測試段落的內容.....<a href="#">[詳情]</a></p>
</div>
</li>
<li class="clear">
<div class="pic l">
<a href="#">
<img alt="" src="../picture/timg1.jpg" width="96px" height="58px">
</a>
</div>
<div class="content l">
<h2>測試標題</h2>
<p>測試段落的內容測試段落的內容測試段落的內容測試段落的內容測試段落的內容.....<a href="#">[詳情]</a></p>
</div>
</li>
</ul>
</div>
</body>
</html>
實際效果：
------------------------------------------------------------------------------------------------------
relative相對定位：
position定位： css position用於指定一個元素在文檔中的定位方式，top, right, bottom, left則決定了該元素的最終位置。
注：浮動適合做左右佈局，定位比較適合做疊加的佈局。
position取值：static, relative, absolute, fixed, sticky
relative使用：
1. 如果沒有定位偏移量，對元素本身沒有任何影響
2. 不使元素脫離文檔流
3. 不影響其他元素佈局
4.left，top，right，bottom是相對於當前元素自身進行偏移。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 100px;
height: 100px;
background: aqua;
}
#box2{
width: 100px;
height: 100px;
background: red;
position: relative;
left: 100px;
top: 100px;
}
#box3{
width: 100px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
absolute決定定位：
position: absolute
1. 使元素完全脫離文檔流
2. 使內聯元素支持寬高（讓內聯具備塊屬性）
3. 使塊元素默認根據內容決定（讓塊元素具備內聯的特性）
4. 如果有定位祖先元素相對於定位祖先元素髮生偏移，沒有定位祖先元素相對於整個文檔發生偏移（絕對，相對，固定）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 100px;
height: 100px;
background: aqua;
position: absolute;
left: 50px;
top: 50px;
}
#box2{
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 150px;
top: 200px;
}
span{
width: 50px;
height: 30px;
position: absolute;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<span>內聯元素</span>
</body>
</html>
只有在祖先元素有定位的時候(relative, absolute,fixed)，子元素纔會在absolute定位下相對於祖先元素進行偏移。否則相對於瀏覽器的原點進行偏移。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 200px;
height: 200px;
border: black solid 1px;
margin: 200px;
position: absolute; /*祖先元素有定位*/
}
#box2{
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 30px;
top: 30px; /*相對於祖先元素進行偏移*/
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
fixed固定定位：
1. 使元素完全脫離文檔流
2. 使內聯元素支持寬高（讓內聯元素支持塊特定）
3. 使元素寬高默認根據內容決定（讓塊具備內聯特性）
4. 相對於整個瀏覽器窗口進行偏移，不受瀏覽器滾動條的影響，不會相對於祖先元素進行偏移
應用： 返回頂部，彈窗，廣告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1500px;
}
#box1{
width: 200px;
height: 200px;
border: black solid 1px;
margin: 200px;
position: fixed;
background-color: aqua;
}
</style>
</head>
<body>
<div id="box1">
content block
</div>
</body>
</html>
sticky: 粘性定位，在指定的位置進行粘性操作
當瀏覽器中div距離瀏覽器頂部的距離爲0的時候，div標籤便會吸附在瀏覽器頂部，位置不再發生變化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1500px;
}
div{
background-color: aquamarine;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<p>aaaaa</p>
<div>This is a block</div>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
<p>bbbbb</p>
</body>
</html>
z-index定位層級：
1. 默認的層級爲0
2. 嵌套時候的層級問題
決定哪一個塊在前面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
z-index: 1;
}
#box2{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50px;
top: 50px;
z-index: 2;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
定位實現下拉菜單：
採用hover可以實現下拉菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#menu{
width: 100px;
height: 30px;
margin: 20px auto;
border: black solid 1px;
position: relative;
}
#menu ul{
width: 100px;
border: 1px solid black;
position: absolute; /*相對於瀏覽器頁面*/
left: -1px;
top: 30px;
background-color: white;
display: none;
}
p{
text-align: center;
}
#menu:hover ul{
display: block;
}
#menu ul li:hover{
background-color: grey;
}
</style>
</head>
<body>
<div id="menu">
賣家中心
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
<li>列表項4</li>
</ul>
</div>
<p>測試段落測試段落測試段落測試段落測試段落</p>
</body>
</html>
定位實現居中和裝飾點：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#box1{
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
}
#box2{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px; /*margin拉取操作*/
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
CSS添加省略號：
1. width: 必須有一個固定的寬度
2. white-space: nowrap不讓內容折行
3. overflow: hidden
4. text-overflow: ellipsis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 200px; /*1. 固定寬度 */
border: 1px solid black;
white-space: nowrap; /*2. 不讓內容折行*/
overflow: hidden; /*3. 溢出隱藏 */
text-overflow: ellipsis; /*4. text-overflow*/
}
</style>
</head>
<body>
<div id="box1">測試文字測試文字測試文字測試文字測試文字測試文字</div>
</body>
</html>
CSS精靈及好處：css sprite
是一種網頁圖片應用處理方式，允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中去加載
好處：
1. 可以減少圖片的質量，網頁的圖片加載速度快
2. 減少圖片的請求次數，加快網頁的打開
---------------------------------------------------------------------------------------------------
CSS圓角設置：
border-radius: 設置圓角
做正圓的話寫百分比即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: red;
/*border-radius: 10px;*/ /*一般圓角 圓與四角相切*/
/*border-radius: 50%;*/ /*正圓*/
border-radius: 20px / 40px; /*橢圓 橢圓長短軸*/
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------