如何使用css,把div设置为一个椭圆容器,在做html页面开发时,我们一般都是使用div来做容器的,如果你需要一个椭圆形的容器,我们可以使用div来实现的,下面来看一下。......
如何让内层div随外层div的宽度自适应调整宽度
DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
工具/原料
- 电脑
- 前端页面编辑工具
方法/步骤
第一步:思路整理。
1、HTML的div标签主要是用来布局
2、div默认是没有任何属性的这也是常用它布局的原因
3、布局之前茄丽先要了解HTML的盒子如下图所示
4、div默认是没有长和宽的需要设置,其自动会根据自己内容扩展自己的宽度和高度。
第二步:代码编写。
1、主要设置两个div,一个div在外一个div在内,并设置div的边框颜色
2、具体代码如下所示
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>div改变/title>
style>
#a {
border: 1px solid red;
display: inline-block;
}
#b {
border: 1px solid green;
margin: 2px 2px 2px 2px;
height: 50px;
width: 500px;
}
/style>
/head>
body>
div id="a">
div id="b">/div>
慎诉div id="c">
ul>/ul>
/div>
/div>
/body>
/html>
第三步:测试代码。
1、首先打开页面,具体如下图所示
2、F12打开审查元素,修改内层div的宽度,外层div随着边框
3、修改内层div高度,外层div高度随之改变捕三伟。
第四步:div定位测试。
1、div如果使用了定位position则外层不会随内层div变化。
2、具体操作如下所示。
注意事项
- 注意设置边框或者背景颜色,便于区分实际效果。
- 需要注意position: absolute绝对定位的使用。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
标签: HTML
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具,MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具,MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗?MAKA(中文:码卡)作为中国最早推出移动端卡片式交互模式的创新者,随着HTML5技术的日渐成熟......
2023-03-16 435 HTML