首页 > 代码库 > 近段时间学习html和CSS的一些细碎总结

近段时间学习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做一些输入框如密码框,用户名等的时候,应该设置输入的最大长度,避免出现无限制输入。
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。然后再设置后面元素自身的浮动。

近段时间学习html和CSS的一些细碎总结