盒子模型笔记

一.盒子阴影：box-shadow:0px 5px rgb(127,127,127); 内阴影为box-inset

二.边框：

　1.边框颜色：border-color

　2.边框粗细：border-width:thin(细边框)/medium(默认值，中等边框)/thick(粗边框)

   3.边框样式：border-style:solid /detted /dashed /double;分别表示实线、点线、虚线、双线

   4.边框属性简写：border:1px solid red;

三.外边距：margin ,当margin:0px auto;时，表示水平居中显示

四.内边距：padding

五..box-sizing 拯救盒子布局

   1.box-sizing:(1):content-box:默认值，盒子高度或宽度=border+padding+(margin)+width/height;

　　　　　　 (2): border-box:盒子宽度或高度等于元素内容宽度或高度，  影响内容宽度.

   2.box-sizing用法：例 ： 

<style>
     div{
            width: 100px;
            padding:5px;
            border:1px solid red;
            box-sizing:border-box;
          }
</style>

  3.由于不同浏览器显示都有不同的内外边距存在，写css样式的时候，一开始就加上： *{margin:0px;  padding: 0px;}

  4.圆：div{width:20px; height:20px; border-radius:50%; line-height: 20px;}. height 和 line-height 必须值一样。     倒圆角：div{ width:200px;  height:200px; border-radius:10px;}

盒子模型笔记

原文：https://www.cnblogs.com/Aaron-Feng/p/12003471.html