一、浮動float
- 讓原來的元素，可以脫離正常的文檔流，實現左右排列，不設置寬度就是最小寬度。
- float 其實是類似 iOS 中的 collectionView 或者說 iOS 的collectionView 就是借鑒 float 創建的。原理可以這樣理解，一個大塊內包含多個小塊，多個小塊可以按照流水布局。
- 三個取值：
- none：設置對象不浮動
- left：設置對象浮在左邊
- 代碼：
<!DOCTYPE html>
<html>
<head>
<title>神奇的float</title>
<meta charset="UTF-8">
<style type="text/css">
body {
margin: 0;
}
.container {
border: 1px solid blue;
height: 300px;
width: 250px;
}
div {
height: 100px;
float: left;
}
/*如果塊級元素不設置寬，默認會充滿這行，但是會默認有一個margin（相對的距離）,可以將body的margin設為0*/
.first {
background-color: red;
}
.second {
background-color: blueviolet;
}
.third {
background-color: orange;
}
.n {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="first">
第一個div
</div>
<div class="second">
第二個div
</div>
<div class="third">
第三個div
</div>
<div class="n">
第四個div
</div>
</div>
</body>
</html>
* 效果圖（外部為藍色邊框）
float2.png
- right：設置對象浮在右邊
* 代碼
<!DOCTYPE html>
<html>
<head>
<title>神奇的float</title>
<meta charset="UTF-8">
<style type="text/css">
body {
margin: 0;
}
.container {
border: 1px solid blue;
height: 300px;
width: 250px;
}
div {
height: 100px;
float: right;
}
/*如果塊級元素不設置寬，默認會充滿這行，但是會默認有一個margin（相對的距離）,可以將body的margin設為0*/
.first {
background-color: red;
}
.second {
background-color: blueviolet;
}
.third {
background-color: orange;
}
.n {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="first">
第一個div
</div>
<div class="second">
第二個div
</div>
<div class="third">
第三個div
</div>
<div class="n">
第四個div
</div>
</div>
</body>
</html>
* 效果圖
float-right.png
- 為什么說是流水布局呢？
-
如果我們不指定外部承載多個 div 的容器的寬度，那么容器會自動給一個合適的寬度，像這樣
float1.png - 如果我們給外部的容器寬度設置了一個小于4個div寬度的合，那么布局就會按倒序向下排列，這個過程也稱為流水。
-
二、定位position
- relative
- 官方：即使偏移，位置還在。實質就是靠近最近的元素進行偏移，不分定位。
- 解釋：可以理解為讓自身元素的原點（0，0）進行偏移（左上），相對于自己移動。
- absolute
- 官方：偏移了，位置就沒了。靠最近的元素是 relative/absolute 定位進行偏移。
- 解釋：absolute 進行偏移的時候默認先去尋找外面position屬性設為 absolute 或者 relative 的元素，如果有相對 它進行偏移，如果沒有相對于瀏覽器左上角（0，0）進行偏移。
- fixed:相對于瀏覽器的窗口的位置，沒有依賴感。
- 代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
div {
height: 100px;
width: 100px;
}
.rel {
background-color: orange;
/*display: inline-block;*/
}
.abs {
background-color: green;
/*display: inline-block;*/
float: left;
}
.abs1{
height: 150px;
width: 150px;
background-color: black;
/*display: inline-block;*/
float: left;
}
.outer{
height: 200px;
width: 200px;
background-color: aqua;
/*display: inline-block;*/
float: left;
}
.fix{
position: fixed;
height: 100px;
width: 100px;
left: 20px;
top: 30px;
background-color: red;
}
</style>
</head>
<body>
<div class="fix">我不動</div>
</br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br>
<div class="outer">
<!-- <div class="rel"></div> -->
</div>
<div class="abs"></div>
<div class="abs1"></div>
</body>
</html>
- 效果圖
fixed.gif
- 多個
display:inline-block的div元素排列，默認會下邊對齊，而且中間會有間距:- 代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
div {
height: 100px;
width: 100px;
}
.rel {
background-color: orange;
display: inline-block;
}
.abs {
background-color: green;
display: inline-block;
}
.abs1{
height: 150px;
width: 150px;
background-color: black;
display: inline-block;
}
.outer{
height: 300px;
width: 300px;
background-color: aqua;
display: inline-block;
}
</style>
</head>
<body>
<!-- <div class="outer"> -->
<div class="rel"></div>
<!-- </div> -->
<div class="abs"></div>
<div class="abs1"></div>
</body>
</html>
- 效果圖
效果圖1.png
- 如果想讓它們無間距的上邊對齊，可以全部添加float屬性：
- 代碼，這里其實不用設置 display 屬性，只設置 float 就可以了，因為 float 也可以將塊級元素轉成行內元素。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
div {
height: 100px;
width: 100px;
}
.rel {
background-color: orange;
/*display: inline-block;*/
}
.abs {
background-color: green;
display: inline-block;
float: left;
}
.abs1{
height: 150px;
width: 150px;
background-color: black;
display: inline-block;
float: left;
}
.outer{
height: 200px;
width: 200px;
background-color: aqua;
display: inline-block;
float: left;
}
div.outside{
height: 700px;
width: 700px;
float: left;
}
</style>
</head>
<body>
<div class="outside">
<div class="outer">
<!-- <div class="rel"></div> -->
</div>
<div class="abs"></div>
<div class="abs1"></div>
</div>
</body>
</html>
- 效果圖
效果圖2.png
三、行高line-height
- normal 默認。設置合理的行間距，允許內容頂開或溢出指定的容器邊界。
- number 設置數字，此數字會于當前的字體尺寸相乘來設置行間距。
- length 設置固定的行間距，不允許負值。
- % 基于當前字體尺寸的百分比行間距，不允許負值。
- inherit 規定你改改從父元素繼承 line-height 屬性的值。
- 注意：html 默認字體 16px.
四、水平居中與垂直居中
水平居中
垂直居中
-
示例：
- 文字居中代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
#mycenter {
height: 400px;
width: 300px;
background-color: red;
/*line-height: 300px;*/
/*文字垂直居中,試用于一行文字*/
text-align: center;
/*水平居中*/
margin-left: auto;
margin-right: auto;
display: table;
/*設置居中*/
/*position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left:-150px;*/
}
/*#mycenter1{
height: 300px;
width: 400px;
background-color: red;
line-height: 300px;文字垂直居中,試用于一行文字
text-align: center; 水平居中
float: left;
margin-left: 10px;
}*/
.inner{
display: table-cell;
vertical-align: middle;
/*width: 300px;*/
/*height: 100px;*/
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div id="mycenter">
<div class="inner">
啊啊啊啊啊啊啊啊啊啊不sdr不不不不不不不不不難男男女女男男女女男男女女是事實上事實上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不難男男女女男男女女男男ttt女女是事實上事實上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不難男男女女男男女女男男女女是事實上事實上是
<!-- <img src="https://www.baidu.com/img/bd_logo1.png" height="127"> -->
</div>
</div>
<!-- <div id="mycenter1">
啊啊啊啊啊啊啊啊啊啊不sdr不不不不不不不不不難男男女女男男女女男男女女是事實上事實上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不難男男女女男男女女男男ttt女女是事實上事實上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不難男男女女男男女女男男女女是事實上事實上是
</div> -->
</body>
</html>
- 效果圖
文字居中.png
- 圖片居中
- 代碼
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
#mycenter {
height: 400px;
width: 300px;
background-color: red;
/*line-height: 300px;*/
/*文字垂直居中,試用于一行文字*/
text-align: center;
/*水平居中*/
margin-left: auto;
margin-right: auto;
display: table;
/*設置居中*/
/* position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left:-150px;*/
}
/*#mycenter1{
height: 300px;
width: 400px;
background-color: red;
line-height: 300px;文字垂直居中,試用于一行文字
text-align: center; 水平居中
float: left;
margin-left: 10px;
}*/
.inner{
display: table-cell;
vertical-align: middle;
/*width: 300px;*/
/*height: 100px;*/
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div id="mycenter">
<div class="inner">
<!-- 啊啊啊啊啊啊啊啊啊啊不sdr不不不不不不不不不難男男女女男男女女男男女女是事實上事實上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不難男男女女男男女女男男ttt女女是事實上事實上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不難男男女女男男女女男男女女是事實上事實上是 -->
<img src="https://www.baidu.com/img/bd_logo1.png" height="127">
</div>
</div>
<!-- <div id="mycenter1">
啊啊啊啊啊啊啊啊啊啊不sdr不不不不不不不不不難男男女女男男女女男男女女是事實上事實上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不難男男女女男男女女男男ttt女女是事實上事實上是啊啊啊啊啊啊啊啊啊啊不不不不不不不不不不不難男男女女男男女女男男女女是事實上事實上是
</div> -->
</body>
</html>
- 效果圖
![]()
圖片居中.png
圖片居中.png
五、Html調色原理
- HTML 的顏色表示可分兩種：
- 以命名方式定義常用的顏色，如 RED。
命名方式所包括的色中不多也不是很方便，所以較少采用。 - 以 RGB 值表示，如 #FF0000 表示 red。
眾所周知顏色是由“red”、“green”、“blue” 三原色組合而成的，在 HTML 中對于彩度的定義是采用十六進制的，對于三原色 HTML 分別給予兩個十六進位去定義，也就是每個原色有 256 種彩度，故此三原色可混合成一千六百多萬個顏色。
- 以命名方式定義常用的顏色，如 RED。
