欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

几招教你组建CSS盒模型

 

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; /* 上右下左均相同*/

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r33316.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-07-08 02:24 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。