CSS边框、边距的设置

目录

一、边框粗细

二、边框样式?

1、border-style:

2、设置多边样式

三、边距


一、边框粗细

1、border-width: thick 粗边框 系统设置为5px

medium 中等粗细 系统设置为5px

thin 最细的边框 系统设置为5px

2、设置单独一边的粗细

border-top-width 设置上边框的粗细

border-right-width 设置右边框的粗细

border-bottom-width 设置下边框的粗细

border-left-width 设置左边框的粗细

3、设置多边边框的粗细

border-width: 10px 20px; 设置边框 上下为10px 左右为20px

10px 20px 50px;

设置边框的粗细为 上边框10px 左右边框粗细为20px 下边框粗细为30px

10px 15px 5px 20px;

顺时针的顺序 设置边框的粗细 上边框为10px 右边框为15px 下边框为5px 左边框为20px

★单独设置颜色或者边框的粗细的时候 必须要把border-style设置好


二、边框样式

1、border-style:none 没有样式

hidden 隐藏边框,不显示

dotted 边框样式为点状

dashed 边框样式为虚线状

solid 边框样式为实线

double 边框样式为双实线

2、设置多边样式

①border-style:dotted solid

设置两个值 ,第一个值表示上下的样式,第二个值表示左右的样式

dotted solid double

设置三个值 ,第一个值表示上的样式,第二个值表示左右的样式 第三个值表示下的样式

dotted solid double dashed

按顺时针, 按照上右下左的顺序

border也是一个复合属性,同时设置边框的颜色、粗细和样式

border-style必须加,其他都有默认值,而border-style没有

颜色的默认是黑色 粗细的默认值是3px


三、边距

1、margin 只设置一个值,上右下左都会设置同样的外边距


2、margin 设置两个值,第一个值表示上下边距,第二个值表示左右边距


3、margin 设置两个值,第一个值表示上边距,第二个值表示左右边距,第三个值表示下边距


4、margin-top: 单独设置上边距

margin-left : 单独设置左边距

margin-bottom: 单独设置下边距

margin-right: 单独设置右边距

因为元素是默认靠着左上角 ,所以设置margin-left有效果

要想设置margin-right有效果 ,需要设置浮动为float:right;

* 去除所有元素的内外边距

*{margin:0;padding:0;}

① 设置上边距


② 设置左边距


② 设置下边距


③设置右边距

先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在。深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小。自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担。添加下方名片,即可获取全套学习资料哦

猜你喜欢

转载自blog.csdn.net/m0_67401835/article/details/126099149
今日推荐