html - 为什么css中的 `*{display:block; margin:0 auto; }`显示网页上所有的css代码?

标签 html css

<style>
*{
    display:block; 
    margin:0 auto;
}

#在这里显示所有的css和html代码是没有用的。

为什么 *{display:block; margin :0 自动; 在 css 中显示网页上的所有 css 代码?
如果*{显示: block ; margin :0 自动; 在html中被删除,现在没有这样的错误。
结果是什么效果?

enter image description here

请尝试整个 html 文件。

<html>
<meta charset="UTF-8">
<head>
<style>
*{
    display:block; 
    margin:0 auto;
}
body{    

    width:900px;
    height:50px;
    border:solid 4px green;  
}

#d2{    
    width:100%;
    height:auto;
}
#d21,#d22,#d23{
    width:33%;
    float:left;
    border:1px solid red;
}
select,input{
    width:150px;
    height:auto;
}    
</style>
</head>
<body>
<div id="d2">
    <div id="d21">
        <select id="id_select"  name="s1">
            <option>==> please select <==</option>
        </select>
    </div>
    <div id="d22">
        <input  type="button" value="start" onclick="start()">
    </div>
    <div id="d23">
        <input   type="button" value="stop" onclick="stop()">
   </div>
</div>
</body>
</html>

最佳答案

<style>...</style>也是 HTML 元素。所以通过使用 * CSS 中的选择器你也选择了<style>元素并应用适当的样式。 <style>的默认样式是 display:none所以通过申请 display:block你实际上让它可见。

关于html - 为什么css中的 `*{display:block; margin:0 auto; }`显示网页上所有的css代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40055149/

相关文章:

html - 如何将内容包裹在div中?

html - WCF 服务接受后编码的多部分/表单数据

css - 如何水平对齐裁剪元素?

html - Firefox 缩放自己的网站

javascript - 滚动到页面底部,呈现新容器后

jquery - css 中的缩放效果在 firefox 中无法正常工作

html - 当浏览器达到一定宽度时背景图像消失的问题

javascript - HTML - 更改选择标签的最大行数

html - jQuery Mobile 输入宽度

javascript - 在 HTML/JavaScript 文件中,如何选择要包含的数据文件?