CSS盒模型及CSS浮动

目录

一、CSS盒模型

1.什么是盒模型

2.盒模型的组成

3.盒模型的相关属性：

二、CSS浮动

1.CSS语法规则

2.浮动元素的特性

3.浮动清除

4.遇到的问题

父元素高度塌陷

---

一、CSS盒模型

1.什么是盒模型

盒模型：就是把HTML页面中的元素看作是以一个矩形的盒子，也就是一个装东西的容器

2.盒模型的组成

内容（content）：框的内容，其中显示文本和图像
 属性：   width：内容的宽度
              height：内容的高度

内边距（padding）：清除内容周围的区域。内边距是透明的
  属性：  padding-top：上内边距
               padding-left：左内边距
               padding-bottom：下内边距
               padding-right：右内边距

边框 （border）： 围绕内边距和内容的边框。

外边距(margin) ： 清除边界外的区域。外边距是透明的。
  属性：   margin-left:左外边距
                margin-right：右外边距
                margin-top：上外边距
                margin-bottom：下外边距

3.盒模型的相关属性：

        box-sizing：用来设置盒子尺寸的计算方式
        outline：用来设置元素的轮廓线
        box-shadow：用来设定值元素的阴影效果
        border-radius：用于设变边框的圆角

二、CSS浮动

1.CSS语法规则

        选择器{
            float:属性值
        }

        属性值：
                none:元素不浮动
                left:元素左浮动
                right:元素右浮动

2.浮动元素的特性

1.浮动元素会脱离标准流(脱标)
    标准流:指的是在不使用其他的与排列和浮动、定位相关的特殊cSS规则时,各种元素的排列规则。
    脱流:使用了浮动、定位相关的特殊规则脱离了标准流的控制浮动到了指定位置。

2.浮动的盒子不再保留原先的位置

3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列在一行显示，三个div都要设置浮动
    注意:浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动浮动元素的特性的盒子，多出的盒子会另起一行对齐。

4.浮动元素回具有行内块元素特性。
    如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理

3.浮动清除

选择器{
                clear:属性值
}

属性值:
        left:清除左侧浮动的影响
        right:清除右侧浮动的影响
        both:同事清除左右两侧浮动的影响

4.遇到的问题

父元素高度塌陷

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0）

解决方法：

1.给父元素添加声明overflow：hidden，这样父级的高度就随子级容器及子级内容的高度而自适应。

2.在浮动元素下方添加空div，并给元素声明 clear：both。

3.给父元素添加浮动