文章目錄
- 前言
- 一、css的三大特性都有什麼？
- 二、盒子模型
-
- 1.盒子屬性
-
- ①盒子邊框border
- ②盒子邊角border-radius
- ③盒子陰影 box-shadow
- 2.内邊距padding
- 3.外邊距margin
- 4.清除所有盒子的内外邊距
- 三、浮動
-
- 1.盒子浮動float
- 2.浮動的簡單應用
- 3.浮動注意點
- 四、定位position
-
- 1.定位的分類與需求分析
- 2.相對定位relative
- 3.絕對定位absolute【子絕父相】
- 4.固定定位fixed
- 5.粘性定位sticky
- 6.定位分層現象 z-index【優先級的設定】
- 7.定位的其他注意點
- 總結
前言
深入了解css三大特性會給予我們在布局的時候極大的便利
一、css的三大特性都有什麼？
應該包括三點（概念）
一、盒子模型
web頁面的每一個元素都好像一個盒子,将其他的東西可以裝進盒子
二、浮動
每一個盒子,可以添加浮動的屬性,讓其更好的浮現在某盒子旁邊
三、定位
将盒子直接定位在某一位置
二、盒子模型
1.盒子屬性
更清楚地看到盒子的邊界,并且可以對盒子的邊界樣式加以設定。
盒子屬性包括三部分：
①盒子邊框border
盒子模型的三大屬性：邊框類型,邊框屬性,邊框顔色
代碼如下：
<!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.0">
<title>盒子模型</title>
<!--
盒子模型的三大屬性：邊框類型,邊框屬性,邊框顔色
div是最常用的一個盒子模型
-->
<style>
div {
width: 300px;
height: 300px;
/* border-color: aquamarine;
border-style: dashed;
border-width: 2px; */
background-color: blue;
/*
簡寫模式
不分先後順序
*/
border: 5px dashed red;
/* 可以使用方位詞針對某一位置進行樣式設定
會有覆寫效果,可以先統一指定然後再對特殊的進行單獨設定
*/
/*
分别代表邊界框顔色、粗細、實線還是虛線。
*/
border-top: saddlebrown 5px solid;
border-bottom: magenta 5px dotted;
}
</style>
</head>
<body>
<div>Hello world</div>
</body>
</html>
效果如下：
②盒子邊角border-radius
可以通過修改盒子的外觀樣式,但是盒子占有的位置還是不放棄
代碼如下：
<!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.0">
<title>Document</title>
<!--
盒子邊角是拿相同長度的圓去截角得到的
如果要得到圓形就拿正方形邊長一半做圓或者w50%
橢矩形,就拿矩形的高做圓的半徑
盒子的角也遵守順時針原則,可以分别給參數
或者用方位詞
注意,用方位詞時上下在前,左右在後
-->
<style>
.div1 {
width: 200px;
height: 200px;
background-color: blueviolet;
border-radius: 50%;
/* 或者width:100px */
}
.div2 {
width: 200px;
height: 50px;
background-color: blueviolet;
border-radius: 25px;
}
.div3 {
width: 200px;
height: 200px;
background-color: blueviolet;
/*左上、右上、右下、左下*/
border-radius: 10px 20px 30px 40px;
}
/*
單獨設定
*/
.div4 {
width: 200px;
height: 200px;
background-color: blueviolet;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
</style>
</head>
<body>
<div>圓</div>
<div class="div1"></div>
<div>橢矩形</div>
<div class="div2"></div>
<div>混合使用</div>
<div class="div3"></div>
<div>方位</div>
<div class="div4"></div>
</body>
</html>
效果如下：
③盒子陰影 box-shadow
盒子的陰影,本案例是在滑鼠聚焦在盒子上之後,陰影展現出來
盒子陰影有五大部分
水準垂直距離,陰影的深淺，陰影的面積，陰影的顔色，外陰影還是内陰影
代碼如下：
<!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.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: blueviolet;
}
/*
陰影的浮動
*/
div:hover {
/* 陰影一般做成透明的 */
/* 水準垂直距離,陰影的深淺，陰影的面積，陰影的顔色，外陰影還是内陰影*/
box-shadow: 10px 10px 10px rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
2.内邊距padding
盒子内的東西距離盒子邊框的大小、衡量的機關是px
代碼如下：
<!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.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 20px;
/* padding: 10px; */
padding: 10px 20px 100px 200px;
border: deeppink 1px dashed;
}
/*
padding可以分方位
一個屬性代表所有邊距離文字部分的距離
兩個屬性,第一個指上下,第二個指左右
三個屬性上,左右,下
四個屬性,上，右，下，左；
*/
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>
效果如下：
3.外邊距margin
代碼如下：
<!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.0">
<title>Document</title>
<!--
外邊距與内邊距文法一樣,可以對單獨的某一方位設定,也可以對整體進行設定
方位的使用與padding用法一緻
外邊距是盒子與外界間隔的距離
如果隻是一個屬性就是四面外邊距均是這個值
如果是兩個屬性是這個值,那麼就是左右上下分别是這兩個值。
-->
<style>
div {
width: 300px;
height: 300px;
margin: 100px;
background-color: aquamarine;
border-color: chartreuse;
border-width: 3px;
border-style: dashed;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>Hello World</p>
</div>
<div>
<p>Hello World</p>
</div>
</body>
</html>
效果如下：
4.清除所有盒子的内外邊距
一般哲一步作為項目初始化使用，使用前面講到過的通配符選擇器
代碼如下：
<!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.0">
<title>Document</title>
<!--
對于一些自帶的盒子模型,通常會有預設的内外邊距,而這些不知道的内外邊距會對開發帶來影響,是以
一般在最開始的部分進行内外邊距的清除
-->
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>K</li>
</ul>
<ul>
<li>H</li>
<li>A</li>
<li>B</li>
</ul>
</body>
</html>
效果如下：
三、浮動
在網頁布局的時候,往往需要對界面進行靈活的布局,簡單的标準流隻能滿足簡單的
需求無法滿足網頁更加靈活的設計,浮動可以将盒子進行分層布局,使網頁布局更加
靈活浮動的盒子自動有行内塊元素的屬性,并且會主動放棄自己的位置，如果他的
下面有大盒子的話會進行疊加覆寫
1.盒子浮動float
以下案例是将盒子浮動在父類盒子的左邊
代碼如下：
<!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.0">
<title>Document</title>
<style>
/* 浮動盒子的文法 */
.nav {
float: left;
background-color: aquamarine;
background: rgba(127, 255, 212, 0.7);
width: 300px;
height: 300px;
}
.qwe {
background-color: blueviolet;
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div class="qwe">
Hello
<div class="nav">
Hello
</div>
</div>
</body>
</html>
效果如下：
2.浮動的簡單應用
浮動一般用于小大盒子去固定小盒子,使小盒子有更良好的布局
代碼如下：
<!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.0">
<title>Document</title>
<!--
盒子浮動一般用于大盒子嵌套小盒子,通過固定大盒子的位置,使得小盒子有較好的位置
-->
<style>
/* 場景1 */
.nav {
background-color: blueviolet;
width: 800px;
height: 600px;
margin: 0 auto;
}
.qwe {
background-color: cadetblue;
width: 200px;
height: 600px;
float: left;
}
.qqw {
background-color: chartreuse;
width: 600px;
height: 600px;
float: left;
}
/* 場景2 */
.qwe1 {
width: 750px;
height: 50px;
background-color: darkblue;
margin: 30px auto;
}
.qwe2 {
width: 50px;
height: 50px;
background-color: darkcyan;
margin-right: 20px;
float: left;
}
.qwe3 {
width: 50px;
height: 50px;
background-color: darkcyan;
float: left;
}
</style>
</head>
<body>
<div class="nav">
<!--
通過将外層的盒子移到中間而将所有的盒子移到中間
-->
<div class="qwe"></div>
<div class="qqw"></div>
</div>
<div class="qwe1">
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe2"></div>
<div class="qwe3"></div>
</div>
</body>
</html>
效果如下：
3.浮動注意點
1.浮動和标準流的父盒子搭配
先用标準流的父元素盒子排列上下位置,之後用内部子元素采取浮動排列左右位置
2.一個盒子浮動了,理論上其餘的兄弟盒子也要浮動
一個盒子裡面有多個盒子,如果其中一個盒子浮動了,那麼其他兄弟也應該浮動
浮動的盒子隻會影響浮動盒子後面的标準流,不會影響前面的标準流
四、定位position
1.定位的分類與需求分析
<!--
在闆塊的排版中,有時需要将标簽根據自己的需求進行變換位置,而浮動與标
準流可以滿足闆塊大體的布局對于小子產品的靈活布局較為費力,是以可以用
定位進行對小子產品的靈活布局
-->
<!--
定位的分類
1.靜态定位(基本不用)
2.相對定位(一般用于父子產品的定位)
3.絕對定位(一般用于子子產品的定位)
4.固定定位(一般用于導航欄的定位)
5.粘性定位(IE浏覽器一般不支援,是以用的也很少)
定位時先考慮各個子產品的關系,再結合父子產品對子子產品進行定位
先進行定位類型的選擇,再進行定位位置的選擇
-->
2.相對定位relative
<!--
相對定位,不會放棄自己的位置,定位時相對于自己的位置進行定位
-->
代碼如下：
<!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.0">
<title>Document</title>
<!--
相對定位,不會放棄自己的位置,定位時相對于自己的位置進行定位
-->
<style>
.nav {
/*這裡的position将标簽添加定位屬性後,可以對top、left、right、buttom設定
大小,機關為px，代表在父元素的什麼位置
*/
position: relative;
top: 20px;
left: 100px;
margin: auto auto;
width: 300px;
height: 300px;
background-color: blueviolet;
border-color: brown;
border-width: 5px;
border-style: dashed;
}
</style>
</head>
<body>
<div class="nav">Hello World</div>
</body>
</html>
效果如下：
3.絕對定位absolute【子絕父相】
<!--
絕對定位：一般用于子類的定位,相對于父子產品而言,是以有子絕父相一說
子絕父相:必須是子類是絕對定位,父類是相對定位類型,
如果子類有定位屬性父類沒有定位的話,不能實作子類的定位
絕對定位會放棄子產品的位置,并且定位後的位置是相對父類位置而言
-->
代碼如下（示例）：
<!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.0">
<title>Document</title>
<style>
.nav {
position: absolute;
right: 5px;
top: 5px;
width: 300px;
height: 300px;
background-color: burlywood;
margin: 0 auto;
border-width: 5px;
border-color: chartreuse;
border-style: dashed;
}
.qwe {
position: relative;
width: 800px;
height: 800px;
background-color: darkcyan;
margin: 0 auto;
border-style: dashed;
border-width: 5px;
border-color: darkmagenta;
}
</style>
</head>
<body>
<div class="nav">Hello Word</div>
<div class="qwe">Hello
<div class="nav">World</div>
</div>
</body>
</html>
效果如下：
方塊1是相對于背景圖進行的定位,方塊2是相對于中間方塊定的位
4.固定定位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.0">
<title>Document</title>
<style>
.root {
background-image: url(../../Snipaste_2021-07-20_15-42-17.png);
display: inline-block;
width: 1908px;
height: 980px;
background-repeat: no-repeat;
}
.nav {
position: fixed;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
background-image: url(../../回到首行.png);
}
</style>
</head>
<body>
<h4 id="head"></h4>
<div class="root">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
<a href="#head">
<div class="nav">
</div>
</a>
</body>
</html>
效果如下：
5.粘性定位sticky
<!--
粘性定位是指,面闆上沿距離上邊緣線一定程度後,會觸發小部件的固定
粘性定位,也會讓出自己的位置
-->
代碼如下（示例）：
<!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.0">
<title>Document</title>
<!--
粘性定位是指,面闆上沿距離上邊緣線一定程度後,會觸發小部件的固定
粘性定位,也會讓出自己的位置
-->
<style>
.nav {
background-image: url(../../Snipaste_2021-07-20_15-42-17.png);
display: inline-block;
width: 1908px;
height: 980px;
background-repeat: no-repeat;
}
.qwe {
margin: 200px;
position: sticky;
top: 10px;
background-color: darkorchid;
}
</style>
</head>
<body>
<div class="qwe">Hello</div>
<div class="nav"></div>
</body>
</html>
效果如下：
使用粘性定位後,盒子一旦到達設定的位置就會進行定位【不在那個位置就不會】
6.定位分層現象 z-index【優先級的設定】
<!--
定位分層有優先級,優先級越高則越先在眼前展示
優先級文法是z-index: 不帶機關的數值
其中不帶機關的數值理論可以無限加,顯示的時候,誰的大就誰的顯示在最上面
-->
代碼如下：
<!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.0">
<title>Document</title>
<style>
.nav {
position: absolute;
width: 300px;
height: 300px;
background-color: skyblue;
z-index: 2;
}
.qwe {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
z-index: 3;
}
.qqw {
position: absolute;
width: 40px;
height: 40px;
background-color: red;
z-index: 5;
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="qwe"></div>
<div class="qqw"></div>
</body>
</html>
效果如下：
7.定位的其他注意點
1.如果父類沒有使用定位,則子類的定位不會生效
2.使用定位後标簽會自動轉換成為行内塊元素,如果沒有指定寬和高
則會根據文字的多少進行标簽的大小自我調節
3.定位後各個标簽之間不會像浮動一樣産生子產品塌陷問題
4.浮動不會壓住底層标簽的文字,定位會将底層标簽的文字進行覆寫
總結
css的三大特性需要熟練地使用,對我們進行html布局有極大的幫助,好看的頁面底層實作就靠這點,點贊收藏沒毛病。如有疑問可在評論區提出。