版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35770417/article/details/77774717
1.ie6最小高度问题：
font-size:0;（配合line-height:0; overflow:hidden; 来使用）
当页面的内容超出时，高度自适应；当页面内容小于某个高度时，显示的是最小高度；
2.对盖不住情况：
父元素有相对定位属性，父元素溢出隐藏失效，这种问题的解决办法：给父元素也添加相对定位属性；
3.png格式的图片在IE6下不透明的问题：解决办法
（1）图片处理成png8格式（png8格式每个浏览器都支持，只是显示效果不好）；
（2）值针对IE6改变图片格式（将图片格式处理成png8或者GIF）；
（3）用滤镜来解决（对性能影响较大，处理png较少时可以使用）；
（4）JS方法：图片较多时用，既能处理图片，又能处理背景图；
4.IE条件注释语句：（只有IE6可以加载，其他都不加载了）
[ if IE 6 ]
这是IE6
[ end if ]
<!--[ if gt IE 6 ]-->这是大于IE6的版本<!--[ end if ]-->
gt （great than）大于
gte （great than or equal）大于等于
lt （less than）小于
lte （less than or equal）小于等于
! 非
5.li内出现浮动元素时产生间隙问题
vertical-align：top/middle/bottom;
6.合理运用注释，不要滥用注释；
7.长单词及较长的URL时：
word-break：break-all；在词内换行（把单词分成两截，分行显示）
8.鼠标样式:
cursor:pointer;（让鼠标是小手的样式）
9.有关a链接的四种状态
a:link 未访问时
a:visited 访问过后
a:hover 鼠标滑过
a:active 激活时
这四个顺序是固定的：l,v,h,a
IE6及一下浏览器除a以外的标签，hover不兼容；
10.css精灵/雪碧图
.
box{width:200px;height:200px
;background:
url(img/pic3.png) -100px -200px;}
11.！important
可以提升样式优先级，优先级最高；但在IE6下会失效；
12.滑动门（圆角的框：用PS来切图，左边一小块，右边一小块，中间一小块）
13.自适应圆角（宽度，高度都自适应，用PS来切图，切下来两个让他来平铺）
圆角做出来的方法：一个大的div里面包含3个小的div，一个小圆角div在左边，一个竖条div在右边，一个小圆角div在右边；用PS切图背景平铺（repeat）
14.整站相关
在head标签内部添加：
<link href="favicon.icon" rel="icon"/>
href 被链接文档的位置
rel 当前文档与被链接文档之间的关系
http://www.bitbug.net/ 在线icon图标转换；
为搜索引擎定义关键字（keywords）
<meta name="keywords" content="HTML/css/JS">
为网页定义描述（description）内容
<meta name="description" content="WEB前端开发，网页制作">
能用padding写出来的就不要用定位写，先把样式（正常文档流）写好在写定位；
15.flash透明处理
<param name="wmode" value="trasparent"/><!--窗口模式为透明-->
16.专题的写法：写之前先建好文件夹，
（1）一个文件夹用来放css文件夹，共用public.css，首页index.css，内页content.css;
public.css用来放重置样式&可以共用的样式；
简介：intro；列表页：list；联系我们：content；
（2）一个文件夹用来放图片，
（3）一个用来放HTML文档：
17.制作前分析：
先把li写完在处理细节；
先写完宽高，在用行高写或者是用padding写；
先考虑好大块的布局，在写小的布局，
一块写完是一块，一块布局完就在布局另一块，块的下一级要用缩进；
18.样式表规划：
参考设计稿，有多少相似部分；
19.图片格式&页面优化
图片是色彩丰富，产品图，照片，就用jpg格式的图片；
图片色彩单一，透明：就用PNG8，PNG24，GIF格式的图片；
存储为WEB所用格式，（调图片品质）
小图片的图片品质一般小于80，
图片拼合：先切出来，把两个小的图标放到一张图上；
20.banner图处理：
专题一般都是静态的，选截背景图，中间填白，再切成两个，填上动态的，专题要求不高；
大页面划分成5份，以图片的形式一条一条的插进来，内容整个用定位写，定位不占文档流；
21.JS预留：
在写布局时，要考虑到后期加JS，
22.让块元素在一行显示用到的方法：
display：inline；（IE6,7加*，星号是专门来针对IE的）
display：inline-block；（IE6.7 存在兼容问题）
浮动（float）；
23.凡是IE6.7高度不兼容，都要加：*zoom：1；
24.漂浮在正常文档流之上的都要用到定位;
25.text-align:center;对内联块管用；（就是可以居中）
26.隐藏元素：
display：none；opacity：0；
或者是：visibility：hidden；
27.过渡
transtion:1s;从一种状态过渡到另外一种状态要用1s钟的时间；
28.宽高属性
max-width:
min-width:
min-height:
max-height:
29.自由缩放：（要配合overflow：auto；来使用）
resize:both;水平和垂直方向都允许缩放；
horizontal；只允许水平方向缩放
vertical；只允许垂直方向缩放
none;不允许缩放
30.倒影（倒影的图像不占文档流）
box-reflect：above；倒影在上面
below；倒影在下面
left；倒影在左边
right；倒影在右边
31.多栏布局
column-width：栏目宽度；
column-count：分栏个数；
column-gap：栏目间隔；
column-rule：1px solid red;列与列之间的边框
32.响应式布局：媒体查询（针对不同尺寸显示不同的样式）
（1）要用link把样式表给链接进来，然后在样式表里编辑样式
<link href="max600.css" rel="stylesheet" type="text/css" media=" screen and (min-width:600px)"/>
*注意不要忘记在and后加小括号；
（2）移动端需要设置一下meta标签：
<meta neme="viewport" content="width=device-width,inital-scale=1,user-scalable=no"/>
viewport:视口；
width：指定虚拟窗口的屏幕宽度大小；
height：指定虚拟窗口的屏幕高度大小；
inital-scale：指定初始化缩放比例；
maxmum-scale:指定允许用户缩放的最大比例；
minmum-scale:指定允许用户缩放的最大比例；
user-scalable：指定是否允许手动缩放；
=no;禁止用户自由缩放；
默认值为yes;
（3）在移动端：
子元素的margin和padding值的百分比是相对于父元素的百分比来确定的；
*相对单位：em;相对于父元素文字大小
rem;相对于根元素（HTML），浏览器默认的字体大小为16px;
那么，1rem=16px;若是在开始就定义：font-size：62.5%，那么
1rem=10px,转化成整十的数好计算；
*在移动端：宽度用百分比，细节用rem来处理，高度靠padding来，整体用百分比，细节用rem；
*在移动端
320÷设计稿的max-width（假设为720）=0.4，
33.有关透明：
opacity：0.5；IE不支持，在标准下，元素也跟着透明
filter：alpha（opacity=50）；IE背景透明，元素也跟着透明，标准不支持；
rgba（0,0,0,0.5）;标准支持，背景透明，文字不透明，IE9以下不支持，
*
rgba出现的问题，针对IE6+解决办法：用到css hack：\9;
eg:background:rgba(0,0,0,0.5);background:#000\9;
*
背景透明以文字解决办法：
（1）透明层与文字内容层分属于不同区块（元素）内：
一个负责背景透明，一个负责内容，然后通过定位（relative）让内容层显示在背景层之上；
（2）把透明背景当成png背景图片来处理
支持透明的图片格式：（png8，png24，GIF）；其中png24适合羽化过渡很多的图，GIF适合棱角分明的图；
问题：在IE6下png显示有问题；
配合png在IE6中兼容处理方法；
（3）标准：rgba
IE：①背景色配合filter；
②内容元素加position：relative；