首页 > 代码库 > 第五天-css基础(浮动 网页布局 定位方式,清除定位)
第五天-css基础(浮动 网页布局 定位方式,清除定位)
基础知识-css第五天,今天学习了css主要知识浮动,和定位,都是关于网页布局的。这个2块知识用好了,后期做好看的动画,布局就不成问题了。
浮动left
浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框的边框为止
特点
设置了浮动的元素不占原来的位置(不在标准流)
可以让块级元素在一行显示
浮动可以行内元素为块元素
注意:转化过程尽可能用display转化
属性值
清除浮动
额外标签法
<style> outer{border:1px solid black; width:300} .inner{width:50px; height:50px; background-color:#ff4400; margin-right:20px; float:Left;} .footer{backgrtound:#005fc3;width:200px; height:50px;} .clearfix{clear:both()} </style> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="clearfix"></div> </div>//这是早期普遍使用的方法,但是对于有代码洁癖的人来说,解决的不够完美
注意:clear 属性规定元素的哪一侧不允许其他浮动元素。(属性:left 左边不出现浮动 \ right 在右侧不出现浮动元素 \ both 左右俩侧不出现浮动 \ none 默认值可以出现浮动 \ inherit 继承父元素clear:inherit)
使用:after为元素
<style> outer{border:1px solid black; width:300} .inner{width:50px; height:50px; background-color:#ff4400; margin-right:20px; float:Left;} .footer{backgrtound:#005fc3;width:200px; height:50px;} .clearfix:after{ content:‘‘; display:block; clear:both;}//最简单的方法 .clearfix(zoom:1;)//兼容 ie </style> <div class="outer clearfix"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div>
给父元素定高
<style> outer{border:1px solid black; width:300; height:500px;} .inner{width:50px; height:50px; background-color:#ff4400; margin-right:20px; float:Left;} .footer{backgrtound:#005fc3;width:200px; height:50px;} </style> <div class="outer "> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div>
利用overflow:hidden属性
<style> outer{border:1px solid black; width:300; overflow:hidden; zoom:1;//兼容IE} .inner{width:50px; height:50px; background-color:#ff4400; margin-right:20px; float:Left;} .footer{backgrtound:#005fc3;width:200px; height:50px;} </style> <div class="outer "> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div>
父级元素浮动
当父元素浮动的时候,无需为子元素的浮动或是清楚浮动,布局经常用到
<style> outer{border:1px solid black; width:300;float:left;} .inner{width:50px; height:50px; background-color:#ff4400; margin-right:20px; float:Left;} .footer{backgrtound:#005fc3;width:200px; height:50px;} .clearfix:after{content:‘‘; display:block; clear:both;} .clearfix{ zoom:1 } </style> <div class="outer "> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="clearfix"></div>
overflow的使用
如果内容溢出一个元素框,会发生的事
overflow设置滚动条
显示滚动条
<div style="width:260px; height:120px; overflow:scroll;"></div>
上下,左右滚动条
<div style="width:260px; height:120px; overflow-y:scrll;"></div> overflow-x(左右滚动条)
css定位oosition
position:absolute 绝对定位
特点:1、当给一个单独的元素设置绝对定位,以浏览器左上角为基准设置定位的
2、当盒子发生嵌套关系的时候,如果父盒子没有设置定位,子盒子设置定位父盒子 左上角为基准设置定位。
3、当盒子发生嵌套关系的时候,如果盒子设置定位,子盒子设置定位父盒子左上角为基准设置定位。
4、给盒子设置绝对定位,该盒子不占位置
5、给行内元素设置绝对定位后,改元素转化为了行内块元素
注意:元素设置了绝对定位后,通过具体的方位名称可以随便设置元素的位置
position:relative 相对定位
特点:1、元素设置了相对定位后占原来的位置
2、设置相对定位以自己的位置为参照设置位置
3、相对定位不能进行元素的模式转换
4、子绝父相(子元素设置绝对定位,父元素设置相对定位)
position:fixed 固定定位
特点:1、固定定位不占位置
2、将行内元素转化为行内块元素
第五天-css基础(浮动 网页布局 定位方式,清除定位)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。