首页 > 代码库 > 第五天-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:300float: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基础(浮动 网页布局 定位方式,清除定位)