css布局【实用】

fox_soyoung 发布于2019-08-02 14:27 / 1316人阅读

摘要：布局只截图了一半左右布局注释以下全是重点清除浮动重点重点重点左中右布局两版固定宽度中间自适应全部自适应宽度可以都写成数值自行调整重点重点如果均分这个可以改为重点重点如果均分这个可以改为水平居中重点以下效果都一样以下效果都一样以下

布局

</>复制代码

</>复制代码 
.banner{ 
    width: 800px;
    height: 200px;
    margin:0 auto;
    background: #0c5460;
}
.box{ width: 800px; margin: 0 auto}
.box .xxx{
    display:flex;
    flex-wrap:wrap;
    margin: 0 -3px;
}
.xxx div{
    width: calc( 25% - 6px );
    height: 80px;
    background: #b1dfbb;
    margin: 3px;
}

banner 只截图了一半

</>复制代码 
左右布局

</>复制代码 
/* 注释以下全是重点  */
.bigBox::after{
    /* 清除浮动【重点】 */
    content:"";
    display: block;
    clear:both;
}
.box1{
    width: 50%;
    background: palegreen;
    /* 【重点】 */
    float: left;
}
.box2{
    width: 50%;
    background: paleturquoise;
    /* 【重点】 */
    float: left;
}

</>复制代码 
    box1
    box2

</>复制代码 
左中右布局【 flex 】

两版固定宽度中间自适应全部自适应宽度可以都写成 flex: 1; （数值自行调整）

</>复制代码 
.box{
    height:50px;
    /* 【重点】 */
    display: flex
}
.left{
    background-color: #b1dfbb;
    /* 【重点】 */
    width: 300px; /* 如果均分 这个可以改为 flex: 1; */
}
.center{
    background-color: yellowgreen;
    /* 【重点】 */
    flex: 1;
}
.right{
    background-color: #b1dfbb;
    /* 【重点】 */
    width: 300px; /* 如果均分 这个可以改为 flex: 1; */
}

</>复制代码 
    left
    center
    right

</>复制代码 
水平居中

</>复制代码 
.box{
    width: 200px;
    height: 200px;
    background: aquamarine;
    /* 【重点】 */
    margin: 0 auto;
}

</>复制代码 
box

以下效果都一样以下效果都一样以下效果都一样以下效果都一样以下效果都一样以下效果都一样

</>复制代码 
水平、垂直居中【 translate 】

</>复制代码 
.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重点】 */
    position: relative;
}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
    /* 【重点】 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

</>复制代码 
    123

</>复制代码 
水平、垂直居中【 减 margin】

</>复制代码 
*{
    padding:0;
    margin: 0;
}
.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重点】 */
    position: relative;
}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
    /* 【重点】 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -50px;
}

</>复制代码 
    123

</>复制代码 
水平、垂直居中【 flexBox 】

</>复制代码 
.box{
    width: 200px;
    height: 200px;
    background: palevioletred;
    /* 【重点】 */
    display: flex;
    justify-content: center;
    align-items:center;
}
.box span{
    background: aquamarine;
    width: 100px;
    height: 150px;
}

</>复制代码 
    123

GPU云服务器云服务器 css布局 css布局教程学习css布局漂亮实用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53817.html

利用HTML和CSS实现常见的布局

摘要：中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。我称之为果冻依赖型元素，又称之为依赖型元素，也就是说只有一个元素属于或是也可以理解为水平水平，其身上的属性才会起作用。单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，...

daydream 2019-08-28 18:21 评论0 收藏0
利用HTML和CSS实现常见的布局

摘要：中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。我称之为果冻依赖型元素，又称之为依赖型元素，也就是说只有一个元素属于或是也可以理解为水平水平，其身上的属性才会起作用。单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，...

bbbbbb 2019-08-01 14:53 评论0 收藏0
css实现居中、自适应

摘要：中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。我称之为果冻依赖型元素，又称之为依赖型元素，也就是说只有一个元素属于或是也可以理解为水平水平，其身上的属性才会起作用。单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，c...

陆斌 2019-08-29 16:15 评论0 收藏0
css布局【实用】

摘要：布局只截图了一半左右布局注释以下全是重点清除浮动重点重点重点左中右布局两版固定宽度中间自适应全部自适应宽度可以都写成数值自行调整重点重点如果均分这个可以改为重点重点如果均分这个可以改为水平居中重点以下效果都一样以下效果都一样以下布局 ...

zzzmh 2019-08-30 15:56 评论0 收藏0