css布局笔记(一)

布局方式

  • 一列布局
    通常固定宽高,用margin:0 auto;居中显示
  • 两列布局
    说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。设置左左浮动,或设置左右浮动(这是需要确定父级元素的宽度)。如何父级元素没有设置高度,则需要设置overflow:hidden来清除浮动产生的影响 。对于自己相邻元素清除浮动产生的影响用:clear:both;。
  • 三列布局
    两列定宽中间自适应:首先设置父级元素的宽度,可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动,设置margin,调整间距。同样注意清除浮动的影响!或者为父级元素设置relative属性,再为子元素设置absolute属性,再分别定位,调间距。
  • 混合布局
    在一列布局的基础上,保留top和foot部分,将中间的main部分改造成两列或三列布局,小的模块可以再逐级同理划分。

对齐方式

  • 水平居中

    • 行内元素的水平居中
      如果被设置元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内水平居中,将子元素的display设置为inline-block,是子元素变成行内元素
    • 块状元素的水平居中(定宽)
      当被设置为定宽块级元素时,设置左右margin值为auto来实现居中。
    • 块级元素的水平居中(不定宽)
      可以直接给不定宽的块级元素设置text-align:center来实现,也可以给父元素设置text-align:center来实现居中效果。
      当不定宽块级元素的宽度不要占一行时,可以设置display为inlin或inline-block来实现。
  • 垂直居中
    父元素是盒子容器且高度已设定

    • 子元素是行内元素,高度由其内容撑开
      设定父元素的line-height为其高度来设置垂直居中
    • 子元素是块级元素但是子元素高度没有设定
      无法用margin,padding来设置,通过给父元素设置display:table-cell;verticle-align:middle来解决。
    • 子元素是块级元素且高度已设定
      计算子元素的margin-top或margin-bottom,计算方法为(父元素高度-子元素高度)/2。
  • 水平垂直居中

    • 水平对齐+行高
      text-align+line-height实现单行文本水平垂直居中
    • 水平+垂直对齐
      • text-align+verticle-align
        在父元素设置text-align和verticle-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素。
      • 若子元素是图像,可不使用table-cell,而是其用行高代替高度,且字体大小设置为0。子元素本设置为verticle-align:middle。
        <style>
          .parent{
           text-align: center;
          line-height: 100px;
          font-size: 0;
          }
          .child{
          vertical-align: middle;
          }
        </style>
        
        <div class="parent" style="background-color: gray; width:200px; ">
          <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
        </div>  
        
  • 相对+绝对定位
    使用absolute,利用绝对定位元素的盒模型特性,在偏移值为确定值的基础上,设置margin:auto

    <style>
    .parent{
      position: relative;
     }
    .child{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 50px;
      width: 80px;
      margin: auto;
     }
     </style>
     
     <div class="parent" style="background-color: lightgray; width:200px; height:100px; ">
     <div class="child" style="background-color: lightblue;">测试文字</div>
     </div>
    

    参考:http://www.cnblogs.com/chaixiaozhi/p/8486647.html

posted on 2018-07-11 21:00  breathee  阅读(150)  评论(0编辑  收藏  举报

导航