码迷,mamicode.com
首页 > Web开发 > 详细

CSS布局篇

时间:2018-08-05 19:34:38      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:size   tomato   overflow   white   简便   justify   width   了解   固定   

CSS布局篇

在前端CSS的学习过程中,布局是很重要的一部分,因此,我也通过搜集和整理资料来写了这篇博文,来简述一下有关于布局的各种方式,对自己有关于CSS布局的知识做一下梳理,也希望能给其他需要学习到布局知识的朋友一些帮助。

实现左右布局

假设布局左侧部分宽度固定,右侧部分宽度随浏览器宽度的变化而自适应变化

利用flex方法实现左右布局

<div class="container">
    <div class="initial">左侧部分宽度固定</div>
    <div class="flex1">右侧部分宽度随浏览器宽度的变化而自适应变化 </div>
</div>
.container {
    /* background-color: red; */
    display: flex;
    height: 100px;
}
.initial {
    width: 300px;
    background-color: red;
}
.flex1 {
    background-color: palevioletred;
    flex:1;
}

利用float方法实现左右布局

<div class="container2 clearfix">
        <div class="initial2">左侧部分宽度固定</div>
        <div class="float1">右侧部分宽度随浏览器宽度的变化而自适应变化 </div>
</div>
.container2 {
    height: 100px;
}
.clearfix::after {
    content: ‘‘;
    display: block;
    clear: both;
}
.initial2 {
    height: inherit;
    width: 300px;
    float: left;
    background-color: rosybrown;
}
.float1 {
    height: inherit;
    margin-left: 300px;
    background-color: gray;
}

实现左中右布局

假设布局两部分宽度固定,其中一部分宽度随浏览器宽度的变化而自适应变化

利用flex方法实现左中右布局

<div class="container3">
    <div class="three_1">第一列</div>
    <div class="three_2">第二列</div>
    <div class="three_3">第三列</div>
</div>
.container3 {
    display: flex;
    height: 100px;
}
.three_1 {
    width: 200px;
    height: inherit;
    background-color: indigo;
}
.three_2  {
    flex: 1;
    height: inherit;
    background-color:darkcyan;
}
.three_3 {
    width: 200px;
    height: inherit;
    background-color: darkorchid;
}

利用float方法实现左中右布局

<div class="container4"
    <div class="three_1_1">第一列</div>
    <div class="three_3_3">第三列</div>
    <div class="three_2_2">第二列</div>
</div>
.container4 {
    height: 100px;
}
.three_1_1 {
    width: 200px;
    float: left;
    height: inherit;
    background-color: forestgreen;
}
.three_2_2 {
    margin-left: 200px;
    margin-right: 200px;
    height: inherit;
    background-color: tomato;
}
.three_3_3 {
    width: 200px;
    float: right;
    height: inherit;
    background-color: salmon;
}

实现水平居中

内联元素水平居中

<div class="center-children">
    This is center
</div>
.center-children {
  text-align: center;
}

块级元素水平居中

块级元素水平居中又分为两种情况

  • 块级元素宽高已确定

以下是利用margin来设置水平居中

<div class="center">
    I‘m a block level element and am centered.
</div>
.center {
  margin: 0 auto;
  width: 200px;
  background: black;
  padding: 20px;
}

以下是利用position来设置水平居中

<div class="father">
    <div class="center">
        I‘m a block level element and am centered.
    </div>
</div>
.father {
    position: relative;
}
.center {
    position: absolute;
    background-color: red;
    width: 960px;
    left: 50%;
    transform: translate(-50%,0);
    text-align: center;
}
  • 块级元素宽高未确定
<div class="father">
    <div class="center">
        I‘m a block level element and am centered.<br>
        I‘m a block level element and am centered.
    </div>
</div>
.father {
    text-align: center;
}
.center {
    display: inline-block
}

实现垂直居中

内联元素垂直居中

  • 单行内联元素居中

使用flex布局实现内联元素垂直居中(不考虑兼容老式浏览器的话)

<div class="center">
    I‘m a block level element and am centered.<br>
    I‘m a block level element and am centered.
</div>
.center {
    display: flex;
    align-items: center;
}

使用line-height实现内联元素垂直居中

<div class="center">
    I‘m a block level element and am centered.
</div>
.center {
    height: 32px;
    line-height: 32px;
}
  • 多行内联元素垂直居中

使用flex布局实现多行内联元素垂直居中(不考虑兼容老式浏览器的话)

<div class="center">
    <p>
        I‘m a block level element and am centered.
        I‘m a block level element and am centered.
    </p>
</div>
.center {
    display: flex; 
    justify-content: center;
    flex-direction: column;
}

块级元素垂直居中

  • 块级元素高度已确定
<main>
  
  <div>
     I‘m a block-level element with a fixed height, centered vertically within my parent.
  </div>
  
</main>
main {
  background: white;
  height: 300px;
  width: 300px;
  position: relative;
  resize: vertical;
  overflow: auto;
}

main div {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
  background: black;
  color: white;
}
  • 块级元素高度未确定
<main>
  
  <div>
     I‘m a block-level element with an unknown height, centered vertically within my parent.
  </div>
  
</main>
main {
  position: relative;
}
main div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
  • 使用flexbox
<main>
  
  <div>
     I‘m a block-level element with an unknown height, centered vertically within my parent.
  </div>
  
</main>
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

关于Grid

此外,现在CSS的布局已经发展到了Grid,他更简便快捷高效.

在考虑兼容性的情况下,我们应该熟悉以前的布局方法,但是以发展的眼光看,我们可着眼于更强大的布局方式Grid,了解现在的CSS发展趋势。

在网络上现在也存在了不少关于Grid的文章,我们也可以学习一下,比如掘金的这篇文章

关于CSS布局篇的分析和整理就到此为止啦,希望能帮助到更多的朋友。

CSS布局篇

标签:size   tomato   overflow   white   简便   justify   width   了解   固定   

原文地址:https://www.cnblogs.com/No-harm/p/9426762.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!