周总结：二

添加浮动的盒子是不占据空间的

• 浮动原理
• 只要子元素有浮动，父元素必须有高度。负责==否则会出现高度塌陷
• 只要子元素有浮动，尽量保证浮动元素都有父元素存在

边框 ：

• a: 默认情况下边框是长在元素宽高之外。

• b: border:10px solid blue; ( 复合式写法 )

       属性拆分：
       border-width:   边框大小
       border-color:   边框颜色
       border-style:   边框类型 
               （ solid 实线 
                   dashed 虚线
                   dotted 点状线
                   double  双线
                   none 没有线条 ）
  	单独一个方向设置边框：
       border-left:10px solid red;
       border-right:10px solid red;
       border-bottom:10px solid red;
       border-top:10px solid red;
       
   	border-width/color/style : 属性值：
               1个值： 四周都添加边框
               2个值： 上下    左右
               3个值：  上    左右    下
               4个值：  上 右 下 左
   用边框画三角形：
           transparent  透明
  

盒模型：
网页布局的基石，从盒子的内部到盒子的外围：
内容（图片、文本、视频、小盒子…）
内填充（补白） 【相当于盒子里面的泡沫】
盒子本身（border）
外边距

盒模型具体的css属性：
    内填充：padding属性
    外边距：margin属性
    
需求1：
    让文本和盒子的周围产生间距
    给盒子添加泡沫（padding）

padding的用法：
    1：padding是长在 内容 和 盒子之间的距离
    2：padding是长在盒子里面的。
    3：padding的作用：主要控制子元素在盒子内部的位置关系。
    4：padding是添加在父元素上面。
    5: padding可以把盒子撑大！！
        如果想让盒子保持原有的大小，需要在宽高的基础上减掉padding !!
        注：如果一个盒子没有固定大小（被内容撑开），添加padding 不用减。
    6：单一方向上设置padding值：
        padding-left:
        padding-right:
        padding-top:
        padding-bottom:
    7:padding的设置方法：
        padding:一个值   四周都padding
        padding:两个值   上下    左右
        padding:三个值   上  左右  下
        padding:四个值   上右下左
    8：padding不会对背景图的位置造成影响。
    9：padding不能为负值。

需求2：
    让两个盒子（同级的盒子）之间，产生一定距离。
    盒子的周围产生间距。

margin的用法：
    1:margin 是长在盒子外围的。
    2：margin 控制当前元素 与 其他同级元素的位置关系。
    3：margin不会改变盒子内部的大小。
    4：给元素的单一一个方向设置margin值
        margin-right:
        margin-left:
        margin-top:
        margin-bottom:

    5:margin设置方法：
        margin:一个值   四周
        margin:两个值   上下   左右
        margin:三个值   上  左右  下
        margin:四个值   上右下左
    6:margin是可以设置负值的！

    7:margin常出现的BUG:
        A: 同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置。
        B: 当父元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top: 会错误的把margin-top:添加在父元素上面

input按钮有边框：在input外围套一个元素，把边框写在外围元素上面
项目前期规划：
1：页面的版心 1002px;
2: 命名规范：
外围结构ID名称：
a : 板块内容
b : 驼峰式命名法 newsLeft

        版心区域：
            连字符名法：
                news-wrap

        内部内容块命名”
            下划线：
                news_con

  		css样式表！
            a: 外部样式表！
            b: 先写一套重置样式。（把所有默认的样式清除！）
            c: 在创建一个属于当前页面自己的样式！

white-space: 空白空间的处理
normal：默认值，多余空白会被浏览器忽略只保留一个；
pre：空白会被浏览器保留；
pre-wrap：保留一部分空白符序列，但是正常的进行换行；
pre-line:合并空白符序列，但是保留换行符；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止;
overflow: 溢出属性
visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承overflow属性的值。
text-overflow 文本溢出是否显示省略号
clip 不显示
ellipsis 显示省略号

拓展：
overflow-x : hidden;
overflow-y : hidden;

单行文本溢出省略号显示：
    1：不让文本换行：
        white-space:nowrap;
    2: 让超出的文本隐藏
        overflow:hidden;
    3: 超出的文本省略号显示
        text-overflow:ellpsis; 
    4：宽度的设置！！！
        width

元素类型：
根据css盒模型的显示分类：
三类的划分1:
块状元素
内联元素
内联块状元素 (争议点：内联块状元素自己属于一类 || 属于内联一类)（css 2.1）

    三类的划分2:
        块状元素
        内联元素
        可变元素      <button>按钮</button>

各种元素类型的特点：
    一：块状元素特点（默认情况）：
        1：块状元素，在页面中以矩形区域显示！
        2：块状元素，能直接添加宽高！
        3：块状元素，在页面显示，自上而下排列，独占一行。
        4：块状元素，一般座位内容或者其他元素的容器！

    二：内联元素特点（默认情况下）：
        1：内联元素，不能设置大小，由内容撑开，最小单位也是矩形
        2：内联元素，在一行内逐个显示
        3：内联元素也支持盒模型的规则，但是个别属性不能正确显示,
            例如（padding-top/bottom   margin-top/bottom）


    三：可变元素：  button
        根据布局流的规则，生成块或者是内联。

常见的块状元素：
    div -最常用的块级元素
    dl - 和dt-dd 搭配使用的块级元素
    form - 交互表单
    h1 -h6- 大标题
    hr - 水平分隔线
    ol – 有序列表
    p - 段落
    ul - 无序列表
    li
    fieldset - 表单字段集
    colgroup-col - 表单列分组元素
    table-tr-td  表格及行-单元格

    
常见的内联元素：
    a –超链接（锚点）                               
    b - 粗体(不推荐) 
    br - 换行                             
    i - 斜体
    em - 强调                             
    img - 图片                         
    input - 输入框               
    label - 表单标签                  
    span - 常用内联容器，定义文本内区块
    strong - 粗体强调
    sub - 下标   
    sup - 上标
    textarea - 多行文本输入框
    u - 下划线
    select - 项目选择  

元素类型的转换：display属性！

display属性:
    检索或者设置元素所生成的盒模型类型！
    
display的属性值：
    a: display:block
        作用：让元素转成块状元素，拥有块状元素的特点
        大部分块状元素的display的默认值：block

    b: display:inline
        作用：让元素转成内联元素。
        大部分内联元素的display的默认值 inline

在内联元素这一类里面：有个特殊的元素 inline-block;

行内块元素特点：
    a: 能添加大小
    b；在一行内逐个排列
    c: 可以支持vertical-align属性。

input    img

vertical-align  垂直对齐属性
    属性值：
        top
        middle
        bottom
        baseline  ( 基线对齐 )

定位：
定位属性：position
作用：检索或者设置元素的定位方式（改变元素位置的属性）

定位的步骤：
    1：给元素添加position属性，证明该元素要做位置的变化。
    2：确定参照物！（通过position的属性值来确定：static\absolute\relative\fixed\sticky）
    3: 确定坐标 left  right  top  bottom

position的属性值（来确定定位方式【参照物】）：

1：static 静态定位：
    position的默认值，默认文本流的状态。
    不会识别left right top bottom指定的坐标

2：absolute 绝对定位:
    a : 参照物：按照已经有定位的父元素进行位置的变化。
    b : 假如 当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。
    c : 绝对定位，脱离文档流、不占据空间

3: relative 相对定位：
    a : 参照物：自身默认的位置！
    b : 始终占据空间，不会破坏文档流

包含块的设置：
    1：如果父元素为参照物：添加 position:relative;
    2: 给要做定位的子元素 添加position:absolute;

定位元素：
后定位的元素会把前面定位的 盖住。

    z-index:
        控制定位元素的层次关系
        属性值为一个数字（可以为负数），数字越大，层次关系越高
        默认值 auto;