CSS怎么实现div随着网页的大小变化而变化呢?

发布网友发布时间：2022-04-26 10:39

我来回答

共7个回答

热心网友时间：2022-04-06 15:02

.one{width:80%; font-size:em(设置自体的大小，em可以让自体根据浏览器不同而更加优与阅读）;}

.two{width:20%;font-size:em;}

注：通过这样设置，就可能拉动浏览器，盒模型的宽度就会随着你的拉动而变大缩小，但也是有一定限度的。

扩展资料：

关于div的用法

1、<div> 可定义文档中的分区或节（division/section）。

2、<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

3、<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

热心网友时间：2022-04-06 16:20

你说的是流体布局，这种布局的难度相对较高，因为都是百分比值，之前设计开始也要考虑周到，对于自体的大小，每个版块的值都要考虑在内。
举个例子，
<div class="one">流体布局</div><div class="two">布局</div>
.one{width:80%; font-size:em(设置自体的大小，em可以让自体根据浏览器不同而更加优与阅读）;}
.two{width:20%;font-size:em;}
通过这样设置，就可能拉动浏览器，盒模型的宽度就会随着你的拉动而变大缩小，但也是有一定限度的，具体你可以自己去尝试，看看缩小到什么地步，盒子就会错位。

热心网友时间：2022-04-06 17:55

CSS实现div随着网页的大小变化而变化，首先我们需要了解div的width和height的属性设置，有一个auto参数，就是代表的是随着内容的大小而改变，浏览器缩小，自然div的宽度就会减小，高度就会有所增加，具体看下代码:
<html>
<head>
<style>
#div1{
width:auto;
height:auto;
}
</style>
</head>
<body>
<div id='div1'>
<p>我是测试文字</p>
</div>
</body>
</html>

热心网友时间：2022-04-06 19:46

简单，用width:auto; height:auto;不过，在这个DIV结束前，加一个<div style="clear:both"></div>,不然不能自动增长（有些浏览器）

热心网友时间：2022-04-06 21:54

百分比可以，但就像前面网友说的，超过一个限度，内容就会错位

热心网友时间：2022-04-07 00:19

高和宽用百分比。

热心网友时间：2022-04-07 03:00

width:100%