关于CSS盒子模型的理解

关于css盒模型 

 

盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：有效内容区域(width,height),内边距padding,边框border,外边距margin。（即装东西的容器） ，下面所说的盒子都等同于 HTML 元素，这里的盒子是二维的。所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。 （即网页布局 就是利用 CSS 摆盒子）

内容 content

概述 ：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。 元素的内容及子元素默认从内容区域开始排列。

width

• 作用：设置宽度

• 取值

  • auto默认值。浏览器可计算出实际的宽度。

  • px

  • 百分比

height

• 作用：设置高度

• 取值

  • auto默认值。浏览器可计算出实际的宽度。

  • px

  • 百分比

==html的宽高==

html {
    width:100%; //html元素取浏览器可视区域宽度作为自己的宽度
    height:100%;//html元素取浏览器可视区域高度作为自己的高度
}

==其余元素宽高 100% 都是取父盒子的宽高100%！！！==

边框 border

边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色

border-width边框宽度

• 作用

  • 设置所有边框宽度，或者单独地为各边边框设置宽度

• 取值

  • 长度值

  • 不允许指定负长度值。

• 语法

  • 空格隔开1-4个值

    • 1个值 设置所有边框宽度

    • 2个值 设置上下、左右

    • 3个值 设置上、左右、下

    • 4个值 设置上、右、下、左

border-style边框样式

• 作用：设置标签所有边框的样式，或者单独地为各边设置边框样式。

• 取值

  • none 定义无边框。

  • dotted 定义点状边框。

  • dashed 定义虚线。

  • solid 定义实线。

  • double 定义双线。双线的 宽度等于 border-width 的值。

简写

定义四个边

• 语法：border:样式 宽度 颜色

    .box{
        width:100px;
        height:100px;
  ​
      /* 四个边简写 */            
      /* border:10px solid red; */
            
   }

单个方向定义

说明：每个边框都可以设置样式宽度颜色 语法：border-方向：宽度 样式 颜色 【空格隔开】

拆分语法

• border-方向-width:

• border-方向-color

• border-方向-style

.box{
            /* 单个边简写 */
            border-left:10px solid red;
            border-right:10px solid green;
            border-top:10px solid pink;
            /* border-bottom:10px solid red; */
​
            /* 单个边拆分的写法 */
            border-bottom-width:10px;
            border-bottom-style:solid;
            border-bottom-color:yellow;
}

注意:边框会影响盒子实际大小，样式、宽度、颜色无书写顺序要求

==边框的添加也会撑大盒子模型！！！也是需要内减的！！！一个盒子可以w,h 为0 光有边框也行==

内边距 padding

CSS padding（内边距）属性，定义元素边框与元素内容之间的空间。 padding 可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

==内容与盒子边界距离！！==

单个方向设置

• padding-bottom 设置标签的下内边距。

• padding-left 设置标签的左内边距。

• padding-right 设置标签的右内边距。

• padding-top 设置标签的上内边距。

取值

• px

• 默认值0

• 百分比

• 不可使用负值

  ==内边距不能放内容，但是可以填充背景色！！！！==

.box{
    width:200px;
    background-color:red;
    
    padding-left:10px;
    padding-right:20px;
    padding-top:30px;
    padding-bottom:40px;
}

简写

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

• 语法：padding：1-4个值 【空格隔开】

• 规则：

  • 1个值：表示【四个方向】的内边距值

  • 2个值：分别表示【上下，左右】的内边距值

  • 3个值：分别表示【上，左右，下】的内边距值

  • 4个值：分别表示【上，右，下、左】的内边距值

.box{
    width:200px;
    background-color:red;
    padding:10px; 四个方向都是10px
    padding:10px 20px; 上下为10px 左右20px
    padding:10px 20px 30px; 上10px 左右20px 下30px
    
    padding:10px 20px 30px 40px;上右下左
}

==设置内边距，撑大盒模型，需要内减计算！ 在width，height属性上去减！==

外边距margin

概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性

==左上外边距可以移动盒子位置 ，右下不可以移动盒子位置，但是可以设置盒子与盒子之间的距离！！！==

+margin-left 向右移动

-margin-left 向左移动

top外边距用法一样

单个方向定义

• margin-bottom 设置下内边距。

• margin-left 设置左内边距。

• margin-right 设置右内边距。

• margin-top 设置上内边距。

.box{
    width:200px;
    background-color:red;
    
    margin-left:10px;
    margin-right:20px;
    margin-top:30px;
    margin-bottom:40px;
}

简写

• 语法：空格隔开

• 取值：1-4个规则与padding值 一致

• 取值

  • px,

  • auto浏览器自动计算

  • 允许使用负值

.box{
    width:200px;
    background-color:red;
    
    margin:10px 20px 30px 40px;
}

外边距应用

• 外边距实现已知宽度的块级盒子居中

.box{
   width:200px;
    /* 
    margin-left:auto;
    margin-right:auto;
   */ 
   margin:0 auto;
}

外边距问题

典理情形一

• 结构关系：嵌套块元素的垂直外边距塌陷

• 问题描述 ：当父元素没有padding,margin,border时子元素与父元素直接相临，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果最终结果是正值取两者中的较大值，负值取绝对值较大的值

• 表现：父子元素公用一个外边距

  .parent{
      width:100px;
      height:100px;
      background-color:red;
      
  }
  .child{
       width:100px;
      height:100px;
      background-color:green;
      
      margin-top:100px;
      margin-bottom:100px;
  }
  <div class="parent">
      <div class="child">
      
      </div>
  </div>

• 解决方法

  • 给父元素设置边框或内边距（慎用）

  • 父元素overflow:hidden,改变渲染规则