CSS3

多种CSS垂直居中技巧

自古以来（是有多古？）～网页CSS的垂直置中需求始终没有停过，而其困难度也始终没有让人轻松过，经过了每位开发先烈们的研究后，据说CSS的垂直置中技巧已达到近十种之多，但始终鲜为人知，部分公司甚至将CSS的垂直置中技巧当成了面试题目，其重要性可见一斑，经过了Amos通灵了一下之后把垂直置中的写法扩增到了23个，今天就让Amos带着大家轻松的了解一下CSS的垂直置中的方式吧。 1、Line-height 适用情景：单行文字垂直居中技巧这个方式应该是最多人知道的了，常见于单行文字的应用，像是按钮这一类对象，或者是下拉框、导航此类元素最常见到的方式了。此方式的原理是在于将单行文字的行高设定后，文字会

2018-08-27 01:38:19 137 9 2

阅读详情

css3圆角属性详解

页面元素的装饰一直是前端工程师的重要工作之一，在这若干样式之中有一个样式较为独特，那就是圆角属性。在CSS3前或是老版本的浏览器中要想实现圆角属性的难度较大，要么使用图片装饰，要么使用border的奇淫巧技，无论哪种所需要的时间都是不短的。因此，在CSS3中为了让前端工程师们减少在这类常见样式上所消耗的时间，W3C正式把圆角属性borderradius加入了规范之中，至此圆角的实现变得格外轻松惬意。圆角的实现原理我们浏览器默认每一个块元素都是一个矩形区域，那么当我们给一个块元素设置了border-radius之后浏览器到底做了些什么才让一个矩形区域出现一个圆角效果呢？形象点

2018-03-25 17:40:44 236 16 6

阅读详情

开脑洞系列——CSS3版天气预报

前言前几天看了一篇文章，颠覆了我对 CSS 认识，心中无数次蹦出一个念头：'WC，还能特么这么用，这特么太叼了' ... 于是我迫不及待想跟你们一起分享分享，以后你也可以在别人面前炫（装）耀（B）了~ ps：本文原创不是我，我只是搬运工，看到好东西与大家分享而已装B指南本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、 ::after 伪元素， transparent 、 border，多重线性与径向渐变，多重内外阴影，如果你的效果不尽人意，请尝试在 Chrome 浏览器下预览。装B技巧本文所有图形都会有个容器 <div class=

2018-01-20 00:15:18 566 23 0

阅读详情

合理使用float布局网页

估计大多数人误解了float的原本设计初衷，但是这里的“误用”是要加引号的，因为这是一种无心插柳的应用。即，用float做网页布局是很合情合理的，鼓励同志们继续使用。这篇文章主要是为了解决一个实际遇到的问题：左右两列布局，左侧宽度固定，右侧宽度自适应（或左中右三列布局，左侧和中间宽度固定，右侧宽度自适应），当页面宽度变化时，怎样使右侧元素中的内容始终在页面剩余宽度中居中显示，设置了text-align: center;之后，问题其实也就是怎样让右侧元素的宽度占据页面剩余所有宽度。基础知识：元素float之后的变化 1.原本为inline或原本为block的元素，设置了float: lef

2017-08-15 23:25:00 375 0 2

阅读详情

css3教程：float

对于所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。这就是我们又爱又恨的——float。所以，系统的学一学float是非常非常有必要的。视频学习可参考张鑫旭的《CSS深入理解之float浮动》，讲的很好很透彻。重新认识float 1 误解和“误用” 这里说的“误用”并不是真正的误用，而是误打误撞使用之后，带来了真正的效果。绝大多数人用float都是为了——横向排版或者多列布局。这样的使用是正确的，大部分人都这样使用，bootstrap的栅格系统也是使用了flo

2017-08-15 21:31:40 542 2 2

阅读详情