内容概要
- 浮动
- 定位
- 两者是否脱离文档流
- 其他样式补充
内容详细
浮动
# ps:html代码时没有缩进一说的 全部写在一行也可以
"""浮动主要就是用于页面布局的!!!"""
# 浮动带来的负面影响
"""会造成父标签塌陷!!!"""
解决浮动的负面影响
1.再写一个div撑场面(不可取)
2.关键字clear(可以使用)
3.通用解决策略(推荐使用):只要父标签塌陷就使用
.clearfix:after {
content: '';
clear: both;
display: block;
}
# 谁塌陷就给谁加class属性
# 浏览器默认都是文本优先展示
定位
1.静态定位 static
所有的标签默认都是静态定位即不能改变位置
2.相对定位 relative
相对标签原来的位置做定位
3.绝对定位 absolute
相对已经定位过的父标签做定位(没有则参考body标签)
eg:小米官网导航条内购物车
4.固定定位 fixed
相对浏览器窗口做定位
eg:小米官网右边回到顶部
如何使用css完成定位
定位关键字position
位置关键字left、right、top、bottom
是否脱离文档流
# 标签位置改变之后 原来的位置是否会空出来
如果空出来了被其他标签自动占有 那么表示脱离否则不脱离
浮动、定位
脱离文档流
浮动、绝对定位、固定定位
不脱离文档流
相对定位
溢出属性
# 圆形头像
#d1 {
width: 200px;
height: 200px;
border: 3px solid darkgray;
border-radius: 50%;
overflow: hidden;
}
#d1 img {
/*max-width: 100%;*/
width: 100%;
}
z-index属性
# 浏览器平面不是一个二维坐标系而是一个三维坐标系
eg:百度登录或者退出界面>>>:三明治结构(模态框)
透明度
rgba(124,124,124,0.5)
只影响颜色
opacity:0.5
影响颜色和字体
标签：浮动,定位,标签,脱离,透明度,文档,124,溢出 来源： https://www.cnblogs.com/ydy001/p/15894082.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。