前端入门：css样式之：盒模型于浮动-第二天

# 一、css样式-盒模型

1、盒子、容器、区域内的空间位置

2、盒模型的css样式

    - widht

    - height

    - border

    - padding

    - margin

3、内容盒模型的组成

    -内容区域：wdth+height

    -边框区域：borde控制

    - 填充（内边距）：padding

        - 表示边框与内容的距离，可以用来控制内容的位置

        padding：上右下左

    - 外边距：margin

        - 表示边框之外的距离，可以用来控制当前容器的位置

    - 注意：

        - padding和boder会改变容器可视区域的尺寸

            -不会改变容器的内容尺寸

        - margin不会改变容器可视区域和内容的尺寸，但是会影响容器的位置

            -margin会改变容器在页面上占据空间的尺寸

        - border、padding和margin都可以只控制一个方向

            -border-left

    - 盒模型应用案例

        1、行高的测量

        2、边框线的设置

        3、某些元素默认的

 

# 二、css样式-浮动

1、文档流：页面上每个元素默认的摆放顺序，从上到下，从左到右

2、浮动：将某些元素，按照一定规则，脱离正确的文档流，浮在正常的文档流上方

3、浮动属性：

    - 左浮动float：left

    - 右float：right

    - 没有float：none

4、浮动的特点

    - 脱离正常的文档流，导致正常的文档流中的元素，出现在浮动元素的下方

    - 下一行浮动；元素的位置，由距离当前最近的比邻元素最高的元素决定

4、清除浮动

    - clear;left

    - clear;left

    - 清除两边clear;both