盒子模型和边框

盒子模型(框模型)

一个盒子分为四部分
1.内容区(content)
2.内边距(padding)
3.边框(border)
4.外边距(margin)
盒子的大小是由(内容区、内容距、边框)决定
.box{
    width:100px;
    height:100px;
    background-color:#bfa;
    border-width:10px;
    border-color:red;
    border-style:solid;
    }
设置边框上下左右的宽度
.box{
    boder-top-width:10px;
}
上top、下bottom、左left、右right
设置边框上下左右的颜色
.box{
    border-top-color;
  }
设置边框的形状
.box{
      border-style:dotted;
    }
dotted(点状)、dashed(虚线)、double(双线)、solid(实线)

边框

.box{
      width:100px;
      height:100px;
      background-color:#bfa;
      border-width:1px;
      border-color:red;
      border-style:solid;
      }
如果不设置边框的宽度和颜色浏览器会默认认为黑色3px;
自定义边框颜色
.box{
      width:100px;
      height:100px;
      background-color:#bfa;
      border-top:10px  solid red;
      }
上top、下bottom、左left、右right
边框的简写
.box{
      width:100px;
      height:100px;
      background-color:#bfa;
      border:10px  solid red;
      }
上下都被设置就右面不会设置边框样式
.box{
      width:100px;
      height:100px;
      background-color:#bfa;
      border:10px  red   solid;
      border-right:none;
      }

内边距

.box{
        width:100px;
        height:100px;
        background-color:#bbffaa;
        border:red  10px   solid;
        padding-bottom:20px;
        padding-left:20px;
        padding-right:20px;
      }
.box1{
          width:100%;
          height:100%;
          background-color:orange;
      }

外边距

 .box{ 
          width: 100px;
          height: 100px; 
          background-color: #bbffaa; 
          border:red 10px solid; 
          margin-top: 20px; 
          margin-bottom:20px; 
          margin-left:20px; 
          margin-right:20px; 
      } 

.box1{ 
          width: 100px; 
          height: 100px; 
          background-color: orange; 
      }

margin外边距

.box{
        width:100px;
        height:100px;
        backgound-color:##bbffaa;
        border:red 10px  solid;
        margin-top: -50px;
        margin-bottom:-50x;
        margin-left:-50px;
        margin-right:-50px;
    }
.box1{
        width:100px;
        height: 100px;
        nackground-color:orange;
      }

给margin设置auto

.box{
      width:100px;
       height:100px;
        background-color:#bbffaa;
       border:red  10px  solid;
        margin-left:auto;
        margin-right:auto;
        margin: 0 auto;
    }

.box1{
      width:100px;
      height:100px;
      backround-color:orange;
      }
  注:如果设定左外边距或者有外边距的话会把外边距设为最大,垂直方向设置auto相当于0,左右同时设置auto,就会居中.

你可能感兴趣的:(盒子模型和边框)