首页 > 代码库 > CSS盒子模型

CSS盒子模型

1.盒子模型

技术分享

2.内边距

设置内边距

属性 描述
padding 设置所有边距
padding-left 设置左边距
padding-right 设置右边距
padding-bottom 设置上边距
padding-top 设置底边距

 

3.CSS边框

 我们可以创建出效果出色的边框,并且可以应用于任何元素

边框样式:

   border-style:定义了10个不同的非继承样式,包括none

边框的单边样式:

  border-top-style:

  border-lef-style:

  border-right-style:

  border-bottom-style:

 边框的宽度:border-width

 设置单边框宽度:

  border-top-width:

  border-lef-width:

  border-right-width:

  border-bottom-width:

边框颜色:border-color

设置单边框颜色:

  border-top-color:

  border-lef-color:

  border-right-color:

  border-bottom-color:

CSS3边框:

    border-radius:圆角边框

技术分享

 

技术分享

 boxr-shadow:边框阴影

 技术分享

box-shadow:10px(向右) 10px(向下) 5px(透明度)#FFccFF(颜色)

技术分享

 

    border-image:边框图片

4.CSS外边距

 外边距;围绕在内容边框的区域就是外边距,外边距默认为透明区域 

             外边距接受任何长度单位 百分数值

 外边距常用属性:

属性 描述
margin 设置所有边距
margin-bottom 设置底边距
margin-top 设置左边距
margin-right 设置右边距
margin-top 设置上边距

技术分享

技术分享

 

技术分享

 外边距合并:

技术分享

 

CSS盒子模型