css3框模型有哪些属性

这篇文章主要介绍"css3框模型有哪些属性"的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇"css3框模型有哪些属性"文章能帮助大家解决问题。

css3框模型有5种属性：1、width属性，设置内容的宽度；2、height属性，设置内容的高度；3、padding属性，设置内边距；4、margin属性，设置外边距；5、border属性，设置边框。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3框模型

盒模型又叫框模型，是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。

盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

• width和height：内容的宽度、高度（不是盒子的宽度、高度）。

• padding：内边距。

• border：边框。

• margin：外边距。

为了更好理解，如下生活中的举例：

常见盒模型区域

盒模型的属性中，根据不同属性的效果，可以划分区域：

（1）书写元素内容区域：width+height

（2）盒子可以实体化的区域：width+height+padding+border

（3）盒子实际占位的位置：width+height+padding+border+margin

学习过程中，学会查看浏览器控制台中的盒模型图：

一、宽度 width

（1）如果一个元素不添加width 属性，默认属性值为auto；不同的元素浏览器会根据其 特点自动计算出实际宽度；
例如

元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 区域；
如果是 元素等不需要独占一行的，其 width属性的值是内部元素内容自动撑开的宽度。
（2） 元素比较特殊，不需要设置 width属性，宽度会自动适应浏览器窗口的宽度。

二、高度 height

如果一个元素不添加height 属性，默认属性值为auto ，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。

三、内边距 padding

p {padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;}

p {padding: 10px 20px 30px 40px;}

p {padding: 10px 20px 30px;}

p {padding: 10px 20px;}

p {padding: 10px;}

四、边框 border

补充：border-style属性值可能性:

五、外边距 margin

①单一属性：

 p { margin‐top: 20px; margin‐right: 20px;   margin‐left: 20px;   margin‐bottom: 10px; }

②综合写法：

四值法 margin: 10px 20px 30px 40px;
三值法 margin: 10px 20px 30px;
二值法 margin: 10px 20px;
单值法 margin: 10px;

关于"css3框模型有哪些属性"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。