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 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

SplashScreenSource的妙用

默认初始屏幕体验 在托管 API 下为 Silverlight 定义的默认体验是:超出某一时间阈值(约为 0.5 秒)的任何加载都将在内容区域中显示基于 XA...

1807
来自专栏pangguoming

CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技...

38710
来自专栏V站

Skill丨如何利用代码美化网站滚动条?

V站今天回想起以前模板也有美化滚动条,后来魔改魔改就没了,现在找出来分享出来。由于偏爱谷歌浏览器的简洁,感觉滚动条还是太宽了,用过改变滚动条粗细的插件,后来感觉...

1864
来自专栏河湾欢儿的专栏

表格

表格标签: table 表格 thead 表格头 tbody 表格主体 tr 表格行 th 元素定义表头 td 元素定义表格单元

571
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

1986
来自专栏每日一篇技术文章

weex-16-image组件

DE2586BB-4A0A-4904-AA87-EF44A8A5BC74.png

391
来自专栏ytkah

如何用<dl>标签做表格而不用table标签

  我们都知道很多的内容编辑器(TinyMCE编辑器、fck)都有插入表格功能,快速方便,但是这些表格用到的<table>标签,可以查看html源代码就能发现,...

2746
来自专栏卡少编程之旅

用CSS实现居中的总结

25912
来自专栏IMWeb前端团队

居中那些事情

居中那点事 最近碰到一些居中的问题需要处理,这里整理下碰到的问题以及一些解决的方案 文本水平居中 text-align:center; 可以知道,让一个元素水平...

18210
来自专栏mySoul

SVG可伸缩的矢量图形

SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述。即对矢量图的描述

853

扫码关注云+社区