![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
csdn_huangyumin
一直努力下去,看命运还怎么肆虐我
展开
-
css min-width最小宽度与max-width最大宽度教程
最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多。比如一个图片为主列表,对象里图片大小不定时候,为了不想让他太小不统一这个时候我们可以使用css最小宽度样式。再如,一个盒子里有文章有图片混排的时候,有时图片宽度不能确定,这个时候如果html img图片宽度超出了div盒子宽度,可能图片就会撑破div盒子造成图片混乱。转载 2015-10-25 19:28:11 · 885 阅读 · 0 评论 -
CSS3实例教程:详解calc()函数功能
http://www.missyuan.net/school/web_2012/web_8338.htmlcalc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可转载 2015-12-02 11:42:30 · 678 阅读 · 0 评论 -
CSS3教程:Transform的perspective属性设置
http://www.webjx.com/css/divcss-33347.htmlCCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持,IE10支持。只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单:只能选择透视方式,也就是近大远小的显示方式。镜头方向只能是转载 2015-12-02 00:28:21 · 787 阅读 · 0 评论 -
CSS3 :nth-child() 选择器
http://www.w3school.com.cn/tiy/t.asp?f=css_sel_nth-child p:nth-child(3){background:#ff0000;}这是标题第一个段落。第二个段落。第三个段落。第四个段落。注释:Internet Explorer 不支持 :nt转载 2015-12-02 11:46:21 · 335 阅读 · 0 评论 -
HTML结构
HTML结构,如下:舞台 容器 图片 图片 图片 ...对于舞台,很简单,加个视距,比方说800像素: perspective: 800px;对于容器,很简单,加个3D视图声明,如下:transform-style: preserve-3d;转载 2015-12-02 00:49:20 · 240 阅读 · 0 评论 -
position:absolute;
http://www.w3school.com.cn/tiy/t.asp?f=csse_position_absolute转载 2015-12-01 23:28:52 · 397 阅读 · 0 评论 -
Font Awesome
http://www.iteblog.com/archives/1099转载 2015-12-15 13:02:50 · 439 阅读 · 0 评论 -
CSS3 box-align 属性
通过使用 box-align and box-pack 属性,居中 div 框的子元素http://www.w3school.com.cn/cssref/pr_box-align.aspdiv{width:350px;height:100px;border:1px solid black;/* Firefox */display:-moz-box;-moz-bo转载 2015-11-19 11:34:46 · 511 阅读 · 0 评论 -
负边距在布局中的使用
http://www.cnblogs.com/dolphinX/p/4071725.html负边距即margin属性的值设为负值,在CSS布局中时一个很有用的技巧。值为正的场景很常见,大家都很熟悉其表现当margin-top、margin-left为负值的时候,会把元素上移、左移,同时文档流中的位置也发生相应变化,这点与position:relative的元素设置t转载 2015-11-19 22:32:47 · 511 阅读 · 0 评论 -
web app 自适应方案总结 关键字 弹性布局之rem
现在移动端 web app 的自适应布局的方案有 5种。零. Flexbox 使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何项目中得到应用。一. 弹性布局 使用 em 或 rem 单位进行相对布局,相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。转载 2015-11-19 22:21:16 · 537 阅读 · 0 评论 -
Flexbox——快速布局神器
http://www.w3cplus.com/css3/flexbox-basics.html简介在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想创建一个简单的图片与文本的布局,那么还算简单,但是制作一个复杂的多列布局,要做的众多浏览器的兼容一致那还是很复杂的。我们通常都是使用浮动或者其他方法来实现这个目转载 2015-11-19 22:12:16 · 1436 阅读 · 0 评论 -
box-align
http://caibaojian.com/demo/flexbox/align-items.htmlalign-items (适用于父类容器上)设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。语法align-items: flex-start | flex-end | center | baseline | stretchflex-s转载 2015-11-19 21:41:17 · 640 阅读 · 0 评论 -
Webkit Flex伸缩盒模型
CSS3 display:flex和display:box有什么区别?著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。作者:一丝链接:http://www.zhihu.com/question/22991944/answer/23302749来源:知乎前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。转载 2015-11-19 11:31:07 · 2305 阅读 · 0 评论 -
background-position 用法详细介绍
语法: background-position : length || length background-position : position || position 取值: length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | bottom | left | center | ri转载 2015-11-22 15:25:00 · 308 阅读 · 0 评论 -
pointer-events
Google map中左上角的操作区域占位是挺大的,如红色框区域,然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。但是悲剧的是,操作区域本身却无法操作了,直接被无视掉了。不过不用担心,我们可以给里面的元素重新设置为 pointer-events:auto,当然,只给需要操作的元素区域设置。转载 2015-10-26 20:05:36 · 494 阅读 · 0 评论 -
CSS: body{font-size: 62.5%;}为什么???
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置,为什么偏偏是62.5%呢?这主要是为了方便em与px相互转换,em的初始值为1em=16px,显然这样的话,如1.2em则=19.2px,可是我们在设置的时候很少看见19.2px这样表示的大小,也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时,1em则=16px*6转载 2015-10-25 19:28:52 · 750 阅读 · 0 评论 -
CSS3 Gradient
http://www.w3cplus.com/content/css3-gradientCSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用,为了不被淘汰,我也开始向CSS3进发,争取跟上技术的前沿。从现在开始我会转载 2015-12-01 23:38:44 · 296 阅读 · 0 评论