欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

网页设计代码总结-----布局(1) - monkeyleo

程序员文章站 2022-03-25 14:14:11
...
  长时间未曾动笔至今已忘了如何组织语言,故注册此博客园帐号。一来,总结自己平时编程中遇到的“坑”;二来,记录下自己的编程生涯,以待来日回顾。本篇总结的来源是近期自己所负责的一个云平台项目。这是第一篇,关于布局。

  传统的布局方式一般都是盒模型,并依赖于display、position或者float。然而position具有不能自适应内部高度的缺点,需要固定的容器高度;float存在父元素塌陷,需要用清除浮动解决;同时,对于某些布局方式也较为麻烦,例如垂直居中。如果使用传统的盒模型方法的话,其代码一般为: 

 .mid{position:absolute;left:50%;top:50%;margin-top:-1/2*Height;margin-left:-1/2*Width;}

  本种方法不易于维护,同时需要固定父元素高度,所以,为了解决这个问题,引入了flexbox(弹性布局)。在 .mid 的父元素上使用flex定位,可以轻松解决这个问题。当然,为了保证浏览器兼容性,需要加上浏览器私有前缀。

1 .wrap{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}

  不仅如此,在写顶部的banner时候可以令父元素如下:

justify-content:space-between;

让网站logo,选项框以及登陆按钮布局较为美观。不过在使用了flex布局后,float,clear,vertical-align属性都将失效。

  其他一些flex属性:1、flex-direction:定义项目的排列方向。2、flex-wrap:定义主轴上的元素是否可以换行。3、align-items:定义项目在垂直于主轴的方向上如何对齐。4、align-content:定义多根主轴的对齐。以上属性都是写在父元素内的,而子元素中也有一些flex属性:

  1、order:定义项目的排列顺序,越小越靠前。2、flex-grow:定义项目的放大系数,如果为0,则不放大。3、flex-shrink:与flex-grow相反。4、flex-basis:设置项目在主轴上占据的空间。5、align-self:为特定子元素提供定制的对齐,将会覆盖父元素的align-items属性。

  其他一些布局心得:

    1、不要随意使用float以及position布局,避免引起高度塌陷。

    2、书写样式时最好使用类不要使用ID,以便于代码的重用。

    3、布局前先确定好整体的页面结构以及使用的布局方法,避免中后期发现布局方法不合适,导致整个项目推倒重来。

    4、将footer固定到页面底部:不管是body内元素堆叠高度和是小于浏览器高度还是高于浏览器高度,只需要将wrap内的其他元素与footer元素放在两个不同的div内,第一个div的高度设为100%,margin-bottom设为footer的高度即可。

  

DOCTYPE html>
html>
  head>
    meta charset="utf-8">
    title>flex布局title>
   style>
        *{margin: 0;padding: 0;}
       html,body{width: 100%;height: 100%;}
      .main,.wrap{width: 100%;height: 100%;}
      .main{margin-bottom: -100px;}
      .footer{width: 100%;height: 100px;background-color: #000;}
   style> 
  head>
  link rel="stylesheet" href="./layout.css">
  body>
    div class="wrap">
      div class="main">
        div class="header">div>
        div class="content">div>
      div>
      div class="footer">div>
    div>
  body>
html>

  粗浅之言,请勿见笑。