前端之CSS結尾
1.盒子模型
margin:用于控制标簽與标簽之間的距離，最基本的用途控制元素周圍的間隔
padding:用于控制内容與邊框之間的距離
Border:圍繞在内邊距和内容外的邊框
Content:盒子的内容，顯示文本和圖形
最常用的是margin和padding
2.margin外邊距
<style>
.margin_test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
</style>
<style>
/*推薦使用簡寫*/
.margin-test {
margin:5px 10px 15px 20px
}
/*順序：上右下左*/
</style>
<style>
/*常見居中*/
.margin-test {
margin:0 ayto
}
/*水準居中*/
</style>
示例
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;
}
.c1 {
width: 100px;
height:100px;
border:3px solid red;
margin:10px 20px;
}
.c2 {
width: 100px;
height:100px;
border:3px solid green;
margin-top:30px;
margin-left:20px;
}
.c3 {
width: 20px;
height:20px;
border:3px solid black;
margin:10px auto;
}
</style>
</head>
<body>
<div class="c1">
<div class="c3"></div>
</div>
<div class="c2"></div>
</body>
</html> 
3.padding内填充
<style>
.padding-test {
padding-top:5px;
padding-right:10px;
padding-bottom:15px;
padding-left:20px;
}
</style>
<style>
/*推薦使用*/
.padding-test {
padding:5px 10px 15px 20px;
}
/*順序：上右下左*/
</style> padding補充
補充padding的常用簡寫方式：
提供一個，用于四邊；
提供兩個，第一個用于上-下，第二個用于左-右；
提供三個，第一個用于上，第二個用于左-右，第三個用于下；
提供四個，按上-右-下-左的順序作用于四邊
4.float
在CSS中，任何元素都可以浮動
浮動元素會生成一個塊兒級框，而不論它本身是何種元素
浮動的兩個特點：
- 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止
- 由于浮動框不在文檔的普通流中，所有文檔的普通流中的塊框表現得就像浮動框不存在一樣
三種取值
<style>
/*向左浮動*/
.float-test {
float:left;
}
</style>
<style>
/*向右浮動*/
.float-test {
float:right;
}
</style>
<style>
/*預設值，不浮動*/
.float-test {
float:none;
}
</style> 5.clear
clear 屬性規定元素的哪一冊不允許其他浮動元素
| 值 | 描述 |
|---|---|
| left | 在左側不允許浮動元素 |
| right | 在右側不允許浮動元素 |
| both | 在左右兩側均不允許浮動元素 |
| none | 預設值，允許浮動元素出現在兩側 |
| inherit | 規定應該從父級繼承clear屬性的值 |
注意：clear屬性隻會對自身起作用，而不會影響其他元素
清除浮動
清除浮動的副作用（父标簽塌陷問題）
主要有三種方式
- 固定高度
- 僞元素清除法
- overflow:hidden
僞元素清除法（使用較多）
<style>
.clearfix:after {
content:'';
display:block;
clear:both;
}
</style> 示例
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;
}
.c1 {
border:3px solid black;
}
.c2 {
width:80px;
height:80px;
background-color: red;
float:left;
}
.c3 {
width:80px;
height:80px;
background-color: green;
float:left;
}
.c4 {
width:40px;
height:40px;
background-color: tomato;
}
.clearfix:after {
content:'';
clear:both;
display:block;
}
</style>
</head>
<body>
<div class="c1 clearfix">
<span class="c4">span</span>
<div class="c2"></div>
<div class="c3"></div>
</div>
</body>
</html>
父标簽塌陷：
使用.clearfix:after之後：
6.overflow溢出屬性
| 值 | 描述 |
|---|---|
| visible | 預設值，内容不會被修剪，會呈現在元素框之外 |
| hidden | 内容會被修剪，并且其餘内容是不可見的 |
| scroll | 内容會被修剪，但是浏覽器會顯示滾動條以便檢視其餘的内容 |
| auto | 如果内容被修剪，則浏覽器會顯示滾動條以便檢視其餘的内容 |
| inherir | 規定應該從父元素繼承overflow屬性的值 |
- overflow(水準和垂直均設定)
- overflow-x（設定水準方向）
- overflow-y（設定垂直方向）
圓形頭像示例
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background: darkgray ;
}
.c1 {
width:200px;
height:200px;
border:5px solid peachpuff;
border-radius: 50%;
overflow: hidden;
}
img {
width:100%;
}
</style>
</head>
<body>
<div class="c1">
<img src="1.jpg" alt="">
</div>
</body>
</html> 7.定位（position）
static(預設值)
static 預設值，無定位，不能當作絕對定位的參照物，并且設定标簽對象的left、top等值是不起作用的的。
relative(相對定位)
相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。對象遵循正常文檔流，但将依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
注意：position：relative的一個主要用法：友善絕對定位元素找到參照物。
示例
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin:0;
}
.c1 {
width:100px;
height:100px;
background: red;
top:100px;
left:100px;
position: relative;
}
.c2 {
width:100px;
height:100px;
background: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html> absolute(絕對定位)
定義：設定為絕對定位的元素框從文檔流完全删除，并相對于最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那麼它的位置相對于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設定了position屬性，例如position:relative;，那麼子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自适應網站的标簽偏離問題，即父級為自适應的，那我子元素就設定position:absolute;父元素設定position:relative;，然後Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
示例
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width:100px;
height:50px;
background: #FF6800;
position: relative;
/*padding-bottom:50px;*/
}
.c2 {
width:400px;
height:200px;
background: pink;
position: absolute;
top:50px;
left:100px;
}
.c3 {
height:50px;
width:50px;
background: black;
margin-top:0;
}
</style>
</head>
<body>
<div class="c1 ">購物車
<div class="c2">空空如也</div>
<div class="c3"></div>
</div>
</body>
</html> fixed(固定)
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，對象不會随着滾動。而其層疊通過z-index屬性 定義。 注意點： 一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
在理論上，被設定為fixed的元素會被定位于浏覽器視窗的一個指定坐标，不論視窗是否滾動，它都會固定在這個位置。
脫離文檔流：
- 絕對定位
- 固定定位
不脫離文檔流：
- 相對定位
8.z-index
設定對象的層疊順序
- z-index 值表示誰壓着誰，數值大的壓蓋住數值小的
- 隻有定位了的元素，才能有z-index，也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
- z-index值沒有機關，就是一個正整數，預設的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那麼誰寫在HTML後面，誰在上面壓着别人，定位了元素，永遠壓住沒有定位的元素
- 從父現象
9.opacity
用來定義透明效果，取值範圍是0~1,0是完全透明，1是完全不透明
轉載于:https://www.cnblogs.com/yanminggang/p/10951968.html