作者:赵博钧石博 | 来源:互联网 | 2023-07-06 17:08
CSS 疑问汇总1.宽高设置的应用区域
html代码:
这是宽高的开始
css代码:
body,div{
margin: 0 0;
padding: 0 0;
}
#box{
width: 300px;
height: 300px;
border:5px solid red;
background: yellow;
padding: 10px;
margin: 10px;
}
效果:
![图片效果](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNzE5MTAyOTAxNjg1P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdlpYaDBaVzVrZDI5eWJHUT0vZm9udC81YTZMNUwyVC9mb250c2l6ZS80MDAvZmlsbC9JMEpCUWtGQ01BPT0vZGlzc29sdmUvNzAvZ3Jhdml0eS9Tb3V0aEVhc3Q=)
结论:宽高设置的应用区域是在内容区域,不包括内外边距和边框的大小。边框和内外边距的大小会使整个元素所占空间变大。
2.背景透明效果中的opacity和rgba()
opacity
html代码:
寂静园中闻人语 波澜不惊埋案头
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;
}
效果:
![这里写图片描述](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNzE5MTA0OTQxODE2P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdlpYaDBaVzVrZDI5eWJHUT0vZm9udC81YTZMNUwyVC9mb250c2l6ZS80MDAvZmlsbC9JMEpCUWtGQ01BPT0vZGlzc29sdmUvNzAvZ3Jhdml0eS9Tb3V0aEVhc3Q=)
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;
}
效果:
![这里写图片描述](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwNzE5MTA0NzEzOTYyP3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdlpYaDBaVzVrZDI5eWJHUT0vZm9udC81YTZMNUwyVC9mb250c2l6ZS80MDAvZmlsbC9JMEpCUWtGQ01BPT0vZGlzc29sdmUvNzAvZ3Jhdml0eS9Tb3V0aEVhc3Q=)
结论:opacity使元素背景透明会使得元素的子元素也透明,使用rgba()做背景只会使背景透明,不会使子元素透明。
待续