上下两个DIV最终相距100px,而不是150px。

padding

padding是 'padding-top', 'padding-right', 'padding-bottom', 'padding-left'的缩写。赋值的方法跟margin相同,只是没有 ‘auto’ 值。默认值是0。

它可以应用到的元素

除display值是 ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-row’, ‘table-column-group’ 和 ’table-column’ 的所有元素。

border

border是个比较复杂的东西。它是'border- top', 'border-right', 'border-bottom', 'border-left'。千万别认为它跟前面的padding还有 margin一样只是设置width就好了。

border包含3个部分,’border-width’,’border- color’,’border-style’,分别用来设置它的宽度,颜色和样式。适用于任何元素。

border-width是 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'。默认值是0。可用值有‘thin’,‘medium’,‘thick’,以及常用的数值带单位的宽度值。

border-color是'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'的简写。默认值是 ‘color’ 特性的值。

border-style是'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'的简写。默认值是 none 特性的值。可用值有:’none’,’hidden’,’dotted’,’dashed’,’solid’,’double’,’groove’,’ridge’,’inset’,’outset’,有兴趣的可以逐个试试效果。

到此,相信大家对“CSS盒模型的详细介绍”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


分享文章:CSS盒模型的详细介绍
网页路径:http://dzwzjz.com/article/jipijs.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP