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

时间:2021-07-28 09:04:05

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。然后再设置后面元素自身的浮动。

14、在input标签中,一般应该指定一个值来限制输入的最大长度,用maxlength来设置,如<input type="password"  maxlength="20" />

15、一般会觉得输入框中在开始输入的时候光标离输入框的边缘有一定距离会比较好看。可以设置padding-left的值来实现。