css 高度怎么等于动态宽度

html-css011

css 高度怎么等于动态宽度,第1张

我用js实现的，css貌似实现不了吧，反正我没思路

<!DOCTYPE html>

<html>

<head>

<title>div_height_equal_width</title>

<style type="text/css">

#div1{

width:50%

background-color:lavender

margin:0 auto

}

</style>

<script type="text/javascript">

window.onload = function(){

var div1 = document.getElementById("div1")

var width = div1.offsetWidth

div1.style.height = width+"px"

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

当你使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。我们使用 overflow 属性来控制这种情况的发生。它有一些可能的值，但是最常用的是：

框模型的 width 和 height （不是content设置的width,height），框模型 content 不足以放下内部元素时可以延伸到框的外部，即使 content 设置的height为0，然而默认溢出是当内容过多时溢流的内容被显示在框外边。

示例1:先看溢出框的情况

结果1:

发现img溢出到父容器之外

示例2:溢出框被删减的情况

发现设置完overflow之后img超出父容器的部分被删减了。

为什么height设置为0?

因为容器如果去掉这一行的话，img下面会出现一个img大小的空白区域，这个区域是设置 padding-bottom 导致的，所以设置height=0是为了让父元素没有高度。

只有块元素才可以默认“继承”其父元素的width.

浮动元素和定位元素也是不默认（不自动）“继承”其父元素宽度的。

当符合css默认“继承”的情况下（子元素必须是块级元素且无定位或浮动），是不需要写width属性，就可以默认“继承”的。