it_is_a_literature it_is_a_literature - 1 month ago 10
CSS Question

Why `*{display:block; margin:0 auto; }` in css to display all the css code on the web?

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



#it is no use to show all the css and html code here.

Why
*{display:block; margin:0 auto; }
in css to display all the css code on the web?

If
*{display:block; margin:0 auto; }
was deleted on the html,no such error now.

What result in the effect´╝č

enter image description here

Please try the whole html file.

<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>

Answer

The * CSS selector selects all elements. This means that it includes the <style> element, as well as the <head> element, which the style tag lives it. Both of these are hidden by default by your browser.

By adding display: block, you are overriding the default display: none for all element, as shown in Chrome Developer Tools screenshot:

Chrome Developer Tools Screenshot

The direct equivalent of this would be to add this to your CSS:

head, style {
  display: block;
}

Workaround

In order to force all elements to be displayed block, and centered, you may want to select just the ones that live inside of the <body> tag like so:

body * {
  display: block;
  margin: 0 auto;
}