CSS 疑问汇总（1）

CSS 疑问汇总

1.宽高设置的应用区域

html代码:

<div id="box">这是宽高的开始</div>

css代码：

body,div{
margin: 0 0;
padding: 0 0;
}
#box{
width: 300px;
height: 300px;
border:5px solid red;
background: yellow;
padding: 10px;
margin: 10px;
}

效果：

结论：宽高设置的应用区域是在内容区域，不包括内外边距和边框的大小。边框和内外边距的大小会使整个元素所占空间变大。

2.背景透明效果中的opacity和rgba()

opacity

html代码:

<div id="box1">寂静园中闻人语 波澜不惊埋案头</div>

css代码：

body,div{
margin: 0 0;
padding: 0 0;
}
#box1{
width: 150px;
height: 150px;
background: rgb(0,255,0);
opacity:0.3;
color: black;
margin: 20px;
}

效果：

rgba()

css代码：

body,div{
margin: 0 0;
padding: 0 0;
}
#box1{
width: 150px;
height: 150px;
**background: rgba(0,255,0,0.3);**
color: black;
margin: 20px;
}

效果：

结论：opacity使元素背景透明会使得元素的子元素也透明，使用rgba()做背景只会使背景透明，不会使子元素透明。

待续