CSS 为啥宽高 auto 不管用

Posted 2023-04-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 为啥宽高 auto 不管用相关的知识，希望对你有一定的参考价值。

div 上 height:auto ;高度还是不随里面内容的改变而改变

.middle-focus-02width:840px; height:850px;
.middle-focus-02 ullist-style:none;
.middle-focus-02 liwidth:270px;height:282px;float:left;border:1px solid #CCC;margin:0 0 5px 5px

middle-focus-02width：auto；height：auto
不行吗我试了不起作用

CSS宽高auto不管用的原因：
1、css属性覆盖
原因：被css继承属性覆盖了；
解决办法：利用chrome查找被覆盖属性的父级css属性，并删除。
2、css属性冲突
原因：上级div设置了浮动属性（float）；
解决办法：删除上级div的浮动属性，或者中间加一个<ul>，并设置ul的overflow:auto。参考技术A 你的li设置了浮动，不占任何正常文档流空间，所以ul和div上无法得到子节点的高度,
你给ul设置overflow:auto;应该就可以了本回答被提问者采纳参考技术B 不要将li设置浮动，不占任何正常文档流空间，
所以ul和div上无法得到子节点的高度,
你给ul设置overflow:auto;应该就可以了参考技术C CSS的自动对于有的浏览器是不起作用的你可以加入min-width 或者min-height 参考技术D 你把height直接去掉就可以了
最外层的div去掉，里面的根据自己要求定，应该可以

为啥'margin-top：-500px;'不管用？

【中文标题】为啥\'margin-top：-500px;\'不管用？【英文标题】：Why 'margin-top: -500px;' is not working?为什么'margin-top：-500px;'不管用？ 【发布时间】：2021-11-19 07:31:03 【问题描述】：

这就是我得到的

这就是我想要的

.   //The first picture is what I get.
.   //The second picture is what I want.


const number00 = document.getElementById('number00');
const score = document.getElementById('score');

let numberW=2;
let numberH=2;

function ften()
  if(numberW<10 && numberH<10)
    number00.textContent='WIDTH:0'+numberW+' , '+'HIGHT:0'+numberH
   else
    number00.textContent='WIDTH:'+numberW+' , '+'HIGHT:'+numberH
  


function fpW()
  if(numberW<10)
    numberW += 1;
    ften()
  


function fnW()
  if(numberW>2)
    numberW -= 1;
    ften()
  


function fpH()
  if(numberH<10)
    numberH += 1;
    ften()
  


function fnH()
  if(numberH>2)
    numberH -= 1;
    ften()
  


function fran()
  numberW = Math.floor(Math.random() * 9) + 2;
  numberH = Math.floor(Math.random() * 9) + 2;
  ften()


function fok()
  let shape = document.createElement('tr');
  document.body.appendChild(shape);

  let leftsquare = document.createElement("BUTTON");
  let leftsqtext = document.createTextNode('Match the Same Color'); 
  leftsquare.appendChild(leftsqtext);
  document.body.appendChild(leftsquare).setAttribute("class", "ema")
  document.body.appendChild(leftsquare).style.marginLeft =  '310px';
  for(let i = 0; i<(numberW-1);i+=1)
      let squares = document.createElement("BUTTON");
      let sqtexts = document.createTextNode('Match the Same Color'); 
      squares.appendChild(sqtexts);
      document.body.appendChild(squares).setAttribute("class", "ema")
    
  
  for(let i = 0; i<(numberH-1);i+=1)
    let shape = document.createElement('tr');
    document.body.appendChild(shape);

    let leftsquare = document.createElement("BUTTON");
    let leftsqtext = document.createTextNode('Match the Same Color'); 
    leftsquare.appendChild(leftsqtext);
    document.body.appendChild(leftsquare).setAttribute("class", "flp")
    document.body.appendChild(leftsquare).style.marginLeft =  '310px';
    for(let i = 0; i<(numberW-1);i+=1)
        let squares = document.createElement("BUTTON");
        let sqtexts = document.createTextNode('Match the Same Color'); 
        squares.appendChild(sqtexts);
        document.body.appendChild(squares).setAttribute("class", "flp")

h1 
    font-size: 1.8em;

.htime
    height: 50px;


.image00
    display: grid;
    grid-template-columns: repeat(4,0fr);
    margin-top: 10px;
    margin-left: -4px;


.image00 button
    width: 75px;
    height: 75px;
/*    background-color: rgba(56, 15, 80, 0.411);*/
    cursor: pointer;
    border:none;
    right:400px;
    border: none;
    display: inline-block;
    font-size: 1.5em;

.image00 button:hover
    color: seashell;
    background-color: black;


.lover button
    width: 150px;
    height: 75px;
    border: none;
    font-size: 1.5em;
    margin-left: -4px;
    border:none;

.lover button:hover
    color: seashell;
    background-color: black;


.submit button
    width: 300px;
    height: 75px;
    border: none;
    font-size: 1.5em;
    margin-left: -4px;
    border:none;
    display: flex;

.submit button:hover
    color: seashell;
    background-color: black;


.vertical 
    border-left: 3px solid black;
    height: 1010px;
    margin-top: -230px;
    position:absolute;
    left: 310px;


.score
    width: 80%;
    height: 100px;
/*    background-color: rgba(56, 15, 80, 0.411);*/


#rockcords
    padding-right:10px

/**####################################################################################################*/
.sqsqsq
    margin-left:310px;
    margin-top: 410px;
    background-color: black;


.ema
    background-color: rgb(107, 187, 31);
    color: seashell;
    width: 100px;
    height: 100px;
    margin-top: -500px;


.flp
    background-color: black;
    color: seashell;
    width: 100px;
    height: 100px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="memory00.css"></link>
    <title>memory00</title>
</head>
    <body>
    <div class='lefthand'>
    <h1 id='number00'>WIDTH:02 ,HIGHT:02</h1>
    <div class='image00'>
        <button onclick='fpW()'>+</button>
        <button onclick='fnW()'>-</button>
        <button onclick='fpH()'>+</button>
        <button onclick='fnH()'>-</button>
    </div>
    <div class='lover'>
        <button onclick='fran()'>Random</button>
        <button onclick="fok()">Start Game</button>
    </div>
    </div>
        <div class = "vertical"></div>
        <div class='htime'>
            <h1 id='score'>SCORE:</h1>
        </div>
        <h1 id='time'>TIME:</h1>
    <div class='submit'>
        <button onclick="fsubmit()">Finish Game</button>
    </div>
    <h1 id='rockcords'>RECORDS</h1>
    <script src="memory00.js"></script>
    <!--h1 id='LLTT'>LLTT</h1>
    <h1 id='RRTT'>RRTT</h1>
    <h1 id='MMMM'>MMMM</h1>
    <h1 id='LLBB'>LLBB</h1>
    <h1 id='RRBB'>RRBB</h1-->
    </body>
</html>
<!-- open memory00.html -->

我不知道如何将黑色和绿色方形按钮移动到应用程序的顶部。我知道我遇到了保证金崩溃问题，但我不知道如何处理它。谢谢您的解决方案。 ....................................

【问题讨论】：

【参考方案1】：

在 JS 中创建的 HTML 结构无处不在。您创建元素并将它们直接附加到正文。您需要分别定位每个目标以定位它们。在 HTML 中添加一个包装器元素并使用 JS 定位它。

<div id="right-container"></div>

const target = document.querySelector('#right-container');
target.appendChild(document.createElement("BUTTON"));
...

然后您可以将div.lefthand 和div#right-container 正确设置为您的结构的大小和位置，并将您创建的元素附加到这些结构中。目前，您打算在 lefthand 容器中的所有元素都溢出以将它们之后的所有内容推倒。

不要使用margin-top 或margin-left 移动元素。学习正确的 CSS 布局for example grids。

【讨论】：

【参考方案2】：

您的 html 代码没有任何布局表达式。因此，当您将新项目附加到正文中时，您的代码始终添加为新行。

因此，您的 margin-top: -500px; 表达式将不起作用。

我在您的 html 代码中添加了一些行和列 div，并根据新的布局结构更改了您的 js 文件。

你可以试试这些代码。

.css 文件

h1 
    font-size: 1.8em;

.htime
    height: 50px;


.image00
    display: grid;
    grid-template-columns: repeat(4,0fr);
    margin-top: 10px;
    margin-left: -4px;


.image00 button
    width: 75px;
    height: 75px;
/*    background-color: rgba(56, 15, 80, 0.411);*/
    cursor: pointer;
    border:none;
    right:400px;
    border: none;
    display: inline-block;
    font-size: 1.5em;

.image00 button:hover
    color: seashell;
    background-color: black;


.lover button
    width: 150px;
    height: 75px;
    border: none;
    font-size: 1.5em;
    margin-left: -4px;
    border:none;

.lover button:hover
    color: seashell;
    background-color: black;


.submit button
    width: 300px;
    height: 75px;
    border: none;
    font-size: 1.5em;
    margin-left: -4px;
    border:none;
    display: flex;

.submit button:hover
    color: seashell;
    background-color: black;


.vertical 
    border-left: 3px solid black;
    height: 1010px;
    margin-top: -230px;
    position:absolute;
    left: 310px;


.score
    width: 80%;
    height: 100px;
/*    background-color: rgba(56, 15, 80, 0.411);*/


#rockcords
    padding-right:10px

/**####################################################################################################*/
.sqsqsq
    margin-left:310px;
    margin-top: 410px;
    background-color: black;


.ema
    background-color: rgb(107, 187, 31);
    color: seashell;
    width: 100px;
    height: 100px;
    margin-top: -500px;


.flp
    background-color: black;
    color: seashell;
    width: 100px;
    height: 100px;


.column 
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px;

.js 文件

const number00 = document.getElementById('number00');
const score = document.getElementById('score');

let numberW=2;
let numberH=2;

function ften()
  if(numberW<10 && numberH<10)
    number00.textContent='WIDTH:0'+numberW+' , '+'HIGHT:0'+numberH
   else
    number00.textContent='WIDTH:'+numberW+' , '+'HIGHT:'+numberH
  


function fpW()
  if(numberW<10)
    numberW += 1;
    ften()
  


function fnW()
  if(numberW>2)
    numberW -= 1;
    ften()
  


function fpH()
  if(numberH<10)
    numberH += 1;
    ften()
  


function fnH()
  if(numberH>2)
    numberH -= 1;
    ften()
  


function fran()
  numberW = Math.floor(Math.random() * 9) + 2;
  numberH = Math.floor(Math.random() * 9) + 2;
  ften()


function fok()

  let container =  document.getElementById("container");

  let shape = document.createElement('tr');
  container.appendChild(shape);

  let leftsquare = document.createElement("BUTTON");
  let leftsqtext = document.createTextNode('Match the Same Color'); 
  leftsquare.appendChild(leftsqtext);
  shape.appendChild(leftsquare).setAttribute("class", "ema")
  //shape.appendChild(leftsquare).style.marginLeft =  '310px';
  for(let i = 0; i<(numberW-1);i+=1)
      let squares = document.createElement("BUTTON");
      let sqtexts = document.createTextNode('Match the Same Color'); 
      squares.appendChild(sqtexts);
      shape.appendChild(squares).setAttribute("class", "ema")
    
  
  for(let i = 0; i<(numberH-1);i+=1)
    let shape = document.createElement('tr');
    container.appendChild(shape);

    let leftsquare = document.createElement("BUTTON");
    let leftsqtext = document.createTextNode('Match the Same Color'); 
    leftsquare.appendChild(leftsqtext);
    shape.appendChild(leftsquare).setAttribute("class", "flp")
    //document.body.appendChild(leftsquare).style.marginLeft =  '310px';
    for(let i = 0; i<(numberW-1);i+=1)
        let squares = document.createElement("BUTTON");
        let sqtexts = document.createTextNode('Match the Same Color'); 
        squares.appendChild(sqtexts);
        shape.appendChild(squares).setAttribute("class", "flp")

.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="memory00.css"></link>
    <title>memory00</title>
</head>
<script src="memory00.js"></script>
    <body>
    <div class='row'>
      <div class='column'>
        <div class='lefthand'>
        <h1 id='number00'>WIDTH:02 ,HIGHT:02</h1>
        <div class='image00'>
            <button onclick='fpW()'>+</button>
            <button onclick='fnW()'>-</button>
            <button onclick='fpH()'>+</button>
            <button onclick='fnH()'>-</button>
        </div>
        <div class='lover'>
            <button onclick='fran()'>Random</button>
            <button onclick="fok()">Start Game</button>
        </div>
        </div>
            <div class = "vertical"></div>
            <div class='htime'>
                <h1 id='score'>SCORE:</h1>
            </div>
            <h1 id='time'>TIME:</h1>
        <div class='submit'>
            <button onclick="fsubmit()">Finish Game</button>
        </div>
        <h1 id='rockcords'>RECORDS</h1>
        
        <!--h1 id='LLTT'>LLTT</h1>
        <h1 id='RRTT'>RRTT</h1>
        <h1 id='MMMM'>MMMM</h1>
        <h1 id='LLBB'>LLBB</h1>
        <h1 id='RRBB'>RRBB</h1-->
      </div>
      <div id='container' class='column'>
      </div>
    </div>
    </body>
</html>

【讨论】：

以上是关于CSS 为啥宽高 auto 不管用的主要内容，如果未能解决你的问题，请参考以下文章

css 中宽高为啥没有继承？

网页中我在div和css都限制了这个图片的宽高为啥不起作用

css 子块级元素会继承父块级元素的宽高吗

css 子块级元素会继承父块级元素的宽高吗？

前端之css（宽高）设置小技巧

css设置元素的宽高为整数，为啥有的浏览器解析出来的宽高是小数