CSS 疑问汇总(1)
来源:互联网 发布:淘宝卖家商品vip 编辑:程序博客网 时间:2024/05/02 22:00
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()做背景只会使背景透明,不会使子元素透明。
待续
- CSS 疑问汇总(1)
- 疑问汇总
- 疑问的汇总
- socket相关疑问汇总!
- Android 疑问汇总
- spring 疑问汇总
- python疑问(1)
- HTML/CSS学习汇总(1)
- Css中的一些疑问
- 现阶段的css疑问解答
- CSS汇总
- CSS汇总
- [使用疑问] 芒果使用问题汇总
- 技术 优化 奇思异想 灵感 疑问 探索汇总
- iOS 中关于Copy的疑问汇总
- java编程思想--学习疑问汇总
- Mysql 常见报错和疑问汇总
- cloudsim相关疑问与解答(1)
- Java_基础—模拟斗地主洗牌和发牌并对牌进行排序
- 大数据量下高并发同步的讲解
- Android 高级混淆和代码保护技术
- IQKeyboardManager 的使用注意
- 让JavaEE项目支持Https协议
- CSS 疑问汇总(1)
- 基于Dragonboard 410c的燃气烟雾检测器(二)
- 【mysql 数据迁移】 mysql 把数据库从一个服务器复制到另一个服务器
- Python 3.x 学习:Python 简介、安装(一)
- 不同位置动态点击图标放大跳转至新Activity
- 本人的博客开通了
- 什么是token
- spark mllib源码分析之二分类逻辑回归evaluation
- solr6.6.0部署到tomcat