美文网首页PHP学习笔记
PHP从入门到精通,025第三章CSS之DIV+CSS标准化布局

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