前端工程师实战11：CSS设置盒子大小计算方式、轮廓、圆角与阴影效果

大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！

盒子的大小

默认情况下，盒子可见框大小由内容区，内边距和边框共同决定

        .box1{
            width:100px;
            height:100px;
            background-color:#bfa;
            padding:10px;
            border:10px red solid;
        }

<div class="box1"></div>这个盒子大小是140*140px，可以用截图工具量得出

但是是可以修改的，通过box-sizing修改盒子大小的计算方式

可选值：

1. content-box：默认值，高度和宽度设置内容区大小。内容盒子

2. border-box：width和height设置盒子可见框的大小（此时width和height设置的是内容区和内边距和边框的总大小，所以如果设置了内边距或者边框，内容区就会缩小）。边块盒子

轮廓

outline

用来设置元素的轮廓线，用法和border一模一