网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; } 行内元素也可以使用 Flex 布局。.box{ displa
admin 2017-08-02 CSS 767
骨灰级解决方案:.clear{clear:both;height:0;overflow:hidden;}上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。最优浮动闭合方案(这是我们推荐的):.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{*+height:1%;}用法很简单,在浮动元素的父云素上添加class=”demo
admin 2017-07-31 CSS 631
function scrollLis(){ var toTop = offs.top-$(window).scrollTop(); if(toTop==0||toTop 0){ if(!$('#fixed').hasClass('ab'))$('#fixed').addClass('ab'); }else{ $('#fixed').removeClass('ab'); } }它的调用就多了几句代码了,同样是放在层的后面,以ID标签fixed为名:var offs=$(&
admin 2017-05-28 CSS 969
在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。  当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS规范,这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突,使得网页的样子在某些
admin 2017-05-19 CSS 657
padding百分比来做 这里需要运用一个小技巧,padding用百分比做单位时是相对于容器的宽度来算的。 .wrapper{ position : relative; background: #ccc; width: 10%; padding-bottom : 20%; } .inner{ position : absolute; top : 0; left : 0; right : 0; bottom : 0; } /style div class="wrapper" div class="
admin 2017-05-05 CSS 713
STYLE .page_nav{height:20px;font-size:13px !important;color:#797979;text-align: center !important;} .page_nav ul li{ font-weight:bold; float:left; margin:0px 2px; list-style: none; font-size:13px; height:24px; min-width:20px; line-height: 24px; padding: 0px 2px !important; border:1px s
admin 2016-10-14 CSS 831
作者:phodal链接:https://zhuanlan.zhihu.com/p/20548041来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。Web本身就是跨平台的,这意味着这中间存在着无限的可能性。我是一名Web Developer,对于我来能用Web开发的事情就用Web来完成就好了——不需要编译,不需要等它编译完。我想到哪我就可以写到哪,我改到哪我就可以发生哪发生了变化。最近我在写Growth——一个帮助开发人员成长的应用,在近一个月的业余时间里,完成了这个应用的:移动应用版:Android、Windows Phone、iOS(等账号和上线)Web版桌面版
admin 2016-09-17 CSS 723
@Font-face目前浏览器的兼容性:Webkit/Safari(3.2+) TrueType/OpenType TT (.ttf) 、OpenType PS (.otf);Opera (10+) TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg);Internet Explorer 自ie4开始,支持EOT格式的字体文件;ie9支持WOFF;Firefox(3.5+) TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)Goo
admin 2016-09-08 CSS 788
宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB2312楷体_GB2312 KaiTi_GB2312宋体:SimSuncss中中文字体(font-family)的英文名称Mac OS的一些:华文细黑:STHeiti Light [STXihei]华文黑体:STHeiti华文楷体:STKaiti华文宋体:STSong华文仿宋:STFangsong儷黑
admin 2016-09-08 CSS 710
简单来说,磅是一个长度度量单位,如果把一英寸等分成72份,每一份就是1磅。这里需要强调的是,磅是个绝对物理单位,与显示设备无关。而像素呢?像素没有固定的大小,而是与分辨率相关,高分辨率的显示器像素就很小,如iphone视网膜屏上一个像素的大小要比普通LCD显示器的像素小很多。然而有些东西是不存在分辨率这个概念的,如单纯的位图图片,它的最小组成部分就是像素,本身也是通过每个像素的颜色值来定义的。把同样的图片显示在不同分辨率的显示器上,最终呈现出的大小是不同的。操作位图时,以像素位单位最精确合理,那么使用GD2库的时候,如何绘制大小为20像素的字呢?也就是多少磅才能等于20个像素呢?这必须通过分辨
admin 2015-12-17 CSS 881
子元素设置margin-top后,父元素跟随下移的问题 div p /p /div style div{ background: blue; width: 200px; height: 200px; } p{ background: red; width: 50px; height: 50px; margin-top: 30px; } /style div没有margin-top:30px,但是页面上显示的结果确是像margin-top应用到了div上一般,div下移而p没有。原因是当一个元素包含在另一个元素
admin 2015-10-21 CSS 768
以前只能使用其他的div把滚动条隐藏了,或者在一个小div中,放一个大div,模拟滚动。现在可以使用:::-webkit-scrollbar{ width:0px; }
admin 2015-10-16 CSS 753
随机推荐
WordPress 一键从HTTP转换到HTTPS
WordPress 语言文件
WordPress 数据库操作
WordPress 用户信息
Debian11 安装笔记1:编译安装Nginx、Naxsi 和 Njs
WordPress 分类添加自定义字段
Photoshop 使用插件支持 webp 格式的文件
CSS3 实现 Switch 开关