小知识笔记

导读

前天模仿名鞋网官网做了一个案例，今天在学习过程中了解到许多细节。我把这些小的细节记下来当作一次笔记。

笔记详情

1. img{display:block;} 目的是为了消除img默认的3px 的边距
2. 布局网站页面时，外围结构最好使用 id 命名，版心部分最好在穿上外套，不要使用padding值把内容撑开—–原因是因为在不同的浏览器有问题，而且在网页放大和缩小也会产生问题，在不同的屏幕下也存在问题。
   看图：
   这是我写的 由于使用padding 撑开产生的下面问题；
   1.出现横向滚动条（红线部分）
   
   2.页面缩放产生问题 屏幕分辨率问题和这个相似
   

正确做法：
包起来，里面的当作版心，外部的宽度100%，这样就解决上述问题

<div id="top-wrap">
            <div id="top"></div>
        </div>
        <!-----------------header--------------------------->
        <div id="header-wrap">
            <div id="header"></div>
        </div>

如图，即使界面缩放和不同分辨率下的屏幕，版心一直在中间

3.写代码 加注释很重要，无论是什么

<!--html注释 -->
/*------css注释-------*/

1. hr有默认的有边框

border: 0;/* 清除默认边框 */

图：没清边框的：

图：清边框的：

4.浮动和定位的东西可以设置宽高

css部分：
.a1{
                width:100px;
                height: 100px;
                border: 1px solid red;
            }
            .a2{
                float: left;
                width:100px;
                height: 100px;
                border: 1px solid red;
            }
html部分：
<a href="" class="a1">我是超链接a1</a>
<a href="" class="a2">我是超链接a2</a>

图：
a2有100px的宽高，a1没有。

5.logo部分用h1下包含一个a
<h1><a href="">logo</a></h1>
6.默认情况下 按钮有边框 清除方式 同4
7.边框重合时可以使用 margin:负值 处理
8.ul 有默认的padding-left: 40px; margin:16px 0;