首页 > 代码库 > 第五天-css基础（浮动 网页布局 定位方式，清除定位）

第五天-css基础（浮动 网页布局 定位方式，清除定位）

2024-09-20 18:17:10   219人阅读

基础知识-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基础（浮动 网页布局 定位方式，清除定位）


联系
我们