美文网首页
CSS中的简单布局

CSS中的简单布局

作者: secret123 | 来源:发表于2018-12-28 15:31 被阅读0次

    左右布局

    利用float实现左右布局

    1. 给所有子元素加 float: left
    2. 给子元素的父元素添加一个clearfix的类，清除浮动

    html代码

    <div class="clearfix">
        <div class="red">红色</div>
        <div class="blue">蓝色</div>
</div>

    css代码

    body{
    margin: 0;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.red{
    float: left;
    background: red;
    font-size: 30px;
    width: 50%;
    text-align: center;
    height: 300px;
    color: #fff;
    line-height: 300px;
}
.right-box{
    float: left;
    background: #b6701e;
    font-size: 30px;
    width: 50%;
    text-align: center;
    height: 300px;
    color: #fff;
    line-height: 300px;
}

    使用绝对定位实现

    1. 给父级绝对定位
    2. 给子元素相对定位，相对于父元素定位
      html代码同上
      css代码
    body{
    margin: 0;
}
.wrap{
    position: relative;
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    position: absolute;
    font-size: 30px;
    width: 50%;
    text-align: center;
    height: 300px;
    color: #fff;
    line-height: 300px;
}
.left-box{ 
    top: 0;
    left: 0;
    background: #ff9e2c;
}
.right-box{
    top: 0;
    right:0;
    background: #b6701e;
}

    使用假的表格

    1. 将父容器转换为表，给父容器设置display: table
    2. 通过这个display: table-cell，将子容器转换为表中的单元格
      html代码同上
      css代码
    body{
    margin: 0;
}
.wrap{
    display: table;
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    display: table-cell;
    font-size: 30px;
    width: 50%;
    text-align: center;
    height: 300px;
    color: #fff;
    line-height: 300px;
}
.left-box{
    background: #ff9e2c;
}
.right-box{
    background: #b6701e;
}

    使用Inline-block

    1. 给父元素中的子元素添加display: inline-block;
    2. 需要将两个div靠在一起，具体请看下面的代码，因为如果不靠在一起的话，会产生一个空格间隔，导致布局发生改变
      html代码
    <div class="wrap clearfix">
    <div class="left-box">
        左边
    </div><div class="right-box">
        右边
    </div>
</div>

    css代码

    body{
    margin: 0;
}
.wrap{
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    display: inline-block;
    font-size: 30px;
    width: 50%;
    text-align: center;
    height: 300px;
    color: #fff;
    line-height: 300px;
}
.left-box{
    background: #ff9e2c;
}
.right-box{
    background: #b6701e;
}

    使用Flexbox

    Flexbox是一种非常棒的方式，只需注意它仅限于IE 10及以上版本，您可能需要使用前缀和值来获得最佳支持

    1. 将父容器转换为一个灵活的盒子
    2. 子容器占用相同的空间份额。无需设置宽度或高度
    3. 为了确保它们是正确的，设置flex: 1;在两侧是一个很好的计划。
      css代码
    body{
    margin: 0;
}
.wrap{
    display: flex;
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    flex: 1;
    font-size: 30px;
    width: 50%;
    text-align: center;
    height: 300px;
    color: #fff;
    line-height: 300px;
}
.left-box{
    background: #ff9e2c;
}
.right-box{
    background: #b6701e;
}

    使用网格布局

    定义一个容器，然后将其拆分成可以用子元素灵活填充的列和单元格
    css代码

    body{
    margin: 0;
}
.wrap{
    display: grid;
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    font-size: 30px;
    text-align: center;
    height: 300px;
    color: #fff;
    line-height: 300px;
}
.left-box{
    grid-column: 1;
    background: #ff9e2c;
}
.right-box{
    grid-column: 2;
    background: #b6701e;
}

    左中右布局

    上面实现左右布局的方法都可以实现左中右布局，这里就挑3个比较实用的方法

    利用float

    原理同上，使用float实现左右布局
    html代码

    <div class="wrap clearfix">
    <div class="left-box">左边</div>
    <div class="middle-box">中间</div>
    <div class="right-box">右边</div>
</div>

    css代码

    body{
    margin: 0;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.wrap{
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    float: left;
    height: 300px;
    font-size: 30px;
    text-align: center;
    color: #fff;
    line-height: 300px;
}
.left-box{
    width: 30%;
    background: #ff9e2c;
}
.middle-box{
    width: 36%;
    background: orange;
    margin: 0 2%;
}
.right-box{
    width: 30%;
    background: #b6701e;
}

    实现的效果

    [图片上传失败...(image-60391c-1541209105931)]

    使用Flexbox

    html代码同上
    css代码

    body{
    margin: 0;
}
.wrap{
    display: flex;
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    height: 300px;
    font-size: 30px;
    text-align: center;
    color: #fff;
    line-height: 300px;
}
.left-box{
    width: 30%;
    background: #ff9e2c;
}
.middle-box{
    width: 36%;
    background: orange;
    margin: 0 2%;
}
.right-box{
    width: 30%;
    background: #b6701e;
}

    使用网格布局

    css代码

    body{
    margin: 0;
}
.wrap{
    display: grid;
    width: 1000px;
    margin: 50px auto 0;
}
.wrap div{
    height: 300px;
    font-size: 30px;
    text-align: center;
    color: #fff;
    line-height: 300px;
}
.left-box{
    grid-column: 1;
    background: #ff9e2c;
}
.middle-box{
    grid-column: 2;
    background: orange;
    margin: 0 15px;
}
.right-box{
    grid-column: 3;
    background: #b6701e;
}

    水平居中

    内联元素水平居中

    在块级父元素内水平居中内联元素

    .center-children {
  text-align: center;
}

    块级元素水平居中

    .center-me {
  margin: 0 auto;
}

    多个块级元素水平居中

    使用inline-block
    给元素设置display: inline-block;,设置父级元素的属性width: 100%;text-align: center;
    使用flexbox
    给父级元素设置·display: flex;justify-content: center;·即可

    垂直居中

    inline 或 inline-* 元素单行垂直居中

    方法一:上下使用相同的padding(推荐)

    上下和左右使用相同的padding可以不用设置宽高,既可以在修改文本内容是自适应,又可以减少出现BUG的几率

    .link {
  padding-top: 30px;
  padding-bottom: 30px;
}

    方法二:设置line-height与高度相同

    .center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
/*nowrap文本内的换行无效内容只能在一行显示*/
}

    多行文本垂直居中

    方法一:display: table;和vertical-align: middle;

    .center-table {
  display: table;

}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}

    使用flex布局多行文本居中

    .flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

    block元素垂直居中

    1. 已知block元素高度

    原理是绝对定位,top: 50%;然后 margin-top设置为负边距且值为他本身高度的一半.

    .parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

    2.block元素高度未知垂直居中

    借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

    .parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

    3.使用flex布局block元素高度未知垂直居中

    .parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

    CSS学习资源

    1. Google: 关键词 MDN
    2. CSS Tricks
    3. Google: 阮一峰 css
    4. 张鑫旭的 240 多篇 CSS 博客
    5. Codrops 炫酷 CSS 效果
    6. CSS揭秘
    7. CSS 2.1 中文 spec
    8. Magic of CSS 免费在线书

    参考资料：

    相关文章

      网友评论

          本文标题：CSS中的简单布局

          本文链接：https://www.haomeiwen.com/subject/dexkxqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS中的简单布局|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！