暴風雨的禮物·Html&Css03：layout
阿新 • • 發佈：2020-07-01
Html&Css03：layout
- html==>結構
- css ==>表現
- js ==>行為
1、文件流
<!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>Document</title> <style> .box1{ width: 100px; background-color: yellow; } .box2{ width: 100px; background-color: red; } span{ background-color: #bfa; } </style> </head> <body> <!-- 文件流（normal flow） - 網頁是一個多層的結構，一層摞著一層 - 通過CSS可以分別為每一層來設定樣式 - 作為使用者來講只能看到最頂上一層 - 這些層中，最底下的一層稱為文件流，文件流是網頁的基礎 我們所建立的元素預設都是在文件流中進行排列 - 對於我們來元素主要有兩個狀態 在文件流中 不在文件流中（脫離文件流） - 元素在文件流中有什麼特點： - 塊元素 - 塊元素會在頁面中獨佔一行(自上向下垂直排列) - 預設寬度是父元素的全部（會把父元素撐滿） - 預設高度是被內容撐開（子元素） - 行內元素 - 行內元素不會獨佔頁面的一行，只佔自身的大小 - 行內元素在頁面中左向右水平排列，如果一行之中不能容納下所有的行內元素 則元素會換到第二行繼續自左向右排列（書寫習慣一致） - 行內元素的預設寬度和高度都是被內容撐開 --> <div class="box1">我是div1</div> <div class="box2">我是div2</div> <span>我是span1</span> <span>我是span2</span> <span>我是span2</span> <span>我是span2</span> <span>我是span2</span> <span>我是span2</span> <span>我是span2</span> <span>我是span2</span> <span>我是span2</span> <span>我是span2</span> </body> </html>
2、盒模型
<!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>Document</title> <style> .box1{ /* 內容區（content），元素中的所有的子元素和文字內容都在內容區中排列 內容區的大小由width 和 height兩個屬性來設定 width 設定內容區的寬度 height 設定內容區的高度 */ width: 200px; height: 200px; background-color: #bfa; /* 邊框（border），邊框屬於盒子邊緣，邊框裡邊屬於盒子內部，出了邊框都是盒子的外部 邊框的大小會影響到整個盒子的大小 要設定邊框，需要至少設定三個樣式： 邊框的寬度 border-width 邊框的顏色 border-color 邊框的樣式 border-style */ border-width: 10px; border-color: red; border-style: solid; } </style> </head> <body> <!-- 盒模型、盒子模型、框模型（box model） - CSS將頁面中的所有元素都設定為了一個矩形的盒子 - 將元素設定為矩形的盒子後，對頁面的佈局就變成將不同的盒子擺放到不同的位置 - 每一個盒子都由一下幾個部分組成： 內容區（content） 內邊距（padding） 邊框（border） 外邊距（margin） --> <div class="box1"></div> </body> </html>
3、盒模型的邊框
<!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>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; /* 邊框 邊框的寬度 border-width 邊框的顏色 border-color 邊框的樣式 border-style */ /* border-width: 10px; 預設值，一般都是 3個畫素 border-width可以用來指定四個方向的邊框的寬度 值的情況 四個值：上 右 下 左 三個值：上 左右 下 兩個值：上下 左右 一個值：上下左右 除了border-width還有一組 border-xxx-width xxx可以是 top right bottom left 用來單獨指定某一個邊的寬度 */ /* border-width: 10px; */ /* border-top-width: 10px; border-left-width: 30px; */ color: red; /* border-color用來指定邊框的顏色，同樣可以分別指定四個邊的邊框 規則和border-width一樣 border-color也可以省略不寫，如果省略了則自動使用color的顏色值 */ /* border-color: orange red yellow green; border-color: orange; */ /* border-style 指定邊框的樣式 solid 表示實線 dotted 點狀虛線 dashed 虛線 double 雙線 border-style的預設值是none 表示沒有邊框 */ /* border-style: solid dotted dashed double; border-style: solid; */ /* border-width: 10px; border-color: orange; border-style: solid; */ /* border簡寫屬性，通過該屬性可以同時設定邊框所有的相關樣式，並且沒有順序要求 除了border以外還有四個 border-xxx border-top border-right border-bottom border-left */ /* border: solid 10px orange; */ /* border-top: 10px solid red; border-left: 10px solid red; border-bottom: 10px solid red; */ border: 10px red solid; border-right: none; } </style> </head> <body> <div class="box1"></div> </body> </html>
4、盒模型的內邊距
<!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>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
/*
內邊距（padding）
- 內容區和邊框之間的距離是內邊距
- 一共有四個方向的內邊距：
padding-top
padding-right
padding-bottom
padding-left
- 內邊距的設定會影響到盒子的大小
- 背景顏色會延伸到內邊距上
一共盒子的可見框的大小，由內容區 內邊距 和 邊框共同決定，
所以在計算盒子大小時，需要將這三個區域加到一起計算
*/
/* padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 100px; */
/*
padding 內邊距的簡寫屬性，可以同時指定四個方向的內邊距
規則和border-width 一樣
*/
padding: 10px 20px 30px 40px;
padding: 10px 20px 30px ;
padding: 10px 20px ;
padding: 10px ;
}
.inner{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="inner"></div>
</div>
</body>
</html>
5、盒模型的外邊距
<!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>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px red solid;
/*
外邊距（margin）
- 外邊距不會影響盒子可見框的大小
- 但是外邊距會影響盒子的位置
- 一共有四個方向的外邊距：
margin-top
- 上外邊距，設定一個正值，元素會向下移動
margin-right
- 預設情況下設定margin-right不會產生任何效果
margin-bottom
- 下外邊距，設定一個正值，其下邊的元素會向下移動
margin-left
- 左外邊距，設定一個正值，元素會向右移動
- margin也可以設定負值，如果是負值則元素會向相反的方向移動
- 元素在頁面中是按照自左向右的順序排列的，
所以預設情況下如果我們設定的左和上外邊距則會移動元素自身
而設定下和右外邊距會移動其他元素
- margin的簡寫屬性
margin 可以同時設定四個方向的外邊距 ，用法和padding一樣
- margin會影響到盒子實際佔用空間
*/
/* margin-top: 100px;
margin-left: 100px;
margin-bottom: 100px; */
/* margin-bottom: 100px; */
/* margin-top: -100px; */
/* margin-left: -100px; */
/* margin-bottom: -100px; */
/* margin-right: 0px; */
margin: 100px;
}
.box2{
width: 220px;
height: 220px;
background-color: yellow
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
6、盒子的水平佈局
<!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>Document</title>
<style>
.outer{
width: 800px;
height: 200px;
border: 10px red solid;
}
.inner{
/* width: auto; width的值預設就是auto*/
width: 200px;
height: 200px;
background-color: #bfa;
margin-right: auto;
margin-left: auto;
/* margin-left: 100px;
margin-right: 400px */
/*
元素的水平方向的佈局：
元素在其父元素中水平方向的位置由以下幾個屬性共同決定“
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一個元素在其父元素中，水平佈局必須要滿足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素內容區的寬度 （必須滿足）
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
- 以上等式必須滿足，如果相加結果使等式不成立，則稱為過度約束，則等式會自動調整
- 調整的情況：
- 如果這七個值中沒有為 auto 的情況，則瀏覽器會自動調整margin-right值以使等式滿足
- 這七個值中有三個值和設定為auto
width
margin-left
maring-right
- 如果某個值為auto，則會自動調整為auto的那個值以使等式成立
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto = 800
0 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 600
200 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + 200 = 800 auto = 400
auto + 0 + 0 + 200 + 0 + 0 + auto = 800 auto = 300
- 如果將一個寬度和一個外邊距設定為auto，則寬度會調整到最大，設定為auto的外邊距會自動為0
- 如果將三個值都設定為auto，則外邊距都是0，寬度最大
- 如果將兩個外邊距設定為auto，寬度固定值，則會將外邊距設定為相同的值
所以我們經常利用這個特點來使一個元素在其父元素中水平居中
示例：
width:xxxpx;
margin:0 auto;
*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
7、垂直方向的佈局
<!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>Document</title>
<style>
.outer{
background-color: #bfa;
height: 600px;
/*
預設情況下父元素的高度被內容撐開
*/
}
.inner{
width: 100px;
background-color: yellow;
height: 100px;
margin-bottom: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
子元素是在父元素的內容區中排列的，
如果子元素的大小超過了父元素，則子元素會從父元素中溢位
使用 overflow 屬性來設定父元素如何處理溢位的子元素
可選值：
visible，預設值 子元素會從父元素中溢位，在父元素外部的位置顯示
hidden 溢位內容將會被裁剪不會顯示
scroll 生成兩個滾動條，通過滾動條來檢視完整的內容
auto 根據需要生成滾動條
overflow-x:
overflow-y:
*/
overflow: auto;
}
.box2{
width: 100px;
height: 400px;
background-color: orange;
}
</style>
</head>
<body>
<!-- <div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div> -->
<div class="box1">
在我的後園，可以看見牆外有兩株樹，一株是棗樹，還有一株也是棗樹。 這上面的夜的天空，奇怪而高，我生平沒有見過這樣奇怪而高的天空。他彷彿要離開人間而去，使人們仰面不再看見。然而現在卻非常之藍，閃閃地䀹著幾十個星星的眼，冷眼。他的口角上現出微笑，似乎自以為大有深意，而將繁霜灑在我的園裡的野花草上。 我不知道那些花草真叫什麼名字，人們叫他們什麼名字。我記得有一種開過極細小的粉紅花，現在還開著，但是更極細小了，她在冷的夜氣中，瑟縮地做夢，夢見春的到來，夢見秋的到來，夢見瘦的詩人將眼淚擦在她最末的花瓣上，告訴她秋雖然來，冬雖然來，而此後接著還是春，蝴蝶亂飛，蜜蜂都唱起春詞來了。她於是一笑，雖然顏色凍得紅慘慘地，仍然瑟縮著。 棗樹，他們簡直落盡了葉子。先前，還有一兩個孩子來打他們，別人打剩的棗子，現在是一個也不剩了，連葉子也落盡了。他知道小粉紅花的夢，秋後要有春；他也知道落葉的夢，春後還是秋。他簡直落盡葉子，單剩乾子，然而脫了當初滿樹是果實和葉子時候的弧形，欠伸得很舒服。但是，有幾枝還低亞著，護定他從打棗的竿梢所得的皮傷，而最直最長的幾枝，卻已默默地鐵似的直刺著奇怪而高的天空，使天空閃閃地鬼䀹眼；直刺著天空中圓滿的月亮，使月亮窘得發白。 鬼䀹眼的天空越加非常之藍，不安了，彷彿想離去人間，避開棗樹，只將月亮剩下。然而月亮也暗暗地躲到東邊去了。而一無所有的乾子，卻仍然默默地鐵似的直刺著奇怪而高的天空，一意要制他的死命，不管他各式各樣地䀹著許多蠱惑的眼睛。 哇的一聲，夜遊的惡鳥飛過了。 我忽而聽到夜半的笑聲，吃吃地，似乎不願意驚動睡著的人，然而四圍的空氣都應和著笑。夜半，沒有別的人，我即刻聽出這聲音就在我嘴裡，我也即刻被這笑聲所驅逐，回進自己的房。燈火的帶子也即刻被我旋高了。 後窗的玻璃上丁丁地響，還有許多小飛蟲亂撞。不多久，幾個進來了，許是從窗紙的破孔進來的。他們一進來，又在玻璃的燈罩上撞得丁丁地響。一個從上面撞進去了，他於是遇到火，而且我以為這火是真的。兩三個卻休息在燈的紙罩上喘氣。那罩是昨晚新換的罩，雪白的紙，折出波浪紋的疊痕，一角還畫出一枝猩紅色的梔子。 猩紅的梔子開花時，棗樹又要做小粉紅花的夢，青蔥地彎成弧形了……我又聽到夜半的笑聲；我趕緊砍斷我的心緒，看那老在白紙罩上的小青蟲，頭大尾小，向日葵子似的，只有半粒小麥那麼大，遍身的顏色蒼翠得可愛，可憐。 我打一個呵欠，點起一支紙菸，噴出煙來，對著燈默默地敬奠這些蒼翠精緻的英雄們。 一九二四年九月十五日。
</div>
</body>
</html>
8、外邊距的摺疊
<!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>Document</title>
<style>
.box1 , .box2{
width: 200px;
height: 200px;
font-size: 100px;
}
/*
垂直外邊距的重疊（摺疊）
- 相鄰的垂直方向外邊距會發生重疊現象
- 兄弟元素
- 兄弟元素間的相鄰垂直外邊距會取兩者之間的較大值（兩者都是正值）
- 特殊情況：
如果相鄰的外邊距一正一負，則取兩者的和
如果相鄰的外邊距都是負值，則取兩者中絕對值較大的
- 兄弟元素之間的外邊距的重疊，對於開發是有利的，所以我們不需要進行處理
- 父子元素
- 父子元素間相鄰外邊距，子元素的會傳遞給父元素（上外邊距）
- 父子外邊距的摺疊會影響到頁面的佈局，必須要進行處理
*/
.box1{
background-color: #bfa;
/* 設定一個下外邊距 */
margin-bottom: 100px;
}
.box2{
background-color: orange;
/* 設定一個上外邊距 */
margin-top: 100px;
}
.box3{
width: 200px;
height: 200px;
background-color: #bfa;
/* padding-top: 100px; */
/* border-top: 1px #bfa solid; */
}
.box4{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
<!-- <div class="box1"></div>
<div class="box2"></div> -->
</body>
</html>
9、行內元素的盒模型
<!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>Document</title>
<style>
.s1{
background-color: yellow;
/*
行內元素的盒模型
- 行內元素不支援設定寬度和高度
- 行內元素可以設定padding，但是垂直方向padding不會影響頁面的佈局
- 行內元素可以設定border，垂直方向的border不會影響頁面的佈局
- 行內元素可以設定margin，垂直方向的margin不會影響佈局
*/
/* width: 100px;
height: 100px; */
/* padding: 100px; */
/* border: 100px solid red; */
margin: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
a{
/*
display 用來設定元素顯示的型別
可選值：
inline 將元素設定為行內元素
block 將元素設定為塊元素
inline-block 將元素設定為行內塊元素
行內塊，既可以設定寬度和高度又不會獨佔一行
table 將元素設定為一個表格
none 元素不在頁面中顯示
visibility 用來設定元素的顯示狀態
可選值：
visible 預設值，元素在頁面中正常顯示
hidden 元素在頁面中隱藏 不顯示，但是依然佔據頁面的位置
*/
display: block;
visibility: hidden;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<a href="javascript:;">超連結</a>
<a href="javascript:;">超連結</a>
<span class="s1">我是span</span>
<span class="s1">我是span</span>
<div class="box1"></div>
</body>
</html>
10、預設樣式
<!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>Document</title>
<!-- <link rel="stylesheet" href="./css/reset.css"> -->
<link rel="stylesheet" href="./css/normalize.css">
<!--
重置樣式表：專門用來對瀏覽器的樣式進行重置的
reset.css 直接去除了瀏覽器的預設樣式
normalize.css 對預設樣式進行了統一
-->
<style>
/*
預設樣式：
- 通常情況，瀏覽器都會為元素設定一些預設樣式
- 預設樣式的存在會影響到頁面的佈局，
通常情況下編寫網頁時必須要去除瀏覽器的預設樣式（PC端的頁面）
*/
/* body{
margin: 0;
}
p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
/* 去除專案符號 * /
list-style:none;
} */
/* *{
margin: 0;
padding: 0;
} */
.box1{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我是一個段落</p>
<p>我是一個段落</p>
<p>我是一個段落</p>
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
</body>
</html>
11、盒子的尺寸
<!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>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
padding: 10px;
border: 10px red solid;
/*
預設情況下，盒子可見框的大小由內容區、內邊距和邊框共同決定
box-sizing 用來設定盒子尺寸的計算方式（設定width和height的作用）
可選值：
content-box 預設值，寬度和高度用來設定內容區的大小
border-box 寬度和高度用來設定整個盒子可見框的大小
width 和 height 指的是內容區 和 內邊距 和 邊框的總大小
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
12、輪廓和圓角
<!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>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/* box-shadow 用來設定元素的陰影效果，陰影不會影響頁面佈局
第一個值 水平偏移量 設定陰影的水平位置 正值向右移動 負值向左移動
第二個值 垂直偏移量 設定陰影的水平位置 正值向下移動 負值向上移動
第三個值 陰影的模糊半徑
第四個值 陰影的顏色
*/
box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;
/*
outline 用來設定元素的輪廓線，用法和border一模一樣
輪廓和邊框不同的點，就是輪廓不會影響到可見框的大小
*/
}
/* .box1:hover{
outline: 10px red solid;
} */
.box2{
width: 200px;
height: 200px;
background-color: orange;
/* border-radius: 用來設定圓角 圓角設定的圓的半徑大小*/
/* border-top-left-radius: */
/* border-top-right-radius */
/* border-bottom-left-radius: */
/* border-bottom-right-radius: */
/* border-top-left-radius:50px 100px; */
/*
border-radius 可以分別指定四個角的圓角
四個值 左上 右上 右下 左下
三個值 左上 右上/左下 右下
兩個個值 左上/右下 右上/左下
*/
/* border-radius: 20px / 40px; */
/* 將元素設定為一個圓形 */
border-radius: 50%;
}
</style>
</head>
<body>
<!-- <div class="box1"></div> -->
<div class="box2"></div>
</body>
</html>