CSS和HTML的基础知识复习，特别是html页面缩放不影响布局，第13点

最近写了一个网站遇到的问题及其解决的方法：

① CSS对界面进行初始化的代码，重置布局

 

* {
    padding: 0px;
    margin: 0px;
}

---

② 对div背景和字体设置颜色（有时候犯糊涂）：

/*
   对字体设置颜色
*/

color:#000000;

/*
对背景设置颜色
*/

background-color:blue;

---

③ 绝对定位 absulote

/*
绝对定位的图片或者是背景规则是：
    div的区域内以左上角的定位为基准
*/

position:absulote;

以下是在图片上添加一层模糊背景色（黑色），为了测试设置的大小与图片不同

 

---

④ z-index属性的使用，代表2个或者2个以上有层叠的时候，优先级（z-index的值越大）越高，谁就显示在层叠的最上面

 

---

⑤ 关于top，margin-top 的区别：

• top是相对于body（真个最大的div，整个界面）而言的。right,bottom,left也是一样。
• margin-top是针对当前位置的移动，margin-left,margin-right,margin-bottom也是一样

---

⑥ 关于margin-top,margin-left,margin-right,margin-bottom，值为负数的时候的含义

• margin-top = 2px表示，元素当前位置离当前div上方的距离是2px，margin-top = -2px,表示元素往上移动2px的距离
• margin-left = -3px,表示元素向左移动3px的距离，同理另外两种情况同上

---

⑦ 关于两个div重叠

• 使用对整个body设置位置的top,left,right,bottom等对元素镇通过整体进行绝对定位
• 然后对当前元素的位置再通过margin-top等进行定位

---

⑧ 关于清除浮动

为什么要清除浮动呢？因为临近的div的布局会影响到下一个布局，清除之前的div的布局，重新设置下一个div的布局

 

直接在css中.clear{clear:both}，清除浮动

---

⑨ 当有相同的元素需要设置时候，可以采用这种方式

***  + .common就可以了

---

⑩ 当字标签的元素有重复的设置时候，在父标签中设置即可

---

11. 关于列表dl ,dt , dd

---

12. 一些符号的引用，列入商标，版权等

---

13.  html页面缩放但是不影响布局

---

这个我在复习前端界面的时候遇到的，希望对大家有帮助。如有异议，欢迎留言交流！