• 当前标签: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正式把圆角属性border­radius加入了规范 之中,至此圆角的实现变得格外轻松惬意。 圆角的实现原理 我们浏览器默认每一个块元素都是一个矩形区域,那么当我们给一个块元素设置了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
阅读详情
  • 1
前往