首页 > 其他 > 详细

盒子模型

时间:2018-11-03 01:39:07      阅读:185      评论:0      收藏:0      [点我收藏+]
一.边框
   1.边框颜色  
        border-color 边框颜色(可以设置上边框,如:border-top-color,也可以整体设置,但是要注意顺序)
  
   2.边框粗细  
        border-width 边框粗细(可以设置上边框,如:border-top-width,也可以整体设置,但是要注意顺序)
  
   3.边框样式  
        border-style 边框样式(可以设置上边框,如:border-top-style,也可以整体设置,但是要注意顺序)
  
二.外边距
   1.margin:
        盒子距离浏览器的距离  (可以设置上外边距,如:margin-top,也可以整体设置,但是要注意顺序)
 
   2.居中:
      margin: 0px auto
 
三.内边距 
   1.padding:  
       内容到盒子的距离  (可以设置上内边距,如:padding-top,也可以整体设置,但是要注意顺序)
 
四.盒子模型的尺寸
   1.尺寸默认:
       padding+margin+wigth+border
 
   2.box-sizing:
       方便计算盒子模型尺寸(默认为content-box,border-box代表随着内容的宽度高度变化而变化)
 
五.圆角
   border-radius :
        圆角(左上,右上,右下,左下)
     /*如果想要一个圆,那么必须满足宽和高一致,圆角取宽度或者高度的二分之一*/
     /*如果想要半圆,那么必须满足宽是高的2倍,圆角取宽度的二分之一*/
     /*如果想要四分之一圆,那么必须满足宽和高相等,圆角取宽度相等值*/
 
六.盒子阴影
     1.box-shadow:
           默认为外阴影,内阴影为inset
      2.box-shadow:
          5px -5px 20px black;
 
 
 
 

盒子模型

原文:https://www.cnblogs.com/wnwn/p/9899057.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!