css合理布局如何让div嵌入-css实例教程

首页 2024-06-26 11:12:41

需要使用 css 布局在 div 内嵌入 div，方法如下：1. 建立父 div 并配有其宽高比；2. 设定子 div 为肯定或相对定位；3. 设定子 div 在父 div 中的地位。通过这三个步骤，能够实现子 div 相较于父 div 定位。

怎么使用 CSS 布局在 div 内嵌入 div

应用 CSS 布局在 div 内嵌入 div 可以通过以下流程完成：

1. 建立父 div：

创建一个 div 做为父器皿，它的位置和大小由自己决定。

马上学习培训“前面完全免费学习心得（深层次）”；

.parent-div {
  display: block;
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

登陆账号拷贝

2. 设定子 div 定位：

将子 div 的定位设置为肯定或相对性，使之相较于父 div 进行识别。

.child-div {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #000;
}

登陆账号拷贝

3. 设定子 div 位置：

应用 top、left、bottom 或 right 特性设定子 div 相较于父 div 位置。

.child-div {
  top: 50px;
  left: 50px;
}

登陆账号拷贝

实例：

<div class="parent-div">
  <div class="child-div"></div>
</div>

登陆账号拷贝

.parent-div {
  display: block;
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

.child-div {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #000;
  top: 50px;
  left: 50px;
}

登陆账号拷贝

留意：

针对相较于父 div 相对定位的 div，它的位置不受父 div 间距或边框的危害。
针对相较于父 div 相对定位的 div，它的位置会受到父 div 间距和边框的危害。

以上就是关于css合理布局如何让div嵌入的详细内容，大量欢迎关注php中文网站其他类似文章！

阅读全文

上一篇：css如何删除无序列表一个点-css实例教程
下一篇：震撼展示：顶级服务器外观大揭秘！

css合理布局如何让div嵌入-css实例教程

首页 2024-06-26 11:12:41

最新文章

相关文章