盒子模型，盒模型，框模型

左手的ㄟ右手 2022-08-31 15:19 252阅读 0赞

# 定义及组成： #

*  css中所有的样式都是一个矩形盒子
 *  布局就是将盒子放到合适的位置
 *  盒子的组成包括：内容区（content），内边距（padding），边框（border），外边距（margin）

# 内容区（content）： #

*  存放子元素和文本内容
 *  width 宽度， height：高度，backgrou-color：背景颜色
 *  注意：width和height是设置内容区的大小，不是整个盒子的大小，但是可以通过设置box-sizing属性来指定width和height的值作用到哪，可选值：content-box：width作用于内容区；border-box：width作用于整个盒子
 *      /* content */
                    width: 100px;
                    height: 100px;
                    background-color: red;

# 边框（border）： #

*  盒子的边框会影响盒子的大小，即不会改变盒子中内容区的大小
 *  必须设置三个属性：border-width：边框宽度，border-color：边框颜色，border-style：边框样式
 *  默认值：border-width：3px ，border-color为color的值，border-style为none
 *  三个属性可以有多个值，空格隔开：
    
    <table style="width:500px;"> 
     <tbody> 
      <tr> 
       <td style="text-align:center;">一个值</td> 
       <td style="text-align:center;">上下左右</td> 
      </tr> 
      <tr> 
       <td style="text-align:center;">两个值</td> 
       <td style="text-align:center;">上下&nbsp; &nbsp; &nbsp;左右</td> 
      </tr> 
      <tr> 
       <td style="text-align:center;">三个值</td> 
       <td style="text-align:center;">上&nbsp; &nbsp; 左右&nbsp; 下</td> 
      </tr> 
      <tr> 
       <td style="text-align:center;">四个值</td> 
       <td style="text-align:center;">上&nbsp; 右&nbsp; &nbsp;下&nbsp; &nbsp;左（顺时针）</td> 
      </tr> 
     </tbody> 
    </table>
 *  border可以同时设置多个，boder-xxx可以设置指定的一边，border-top，border-right，border-bottom，border-left
 *  简写样式：border：10px red solid；
 *  border-style的值：solid：实线 ，dotted 点状虚线，doshed 虚线，double 双线
 *      /* border */
                    border-width: 2px 3px 4px 5px;
                    border-color: blue red purple;
                    border-style: solid double;
                    /* 简写 常用*/
                    border:10px red soild;
                    border-top:none;
    
    # 内边距（padding）： #
 *  四个方向的内边距：padding-top，padding-right，padding-bottom，padding-left
 *  内边距可以影响盒子的大小，盒子可见框的大小由内容区，外边距，内边距共同决定
 *  内边框的颜色是background背景颜色
 *  其他规则同boeder-width类似。
 *  注意只有大小一个属性，即padding就是width
 *  padding:100px,200px,150px,300px;

# 外边距（margin）： #

*  margin不会影响可见框的大小，但是它会影响盒子实际的大小，也会影响盒子的位置
 *  margin-top：盒子上外边距，正值，盒子自身下移动；负值，盒子自身上移动
 *  margin-right：默认为0；
 *  margin-bottom：盒子下外边距，正值，盒子下面的盒子下移动；负值，盒子下面的盒子上移动
 *  margin-right：盒子左外边距：正值，盒子自身右移动；负值，盒子自身左移动
 *  可以简写，只有大小一个属性，margin: 100px 0 150px 300px;，和padding类似

# 行内元素的盒模型： #

*  行内元素的盒模型不支持设置内容区的高度和宽度
 *  可以设置padding，border，margin，但垂直方向上不会影响布局
 *  解决办法：将行内元素变成块元素或者行内块元素