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()做背景只会使背景透明,不会使子元素透明。

待续

分享给朋友:
您可能感兴趣的文章:
随机阅读: