几招教你组建CSS盒模型

2024-01-18 15:19 小编

W3C组织建议把所有网页上的对象都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对象包括段落、列表、标题、图片以及层。

盒模型主要定义四个区域MBPC:边界(margin) 、边框(border) 、填充(padding)和内容(content) 

CSS盒模型设置

CSS盒模型涉及到边界[margin]、边框[border]、填充[padding]三个关键概念

1)边界[margin]

Margin:顶(margin-top)、右(margin-right)、底(margin-bottom)、左(margin-left--四个边距按顺时针方向排列

基本语法:

margin-top:长度单位 | 百分比单位 | auto

margin:20px 40px 60px 80px;/* |||*/

margin:20px 40px 60px;/* |右左|*/

margin:20px 40px; /* 上下|左右*/

margin:20px; /* 上右下左均相同*/

2)边框[border]

border-width: thinmediumthick length ;复合属性,分toprightbottomleft四个子属性;

border-style :none|dotted|dashed| solid|double|groove[凹型线]|ridge [凸型线] |inset [嵌入线] |outset [嵌出线];

border-color: 颜色关键字 | RGB ;

Border:边框粗细 边框样式 边框颜色;

3)填充[padding]

元素内边界主要是指边框和内部元素之间的空白距离,利用padding属性设置元素内的边界时,也包括5个属性,同样也有四种设置方法。

基本语法:

padding:长度 | 百分比

padding-toppadding-rightpadding-bottom:同上

padding:20px 30px 40px 60px;/**/

padding:20px 30px 40px; /* |||*/

padding:20px 30px; /* |左右|*/

padding:20px; /* 上右下左均相同*/


在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码