【CSS】盒模型与核心属性总结：盒子

盒模型与核心属性

1. 核心属性

(1). width: 宽度
(2). height: 高度
(3). padding: 内边距
(4). border:边框
(5). margin:外边距

2. 常用技巧

1.重置 margin\padding 的边距，如下：

<style>
margin:0px;
padding:0px;
/*盒子模型*/
box-sizing:border-box;
</style>

2. 边距值顺序：顺时针，有四种表达方式

(1) 单值：padding:5px;
(2) 双值：padding:5px 10px; /上下5px，左右10px/
(3) 三值：padding:2px 5px 10px /上2px,左右5px,下10px/
(4) 四值：padding:2px 5px 10px 20px /上右下左/

3. 代码示例

<div class="box"></div>
<style>
    .box {
        width:150px;
        height:100px;
        /* 可见属性:背景，边框 */
        background-color: violet;
        border: 5px solid black;
        padding: 10px;
        background-clip: content-box;
        /* 不可见属性：内边距、外边距 */
        margin: 10px;
    }
    </style>