盒子模型

• 1. 盒子模型
  • 1. 内容区(content)
  • 2. 内边距(padding)
  • 3. 边框(border)
    • 1. 四边都设置
    • 2. 指定方向设置样式
    • 3. 简写
  • 4. 外边距(margin)
    • 1. 外边距设置
    • 2. 外边距的重叠
• 2.浏览器的默认样式
• 3. 内联元素的盒模型
• 4. display 与 visibility
• 5. overflow
• 6. 文档流
• 7. 浮动
• 8. 文字饶图
• 9. 内联元素的浮动
• 10. 高度塌陷
• 11. 清除浮动

1. 盒子模型

元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式

1. 内容区(content)

• 存放element,box中设置的是内容区的宽高,背景颜色
  • width:100px
  • height:100px
  • background-color:red;

2. 内边距(padding)

• 内容区到盒子边之间的距离
  • 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距
• 盒子的大小由内容区 内边距和边框共同决定,
  • 盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
  • 盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
  • 盒子的宽度:width+ 左右两边边框的宽度+左右两边的内边距
  • 盒子的高度:height + 上下内边距+向下边框
• padding-top:100px-----上内边距
  • padding-top padding-right padding-left padding-bottom
• padding:100px;-----四边框都是100px
• padding:100px,50px----上下 左右
• padding:100px,20px,50px;

3. 边框(border)

大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none

1. 四边都设置

• width color style
  • border-width:10px(四个边框相同)
  • border-width:10px,20px,30px,40px(上 右 下 左)
  • border-width:10px,20px,,40px(上 左右 下 )
  • border-width:10px,20px,,40px(上下 左右 )
    • color style 也适用这种方法
  • border-color:red
  • border-style:solid
    • color(黑色) style width(1) 如果不写,会有默认值
    • 三个都不写,没有边框

2. 指定方向设置样式

• color style width
  • top----上方向color style width
    • border-top-color:yellow----上边框颜色
    • border-top-style:solid
      • dotted:点状
      • solid:实线
      • double:双线
      • dashed:虚线
    • border-top-width:100px

3. 简写

• border:100px red solid;
  • 三个参数没有顺序,只能指定四个方向的边框
  • 如果想单独指定某个方向的边框,可以先全部简写,在单独为某一方向重新指定样式
    • border:100px red solid;
    • border-left:10px red solid
    • border-right:10px red solid
    • border-top:10px red solid

    ---

    • border:100px red solid
    • border-right :none

4. 外边距(margin)

1. 外边距设置

• 与另外一个盒子的距离
  • 影响位置
  • 扩大盒子的占地面积
• margin-top;100px;
  • 上下 ,影响当前盒子的位置
  • 右下较小 ,变化微小,影像其他的盒子位置
  • 可以指定负值,向反方向移动
    • margin-left:-100px;
    • margin-top:-100px;
    • margin-bottom:-100px;
• margin-left:auto----左右上外边距自动设置到最大
  • 上下设置为:auto,则为最小:0
  • 左右都设为auto ,则为居中
    • margin-left:auto
    • margin-right:auto
    • margin:0 auto;

2. 外边距的重叠

• 外边距重叠的条件:
  • 相邻的元素
  • 垂直方向上的元素
    • 垂直方向上的外边距是重叠的
      • 发生在兄弟元素中间,取两者之间的最大值
      • 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素.如果想设置matgin,可以为父元素设置 border padding ,而达到效果
• 解决方案:
  • 对父元素加:border,padding
  • 在父子之间插入其他元素

2.浏览器的默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。

• 清除浏览器的默认样式

    *{
        margin:0;
        padding:0
    }

3. 内联元素的盒模型

• 不能设置宽高----width height
• padding
  • 可以设置:padding: (上下左右都可以),但垂直方向上的padding,不影响布局,
• border
  • border:1px blue solid
    • 左右可以,上下不影像布局
• margin
  • margin:左右可以使用,
    • 水平方向上的外边距求和,垂直方向上不支持外边距

4. display 与 visibility

display可以将内联元素变成块元素

• display:block;
  • inline---内联元素
  • block:块
  • inline-block:行内块元素----同时具有行内元素 块元素的特点,如<img>
  • none:不显示元素，并且元素不会在页面中继续占有位置
• visibility----设置元素的隐藏和显示状态
  • 可选值:
    • visible---默认值,显示元素
    • hidden----元素会隐藏不显示,但是位置依然保持
• display visibility隐藏的区别:
  • display:不会在页面中显示,也不占位置
  • visibility:不会在页面中显示,但是会占位置

5. overflow

• 理论上说,子元素大小最大是父元素的内容区大小若超出,超出部分则会在外面显示,称为溢出的内容
• 处理溢出内容:overflow
  • overflow:visable-----显示,默认,不处理,会在父元素以为的位置显示
  • overflow:hidden----溢出内容会被修剪,不会显示
  • overflow:scroll----水平 垂直方向出现滚动条,可拉动显示内容;不管有没有溢出,滚动条都在
  • overflow:auto----根据需求自动添加滚动条,

6. 文档流

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中.

• 块元素在文档流中的特点
  • 独占一行,块元素会自上向下排列
  • 块元素在文档流中默认宽度是父元素的100%
    • 如果父元素没有设置,则是浏览器的默认宽度,指定内边距,不会影响宽度的大小
  • 块元素在文档流中的高度默认被内容撑开,高度是子元素的高度
• 内联元素
  • 只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
  • 在文档流中，内联元素的宽度和高度默认都被内容撑开
• 当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距.

7. 浮动

• 正常情况下,块元素 独占一行,垂直排列,如果想要块元素水平排序,有以下方法:

• 块元素水平排列:

  1. display:inline-block;---设为行内块
     • 块元素一行排列,但中间有缝隙
       • 解决方法:将div代码写在一行
       • 若不写一行,会有缝隙
  2. 脱离文档流-----float,浮动不出父元素的范围,尽量的向右向上,向左向上,直到遇到父元素的边框或者其他的浮动元素
     • 可选值float:none
       • :none,不浮动
       • left: --会把文档流中的覆盖
       • right:--最右侧
     • 设置浮动之后,不占原来的位置,其他的元素会补上
     • 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素

• 浮动停止:

  • 遇到父元素,停止
  • 遇到其他的浮动元素也会停止.

• 浮动特点:

  • 浮动的元素上面是一个文档流元素,浮动的元素不会超过上一个范围
    • 浮动右上,可以调整代码位置位置
  • 如果一行放不下文档流 浮动元素 ,在右的浮动元素,会向下移动
    • 浮动的元素不会超过相邻的兄弟
      • 想要超过,可以交换位置

8. 文字饶图

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果
块浮动,段落文字围绕

• float:left

9. 内联元素的浮动

• 块元素拖地文档流之后,宽度和高度都被内容撑开
• 高宽不设置
  • 不浮动时,宽度是父元素的宽度
  • 浮动时,高宽是内容的大小
• 脱离文档流后,变成块元素,宽高生效

10. 高度塌陷

• 高度塌陷
  父元素的高度由子元素撑开,若子元素浮动,脱离父元素,父元素高度为0.这种现象就是高度塌陷,

  • 父元素高度塌陷,父元素下的所有元素都会向上移动,导致页面布局混乱

• 处理高度塌陷:

  1. 设置父元素的高度,但不能适应子元素的变化
  2. 开启BFC[Block Formatting Context（块的格式化环境）],元素的特点:
     • 父元素的垂直外边距不会和子元素发生重叠
     • 开启BFC不会被浮动元素所覆盖,会在浮动元素的右侧
     • 开启BFC的元素,可以包含浮动的子元素
     • 开启BFC
       • 开启元素浮动--直接开启,但会导致父元素的宽度丢失,导致布局混乱
       • 设置元素决定定位----布局混乱
       • 设置元素为:inline-block----导致宽度丢失,不改变布局
       • 将元素的overflow设置为一个非visible的值,即hidden(副作用最小) scroll auto
  • IE6一下的解决方法
    • 开启haslayout,副作用最小的一种方法:
      • zoom:1;----不放大,相当于开启BFC
      • 设置宽度 ,相当于开启haslayout
  3. 空白div
  • 可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
  • 然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
    • 使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构
  4. .after伪类 去除div的多余结构
     • 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

<style type="text/css">
    .box1{
        border: 1px solid red;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
    }
    .clearfix:after{
        /*添加一个内容*/
        content: "";
        /*转换为一个块元素*/
        display: block;
        /*清除两侧的浮动*/
        clear: both;
    }
    /*在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理*/
    .clearfix{
        zoom: 1;
    }
</style>

<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>

11. 清除浮动

我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能

• clear可选值：

  • none，默认值，不清除浮动
  • left，清除左侧浮动元素对当前元素的影响
  • right，清除右侧浮动元素对当前元素的影响
  • both，清除两侧浮动元素对当前元素的影响,清除对他影响最大的那个元素的浮动

• clear

  • clear:left
  • 在父元素中的最后一个子元素添加一个class= clear的div----多了一个div