FED
技术栈
专辑
文章
讨论
公告
开发者
©FrontEndDev.org
2015 - 2024
web@2.22.0 api@2.20.0
首页
/
CSS
/
技术栈内文章
/
第 1 页
共计 23 篇
浅谈css 垂直居中的几种方法
Hatch
1/12/2017, 4:29:47 PM
访问
2645
·
评论
1
用css垂直居中元素往往给设计人员带来麻烦。然而,存在用于垂直定心的各种方法,并且每种方法都相当容易使用。今天我想介绍其中的6种方法。注:IE修复:*display:inline-block;由于vertical-align属性与表格一起使用,我们将父DIV设置为display:table,并将子DIV设置为单元格display:talbe-cell.然后我们可以安全的使用vertical-align:middle来垂直单元格中的内容.此方法适用于多行文本,容器DIV随内容动态增长,不幸的是不工作于IE6、IE7中(该死的IE,哈哈)...
CSS
基础概念
css经典布局之左侧固定大小右侧自动适应
赛冷思
9/23/2016, 10:34:28 AM
css经典布局
访问
1910
·
评论
0
最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是饭的列表等等。反正挺实用,值得收藏!先看HTML代码...
CSS
基础概念
BFC块级格式化上下文
Reven
11/9/2015, 11:11:53 AM
访问
1281
·
评论
0
BFC已经是一个耳听熟闻的词语了,网上有许多关于BFC的文章,介绍了如何触发BFC以及BFC的一些用处(如清浮动,防止margin重叠等)。虽然我知道如何利用BFC解决这些问题,但当别人问我BFC是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1spec和许多文章来全面地理解BFC。在解释BFC是什么之前,需要先介绍Box、FormattingContext的概念。...
CSS
基础概念
移动端web app自适应布局探索与总结
云淡然
11/4/2015, 9:56:20 AM
访问
2139
·
评论
2
在这之前做webapp开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640*1136标准,所以高度一般取个大概值,各种图标的宽高也是取平衡值写死,然后部分样式通过媒体查询来设置,例如背景图的多倍图、基础字体大小、图标宽高。这样做的弊端很明显:...
CSS
基础概念
IE兼容性BUG小结
Reven
10/31/2015, 3:03:45 PM
跟着Reven一起玩前端
访问
1594
·
评论
0
##IE6下绝对定位元素消失...
CSS
基础概念
淘宝前端:移动端端图片的优化流程
云淡然
8/12/2015, 11:23:52 PM
访问
5281
·
评论
2
注:本文摘自阿里内网的无线前端博客《无线前端的图片相关工作流程梳理》。其实是一个月前写的,鉴于团队在中国第二届CSSConf上做了《手机淘宝CSS实践启示录》的分享,而图片工作流程梳理是其中的一个子话题,故在此一并分享出来,希望仍可以给大家一些经验和启发。另外,考虑到这是一篇公开分享,原版内容有部分删节和调整,里面有一些经验和产出是和我们的工作环境相关的,不完全具有普遍性,还请见谅。今天很荣幸的跟大家分享一件事情,就是经过差不多半年多的努力,尤其是最近2周的“突击扫尾”,无线前端团队又在工具流程方面有了一个不小的突破:我们暂且称其为“图片工作流”梳理。...
CSS
基础概念
flex专辑说明
风舞
7/30/2015, 3:58:12 PM
css flex布局
访问
1243
·
评论
0
#flex专辑说明flex目前兼容是不太好,这里主要是了解。##简介这个系列我只写了几个非常简单的DEMO,真的都非常简单,重在理解。东西不是教会的,是自己理解后会的。这个系列说实话,还有很多东西,我会慢慢完善,如果你有任何问题或者建议。欢迎你随时给我回复。...
CSS
基础概念
CSS3 flex布局之box-ordinal-group 子元素顺序
风舞
7/30/2015, 3:48:36 PM
css flex布局
访问
1144
·
评论
0
#CSS3flex布局之box-ordinal-group子元素顺序语法:box-ordinal-group:integer;##box-ordinal-group:integer;http://jsdm.com/Windancer/paint/NtqW5...
CSS
基础概念
CSS3 flex布局之box-pack 水平居中
风舞
7/30/2015, 2:51:06 PM
css flex布局
访问
1374
·
评论
0
#CSS3flex布局之box-pack水平居中语法:box-pack:start|end|center|justify;box-pack默认值是start##例如box-pack:centerhttp://jsdm.com/Windancer/paint/fZXoE...
CSS
基础概念
CSS3 flex布局之box-direction 子元素伸缩
风舞
7/30/2015, 2:39:27 PM
css flex布局
访问
1344
·
评论
0
#CSS3flex布局之box-direction子元素伸缩语法:box-flex:value;##例如box-flex:value;http://jsdm.com/Windancer/paint/Db8LX...
CSS
基础概念
CSS3 flex布局之box-direction 子元素方向
风舞
7/29/2015, 4:25:44 PM
css flex布局
访问
1218
·
评论
0
#CSS3flex布局之box-direction子元素方向语法:box-direction:normal|reverse|inherit;##例如box-direction:reverse从右到左http://jsdm.com/Windancer/paint/3YkOK...
CSS
基础概念
CSS3 flex布局之box-align 垂直居中
风舞
7/29/2015, 2:40:55 PM
css flex布局
访问
2093
·
评论
0
#CSS3flex布局之box-align垂直居中语法:box-align:start|end|center|baseline|stretch;box-align默认值是stretch:拉伸子元素以填充包含块;...
CSS
基础概念
移动端高清多屏适配方案
云淡然
7/23/2015, 11:52:59 PM
访问
3115
·
评论
3
在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点:问题:带着问题,往下看......
CSS
基础概念
display构造table小例子
风舞
7/15/2015, 5:30:28 PM
css flex布局
访问
1444
·
评论
0
#利用display的属性特性构造的table可以兼容到IE8##前言自从上次发过文章之后感觉大家非常的热情,可我却没有坚持更新。感到非常惭愧!今天刚好得空,闲暇之余做个小例子玩玩,以飨读者。ok,今天的话题是display构造table,下面的说明要仔细看哦,对应的属性在DEMO中都有用到。...
CSS
基础概念
《CSS 设计指南》学习笔记2
蠡嬂賯
7/15/2015, 2:22:46 AM
访问
1913
·
评论
0
本篇文章是笔者的《CSS设计指南》学习笔记的第二部分,由于最近都在准备期末考的事,所以都没来得及对《CSS设计指南》进行一些总结,没有看之前第一部分的话也可以从这里传送过去。其实HTML页面中每个元素其实都是一个「盒子」,默认情况下这些盒子的边框不可见,背景也是透明的,所以我们不能直接的看到页面中盒子的结构,但是我们可以借助一些WebDeveloper工具条可以方便地显示盒子的边框和背景,让我们能很直观的看到这些盒子的结构。...
CSS
基础概念
《CSS 设计指南》学习笔记1
蠡嬂賯
7/15/2015, 2:20:28 AM
访问
1488
·
评论
0
本篇文章是对这几天看完CharlesWyke-Smit的《CSS设计指南》后的一些学习笔记与心得,笔者好像是大一的时候开始接触网页设计,由于并不是计算机专业的,所以所有都是自己自学的,记得当时自己对CSS基本上什么都不懂,甚至连怎么在CSS中选择某个class和id都不懂,然后就直接下载一些源码来看,后来看到这些CSS文件中有.和#,然后就连蒙带猜的学会了怎么使用它们,然后就在源码中看到什么不懂的就直接上W3School中查找API,这样也慢慢的让我掌握了CSS中常用的部分,并且制作网页时大多数的问题都能够得到解决。由于期间自己的态度摇摆不定也想学PHP、Java、Android等等,然而结果可想而知,并没有坚持下来,如今大三也快结束马上要进入准大四的阶段了,感觉不能在这样下去了,前段时间一直在思考一个问题,自己到底喜欢什么,然后回想自己大学以来花的最多时间的地方是什么,最终的出的结果就是——前端,尽管前端涉及的知识很多,但这并不能阻碍我对它的热情。决定下来后的第一件事情就是系统的巩固一下自己的知识体系,然后就有了这篇《CSS设计指南》的学习笔记,这本书也是比较多人推荐并且好评比较多的
CSS
基础概念
CSS animation和transition的性能探究
月纷悦
7/15/2015, 2:09:24 AM
访问
1154
·
评论
0
本篇文章翻译自adobeWebPlatformTeam的博客:CSSanimationsandtransitionsperformance:lookinginsidethebrowser。虽然是一篇旧文,但是里面谈到的知识点很有用。对CSS的性能优化有很大帮助。你可能已经在你的项目中用上了CSSAnimation和CSStransition。如果还没有用上,那你有点out了。快去看下CSS-Trick上的这两篇关于animation和transition的文章。你在使用中一定发现了有些动画很流畅,而有些则很卡。为什么呢?...
CSS
基础概念
CSS3 flex布局之flex-flow
风舞
5/28/2015, 10:41:16 AM
css flex布局
访问
1688
·
评论
0
CSS语法flex-flow属性是flex-direction和flex-wrap属性的速记属性。flex-direction属性规定灵活项目的方向。flex-wrap属性规定灵活项目是否拆行或拆列。...
CSS
基础概念
CSS3 Flexbox布局
风舞
5/27/2015, 12:11:53 PM
css flex布局
访问
2278
·
评论
5
一个Flexbox布局是由一个伸缩容器(flexcontainers)和在这个容器里的伸缩项目(flexitems)组成。Flex容器不是块容器,因此有些设计用来控制块布局的属片在Flexbox布局中不适用。特别是:多列组中所有column-*属性、float、clear属性和vertical-align属性在Flex容器上没有作用。...
CSS
基础概念
移动端手机 retina 屏 1px border
蠡嬂賯
5/20/2015, 11:40:44 PM
访问
4948
·
评论
1
移动web开发,总避免不了1设备像素边框的问题。本文参考了half-pointcssborderinios一文。仅有Firefox和Safari8(introducedinOSXYosemite)支持。twitter有位哥们听到这个消息时,已经不知所云。...
CSS
基础概念
1
2
→