CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你小子有用没用，通通给我脱了那身衣服，凭什么你 body 出生就穿一圈 margin，凭什么你姓 h 的比别人吃得胖，凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动，把人家全拍扁了。看似是众生平等了，实则是浪费了资源又占不到便宜，有求于人家的时候还得贱贱地给加回去，实在需要人家的默认样式了怎么办？人家锅都扔炉子里烧了，自己看着办吧。
Normalize.css 是改良派。他们提倡，各个元素都有其存在的道理，简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间，那就改掉。士农工商，
CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
实现方法：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果如图：
但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。
接下来重点说一说多行文本溢出显示省略号，如下。
实现方法：
display: -webkit-box;
-webkit
那么CSS中的1px是什么？浏览器是怎么渲染它的？网页在一个叫viewport的东西里渲染，可以理解为画布，画布被分成 N x M 个小方格，1个CSS像素，就是其中的一个小方格。一，viewport又是什么？网页在viewport上渲染，可以想像在PS上画东西时，上面也有个画布，这个画布分割了 N x M 个方格，N是它的宽度，M是它的高度。宽高都可以任意设置，所以说viewport是虚拟的。假设设置宽度是400，那么浏览器显示区域的横向将被分为400份，CSS的1px占的宽度就是显示区域的 1/400。viewport值不一样时，对页面元素宽度的影响，比如一个头像宽度是50px。 当vie
在一个网页中，如果有一个弹出的层是可以上下滚动的。 但是弹出层滚动到底部时，底层也会跟着滚动。
这其实是手机浏览器一个非常“顽固”的也似乎难以解决默认事件。
我之前也遇到过，最初也是各种阻止默认事件啊，PC有用，但是移动端一点用也没有。
后来是加了
html,body{ height:100%, overflow:hidden }
但是这样做会导致内容返回顶部。
后来研究了下天猫，他们也没有很好的解决，有的地方底部仍然可以滑动。
研究过苏宁易购，他们做的比较有意思，先记录下当前的位置，虽然底部内容也是可以滑动的，当弹出层关闭后，再返回那个位置。当然他们的
GitHub.com 现在不再使用字体来输出图标了。我们把代码库中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显，但你马上就能体会到 SVG 图标的优点。Octicon 上的对比切换到 SVG 以后，图标会作为图片渲染而非文字，这使其在任何分辨率下都能很好地在各种像素值下显示。可以比较一下左侧放大后的字体版本和右侧清晰的 SVG 版本。为何使用 SVG？图标字体渲染问题图标字体从来只是一种 hack。我们之前使用一个自定义字体，并将图标作为 Unicode 符号。这样图标字体就可以通过打包后的 CSS 来引入。只要简单地在任意元素上添加一个 class，图标就
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：
网页布局（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