css盒子的浮动与定位
程序员文章站
2022-07-09 21:27:37
...
1. css盒子的浮动与定位
1) 盒子浮动float
2) 使用clear清除浮动的影响
3) 盒子定位position
4) z-index空间位置
5) 盒子display属性
1) 盒子浮动float
float属性： 默认是none，按照标准流来定位； left：左悬浮； right：右悬浮；
<style type="text/css">
.parent{
padding:5px;
background-color: yellow;
border: 1px solid red;
}
.d1{
float:left; // float:none;
margin:5px;
background-color: gray;
border: 1px solid gray;
}
.d2{
float:right; // 不设置
margin:5px;
background-color: blue;
border: 1px solid blue;
}
p{
margin:5px;
background-color: green;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="parent">
<div class="d1">盒子A</div>
<div class="d2">盒子B</div>
<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>
2) 使用clear清除浮动的影响
clear属性： 默认是none，允许两边都可以有浮动对象； left：不允许左边有浮动对象 right：不允许右边有浮动对象 both：不允许有浮动对象
<style type="text/css">
.parent{
padding:5px;
background-color: yellow;
border: 1px solid red;
}
.d1{
float:left;
margin:5px;
height:100px;
background-color: gray;
border: 1px solid gray;
}
.d2{
float:right;
margin:5px;
height:50px;
background-color: blue;
border: 1px solid blue;
}
p{
clear:right; // clear:both;
margin:5px;
background-color: green;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="parent">
<div class="d1">盒子A</div>
<div class="d2">盒子B</div>
<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>
3) 盒子定位position
position属性： 默认是static，按照标准流来定位； relative：相对定位，相对于原本的标准位置偏移指定的距离； absolute：绝对定位，以它的包含框为基准进行偏移； fixed：固定定位，以浏览器窗口为基准进行定位；
<div class="parent">
<div class="son">儿子</div>
</div>
<style type="text/css">
.parent{
padding:15px;
background-color: green;
border: 1px solid red;
}
.son{
position:static;
padding:10px;
background-color: blue;
border: 1px solid gray;
}
</style>
<style type="text/css">
.parent{
padding:15px;
background-color: green;
border: 1px solid red;
}
.son{
position:relative;
left:30px;
top:30px;
padding:10px;
background-color: blue;
border: 1px solid gray;
}
</style>
<style type="text/css">
.parent{
position:relative;
padding:15px;
background-color: green;
border: 1px solid red;
}
.son{
position:absolute;
left:0px;
top:0px;
padding:10px;
background-color: blue;
border: 1px solid gray;
}
</style>
<style type="text/css">
.parent{
position:relative;
padding:15px;
background-color: green;
border: 1px solid red;
}
.son{
position:fixed;
left:0px;
top:0px;
padding:10px;
background-color: blue;
border: 1px solid gray;
}
</style>
4) z-index空间位置
z-index空间位置，默认是0，z-index值大的页面位于其值小的上方；
<style type="text/css">
img{
position: fixed;
top: 0px;
left: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<img src="../apple.jpg"/>
</body>
5) 盒子display属性
display： inline：把元素变成内联元素； block：把元素变成块级元素；
<div style="display: inline;">d1</div> <div style="display: inline;">d2</div> <div style="display: inline;">d3</div> <span style="display: block;">s1</span> <span style="display: block;">s2</span> <span style="display: block;">s3</span>
下一篇： TCP协议