html-AbsolutePosition

最新推荐文章于 2024-02-14 11:51:22 发布

jing20121012

最新推荐文章于 2024-02-14 11:51:22 发布

阅读量199

点赞数

本文链接：https://blog.csdn.net/jing20121012/article/details/38301535

版权

本文详细介绍了CSS中关于布局及浮动的基本概念和技术要点，包括如何使用border、padding和box-sizing属性来精确控制元素尺寸，以及如何利用float属性实现元素的灵活定位。同时，文中还提到了清除浮动的方法及其对页面布局的影响。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="css/tb.css" rel="stylesheet">
<style>
.father {
width: 100%;
border: 10px solid #5374d7;
margin: 0 auto;
height: 100px;
box-sizing: border-box;
}
.inner-box {
width: 100px;
border: 10px solid #5374d7;
height: 100px;
position: relative;
right : 0;
bottom: 0;
box-sizing: border-box;
}
.father div {
float: left;
width: 100px;
height: 100px;
}
.son1{
background: #a11411;
position: relative;
right: 0;
bottom: 0;
}
.son2{
background: #5374d7;

}
.son3{
background: #000000;
}

</style>



</head>
<body >
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<p style="clear: both"></p>
</div>
</body>
</html>