CSS布局简要

1.左右布局

CSS布局简要_第1张图片

上图就是一个典型的左右布局,左图,右content;

1.用一个

包裹住两个
,两个
在其中实现左右布局,一个放图片,一个放文本;

2.主要用到两个style:

    div{ float: left; }

    .clearfix::after{ content: ''; display: block; clear: both; }    /* 为了消除浮动 */

简历demo(检查元素查看)


2.左中右布局

CSS布局简要_第2张图片

这个勉强也算作左中右布局的一种,两边留白,中间内容居中,主要用到三个style:

        max-width: 940px;

        margin-left: auto;

        margin-right: auto;

max-width是限定了中间内容的最大宽度,由于当前有布局居中需求,所以左右用auto来自适应,如果不需要,可自拟。


3.水平居中

CSS布局简要_第3张图片

直接给

包裹住的内联文件一个style:

    text-align:center;

所以存在一个问题,如果

中包裹的也是
呢?

这种情况,就需要用到 display:inline-block; 将

元素转变为内联元素,再对其进行居中;


4.垂直居中

    通过verticle-align:middle实现CSS垂直居中。

通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的前提是元素的display:inline-block。

    方法有多种,这里取其一;


5.小技巧

    css的布局是否顺利流畅很多时候与选择器class的布局有关;

    遇到问题多往文档流的方面思考。

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