CSS布局

前言

以下将针对CSS常见的居中及布局问题进行讲解,主要以float及对position的两种方法进行讲解。

左右、左中右布局

  1. float
    利用float: left, float:right设置左右布局,然后通过clearfix清除浮动。
/* HTML代码 */
  
/* CSS 代码 */ .left { border: 1px solid lightcoral; background: lightcoral; float: left; height: 100px; width: 100px; } .right { border: 1px solid palegreen; background: palegreen; float: left; height: 100px; width: 100px; } .middle{ border: 1px solid orange; background: orange; float: left; height: 100px; width: 100px; }
  1. position
    设置父元素位置为position: relative, 需要左中右布局的元素设置position:absolute,以及top/left或right属性。
    代码如下:
/* HTML 代码 */
  
/* CSS 代码 */ .position_parent { position: relative; } .pos_left { border: 1px solid lightcoral; background: lightcoral; height: 100px; width: 100px; position: absolute; top: 200px; left: 0px; } .pos_right { border: 1px solid rgb(103, 240, 126); background: rgb(103, 240, 126); height: 100px; width: 100px; position: absolute; top: 200px; left: 204px; } .pos_middle { border: 1px solid orange; background: orange; height: 100px; width: 100px; position: absolute; top: 200px; left: 102px; }

水平、垂直居中

  1. 对于行内元素的水平居中,只设置inline元素display: inline-block,然后设置其父级元素(父级元素需要为text-align: center,即可实现元素的水平居中。

要设置垂直居中,一般可设置vertical-align: top

  1. 对于块级元素的水平居中,只需将其margin-left, margin-right设置为auto; 多个块级元素可以将其设置为inline-block,然后套用方法1

  2. 垂直居中
    --绝对定位时可以设置top, left各为50%,结合margin负实现元素的垂直居中或者top, bottom, left, right为0,margin auto。

--父元素高度确定的单行文本,可以设置height=line-height实现

--对于inline-block元素,有时可设置vertical-align: middle使元素居中

*小技巧:

  1. 利用CSS3的属性,如transform实现居中
.container{
    position:relative;
}
 
.center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

  1. 利用table-cell
display:table-cell;
vertical-align:middle;
text-align:center;

  1. Flex布局(针对新浏览器等)
.center{
    display:flex;/*Flex布局*/
    display: -webkit-flex; /* Safari */
    align-items:center;/*指定垂直居中*/
}

4. :before 

其他可参考[知乎](https://www.zhihu.com/question/20543196)




你可能感兴趣的:(CSS布局)