HTML 知识小结1

1.在input两侧添加额外元素  直接上图

<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text"class="form-control" value="" placeholder="啦啦啦"/>
<span class="input-group-addon">￥</span>
</div>

必须为input添加form-control类 注：

向 .form-control 添加前缀或后缀元素的步骤如下：

• 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中。
• 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
• 把该 <span> 放置在 <input> 元素的前面或者后面。
• 通过向  .input-group  添加相对表单大小的 class（比如  .input-group-lg、input-group-sm、input-group-xs ）来改变输入框组的大小。输入框中的内容会自动调整大小。

2.display: none和visibility:hidden的区别

display: none；不为被隐藏的对象保留其物理空间；
visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；

visibility和display两个属性都有隐藏元素的功能，display:none和visibility:hidden的区别，简单的总结一句话就是：visibility:hidden隐藏，会保留元素的空间,在浏览时保留位置；而display:none视为不存在，且不加载！

)1、visibility:hidden--为隐藏的对象保留其物理空间HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
)2、display: none--不为被隐藏的对象保留其物理空间HTML元素（对象）的宽度、高度等各种属性值都将“丢失”

3.超链接css属性排列缘由

超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序

	a:link {} 
	a:visited {} 
	a:hover {} 
	a:active {}

4.添加样式的方式有

内联式：即直接加在标签上的样式 如:<div style="width:100px;"></div>
导入样式：@import url("css/style.css")
嵌入式：即用<style>.classname {width: 100px;}</style>标签括起来写在页面中的样式
外部引用式：即将样式单独放到一个文件夹中，然后用link标签引入页面的形式，如：<link rel="stylesheet" type="text/css" href="Css.css" />