网页的开始

5：盒模型
css 盒模型：
是网页布局的基石，从里到外包括：
内容区 ->鸡蛋
内填充（补白） ->泡沫
盒子边框（可选）->快递盒子
外边距 ->盒子外部的距离

padding的用法：
   1:padding是张在内容和盒子之间的，在盒子内部 。
   2:padding是为了调整 子元素在父元素里面的位置关系
   3:padding的特点：padding值会把盒子撑大。
   4:如果想让盒子保持原有大小，在原有的高和宽的基础上减去padding值的大小
   5：给单一方向设置padding值：
      padding-left/right/top/bottom:;
   6:padding  设置方法：
       padding:1个值   四周
       padding:2个值   上下  左右
       padding:3个值    上   左右  下
       padding:4个值    上做下右
    
    7:padding不能设置负值
    8:padding不会对背景图造成影响。
    9:如果一个盒子没有设置固定的宽和高，添加padding的不用减的。

margin:
1:margin是长在元素之外的。
2:margin控制的是同级元素之间的位置关系
3：margin不会对盒子本身的宽高造成影响。
4：给单一方向添加margin值
margin-left/right/bottom/top:;
5:
margin:1个值 四周
margin:2个值 上下 左右
margin:3个值 上 左右 下
margin:4个值 上做下右

    6:margin可以设置负值。
    7:margin常出现的BUG:
         a:当父元素和子元素都没有设置浮动的情况下，如果
           给第一个子元素添加maigin-top 会错误的把margn-top加在父元素上
        b:上下相邻两个元素之间的margin值，不会叠加，按照最大值区设置

    8：margin：0 auto；让当前元素在父元素之间左右居中。

---

开始写网页

***：
网页规化：
思路
规划：
元素命名：
id划分外围结构-> id选用驼峰式命名法、或者是语义话news/case
版心的命名 -> 连字符命名法 news-con
内部内容块的命名->下划线 new_left/news_right

    css外部样示表：
        1：每个页面都需要属于自己的样示表。
        2：一个网站，都拥有一个公共样示表。
        3：重置样式的样示表。（清除所有默认样式）
 注:如果版心两侧没有颜色平布可以直接去写版心

1：在css文件夹里创建三个文件：
reset.css index.css public.css

reset.css默认
@charset “utf-8”;
/* 重置样式 /
/ 把所有标签默认的margin padding 清除 */
{
margin:0;
padding:0;
}
/ body /
body{
font-family: “微软雅黑”;
font-size:16px;
}
/ 列表符号 /
ul,ol,li{
list-style:none;
}
/ b，strong的加粗清除 /
b,strong{
font-weight:normal;
}
/ em i 清除倾斜 /
em,i{
font-style:normal;
}
/ u a的下划线 /
a,u{
text-decoration: none;
}
/ h1 - h6 清除默认的加粗，清除默认的字号 /
h1,h2,h3,h4,h5,h6{
font-weight: normal;
font-size: 16px;
}
/ 清除input聚焦时候的蓝色边框 */
input{
outline: none;