HTML5+CSS

一、浮动
    1.浮动      float
    功能：让元素标签能够横向排列。
    属性值：
      left      左浮动
      right     右浮动
    特点：
      浮动元素会影响后边的同级未浮动元素，所以建议——要浮动，同级都浮动，要不浮动都别浮动。
      浮动元素，在父元素中放不下的时候，会进行换行。
      在使用浮动时，记得给父元素规定高度,不然会触发高度塌陷。
      不独占一行的标签，写完浮动后也能加宽高了。（下周二讲元素类型时讲解原理）
二、PS
    拖拽图片到ps图标打开图片
    ctrl+r调出标尺 右键点击标尺，将单位设置为px像素单位
    ctrl+ 放大图片    ctrl- 缩小图片
    左侧工具栏第二个矩形选框工具可以量取尺寸大小
    从标尺上拉出一条线可以用来做辅助线

    切图     
      1.用矩形选择框拉取需要的图片
    2.ctrl c  复制
    3.ctrl n  新建图片
    4.ctrl v  粘贴图片
    5.ctrl s  保存图片，选择jpg格式保存在文件夹内
三、盒模型
    概念：    盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。
            css定义所有的元素都可以拥有像盒子一样的外形和平面空间.
    盒模型的组成：
        外边界/外边距(margin)、边框(border)、补白/内填充(padding)、内容区（width和height）。
四、padding 内填充
    用来确认内容或者子元素到达边界之间的距离。
        使用
        给父元素添加padding，来调整子元素或者内容在他里边的位置。
    原理
        向内挤压空间为了保证总体大小不变，需要在父元素上减去对应的padding值。
    单一方向填充
      padding-top         上填充
      padding-left        左填充
      padding-bottom      下填充
      padding-right       右填充
    padding的多参数应用
      padding:30px；               四个方向内填充30px
    padding:10px 30px;         上下  填充10px 左右  填充30px
    padding:10px 20px 30px        上  填充10px  左右  填充20px  下  填充30px
五、margin 外边距
    用来确认两个元素之间的距离。
    注意事项：
          margin上下会重叠，左右会相加。

          父元素下边的第一个子元素添加margin-top，这个margin-top会生效到父元素身上。

           给父元素添加：overflow:hidden;

        给父元素添加padding-top解决此问题，但是要记得给父元素总体大小减去这个padding值。
        
        margin控制元素水平居中   margin:0 auto;