网页设计注意事项，永不停更。--viewport，响应式,自适应，矢量图和位图

1.心中始终要对盒子模型有个清晰的印象，我们所设置的width，height，以及在里面放别的元素，其实都是在操作content部分，外面还有padding，border和margin。

2.margin和padding都是以就近父容器的宽来计算百分比的，所以宽变了，高不变，你原来元素设置的位置就会错位。

3.去关注下box-sizing这个属性，它决定了以什么样的方式去绘制一个box盒子。

4.我们要做到的是对网页有的元素进行一个合理的布局放置，让整体看起来舒服，用起来方便。

5.一个网页的宽度十分要注意，而一个网页的高度是不是很需要注意的，因为我们可以很自然的习惯往下滑，但是贼tm讨厌还要加上左右滑。

6.宽度永远不要用固定宽度，高度视具体情况而定。

7.要为移动端和pc端分别准备一份样式，然后根据屏幕自动加载。自适应就是根据探测到的显示屏幕性质自动地去加载需要给于CSS样式。

8.尽可能的让元素浮动起来，这样就算容纳不下了，也不会出现水平滚动条。

9.字体要用em，不要用px，因为如果body中的字体大小change了,那么整体的字体会自动的根据原来以适合的倍数放大缩小。

10.学习下一些动态样式语言，更好自动地去设置需要的样式。

11.图片的大小控制，不要设置固定大小，根据需要去设置百分比。还有就是图片的失真问题，最好能同一图片的不同分辨率版本。

12.再强调一遍终极目标：动态为不同大小的显示设备提供最佳的样式。

13.我们平时能看到的网页大部分是哪些东西--》字，图片，板块布局。要特别注意这3个东西的适应性。

14.float的元素附近只要不是文字，它就会脱离文档流，其他元素可以占据它的位子，而附近环绕的是文字时，相对文字来说，float元素没有脱离文本流（相对文字来说），所以会环绕效果。

15.margin-top和margin-bottom千万谨慎使用，如果想要把一个元素里的内容固定在某个位置，其实已经涉及到了固定定位。这样的话，要用absolute。而用absolute，请一定要配套用relative，把relative设置在absolute的父元素上，但是不要去设置上下左右迁移，即让它保持原位，而relative也没有脱离文档流，所以这样absolute就能比较友好的适应页面布局。

16.设置absolute属性时，

　　①：没有设置偏移（没有设置top,left等），它就在原来那个位置不动，但是后面有元素的话，后面的元素会占据它的位置，很好理解吗，因为它脱离文档流了嘛，后面的当它不存在。

　　②：设置了偏移为0（即：设置了top为0），它就会发生偏移，这个偏移规则自己百度，大部分人应该都知道，和设置了top：50px这类一样。

　　③：同时设置top和bottom先按top来。

　　④：其实默认的static时，也有top，bottom，left，right，只是它的量是由浏览器自己去根据高度什么计算出来排版的。

　　⑤：只是设置了position：absolute，不设置上下左右，它会脱离文档流，但是就在它本来应该在的那个位置（即：不设置position时的位置），一旦设置了left，bottom，top，right，它就会偏移。

　　⑥：absolute和relative这些的top是根据最近的relative或者absolute的父元素的高度来的，margin的top是根据父元素的宽度来的。

 17.自适应和响应式是有区别的，自己百度 。我喜欢响应式，因为自适应虽然适应了不同设备，但是却把内容一股脑的全给了用户，有时候内容多的页面在一个小屏幕的手机上，会显得很不舒服。而响应式在自适应的基础上，适当隐藏和排版一些内容。

18.使用em的时候，要注意嵌套，比如父div设置了font-size为2em，这样父div离得字都是2*默认大小，然后子那里又设置了font-size：2em，这样会让子div里的字体变成4em=2*2*默认大小，并不是你想象的2em。为了解决这个，就有了rem了。

19.响应式2个大哥--viewport和media query

20.viewport： 这个地方我都改改写写过万字了，思考了一天多，决定写一篇专门的，biong~传送门：http://www.cnblogs.com/horsen/p/6876107.html

21.media query：媒体查询--根据屏幕大小来动态加载样式（屏幕大小的数值指的是逻辑像素/设备独立像素，这里又可以不严谨的等同于CSS像素）

<style type="text/css">
.nav{
width:80%;height:100px;margin:0 auto;background:green;
}
@media only screen and (max-width:200px){
.nav{
width:100%;height:50px;background:gray;
}
}
</style>

权倾删：很多这样的教程：http://blog.csdn.net/macanfa/article/details/51628664

22.网页宽度应用百分比大家都知道，但是高度呢，一般不设置，或者响应设备区设置高度，谨慎使用百分比（在它的上层找不到固定高度的时候）

高度设置百分，其实是高度根据它的父元素（只会参照它的最近的一个父元素）的固定高度来算的，如果父元素高度也都是百分比（除非按下面设置下）或者没设置具体高度，那它跟没设置一样的。

其实总结下就是：设置百分比其实最后去渲染的时候，也是把百分比乘以父元素的高度数值来的，如果父元素的高度不能确定下来，那这个子元素的高度百分比不起作用，只会根据内容自动撑开。所以我们要从html这个第二根元素开始设置（最根部的元素我觉得是viewport，可以说是你的设备大小。）。

如果想让最初的元素高度可以用百分比，那就要加下下面这样式，就是把最根本部的元素作为百分比的依据。注意要html和body都设置（我说了只要最近父元素高度确定不下来里面的东西就起不来作用，如果只设置html，那body没设置100%，那就是根据body里的内容自动撑开，但是我们body里的元素使用百分比设置的呀，所以那些body里的百分比高度因为得不到一个确定的计算依据，所以就失效喽，小伙子难受不）。

html,body{
width:100%;
height: 100%;
border:none;
margin:0;
padding:0;
}

就是把高度百分比的依据对象交给了当前的PC端浏览器可视区域大小，注意哟，html和body也有border和margin哟。

想让这个最根的依据高度变为随机设备的显示屏：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

23.图片设置max-width的作用是什么？

首先你制作好的一张图，很清楚很舒服。这张图你做好的是100px*100px（图片本身的大小，这个px不等同于css的px也不是逻辑像素），你显示时给图片设置的width值才是等同于CSS设置的px。

然后你把这张图放到网页里去了，网页会随不同的设备进行收缩或者放大，如果一张图被放大了，可能就会失真。这个时候我们设置图片的max-width就能限制住图片随设备的变化而受到的影响。

max-width是当图片的宽度大于max width的设定值了以后，它就放弃width了，就启动max-width。

一般是设置为max-width：100%，让它原滋原味，光彩依旧。

这样设置了以后，随你设备的变化，网页什么的变化，我图片最大就是它原来那么大。就不会导致被放大而失真了。

24.图片：矢量图和位图。

矢量图：它是根据逻辑位置信息来画的，比如你要画条线，你先点了2个点，然后连起来。矢量图就记录下了你这些点之间的相对位置关系和信息，很不严谨地假设它就记下了线段2端的2个点的位置信息，然后随便你怎么放大，你只是视觉上把2个点之间的距离放大了，至于这个点所占的像素还是那么多不变的，只在乎逻辑位置。具体图片自己去想象，由点及线，由线及面。

位图：它就不一样了，比如100px的这条线段，它就是占了100个逻辑像素，你要是去放大到500px，那等于说让1个像素去占用5个像素的位置，那表现的就模糊了，特别是色彩绚丽交错的，你会看到本来一个点大小的颜色变成了一个大块。如果是矢量图，它本来线段2个点距离是5（不用像素来了，和像素无关的），你把它放大到10，那它就把两个点间的视觉距离变大，至于这个用多少个像素去填，还是和原来一样。不过也就是这个原因，往往不能用太绚丽交错的色彩。所以矢量图一定程度上没位图那样多彩丰富。

位图现在还是普遍的，我们要努力的只能是提高分辨率了。

去用下矢量图软件就会理解更多了。

下面是帮助理解的“16岁程序员相当歌手的画家.png”。

25.之前几年，网页设计时根据iphone5来设置最佳效果，因为什么，就是因为那个时候iphone5用的人多。现在呢动不动就是iphone6p起手，所以我们就要变变了，要试着去以iphone6的设计效果最佳。

我们搞IT的，永远不要固守成规，要根据具体的环境和对象去设计一些东西。

26.CSS取名字的时候可以取成：.nav-questionHeader

css类取名的时候会区分大小写，间隔符号就建议用这个“-”，不要去用"_"。

 27.注意了，“:link”这个选择器只对没有访问的链接有效，要是你在首页，网页上只要链接当前首页的链接写这个样式的都无效的。

28.没有设置宽和高的确会根据里面内容的宽和高来自动调整，但是如果里面元素时浮动的，或者是absolute，就是脱离了文档流，那就不会自动化了，因为它找不到这些个内容了，何谈得到他们的高宽。

29.想让ul里的li垂直居中，只要把一层层下来的高度都设为100%满高。

<div style='width:100%;height:50px;padding-left:100px;padding-right:100px;border:1px solid red;'>
        <ul style='list-style-type:none;height:100%;border:1px solid black;margin:0;padding:0;line-height:50px;'>
            <li style='height:100%;float:left;padding-left:20px;'>我呀</li>
            <li style='height:100%;float:left;padding-left:20px;'>nihao</li>
        </ul>
    </div>

 

 

 

--本人初学者，才疏学浅，有不对的地方望指正，谢谢大家。