美文网首页
position,float,display布局方式规整

position,float,display布局方式规整

作者: 一个写前端的姑娘 | 来源:发表于2018-11-07 16:04 被阅读0次

    前端攻城狮在拿到设计图,最开始做的事情是什么?布局?yup

    定位:position

    1. position值
    • static:默认方式,作为文档流的一部分,有行内元素(不会换行)和块级元素(独占一行)
    • relative:相对位置,想对于此元素应该在的位置进行偏移,并且原来的位置也会被占据。发生偏移时,可能会覆盖其他元素(这个特性让我想起了z-index),当有元素需要在后来的元素之上时,position:relative就很管用了
    • absolute:绝对位置,脱离文档流,在文档流之上,元素不再占有文档流位置,想对于最近的position不为static的元素进行偏移(从此元素向上级找到的第一个position不为static的元素)
    • fixed:固定位置,想对于视图区域进行固定
    • sticky:css3新属性,这个属性,个人认为是relative属性相似(因为对此位置值不太,本人也很少使用...)
    1. 讲到了position属性就必定会想到偏移量属性
    • left
    • right
    • top
    • bottom
      (注:这四个属性在position:static时,这四个属性不起作用。偏移量使用px的话,不同的web端会有兼容性问题,所有推荐使用rem或者百分比(百分比基准是父级的宽度))

    浮动 float

    1. float就是脱离文档流的一种布局方式,但是它占文档位置。一般会使用在图片上,让文字围绕此图片。浮动元素会生成一个块级框,而不论它本身是何种元素(使用float时,最好定义此元素的宽度和高度)。假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
    2. 敲黑板,画重点:float:left|rightposition:absolute区别
      float:left|right属性与position:absolute属性都具有包裹性,两者都会使元素脱离文档流,但是,与absolute不同的是:float 的元素还会在文档流上占据一个位置。position:absolute的元素是根据最近的非static的父元素定位,如果没有,则根据最初的包含块定义(一般是body),关于float,也会脱离文档流,会被放置在其容器的左边或右边。
    3. 讲到元素浮动,就必须牵扯到清除浮动
    • 当元素height:auto时,且容器内容中有浮动,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢到容器外部而影响整体布局;
    // html代码
    <div class="wrap">
      <div class="content">我是浮动元素</div>
    </div>
    // css代码
    .wrap {
      font-size: 12px;
      border: 1px solid gray;
      color: #fff;
    }
    .content {
      float: left;
      padding: 15px;
      background: blue;
    }
    
    float布局
    • 清除浮动
      (1)使用带clear属性的空元素:在浮动元素后使用一个空元素如<div class="clear"></div>,并且.clear{clear:both;}属性即可清理浮动
    // html
    <div class="wrap">
      <div class="content">我是浮动元素</div>
      <div class="clear"></div>
    </div>
    // css
    .clear {
      clear: both;
    }
    
    clear:both清除浮动

    (2)使用CSS的overflow属性:给浮动元素的容器添加 overflow:hiddenoverflow:auto可以清除浮动,

    .wrap {
      font-size: 12px;
      border: 1px solid gray;
      color: #fff;
      overflow: hidden;  // 添加
    }
    

    (3)使用CSS的:after伪元素

    .wrap:after{
      content: "020"; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;  
    }
    

    (4)为容器设置高度height

    布局display

    1. block:块级元素,占领一整行,可以设置width、height、margin、padding
    2. inline:行内元素,不占领一行,不可以设置width、height、只能设置左右的margin和padding,上下的margin和padding是不可以设置的
    3. inline-block:像inline一样放置(比如和它相邻的元素处在同一行),像block一样表现,可以设置width和height;设置inline-block之后,会有空白,这个时候是因为空白符才显示的间隙,这个时候设置font-size:0就可以完美解决啦
    4. none:不显示
    5. inherit:继承,从父元素继承布局
    6. flex:flex布局,敲黑板,画重点。你们认真看看 阮一峰老师的flex布局
    7. table: 表格布局,类似于<table>,表格前后有换行
    8. inline-table:表格布局,类似于<table>,表格前后没有换行
    9. list-item:列表元素,类似于<li>

    经常见到的几种布局

    1. 元素水平居中
    • 行内元素水平居中:text-align:center
    • 块级元素水平居中:margin: 0 auto
    1. 元素垂直居中
    • 单行文本垂直居中:line-height
    • 文字和图片在一行中垂直居中:平时遇到文字和图片卸载一行,图片和文字不对齐,什么鬼,用这个属性就可以解决了vertical-align:middle
    • 使用flex布局实现垂直居中
    1. 水平垂直居中
    • 利用绝对定位元素的盒模型特性,在偏移属性为确定值的基础上,设置margin:auto
    // html
    <div class="wrap">
        <div class="inner"></div>
    </div>
    // css
    .wrap {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .inner {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: auto;
    }
    
    absolute+margin
    • flex实现元素的水平垂直居中
      设置容器属性justify-content:center;align-items:center
    • table-cell实现元素水平垂直居中
    .wrap {
      display: table-cell; /*此元素会作为一个表格单元格显示*/
      vertical-align: middle;  // 垂直居中
      text-align: center; // 水平居中
      background-color: red;
      width: 200px;
      height: 200px;
      border: 1px solid yellow;
    }
    .inner {
      display: inline-block; /*为了防止块级元素的宽度默认等于其父元素*/
      background-color: blue;
      color: #fff;
    }
    
    1. 两栏布局
    • float + margin
    // html
    <div class="left">固定宽度</div>
    <div class="right">自适应</div>
    // css
    .left{
      width: 200px;
      height: 200px;
      background: red;
      float: left;
    }
    .right{
      margin-left: 210px;
      height: 200px;
      background: yellow;
    }
    
    1. 三栏布局
    • float + margin
    // html
    <div class="wrap">
          <div class="float-left"></div>
          <div class="float-right"></div>
          <div class="center"></div>
    </div>
    // css
    .float-left {
        width: 200px;
        float: left;
        background-color: yellow;
        height: 300px;
      }
      .float-right {
        width: 200px;
        float: right;
        background-color: red;
        height: 300px;
      }
      .center {
        margin: 0 200px;
        background-color: blue;
        height: 300px;
      }
    
    • flex布局

    感谢您的view,留个赞再走呗

    • 感谢浏览姑娘的文章,来自一个写前端的姑娘!
    有错误讲解的地方,欢迎指正也!

    相关文章

      网友评论

          本文标题:position,float,display布局方式规整

          本文链接:https://www.haomeiwen.com/subject/avqvxqtx.html