解决button和input标签自带边框的问题

解决< button >&< input >标签自带边框的问题

~~开发工具与关键技术:【DW】/HTML
作者:盘耀海
撰写时间:2019.01.18~~ 

这是我在hmtl入门学习中遇到的小问题,
< button >&< input >是我们是我们制作按钮&输入文本框的标签,然而我们会遇到这样的问题:
1.< button >自带一种样式边框,如下图所示,绿色箭头是指点击时出现的动态边框,红色剪头是指点击时会出现矩形边框:
解决button和input标签自带边框的问题

在使用标签时,这些边框的出现会影响美感,要去掉它,在写css样式时添加一些属性就解决了,如下图:绿色箭头添加 border0px,变成蓝色箭头的样式;再添加 outline: none; 变成红色箭头的样式;再点击按钮时就不会出现自带的边框了。
解决button和input标签自带边框的问题
经典代码:
解决button和input标签自带边框的问题

2.标签的原理也是一样的:
解决button和input标签自带边框的问题
但是当我们在文本框输入内容时如上图红色箭头中,输入文字是在最左边显示,要达到紫色箭头的效果,在css中添加text-indent:**px;即可
经典代码:
解决button和input标签自带边框的问题