怎么去掉button的默认样式

 时间:2024-10-08 04:35:05

button在不添加任何样式的时候,默认都会自带样式,一般自带的样式都不符合实际的设计需要,大部分的时候,需要先去除默认的样式,重新给button元素加上合适的样式。下面就来介绍下如何去除默认的样式

工具/原料

浏览器

css

html

方法/步骤

1、先看下默认样式效果,如图可以看到,默认padding和border,字体大小也是受浏览器默认指定

怎么去掉button的默认样式

怎么去掉button的默认样式

2、去除padding,指定一个字体大小,这里匹配了*表示所嘀芟苒疾有元素,因为大部分的默认margin和padding都需要先去除,统一去除,后面需要再单独有蛤靴狡珂针对性的添加 *{margin:0;padding:0;font-size:100%; }

怎么去掉button的默认样式

怎么去掉button的默认样式

3、默认padding喉哆碓飙去除之后,按钮之间有间隙,这是inline-block默认的间距,用float来去除,并指定合适的宽和高 button{floa墉掠载牿t:left;width:60px;height:60px;}

怎么去掉button的默认样式

怎么去掉button的默认样式

4、间距去掉了,但都显示成一行了,这个是因为添加的浮动影响的,可以在div元素蒹筻分虞后面去除浮动 div:after{conten墉掠载牿t:"";display:block;clear:both;}

怎么去掉button的默认样式

5、此时,可以看到边框重叠导致边框宽度不一致,需要自定义边框border:1pxsolidblack;margin-right:-1px;margin-bottom:-1px;

怎么去掉button的默认样式

怎么去掉button的默认样式

6、从上面的图中,可以看到,在鼠标点击按钮的时候,会有蓝框选择的样式加上outline:none;来去除

怎么去掉button的默认样式

如何利用Axure RP 8设计软件使用和查找母板面板 Axure RP 如何实现下拉框二级联动效果 Windows Server 2012 R2怎么配置为DNS服务器? 关于html内嵌video的一些参数设置 Axure RP8怎样给树状菜单添加子节点?
热门搜索
宿便图片 战疫情图片 绿皮书 电影 宫锁沉香 电影 动漫服装图片