css定位和浮動
本篇文章主要寫的是css中的浮動和定位佈局，讓剛入前端不明白布局的刻印輕鬆掌握這兩個方面的佈局，並且還有簡單的萬花筒程式碼和淘寶商品展示佈局程式碼演示
定位：
css中常見的定位有相對和絕對定位。說到定位，就從它的屬性position說起。在css中屬性position的值有6個，學好這6個值，對定位就會有基本的掌握。重點通過它的屬性值來介紹定位的瞭解。
position屬性值：
- relative：1. 相對定位，元素框相對於正常文件流發生偏移，本元素的原來的位置就會被佔掉。
2. 在佈局中的最常使用，使一個元素變成父元素，然後給自己的子元素一個absolute絕對定位，就可以讓子元素相 對於父元素任意排版
- absolute：1. 絕對定位。設定這個屬性值的元素其元素框不在佔有文件流。但是原來的位置不能被其他元素佔有。
2. 常見引用，和relative結合使用，使一個元素相變成一個元素的子元素，這讓他進行定位，設定排版
realtive和absolute兩個屬性值結合使用是最常用的，讓子元素相對於父元素進行佈局。在立體旋轉，萬花筒就有這種使用
這是一個簡單的萬花筒效果圖的程式碼，直接複製就可以看到效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0 auto; padding: 0; } body{ background-color: grey; } #wai{ width: 200px; height: 600px; margin: 100px auto 0; position: relative;//讓父元素相對定位 transform-style: preserve-3d; transform: rotateX(-10deg); perspective: 2000px; } #top{ width: 100px; height: 100px; position: absolute;//讓元素定位後變成子元素，進行佈局 transform-style: preserve-3d; top: 50px; animation: xuanzhuan 6s linear infinite; } #mon{ width: 100px; height: 100px; position: absolute; transform-style: preserve-3d; animation: xuanzhuan 6s linear infinite; top: 200px; } #bottom{ width: 100px; height: 100px; position: absolute; transform-style: preserve-3d; animation: xuanzhuan 6s linear infinite; top: 350px; } @keyframes xuanzhuan{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } } #top div{ width: 100px; height: 100px; position: absolute; background-size: 100% 100%; transform-style: preserve-3d; border-radius: 10px; } #a1{ background-image: url(img/1.jpg); transform: rotateY(0deg) translateZ(300px); } #a2{ background-image: url(img/2.jpg); transform: rotateY(45deg) translateZ(300px); } #a3{ background-image: url(img/3.jpg); transform: rotateY(90deg) translateZ(300px); } #a4{ background-image: url(img/4.jpg); transform: rotateY(135deg) translateZ(300px); } #a5{ background-image: url(img/5.jpg); transform: rotateY(180deg) translateZ(300px); } #a6{ background-image: url(img/6.jpg); transform: rotateY(225deg) translateZ(300px); } #a7{ background-image: url(img/7.jpg); transform: rotateY(270deg) translateZ(300px); } #a8{ background-image: url(img/8.jpg); transform: rotateY(315deg) translateZ(300px); } /*#wai:hover #top #a8{ transform: rotateY(315deg) translateZ(400px); }*/ } </style> </head> <body> <div id="wai"> <div id="top"> <div id="a1"></div> <div id="a2"></div> <div id="a3"></div> <div id="a4"></div> <div id="a5"></div> <div id="a6"></div> <div id="a7"></div> <div id="a8"></div> </div> </div> </body> </html>
fixed：元素框不再佔有文件流位置，並且相對於視窗進行定位
sticky：(這是css3新增的屬性值)粘性定位。最初會被當作是relative，相對於原來的位置進行偏移；一旦超過一定閾值之後，會被當成fixed定位，相對於視口進行定位。
浮動
1. 浮動：使當前元素脫離普通流，相當於浮動起來一樣，浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動屬性：用float屬性，它的屬性值有兩個，為right和left兩個屬性值。
- left：左浮動
- right：右浮動
2.使用浮動常出現的問題:
1) 對附近的元素佈局造成改變，使得佈局混亂
2)因為元素脫離了文件流，會造成一種坍塌的現象。簡單的說就是原來的父元容器是被元素撐開的，當浮動之後，父容器的高度就會坍塌。
3.消除浮動
使用浮動，常常就會用到消除浮動。消除浮動可以解決坍塌現象，使元素充滿塊
- 消除浮動常用的三種方法：
1.在浮動的元素後面加一個空元素，設定屬性為clear：both。
缺點：成本太高，添加了一個元素，難維護
2.通過設定css的樣式： overflow：hidden
3. after偽類：對子元素的after偽類進行設定。
程式碼示例：通過浮動佈局設計淘寶商品展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.nav{
width:1200px;
height: 200px;
background-color: navajowhite;
margin: 0 auto;
margin-bottom: 20px;
}
.info{
width: 280px;
height: 400px;
float: left;//左浮動
background-color: red;
margin-right: 20px;
margin-top :20px
}
.info_img{
width: 280px;
height: 280px;
background-color: ;
overflow: hidden;/*超出部分隱藏*/
}
.info_pri{
width: 280px;
height: 50px;
background-color: greenyellow;
}
.info_mes{
width: 280px;
height: 50px;
background-color: goldenrod;
}
.info_img img{
width: 100%;
transition: all 1s;
}
.info_img img:hover{
transform: scale(1.1);
}
.info_pri .span1{
font-size: 24px;
line-height:50px ;
color: red;
font-weight: bold;
}
.info_pri .span2{
font-size: 14px;
line-height:50px ;
color: white;
background-color: red;
}
</style>
</head>
<body>
<div class="nav">
<div class="info">
<div class="info_img">
<img src="img/5.jpg">
</div>
<div class="info_pri">
<span class="span1">￥46.00</span>
<span class="span2">包郵</span>
</div>
<div class="info_mes"></div>
</div>
<div class="info">
<div class="info_img">
<img src="img/5.jpg">
</div>
<div class="info_pri">
<span class="span1">￥46.00</span>
<span class="span2">包郵</span>
</div>
</div>
<div class="info">
<div class="info_img">
<img src="img/5.jpg">
</div>
<div class="info_pri">
<span class="span1">￥46.00</span>
<span class="span2">包郵</span>
</div>
</div>
<div class="info">
<div class="info_img">
<img src="img/5.jpg">
</div>
<div class="info_pri">
<span class="span1">￥46.00</span>
<span class="span2">包郵</span>
</div>
</div>
<div class="info">
<div class="info_img">
<img src="img/5.jpg">
</div>
<div class="info_pri">
<span class="span1">￥46.00</span>
<span class="span2">包郵</span>
</div>
</div>
<div class="info">
<div class="info_img">
<img src="img/5.jpg">
</div>
<div class="info_pri">
<span class="span1">￥46.00</span>
<span class="span2">包郵</span>
</div>
</div>
</div>
</div>
</body>
</html>部分效果圖：
