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;不同的元素浏览器会根据其 特点自动计算出实际宽度;
例如<div>
元素等独占一行的,其 width 属性的值会自动撑满父元素的 width 区域;
如果是<span>
元素等不需要独占一行的,其width
属性的值是内部元素内容自动撑开的宽度。
(2)<body>
元素比较特殊,不需要设置width
属性,宽度会自动适应浏览器窗口的宽度。
二、高度 height
如果一个元素不添加
height
属性,默认属性值为auto
,浏览器会自动计算出实际高度,也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。
三、内边距 padding
p {padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;}
p {padding: 10px 20px 30px 40px;}padding三值法示例:
p {padding: 10px 20px 30px;}padding二值法示例:
p {padding: 10px 20px;}padding单值法示例:
p {padding: 10px;}
四、边框 border
是一个复合属性
宽度,属性值:常用px形式的数值
形状,属性值:形状的单词
颜色, 属性值:颜色名或颜色值
border-bottom-width: 2px;
补充: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;
(学习视频分享:css视频教程)
以上就是css3框模型有几种属性的详细内容,
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)