css定位和浮动
2018-03-27 23:31
357 查看
本篇文章主要写的是css中的浮动和定位布局，让刚入前端不明白布局的刻印轻松掌握这两个方面的布局，并且还有简单的万花筒代码和淘宝商品展示布局代码演示
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定位，相对于视口进行定位。
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{
4000
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>部分效果图：
定位：
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{
4000
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>部分效果图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS定位：普通流定位属性和浮动
- css定位浮动总结
- CSS定位与浮动
- 纯CSS定位的固定浮动层代码 不闪 兼容IE6 8 火狐 谷歌等
- CSS定位-浮动
- 纯CSS定位的固定垂直居中浮动层代码，附经典解说：《详解定位与定位应用》
- CSS定位（CSS定位概述、相对定位、绝对定位、浮动）
- 纯CSS定位的固定垂直居中浮动层代码，附经典解说：《详解定位与定位应用》
- CSS定位之——浮动
- 纯CSS定位的固定垂 浮动层 ，支持所以浏览器，静态停靠（广告用）
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏
- 纯CSS定位的固定垂直居中浮动层代码，附经典解说 《详解定位与定位应用》
- CSS定位之浮动
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC)
- CSS定位与浮动
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC)
- css定位浮动 &html 严格模式混杂模式
- 5.CSS定位、浮动
- html5--6-33 CSS定位5-浮动
- CSS定位机制——普通流、浮动、定位