用diiv实现多个方块居中嵌套--padding
2024-10-08 03:58:45
文章地址 https://www.cnblogs.com/sandraryan/
案例:用diiv嵌套多个正方形,配合盒模型相关知识,使每个div在他的父元素上居中。(每个div中心点对齐)
涉及到margin的各种合并问题。
(触发BFC是更好的解决方案等,为做练习此处只考虑padding)
思路:给减少每个元素的宽高,加给padding。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.first {
width: 500px;height: 500px;background-color: red;padding: 50px;
}
.second {
width: 400px;height: 400px;background-color: orange;padding: 50px;
}
.third {
width: 300px;height: 300px;background-color: yellow;padding: 50px;
}
.forth {
width: 200px;height: 200px;background-color: green;padding: 50px;
}
.fifth {
width: 100px;height: 100px;background-color: blue;padding: 50px;
}
.center {
width:;height:;background-color: purple;padding: 50px;
}
</style>
</head>
<body>
<div class="first">
<div class="second">
<div class="third">
<div class="forth">
<div class="fifth">
<div class="center"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最新文章
- 0x00到0xFF二进制数值中1的的个数
- Centos5, 6下更改系统时间和时区
- ACM数据结构相关资料整理【未完成,待补充】
- Oracle- 日期加减
- Android 常用UI控件之TabHost(4)实现当Tab栏有多个tab时,可以左右滑动
- C# Web版报表
- ios专题 - 使用bundle文件管理资源
- Impala 4、Impala JDBC
- [google面试CTCI] 1-4.判断两个字符串是否由相同字符组成
- 201521123098 《Java程序设计》第6周学习总结
- POJ 3061 Subsequence 尺取法 POJ 3320 Jessica's Reading Problem map+set+尺取法
- (二)—Linux远程连接与常用命令
- [截稿日期] 人机交互与普适计算方向的A、B类国际会议
- Spring Security(十五):5.6 Authentication
- 2018牛客网暑期ACM多校训练营(第一场)B Symmetric Matrix(思维+数列递推)
- python - 发送带各种类型附件的邮件
- 找不到指定的模块 c#
- linux内核分析第二四学习报告
- PHP将数据写入指定文件中
- jquery 页面分页的实现