PHP从入门到精通,025第三章CSS之DIV+CSS标准化布局
作者:
极客研习社 | 来源:发表于
2018-11-23 07:02 被阅读15次
四、DIV+CSS标准化布局
(四)、盒子模型
说明:在HTML中的每个元素都是一个以盒子的形状来存在的。
盒子特点:由“内容-元素”+“内填充”+“边框”+“外边距”;在计算盒子大小:100*100+10+1+10
QQ图片20181123051752.png
1、border的属性
属性名 |
描述 |
属性值 |
border-top |
上边框 |
barder-top:粗细 样式 颜色 border-top:1px dashed red
|
border-right |
右边框 |
border-right:粗细 样式 颜色 |
border-bottom |
下边框 |
border-bottom:粗细 样式 颜色 |
border-left |
左边框 |
border-left:粗细 样式 颜色 |
border |
四边 |
border:粗细 样式 颜色 |
QQ图片20181123064250.png
2、padding属性
属性名 |
描述 |
属性值 |
padding-top |
上内填充 |
数值,如:padding-top:10px; |
padding-right |
右内填充 |
数值 |
padding-bottom |
下内填充 |
数值 |
padding-left |
左内填充 |
数值 |
padding |
简写形式 |
padding:10px; //四边都是10; padding:10px 20px; //上下各10,左右各20; padding:10px 20px 30px; //上10,左右各20,下30;padding:10px 20px 30px 40px;按上右下左的顺序。 |
注意:我们的内填充是占背景的。
3、margin属性
属性名 |
描述 |
属性值 |
margin-top |
上外边距 |
数值,margin-top:10px; |
margin-right |
右外边距 |
数值 |
margin-bottom |
下外边距 |
数值 |
margin-left |
做外边距 |
数值 |
margin |
简写形式 |
margin:10px; //四边各10;margin:10px 20px; //上下各10,左右各20;margin:10px 20px 30px; //上10,左右各20,下30;margin:10px 20px 30px 40px; //按上右下左的顺序 |
本文标题:PHP从入门到精通,025第三章CSS之DIV+CSS标准化布局
本文链接:https://www.haomeiwen.com/subject/rldkqqtx.html
网友评论