美文网首页前端进阶之路饥人谷技术博客
CSS布局小技巧及CSS学习资源

CSS布局小技巧及CSS学习资源

作者: xyyojl | 来源:发表于2018-10-15 20:40 被阅读16次
  • 左右布局
  • 左中右布局
  • 水平居中
  • 垂直居中

左右布局

利用float实现左右布局

  1. 给所有子元素加 float: left
  2. 给父元素加 clearfix 类，清除浮动
    html代码
<div class="wrap clearfix">
        <div class="left-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;
}
.left-box{
    float: left;
    background: #ff9e2c;
    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;
}

实现左右布局的效果


左右布局.png

使用绝对定位实现

  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;
}

实现的效果


左中右布局.png

使用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布局小技巧及CSS学习资源

    左右布局 左中右布局 水平居中 垂直居中 左右布局 利用float实现左右布局 给所有子元素加 float: le...

  • CSS学习（1）

    学习资源：1、学习CSS布局2、CSS 禅意花园3、CSS 开发者指南【MDN】4、HTML Dog5、CSS Z...

  • css布局和居中

    本文主要介绍了css常用的布局，居中等其他小技巧。 css布局 左右布局 利用float实现左右布局 左右模块设置...

  • 收集前端学习资料

    前端的一些学习资源 html和css代码规范 前端知识体系 前端网址大全 学习CSS布局 通用 CSS 笔记、建议...

  • CSS布局技巧

    最近学习了CSS的一些知识，下面总结一下我学到的CSS布局技巧 1.左右布局 (1). 浮动左右布局也叫横向布局，...

  • CSS一些小技巧

    搭建网页过程中，掌握一些CSS的小技巧，能够快速提高开发的效率，花了些许时间，学习整理了一些CSS布局技巧。 1....

  • 小程序开发必备知识总结-思维导图-布局篇

    Flex布局使用 CSS技巧相关

  • ##深入学习CSS布局系列（一）布局常用属性

    @(CSS)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性 一直感觉自己对CSS的各个属性很了解，可...

  • 2018-06-24

    css 网页布局学习心得 1.左右布局 2.左中右布局 3.水平布局 4.垂直布局 5.其他小技巧 在浮动布局时,...

  • web前端教程：CSS 布局十八般武艺都在这里了

    CSS布局 布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单...

网友评论

    本文标题：CSS布局小技巧及CSS学习资源

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

    延伸阅读

    深度阅读

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

    栏目导航

    热点阅读

    前端进阶之路

    饥人谷技术博客

    关于我们|服务条款|联系我们|CSS布局小技巧及CSS学习资源|投稿指南|网站地图|RSS订阅|排版工具|手机版

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

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

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

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

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