博客列表 >盒模型与核心属性总结(有针对性)

盒模型与核心属性总结(有针对性)

PHP中文网用户-2638467
PHP中文网用户-2638467原创
2022年11月17日 11:59:02295浏览

盒模型与核心属性

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>


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议