HTML+CSS基礎知識個人筆記_5
阿新 • • 發佈：2018-12-02
HTML+CSS基礎知識個人筆記_5
1.盒子小知識點
1.1盒子水平居中
通過margin的auto來設定。
注意理解auto的作用效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01_盒子水平居中.html</title> <style> div { width: 300px; height: 300px; background-color: pink; /*盒子裡面的內容（文字 行內元素 行內塊）水平居中*/ text-align: center; line-height: 300px; /*盒子水平居中 1.盒子必須是塊級元素 2.必須指定寬度*/ /*auto理解*/ /*auto表示自動充滿*/ /*margin-left: auto; 左邊自動充滿*/ /*margin:-right: auto; 右邊自動充滿*/ /*margin-top margin-bottom 用auto沒有意義 因為，盒子垂直沒有居中*/ /*盒子水平居中關鍵是，左右auto*/ /*通俗寫法*/ /*margin: 0 auto;*/ /*寫法二：不寫上下，減少渲染*/ /*margin-left: auto; margin-right: auto;*/ /*寫法三：全部auto*/ /*margin: auto;*/ } </style> </head> <body> <div>123</div> </body> </html>
1.2 外邊距合併
僅針對垂直！水平沒有關係
時刻要有這樣的圖在腦海中。
在兩個相鄰盒子間，margin大的有效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02_外邊距合併.html</title> <style> div { width: 200px; height: 200px; background-color: pink; } /*外邊距合併，瀏覽器BUG，兩個盒子的外邊距，以其中大的為準*/ .father { margin-bottom: 200px; } .son { background-color: purple; margin-top: 100px; } /*速度慢！ * { margin: 0; padding: 0; } 寫成p, td, li { ...... } 列出要清零的目標，雖然寫起來繁瑣，但是效能優化*/ </style> </head> <body> <div class="father"></div> <div class="son"></div> </body> </html>
1.3 外邊距塌陷
屬於外邊距合併
僅針對垂直！水平沒有關係
內嵌盒子，當父元素沒有padding和border的時候，在垂直方向上，父元素的外邊距和子元素的外邊距會發生外邊距合併，
合併後的外邊距為兩者中較大值，即使父元素外邊距為零，也會合並
不單是父級，後代關係也可能發生
解決思路： 不讓內嵌元素的外邊距和父級外邊距直接接觸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03_外邊距塌陷.html</title> <style> /*巢狀塊元素的垂直外邊距合併 當父元素沒有padding和border的時候，在垂直方向上，父元素的外邊距和子元素的外邊距會發生外邊距合併， 合併後的外邊距為兩者中較大值，即使父元素外邊距為零，也會合並 不單是父級，後代關係也可能發生*/ /*解決思路：不讓內嵌元素的外邊距和父級外邊距直接接觸 由此： 1.在父級元素加border,顏色可以transparent 或者 和周圍一致，會撐開盒子 CSS1 background CSS2 +border CSS3 OK https://www.css88.com/book/css/values/color/transparent.htm 2.在父級元素加padding，會撐開盒子 3.外層元素overflow:hidden;------>推薦！不用調寬高！！！*/ .father { width: 300px; height: 300px; background-color: pink; /*border:1px solid transparent;*/ /*border:1px solid pink;*/ overflow: hidden; /*padding-top: 50px;*/ margin-top: 20px; } .son { width: 100px; height: 100px; background-color: purple; margin-top: 10px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
1.4 盒子預設寬度
子盒子在沒有指定寬高的時候，寬度預設是父盒子的寬度。
Element 空間大小 = content + padding + border + margin
Element 實際大小 = content + padding + border
注意：子盒子可以超出父盒子，不要理解錯誤，父盒子本身的padding和border會撐開本身。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04_盒子預設寬度</title>
<style>
.father {
width: 200px;
height: 200px;
background-color: pink;
/*padding: 20px;*/
}
/*Element 空間大小 = content + padding + border + margin*/
/*Element 實際大小 = content + padding + border*/
/*.son沒有給寬高，所以padding不會撐開盒子，預設寬度是.father的*/
/*注意！！！當.son也有寬或者高，padding會撐開.son的盒子，不會撐開大盒子！！！！！！*/
.son {
/*height: 2000px;*/
/*width: 300px;*/
padding: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">123</div>
</div>
</body>
</html>
1.5 圓角盒子
針對方形：border-radius: 50%;
為圓形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05_圓角盒子.html</title>
<style>
body {
background-color: #ccc;
}
.nav {
border: 1px solid green;
text-align: center;
}
.nav a {
display: inline-block;
width: 200px;
height: 200px;
background-color: #fff;
/*也可以寫，100px，但是要是寬高改變，就得重新計算，麻煩！*/
border-radius: 50%;
margin: 0 50px;
text-decoration: none;
line-height: 200px;
color: red;
font-size: 20px;
}
.nav a:hover {
background-color: red;
color: white;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">ABC</a>
<a href="#">ABC</a>
<a href="#">ABC</a>
<a href="#">ABC</a>
</div>
</body>
</html>
1.6 盒子陰影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06_盒子陰影.html</title>
<style>
div {
width: 200px;
height: 200px;
/*水平陰影h-shadow（必填） 垂直陰影v-shadow（必填） 模糊距離blur 陰影尺寸spread 陰影顏色color inset將外部陰影（outset）改為內部陰影*/
box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2. 盒子浮動
浮動，就是為了讓多個塊級元素可以在一行上顯示
2.1 盒子浮動與標準流父級搭配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08_盒子浮動與標準流父級搭配.html</title>
<style>
/*
----- -----
| | | |
----- -----
------------
| |
------------
有標準流的父級塊級元素阻擋，能出以上效果
*/
.father {
width: 200px;
height: 100px;
border: 1px solid transparent;
}
.son1,
.son2 {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.son2 {
background-color: orange;
}
.down {
width: 202px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="down"></div>
</body>
</html>
2.2 浮動的隱藏模式轉換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_浮動的隱藏模式轉換.html</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
span {
width: 100px;
height: 100px;
background-color: green;
/*元素浮動後，會具有行內塊的特性*/
float: left; /*如果給行內元素停駕了float，則不用轉換模式了*/
}
</style>
</head>
<body>
<div>abc</div>
<span>123</span>
</body>
</html>
2.3 盒子浮動的注意點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09_盒子浮動的注意點.html</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: red;
/*1.盒子浮動算作內容，不會超過padding 和 border*/
padding: 50px;
/*2.要理解浮動的作用，會如何排列，對齊*/
/*3.知曉浮動的隱藏模式轉換*/
}
.son {
width: 100px;
height: 100px;
background-color: pink;
float: right;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>