vue开发之style CSS边框,布局必不可少的设置

  本系列讲解vue进行前端开发,今天讲解的是语法块中的style部分,style部分我这里讲解的是使用CSS开发的。前面还有几篇文章,大家有兴趣的自己去看看,今天分享一下CSS的边框设置,这个是非常重要的内容。

  通过一张图来看看前端里一块内容的布局:

  其中:

  Margin(外边距) – 清除边框外的区域,外边距是透明的。

  Border(边框) – 围绕在内边距和内容外的边框。

  Padding(内边距) – 清除内容周围的区域,内边距是透明的。

  Content(内容) – 盒子的内容,显示文本和图像。

  边框设置主要设置padding和margin:

  margin设置外边框:

  margin-top,margin-left,margin-bottom,margin-right:10px

  padding设置填充:

  padding-top,padding-left,padding-bottom,padding-right:10px

  设置的时候可以直接写padding:或者margin:。和设置boder一样,设置的值在1~4个之间,遵循以下规则:

  border-style可以设置1-4个属性值,对应关系如下所示:

  border-style:属性1,属性2,属性3,属性4

  上->右->下->左

  border-style:属性1,属性2,属性3

  上->左右->下

  border-style:属性1,属性2

  上下->左右

  border-style:属性1

  上下左右属性相同

  这里给一个图片廊的设置的案例,其中就用到了padding和margin。

标签