盒模型与核心属性
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>