CSS
1.css外联
正确写法：<link rel="stylesheet" href="css/style.css" />
<style type="text/css"> @import url(xxx.css); </style>
2.w3c盒子模型与IE盒子模型
W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
IE 盒子模型的范围包括 margin、border、padding、content， content 部分包含了 border 和 padding。
3.padding与margin
大盒子用padding，小盒子用margin（优先使用padding）。
4.网页字体设置
默认字体：字体大小(仅供参考，12px或者14px)、行高(18px)（优先使用无单位，无单位的会继承后再计算，值是动态的，有单位的会算出来然后继承，值是固定的）、颜色（#333或者#666,不要使用纯黑色，UI设计的原因）。
正确写法： font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
（适合pc与moblie,Tahoma针对windows平台，Helvetica针对mac平台，Arial通用性字体，sans-serif针对liunx平台，其实是指无衬线字体 ）。
PS：微软雅黑字体是有版权的，是微软的，所以不建议使用该字体（看需求吧，不过这种字体比较像黑体，比较好看一些）。
调用微软雅黑字体是不会涉及版权的，如：font-family：microsoft yahei；
使用微软雅黑字体是涉及版权的，如：@font-face {
font-family: yahei;
src: url(yahei.woff);
}
中文网页不设置字体，默认是宋体。
建议设置字体使用英文，不使用中文。正确写法：body{font-family:"microsoft yahei";}
body{font-family: "微软雅黑";}
补充：font-style属性 oblique 与 italic区别
italic：使用斜体的文字。
oblique：将没有斜体字进行倾斜。
字体要设置宋体，字体大小建议14px。
字体颜色不要纯黑色。
字体尽可能用em。
5.css中border：0与border：none区别
boder：0 ------- border-width: 0; （border-width的简写）
border：none ------- border-style: none; （border-style的简写）
PS：表面效果差不多，但如果配合多个css的样式的话可能会有差异。
boder：none的渲染效果要比boder：0渲染效果要快些。
border:0 兼容所有浏览器。
6.display与visibility隐藏元素。
display:none; 浏览器不会分配该元素的空间，不占文档流。
visibility:hidden; 浏览器会分配该元素的空间，占文档流。
7.display-inline有空格
(1)css添加负margin
(2)html去掉闭合(不考虑IE兼容)
<a href="#!">aa
<a href="#!">bb
<a href="#!">cc
8.css中的居中方法
margin：0 auto; （ 需要居中的盒子加宽度值）。
text-align: center;
PS：移动端使用Flexbox布局居中。
PC端使用绝对布局居中。
9.css选择器类型
通配选择器
* （选择所有标签元素）
标签选择器
html （选择<html>标签元素）
id选择器
#user （选择id为user 元素）
PS：id具有唯一性。
class选择器
.user （选择class为user的所有元素）
关系选择器
div,p （选择所有 <div> 元素和所有 <p> 元素）
div p （选择 <div> 元素内部的所有 <p> 元素）
div>p （选择父元素为 <div> 元素的所有 <p> 元素）
div+p （选择紧接在 <div> 元素之后的所有 <p> 元素）
属性选择器
element[name="user"] （选择其 name 属性值为user的element元素）
element[src^="https"] （选择其 src 属性值以 "https" 开头的每个element元素）
伪类选择器
element:hover （设置在此元素的划过）
element:first-child（设置在此元素出现第一个子元素）
伪类对象选择器
element:before （设置在此对象前面的内容）
element:after （设置在此对象后面的内容）
10.css中的选择器优先级
选择器优先级：id>class>html>*
PS:内联样式于！important哪个优先级最高
！important是最高的
11.css选择器之间有无空格区别
如：.class1.class2 <div class="class1 class2"></div>
.class1 .class2 <div class="class1"><div class="class2"></div></div>
12.css中的权重与css样式的行数
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
PS:样式之间冲突问题:一般行数在后面样式的会覆盖前面的行数样式。
13.盒子并排排放思路或者是不同浏览器布局排放盒子掉位
参考bootstrap框架的盒子排放做法，大盒子使用margin负数，小盒子使用padding正数来对其每一个盒子。
14.css颜色代码选择
优先使用十六进制颜色与RGB颜色（兼容旧版本），其次使用RGBA 颜色值，HSL 颜色，HSLA 颜色（现代浏览器支持，支持透明）。
15.css代码简写
颜色代码简写，paddin、margin、 font、border、background属性简写成一行。
16.不要使用css表达式
影响浏览器性能，除非需要兼容IE旧版本。
17.单位em与rem使用
一般应用在移动端，移动端父元素要设置一个定值。
如：父元素body{font-size:16px;}
子元素p{font-size:1em}
em是相对单位，拥有相对大小属性，用于文字。
rem是css3的相对单位，拥有绝对大小与相对大小属性，用于设置长宽度，间距等。
18.css滤镜
png图片利用css filter变色，达到图片颜色切换效果。
19.css剪切
利用css clip-path生成不同规则的图案。（仅适用于chrome浏览器）
20.文本没有对齐
如：默认 xxxxxxxx 对齐 xxxxxxxx
xxxxxxxx xxxxxxxxxx
xxxxxxxxxx xxxxxxx
中文排版:添加text-align:justify;text-justify:inter-ideograph;
英文排版:添加text-align:justify;
21.css性能优化
css规则类越少越好。（尽量少的去对标签进行选择，而是用class）
如：(1) .nav {} (2) .nav{}
.nav-li{} .nav li{}
.nav-li-span{} .nav li span{}
PS：浏览器查看css 规则是从右到左，如 .class1 .class2{}
先找到class2，然后再找到class1。
请不要误认(2)就是所谓的css模块化。
22.合并上下边距问题。
<div style="width:100px; background:#930; height:100px; margin-bottom:10px;"></div>
<div style="width:100px; background:#f30; height:100px; margin-top:10px;"></div>
解决方法：加float、display、position:
如：<div style="width:100px; background:#930; height:100px; margin-bottom:10px;float:left;"></div>
<div style="clear:both;">
<div style="width:100px; background:#f30; height:100px; margin-top:10px;float:left;"></div>
23.左边固定，右边自适应。
左边固定宽度，右边使用margin-left。
24.浏览器窗口缩放，页面位置错位。
设置min-width与min-height，保证布局不错位。
25.svg与canvas区别
Canvas是使用JavaScript程序绘图(动态生成)。
SVG是可伸缩矢量图形 (Scalable Vector Graphics)，使用XML文档描述来绘图。
26.min-width/min-height与max-width/max-height用法
PC web页面使用max-width/max-height属性，适配小屏幕设备。
moblie web页面使用min-width/min-height属性，适配大屏幕设备。
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
