为什么svg不改变它的宽度，但段落却改变了。还有，为什么段落适合svg的宽度，而不是我的css文件中定义的宽度。当我改变顺序并在段落之后引入svg时，段落的宽度与我的css文件中的宽度相同。https://jsfiddle.net/daotwLg3/
<style>
main{
background-color: lightblue;
max-width:600px;
padding:1rem;
}
main p{
margin: 1px auto;
background-color: white;
padding:1rem;
}
.rectangle{
stroke-width:3;
stroke:black;
fill:black;
}
main svg{
border:3px solid blue;
max-width:600px;
}
main div{
max-width:600px;
}
main p:nth-child(1){
width:1000px;
}
main p:nth-child(2){
max-width:800px;
}
</style>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="test.css">
<title>Modus Energy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>
<div>
<svg width="500px" height="500px" viewbox="0 0 500 500">
<rect class="rectangle" x="250" y="250" width="100px" height="100px"></rect>
</svg>
</div>
<p>Notice that you're not naming lines with this syntax, just areas. When you use this syntax the lines on either end of the areas are actually getting named automatically. If the name of your grid area is foo, the name of the area's starting row line and starting column line will be foo-start, and the name of its last row line and last column line will be foo-end. This means that some lines might have multiple names, such as the far left line in the above example, which will have three names: header-start, main-start, and footer-start.</p>
<p>Notice that you're not naming lines with this syntax, just areas. When you use this syntax the lines on either end of the areas are actually getting named automatically. If the name of your grid area is foo, the name of the area's starting row line and starting column line will be foo-start, and the name of its last row line and last column line will be foo-end. This means that some lines might have multiple names, such as the far left line in the above example, which will have three names: header-start, main-start, and footer-start.</p>
</main>
<script>
</script>
</body>
</html>
2条答案
按热度按时间ercv8c1e1#
你从来不用min-width。尝试：
fykwrbwg2#
也许这会对你有所帮助，但是svg元素的最小/最大大小可以通过css函数
max(<min-value>, <value>)/min(<value>, <max-value>)分别设置。例如，对于rect元素的动态宽度，我这样做了：
width: max(6px, var(--width-percentage));