html - body中的css为何有些没有作用？
本文介绍了html - body中的css为何有些没有作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
请看
<html>
<meta charset="UTF-8">
<head>
<style>
body{
display:block;
margin:0 auto;
font-size:40px;
width:900px;
height:50px;
border:solid 4px green;
}
#d2{
width:100%;
height:auto;
}
#d21,#d22,#d23{
width:33%;
float:left;
border:1px solid red;
}
</style>
</head>
<body>
<p>hello</p>
<div id="d2">
<div id="d21">
<select id="id_select" name="s1">
<option>==> 请选择 <==</option>
</select>
</div>
<div id="d22">
<input type="button" value="开始" onclick="start()">
</div>
<div id="d23">
<input type="button" value="结束" onclick="stop()">
</div>
</div>
</body>
</html>
显示结果如下
body中的font-size:40px;对p里面的字体发生了作用。
为何body中的
display:block;
margin:0 auto;不对select input标签起作用？
请看下面
<html>
<meta charset="UTF-8">
<head>
<style>
body{
display:block;
margin:0 auto;
font-size:40px;
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{
display:block;
margin:0 auto;
}
</style>
</head>
<body>
<p>hello</p>
<div id="d2">
<div id="d21">
<select id="id_select" name="s1">
<option>==> 请选择 <==</option>
</select>
</div>
<div id="d22">
<input type="button" value="开始" onclick="start()">
</div>
<div id="d23">
<input type="button" value="结束" onclick="stop()">
</div>
</div>
</body>
</html>显示结果
body中的
display:block;
margin:0 auto;不对select input标签起作用，必须写
select,input{
display:block;
margin:0 auto;
}
才有居中的效果。body中的css为何有些有作用，有些没有作用？
解决方案
css 有继承 这一概念（你可以百度一下css继承）：有些属性可能会被子标签继承，如font-size color;有些属性则不会被继承，如border background margin padding；规律肯定是有的，比如结构样式 width,height,display不会被继承。会被继承的样式也只是少数。
这篇关于html - body中的css为何有些没有作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
