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

html-css069

CSS怎么实现div随着网页的大小变化而变化呢？,第1张

<div class="one">流体布局</div><div class="two">布局</div>

.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 用于标识单独的唯一的元素。

比如，建立4个div，要实现宽度随窗口变化而变化很简单，把宽度设成百分比形式就可以了。

css这样写：

这样的话我们的div倒是可以随着窗口的变化进行宽度的缩放，但是高度是不变的，这样肯定不行，我们要达到按比例缩放的话高度肯定也是要写成百分比的。那么怎么写呢？直接写百分比么 height:21%这个就别想了，肯定不行的。

我们可以借用一个不常见的属性，padding-bottom属性。

从手册可以看到，当padding-bottom为百分比的值时，定义的是基于父元素宽度的百分比下内边距。

所以我们的css如果这样写：

我们就会得到一个和我们宽度相等的高度，而且我们的div会随着窗口大小的改变进行等比例的缩放。

但是这个方法有一个问题就是，手册上说我们用的padding-bottom的这个值

感觉像是个雷啊

今天就先到这里，感兴趣的小伙伴可以一起探讨探讨。

div的内容岁内容变化就好比P标签一样，只要不给div设置宽度就行了；

如

<div style="width:500pxheight:auto">

<div style="width:autoheight:auto">

宽度随内容变化，外围div好比浏览器的宽度，当里面div内容超过500px的时候自动换行，

</div>

</div>