元素的margin和padding值什么时候生效
元素可以分为块级元素,行内元素以及行内块级元素。
- 行内元素的margin或者padding只有
margin-left
和margin-right
以及padding-left
和padding-right
有效果,margin-top、margin-bottom、padding-top、padding-bottom这四个属性都可以对行内元素(如span)设置,但是在页面中并不会生效。 - 块级元素以及行内块级元素的margin和padding都是正常生效的。
在一个页面中HTML才是统治者
当页面中的一个元素div不对其设置宽度和高度的时候,则HTML、body、div,三者的宽度都是100%
,但是高度都是为0。
于是可以打出以下结论
块级元素当没有主动为其设置宽度和高度,浏览器会自动为其分配可使用的最大宽度(比如全屏宽度),但是不负责分配高度,
块级元素的高度是由子元素堆砌撑起来的。
那么,html和body标签的高度也都是由子级元素堆砌撑起来的。
再看一个小栗子先上一点代码:
<style>
*{margin: 0;padding: 0}
.div1{ height: 100px;background: yellow}
.div1 .div2{height: 50%;background: cadetblue}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
此时我们可以看到div2的高度为div1高度的一半
当我们不对div1设置高度的时候,页面中什么都没有,
我们可以得出以下结论:
元素高度百分比需要向上遍历父标签要找到一个
定值高度
才能起作用,如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用。
再来一个小栗子:
<style>
* {
margin: 0;
padding: 0;
}
html {
background: rgb(151, 136, 136)
}
body {
background: rgb(89, 23, 156)
}
.div1 {
height: 100px;
background: yellow;
width: 100px
}
.div1 .div2 {
height: 50%;
background: cadetblue;
width: 100px
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
效果图如下:
当html标签无背景样式时,body的背景色其实不是body标签的背景色,而是浏览器的。
一旦html标签含有背景色,则body的背景色变成了正常的body标签自己的背景色,而此时的html标签最顶级,背景色被浏览器获取,成为浏览器的背景色。