前端入门：css样式浮动、margin折叠、单位应用--第六天

# 一、css样式--浮动

1、默认文档流

3、添加浮动

4、添加浮动之后的高度塌陷后果

5、清除浮动：清除的是前一个元素浮动对自身的影响

 

- 边框：border：实线：solid   双线double  点状线dotted    虚线 dashed  内容不占据，背景可以延申到border区域

-边距：padding：背景可以延申到psdding的区域，内容不占据padding

    margin：内容和背景都不会眼神到margin区域

6、margin折叠

    - 现象1：如果一个没有边框的父元素的第一个非浮动子元素的margin-top会自动添加到父元素身上，这个margin-top会自动作用到父元素身上。

        - 1.给父元素加入transparent（透明色）1px

        - 3、将子元素的margin替换成父元素对应的位置的padding（注意padding之后的父元素的大小）

        - 2给第一个元素浮动，（为了消除带来的影响，给后面的元素清除浮动）

    - 现象2：给两个相邻元素的非浮动元素同一个区域添加margin时，只会生效较大的margin

        1、给相邻元素清除浮动（需要消除浮动带来的影响）

# 四、盒模型的应用

2、非浮动元素的水平居中：设置两侧的margin值为auto（自动）

# 六、单位

1、px：像素，显示器中最基准的单位。

2、pt：磅，打印像素，≈1.33px

3、em：响应式单位（rem、%、vw、vh）   1em===父元素的字体大小 （1em默认情况下是16px：浏览器的字体大小）

4、rem：响应式单位，与根元素相对应

5、%：响应式单位，相对于父元素对应位置的值

6、vw：响应式单位，相对于浏览器的可视区域    100vw===浏览器的可视区域的宽度

7、vh：响应式单位，相对于浏览器的宽度             100vh===浏览器的可视区域的高度