CSS常用实例,web前端开发者不知道这些就太low了

CSS常用实例

web前端开发中,会用到css实现各种网页布局,以下是我列出的几种常见实例,如果本文有错误的地方,也请指正。 PDF格式: http://demos.pxuexiao.com/flask_doc/css_demo01.html Author: lshxiao

一、常见左右布局

最常见的布局就是左右布局,这里只简单说一下,2列左右布局的情况

1、表格

<!--
表格实现左右布局最简单, 两个td搞定, 这里我就不写详细CSS了。
好处:不用考虑左右内容的高度,两个td的高度始终相同,也不用清除浮动
坏处:但总是感觉这种实现方式比较low,不够优雅。
-->
<table>
<tr>
    <td>left</td>
  <td>right</td>
</tr>
</table>

2、左右float

<!--
左右浮动实现方式,也是前端开发最常用的一种实现方式。
好处:代码相对优雅,并且符合div+css布局网站的风格
坏处:要设置元素的宽度,控制不好,有可能换行展示,并且要对父元素清除浮动
-->
<style>
.clearfix{ overflow: hidden; zoom:1; }
.left{ float: left; width: 30%; min-height: 200px; background: #f00; overflow: hidden;}
.right{ float: left; width: 70%; background: #0f0; overflow: hidden;}
</style>
<div class="clearfix">
<div class="left">
  left
</div>
<div class="right">
  right
</div>
</div>

3、position方式一

<!--
左右都用position: absolute;实现。
这种实现有个很大的缺点:父元素无法被撑开, 这种实现方式被大部分使用场景抛弃
-->
<style>
  .panel{ position: relative;}
  .p-left{ position: absolute; width: 30%; background: #f00;}
  .p-right{ position: absolute; width: 70%; background: #0f0; left: 30%;}
</style>
<div class="panel">
<div class="p-left">
  left
</div>
<div class="p-right">
  right
</div>
</div>

4、position方式二

<!--
对上面的方法稍加改动,左侧浮动+定位,右侧设置margin-left来实现。
这种实现方式是很多博客中左侧固定菜单,右侧内容弹性布局最常用的实现方式
-->
<style>
  .panel {
      overflow: hidden;
  }

  .p-left {
      position: relative;
      float: left;
      width: 30%;
      background: #f00;
  }

  .p-right {
      margin-left: 30%;
      background: #0f0;
  }
</style>
<div class="panel">
  <div class="p-left">
      left
  </div>
  <div class="p-right">
      right<br>
      more<br>
      content
  </div>
</div>
<div>
  other element
</div>

二、盒子水平垂直居中

水平垂直居中的场景:弹出dialog需要居中显示。 一般情况都是用JS来计算位置,这里我介绍一下CSS来实现水平垂直居中的实现

1、盒子宽高固定

<!--
前提:元素宽高固定
实现原理:先让元素的凭意一点与浏览器窗口正中央位置重合,这里选择左上角,然后再让元素向左偏移宽度的一半,向上偏移高度的一半。
-->
<style>
    .panel {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        height: 200px;
        margin-left: -150px;
        margin-top: -100px;

        background: #0aa;
    }
</style>
<div class="panel">

</div>

2、盒子宽高不固定

<!--
如果你是在移动端开发,或者不考虑IE低版本浏览器兼容问题,你可以用transform: translate(-50%, -50%);来实现。
这种实现方式,不要求宽高固定
-->
<style>
    .panel {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 300px;
        height: 200px;
        /*margin-left: -150px;*/
        /*margin-top: -100px;*/
        -webkit-transform: translate(-50%, -50%);
        background: #0aa;
    }
</style>
<div class="panel">

</div>

三、元素宽高等比放大缩小

相信不少同学在移动端网页开发中,都插入过图片吧,试问一下,你的图片比例是否可以跟随屏幕尺寸的变化而不变? 你肯定会说,我只设置宽度为100%,高度不就自动按比例缩放了嘛?如果是非图片元素,又如何实现等比放大缩小? 那还不简单嘛?宽高都设置成百分比呗,比如宽度100%,高度100%

1、了解width,height,padding百分比设置

<!--
试验一:宽高都设置为50%,好像并没有效果
-->
<style>
    .panel {
        width: 50%;
        height: 50%;

        background: #0aa;
    }
</style>
<div class="panel">

</div>

<!--
试验二:在上面代码基础上, 把html,body的height设置为100%, 也没有实现我想要的效果
-->
<style>
    html, body{
      height: 100%;
    }
</style>

<!--
到现在你应该思考一个问题,width, height的百分比,是以谁为标准设置的?
它们都是以父元素的宽高为标准,然后取对应的百分比值。
我们要想实现等比缩放,只能有一个标准,比如都是宽度为标准的话,是不是就好办了?看下面的margin, padding的设置
效果:屏幕宽度发生变化时,margin-left, padding-top的大小也在随之改变,这样我们就已经实现了元素的等比缩放了
原理:margin,padding的百分比设置时,是以父元素的width为标准
-->
<style>
    html, body{
        height: 100%;
    }
    .panel {
        width: 50%;
        /*height: 50%;*/

        margin-left: 10%;
        padding-top: 20%;

        background: #0aa;
    }
</style>
<div class="panel">

</div>

2、微信朋友圈图片9宫格实现

<!--
有了上面的等比缩放效果,就可以写出朋友圈图片的9宫格效果,这里不写代码了。
直接给个链接地址吧:http://demos.pxuexiao.com/scale/wx.html-->

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2017-08-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

CSS布局解决方案(上)

2764
来自专栏coding for love

CSS入门12-浮动与清除浮动

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

511
来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 常用选择器

914
来自专栏九彩拼盘的叨叨叨

让内容恰好占一屏,适配各种尺寸的设备的实现

有时候我们会有让内容恰好占一屏,并且适配各种尺寸的设备的需求。我们先不谈这样做会导致在一些设备上的显示不尽人意,直接谈如何实现。

623
来自专栏欧阳大哥的轮子

iOS的MyLayout布局系列-流式布局MyFlowLayout

     在我的CSDN博客中的几篇文章分别介绍MyLayout布局体系中的视图从一个方向依次排列的线性布局(MyLinearLayout)、视图层叠且停靠于父...

843
来自专栏HTML5学堂

SVG - 基本的SVG属性

SVG - 基本的SVG属性 HTML5学堂:在前一篇文章当中,我们讲解了SVG的基本知识,并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲...

34817
来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 布局

351
来自专栏大数据钻研

CSS居中:完全指南(译)

CSS的居中是众多CSS难点的代表。为啥用CSS居中这么难呢?但是我认为这个问题其实并没有那么难啦,就是有很多种不同的方式可以达到居中的目的,这取决于不同的情景...

2647
来自专栏十月梦想

浮动

    将红色背景的div想左边漂浮,则原来的绿色div不显示是红色被遮挡在面。 

552
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(七)多列布局,伸缩布局

CSS3中新出现的多列布局 (multi-column) 是传统 HTML 网页中块状布局模式的有力扩充。

461

扫描关注云+社区