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
→