CSS布局总结

一,左右布局

    1.浮动

给子元素设置浮动,并在父元素上清除浮动,便可将原本每个子元素占一行的垂直文档流变成水平文档流。然后给想要显示在左边和右边的分别加div,左边的向左浮动,右边的向右浮动即可。

    ->父元素清除浮动方式:

    给父元素添加选择器,命名为clearfix,并加上:

.clearfix::after{

content: '';

display: block;

clear: both;

}

    2.宽度不够自动换行

通常在

中,我们要使
分别两行显示,但目前各子元素垂直显示,那么:

        A.利用浮动使子元素在同一行;

        B.然后利用宽度不够会自动换行的原理。给宽度设置一个百分比,如50%,也可根据情况给

分别设置百分比,百分比越大,则在总宽度中占的比例越大即越宽,如:

.userCard dl dt{

width: 30%;

}

.userCard dl dd{

width: 70%;

}

    3.行内块级元素

我们都知道块级元素是垂直方向的文档流,而行内元素是水平方向的文档流,因此我们可以结合他们的特性,成为行内块级元素后,既能保留块级元素可以设置宽高的特性,又可以使元素在同一排显示(即不换行):

display: inline-block;

    4.绝对定位

绝对定位后,元素能够通过设置left和top值自由移动,当然就能实现左右布局。(绝对定位后元素会脱离文档流)

    5.table

中,代表行,代表行,
代表表头,代表表里的数据,填写数据后,能够自然形成左右布局。

二,左中右布局

左中右布局的方式与左右布局类似,如:

    1.浮动

给左边和右边的元素分别设置向左和向右浮动,中间的元素自适应,父元素清除浮动后,子元素则可以在一行显示,然后给其添加上margin。

    2.行内块级元素

给三个元素变为行内块级元素,则可以在一行显示,然后设置 margin,则可成为左中右结构的布局。

    3.绝对定位

三个子元素相对于父元素绝对定位,通过left和top自由移动位置即可。

    4.table

代表表头,代表表里的数据,将表头做成三列,即可成为左中右布局。

三,水平居中

    1.margin:0 auto;

使用该方法的前提是,该元素有宽度;

    2.text-align: center;

该方法适用于文本居中,同时对行内元素也有效,对块级元素无效。但我们可以给子元素一个display:inline-block;让它变成行内块元素,然后再给父元素设置text-align: center;即可。

    3.绝对定位

在子元素是绝对定位的情况下,给子元素设置:

left: 50%;

transform: translate(-50%, 0);

    4.display: flex;

分别给父子元素设置:

.parent {

    display: flex;

    justify-content: center;

}

.child {

    display: inline;

    margin: 0 auto;

}

四,垂直居中

    1.设置行高line-height与高度height相同时,可以实现垂直居中;(适用于文本)

    2.将上下padding设置相等,但需要提前计算总体高度。

    3.transform: translate(0, -50%);

将子元素绝对定位,然后:

.child {

    position: absolute;

    top: 50%;

    transform: translate(0, -50%);

}

    4.子元素设置绝对定位后,top和bottom设为一样,margin: auto;(最好设置一个宽高)

    5.给图片垂直居中:

.box{

    width: 300px;

    height: 300px;

    background: #ddd;

    line-height: 300px;

}

.box img {

    width: 200px;

    height: 200px;

    vertical-align: middle;

}

要点,给父元素设置line-height与height值相同,并给标签加上vertical-align: middle;

五,其他小技巧

1.没有用padding和magin,也没有默认宽度的情况下,元素距离上边和下边不一样宽,可用以下代码纠正:

vertical-align: top;

    2.

  • 中套了的话,那么
  • 需要把包起来,但是会出现
  • 高的情况,此时需要在上加一个:

    display: block;

        3.要使

  • 中处于上下居中,如果发现没有,则可能是下面多了下划线的3px,那么在上面加上一个隐形的border:3px solid transparent即可,当然也有其他情况,总之要居中。

    4.背景图片:

    A.使背景图片居中:

    background-position: center center;

    第一个center是x轴,第二个是y轴;

    B.使图片在当前元素内按比例显示完整,自适应:

    background-size: cover;

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