css3 盒子模型

CSS 盒子模型

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

 

示例代码

 .box {
            background: #f4f4f4;
            border: 5px #777 solid;
            width: 500px;
            height: 200px;

            /* padding全写 */
            padding: 20px;

            /* padding单写  */
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 10px;
            padding-left: 20px;

            /* padding简写，顺序为 上、又 下、左  */
            padding: 10px 20px 10px 20px;

            /* padding简写 ，前提上下值、左右值相同  */
            padding: 20px 10px ;

            /* margin全写 */
            margin: 20px;

            /* margin 单写*/
            margin-top: 100px;
            margin-bottom: 80px;
            margin-left: 50px;
            margin-right: 50px;

            /* margin简写，顺序为 上、又 下、左*/
            margin: 100px 50px 80px 50px ;


            /** 盒子大小，使用border-box */
            /*将padding和border都算入宽高中 */
            box-sizing: border-box;  
        }

说明：盒子模型概念及图来源于：https://www.runoob.com/css/css-boxmodel.html

欢迎亲们加入全栈开发群交流技术，QQ群号：894912752