CSS-盒子模型

盒子模型的重要组成部分

• 内容区域content：width ,  height 
• 内边距：内边框和内容区域的距离Padding
• 边框线：Border
• 外边距：Margin

Border  (边框线)

属性：Border

属性值：边框线粗细px   线条样式   颜色(不区分先后顺序，中间用空格隔开)

线条样式的属性值：

•        solid                   实线
•        dashed               虚线
•        dotted                 点线

  div{
       border:red 5px solid;
     }

 Border-radius   (圆角) 

作用：设置元素的外边框为圆角

属性：border-radius

属性值：数字px  或   百分比   （属性值是圆角半径）

设置圆的半径为15px 

  div{
       width:100px;
       height: 100px;
       background-color: red;
       border-radius: 15px;
     }

可以看到盒子的边框已经发生改变 

正圆-盒子

将半径设置为盒子的宽高一半，宽高相等

     div{
       width:100px;
       height: 100px;
       background-color: red;
       border-radius: 50px;
     }

胶囊-盒子

将圆的半径设置为盒子的高度一半

​
     div{
       width:200px;
       height: 100px;
       background-color: red;
       border-radius: 50px;
     }

​

同时给四个角赋值

 div{
       width:100px;
       height: 100px;
       background-color: red;
       border-radius: 15px  25px  15px 30px;
     }

每个角的像素都不同 

Padding   (内边距)

作用：设置内容与盒子边缘之间的距离

属性：paddding

属性值:数字px

 div{
       padding:50px;
       background-color: red;
     }

 Margin    (边缘距离)

作用：拉开两个盒子之间的距离

属性：Margin

属性值：数字px

     div{
       width:400px;
       height: 400px;
       margin: 50px;
       padding:50px;
       background-color: red;
     }

可以清楚的看到边缘距离是50 

设置单方向线

 属性：盒子属性-方向名词(例如设置左边框border-left)

• 左边：left    
• 右边：right
• 顶部：top
• 底部：bottom

属性值：边框线粗细px   线条样式   颜色(不区分先后顺序，中间用空格隔开)

     div{
       border-left:red 5px solid;
     }

box-shadow  (盒子阴影)

作用：给元素设置阴影效果

属性：box-shadow

属性值：x轴偏移量   y轴偏移量   模糊半径   扩散半径   颜色  内外阴影（前两个属性值必填）