4盒模型2布局方式

• 盒模型
  1. 内容框
     width height
     overflow:visible/hidden/scroll/auto;
  2. 边框
     1. 边框实现
     2. 单边框及三角标实现
     3. 轮廓线
        属性：outline
        取值：width style color;(同border)
        常用：取消输入框焦点状态自带的轮廓线
        input:focus{outline:none}
        区别：轮廓线不占位，边框实际占位
     4. 边框圆角
        属性：border-radius
        取值：像素值或百分比，设置圆角半径
        使用：像素值用于设置圆角效果，百分比可以改变元素的显示形状（50%，改为正圆或椭圆）
     5. 盒阴影(了解)
        属性：box-shadow
        取值：offsetX offsetY blur (spread) color;
        使用：
        1.浏览器窗口和元素自身都可以构建坐标系，一律以左上角为原点，向右向下为X轴和Y轴的正方向。offsetX/offsetY用于设置阴影的偏移距离，正值代表正方向，负值对应负方向
        2.属性值blur用于设置阴影的模糊程度，值越大越模糊
        3.spread选填，设置阴影的延伸距离
        4.color设置阴影 颜色，默认黑色
  3. 内边距
     作用：调整内容框与边框之间的距离
     属性：padding
     取值：像素值,可取1/2/3/4个值
     单方向内边距：
     padding-top
     padding-right
     padding-bottom
     padding-left
     只取一个值
     默认带有内边距的元素：ul,ol,input,button
  4. 外边距
     作用：调整元素边框与边框之间的距离
     属性：margin
     取值：像素值，取值规律同padding
     特殊取值：
     1. 左右自动外边距 auto
     2. 外边距取负值，可以对元素位置进行微调
        单方向外边距:
        margin-top
        margin-right
        margin-bottom
        margin-left
        外边距合并：
        1. 垂直方向
           1. 子元素的margin-top作用于父元素上
              解决：为父元素添加顶部边框或为父元素添加顶部内边距padding-top:0.1px;
           2. 同时设置垂直方向上的外边距，取最大值
        2. 水平方向
           1. 行内元素对盒模型的属性不完全支持，不支持width/height,不支持垂直方向上的边距
           2. 水平方向上外边距叠加显示
              清除元素的默认边距：
              body,h1,h2,h3,h4,h5,h6,p,ul,ol{
              margin:0;
              padding:0;
              /清除列表的项目符号/
              list-style:none;
              }
              5.盒模型计算
              属性：box-sizing
              作用：调整元素盒模型的计算方式
              取值：content-box/border-box
              1）大部分元素在文档中的实际占位，由盒模型相关的属性累加计算。指定的width/height设置的是内容框的大小(content-box)
              2）按钮在文档中的实际占位，由width/height + margin计算得到。指定的width/height设置的是包含边框在内的区域大小(border-box)
              作业：模拟百度搜索框，输入框50050 按钮15050
• 布局方式
  1. 标准流布局/文档流/静态流
     默认的布局方式，按照元素类型和代码书写顺序，从上到下，从左至右依次显示
  2. 浮动布局
     属性：float
     取值：left/right
     特点：
     1. 元素设置浮动，会按照浮动方向，停靠在其他元素的边缘。多个元素同时浮动，会依次停靠在前一个元素的边缘。
     2. 浮动元素会从它在文档中的原始位置脱离文档流，表现为悬浮在父元素上方，在文档中不占位，后面正常的元素会向前占位。如果所有的子元素都浮动，父元素的高度为0.
     3. 块元素设置浮动之后，尺寸由内容决定；行内元素设置浮动，就可以设置宽高了。
• 作业：
  • 模拟百度导航栏（用列表实现）