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

相关文章

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

weex-09-组件text的用法

1.怎么给text 组件赋值 2.怎么设置组件的背景颜色和字体颜色 3.怎么给设置组建的边框颜色,宽度,样式 4.怎么设置文字斜体 加粗 下划线等 5....

2022
来自专栏十月梦想

表单

1.表单控件     1.input标记         1.input标记             提供文本输入框,密码输入框,按钮,单选按钮,多选按钮,...

603
来自专栏快乐八哥

DIV元素水平和垂直居中

在前端开发过程中,经常要对元素进行居中设置。一般有水平居中,和垂直居中。一般设置水平居中简单。基本是margin:0 auto,就可以了。但是垂直居中,我们有时...

3148
来自专栏做全栈攻城狮

.Net程序员快速学习安卓开发-布局和点击事件的写法

我们新建一个layout布局文件时,默认就是相对布局。相对布局是相对于非相对布局来说的。顾名思义,相对布局就是 相对于某些控件位置的布局。所有的控件都是相对位置...

1024
来自专栏性能与架构

微信小程序示例 - 交互组件

消息提示框 toast ? 代码结构 <toast bindchange="..."> 消息内容 </toast> 属性 duration - 消息显示...

3928
来自专栏向治洪

React-Native组件之 TabBarIOS和TabBarIOS.Item

TabBarIOS 组件简介 目前的APP内,大部分都是选项与选项之间切换,比如:微信、微博、QQ空间…,在iOS中,我们可以通过TabItem类进行实现,那么...

28910
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第二天 HTML表单&amp;CSS【悟空教程】

所有的html标签中,表单标签是最重要的。在实际开发中,最经典的实例就是用户注册,覆盖了表单标签的所有的元素。效果图如下:

2634
来自专栏LeeCen

UIScrollView控件实现图片轮播

951
来自专栏码农阿宇

HTML基础加强

1. 什么是浏览器:解释和执行HTML源码的工具。 2. 什么是静态页面,什么样的页面是动态页面? 静态页面:htm,html(直接读取) 动态网页:asp...

30510
来自专栏我分享我快乐

jquery中使用event.stopPropagation()阻止事件冒泡

案例如上图:点文档关闭菜单,点按钮打开菜单。因为按钮在文档内,所以会产生事件冒泡使得在点按钮打开菜单时无法正常执行。所以我们需要阻止事件冒泡。例子代码如下: ...

39713

扫码关注云+社区