欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端入门part13边框和边距

程序员文章站 2022-03-25 11:41:11
边框边框就是环绕在标签宽度和高度周围的线条;①同时设置四条边的边框border:边框的宽度 边框的样式 边框的颜色② 分别设置边框border-top: 边框的宽度 边框的样式 边框的颜色border-right: 边框的宽度 边框的样式 边框的颜色border-left: 边框的宽度 边框的样式 边框的颜色border-bottom: 边框的宽度 边框的样式 边框的颜色连写格式下的注意点:颜色可以省略,默认是黑色;样式不可以省略,看不到边框啦;宽度可以省略,可以看得...
边框
  • 边框就是环绕在标签宽度和高度周围的线条;
  • 同时设置四条边的边框
  • border:边框的宽度 边框的样式 边框的颜色
  • 分别设置边框
  • border-top: 边框的宽度 边框的样式 边框的颜色
  • border-right: 边框的宽度 边框的样式 边框的颜色
  • border-left: 边框的宽度 边框的样式 边框的颜色
  • border-bottom: 边框的宽度 边框的样式 边框的颜色
连写格式下的注意点:
  • 颜色可以省略,默认是黑色;

  • 样式不可以省略,看不到边框啦;

  • 宽度可以省略,可以看得到;

  • 同时设置四条边同一属性

  • border-width:上 右 下 左

  • border-style:上 右 下 左

  • border-color:上 右 下 左

注意:
  • ① 属性赋值是严格按照顺序来的;
  • ②当赋值数小于4个该怎么赋值?
  • 如:上 右 下 左>上 右 下;左边的取值和右边的一样;
  • 如:上 右 下 左>上 右 ;左边的取值和右边的一样;下面和上面一样
  • 如:上 右 下 左>上 ;右下左的取值和上边一样;
内边距属性
  • 边框和内容之间的距离就是内边距;
  • 前端入门part13边框和边距
格式连写
  • padding: 上 右 下 左;
格式非连写
  • padding-bottom: ; padding-top: ;
  • padding-left: ; padding-right: ;
注意
  • ① 设置内边距后,标签占有的宽度和高度也会发生变化;
  • ②设置内边距后,内边距也会有背景颜色;
外边距属性
  • 单元格和单元格之间的距离
  • 注意前端入门part13边框和边距
连写格式
  • margin: 上 右 下 左
非连写格式
  • margin-top:;

本文地址:https://blog.csdn.net/lyp3171790866/article/details/112531822

相关标签: 前端入门 css