网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{
display: flex;
}
行内元素也可以使用 Flex 布局。.box{
displa
骨灰级解决方案：.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
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=$(&
在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。 当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些
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
作者：phodal链接：https://zhuanlan.zhihu.com/p/20548041来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。Web本身就是跨平台的，这意味着这中间存在着无限的可能性。我是一名Web Developer，对于我来能用Web开发的事情就用Web来完成就好了——不需要编译，不需要等它编译完。我想到哪我就可以写到哪，我改到哪我就可以发生哪发生了变化。最近我在写Growth——一个帮助开发人员成长的应用，在近一个月的业余时间里，完成了这个应用的：移动应用版：Android、Windows Phone、iOS（等账号和上线）Web版桌面版
@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
宋体 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儷黑
简单来说，磅是一个长度度量单位，如果把一英寸等分成72份，每一份就是1磅。这里需要强调的是，磅是个绝对物理单位，与显示设备无关。而像素呢？像素没有固定的大小，而是与分辨率相关，高分辨率的显示器像素就很小，如iphone视网膜屏上一个像素的大小要比普通LCD显示器的像素小很多。然而有些东西是不存在分辨率这个概念的，如单纯的位图图片，它的最小组成部分就是像素，本身也是通过每个像素的颜色值来定义的。把同样的图片显示在不同分辨率的显示器上，最终呈现出的大小是不同的。操作位图时，以像素位单位最精确合理，那么使用GD2库的时候，如何绘制大小为20像素的字呢？也就是多少磅才能等于20个像素呢？这必须通过分辨
子元素设置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没有。原因是当一个元素包含在另一个元素
以前只能使用其他的div把滚动条隐藏了，或者在一个小div中，放一个大div，模拟滚动。现在可以使用：::-webkit-scrollbar{
width:0px;
}
1 用utf8格式， 需要 双引号“”替换为单引号，而且采用url encode编码，例如# 替换为 %23，background-image: url('data:image/svg+xml;utf8, svg t="1656040038219" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3009" width="200" height="200" path d="M512 234.666667c131.946667 ...67 77.482667