近段时间学习html和CSS的一些细碎总结
1、边框圆角属性:border-radius,取值能够是 百分比 / 自己定义长度,不能够取负值。假设是圆,将高度和宽度设置相等,而且将border-radius设置为100%
2、IE6,IE7,IE8,opera,firfox-2.0等浏览器,不支持边框的圆角效果。我们能够用图片来做。
3、为了克服有的浏览器不能显示某些属性设置的效果,能够专门设置使其识别,如火狐浏览器是 -moz-,谷歌浏览器是 -webkit- ,应用如:-webkit-border-radius:100%;
4、属性元素如input,能够在style中例如以下设置(text也能够是别的):
input[type="text"]{
width:50px;
……(其它属性设置)
}
5、能够使用 outline:none; 去除input输入表单的边框。可是有的时候就算设置了outline:none;也会发现边框没有去除,这个时候能够用border:none;就能够解决问题。
6、有时候能够使用无序列表ul,li来实现某些在同一排的一些元素,由于列表是块级元素,这个时候我们能够用元素的浮动将列表项的每一列都变成内嵌元素,实现他们显示在同一行。
7、有时候我们用input做搜索框的时候,常常会在搜索框里面设置初始值,然后用户点击的时候这个初始值会消失,除了用javascript事件做外,还能够用placeholder属性来做。如<input id="search" name="search" placeholder="please input what you want..."/>
8、用input做一些输入框如password框,username等的时候,应该设置输入的最大长度,避免出现无限制输入。
9、内嵌元素不能设置其高度和宽度,可是能够设置它的内边距和左右外边距。
10、使元素自己主动换行(强制换行)的方法是在声明块中增加 word-break:break-all;
最好的引用片段是word-wrap:break-word;overflow:hidden;
其它能够引用的片段是word-wrap:break-word;overflow:auto;
还有:word-wrap:break-word;word-break:break-all;
11、有时候我们要将我们做的一个东西放在整个页面的中央,我们能够设置margin值来实现。设置margin:0px;margin:auto;就能够了。
12、一般假设不想内容顶格或者紧挨着div边缘的话,能够设置padding属性,可是要记得改原始设置的宽度和高度,保证原来的大小。这种原理是元素的内容区是width和height定义的部分,可是元素的背景色和图像在padding是能够显示的。
13、为了防止前面设置的浮动元素的元素内容影响到后面设置的内容,能够在后面的元素的声明块内设置取消浮动 clear : left / right。然后再设置后面元素自身的浮动。
14、在input标签中,一般应该指定一个值来限制输入的最大长度,用maxlength来设置,如<input type="password" maxlength="20" />
15、通常会认为输入框中在開始输入的时候光标离输入框的边缘有一定距离会比較好看。能够设置padding-left的值来实现。