浮动以及定位

369 阅读3分钟

浮动(float)

浮动最典型的应用:可以让掉个块级元素一行内排列显示
网页布局第一准则:多个块级元素纵向排列找准标准流,横行排列找浮动
设置浮动(float)的元素最重要特性:

  1. 脱离标准普通流的控制(浮)移动到指定位置(动)(俗称脱标)
  2. 浮动的盒子不再保留原先的位置
    网页的布局第二准则:先设置盒子大小,之后设置盒子的位置
    浮动的盒子只会影响浮动盒子后面的标准流,不会影响钱的标准流
设置浮动
    <div class="big">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
    //一浮全浮(给一个大盒子里一个盒子,添加浮动,另一个也要添加浮动,否则第二个盒子会占第一个盒子原来的位置,因为浮动就脱离标准流了,不保留原来的位置)
    .box1 {
      float:left;
      //float有两个属性:left和right,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    }
    .box2 {
      float:left;
      }
清除浮动
    选择器{clear:属性值;}
    .box {clear:left}//清除左边的浮动
    //三个属性值:left、right、both--both是指清除两边浮动

清除浮动的方法

  1. 额外标签(隔墙法)在最后一个浮动标签后添加一个空标签,然后引用clear:both
  2. overflow:属性值;hidden、auto或scroll 给父元素添加overflow,一般用hidden
  3. :after伪元素法-添加到浮动的父盒子css里.clearfix:after{comtent:"";display:block;height:0;cear:both;visibility:hidden;}
    4.双流元素清除浮动——给父元素添加 .clearfix:vefore,.clearfix:after{content:" ";display:tavle;} .clearfix:after{clear:both;}

css定位

定位:将盒子定在某一个位置,所以定位也是放置盒子,按照定位的方法移动盒子
定位=定位模式+边偏离

  1. 定位模式 css的position属性设置
    sratic 静态定位 、relative 相对定位 、absolute 绝对定位 、fixed 固定定位
  2. 边偏移:有top、bottom、left、right4个属性
    一、静态定位:static是元素的默认定位方式,无定位的意思

二、相对定位:relative在元素移动时是相对于它原来的位置来说的,原来在标准流的位置继续占有,(不脱标,继续保留原来的位置)

三、绝对定位:absolute
特点:1.如果没有祖先元素和祖先元素没有定位,则以浏览器为准定位(document文档) 2.如果祖先元素有定位(相对,绝对,固定定位),则以最近一级的有定位的祖先元素为参考点移动的位置
3.绝对定位不再占有原先的位置,通常用子绝父相运用来定位盒子

四、固定定位:fixed
特点:1.以浏览器的可视窗口为参照点移动为元素
2.固定定位不在占有原先的位置
固定定位小技巧:固定在版心右侧位置发 让固定定位的盒子(left 50%,再添加固定定位的盒子一个margin-left版心宽度的一半距离的值)

五、粘性定位:stickly可以跟随页面移动,但是设置属性值加像素可以让设置了粘性定位的盒子定在页面的那个像素值

定位叠放次序用z-index控制盒子的先后次序 选择器{z-index:1}数字越大,层级越高
给盒子加绝对或固定定位,浮动,如果不给宽度或者高度默认大小是内容大小