HTML/CSS一些需要注意的基础知识

落日映苍穹つ 2022-08-06 15:17 220阅读 0赞

border:0;边框存在但不现实 并且占内存  
  
  
border:none;边框未渲染  
  
  
HTML的书写规范：  
  
  
1、标签换行。  
  
  
2、标签缩进。  
  
  
3、标签要关闭。  
  
  
4、标签名属性不能为空。  
  
  
5、首先要！doctype声明。  
  
  
6、编码格式为UTF-8。  
  
  
7、标签要半角英文小写。  
  
  
8、合理注释。  
  
  
9、类名，id名要有语意的注释。  
  
  
10、合理嵌套。  
  
  
相对定位：相对定位，要有一个参照物，但这个参照是它自身，也就是说没设相对定位的位置，但只有设置了才能使 TOP,LEFT这些生效，也就是设了才能相对自己原来的位置偏移，原来的位置保留着，偏移后会把其它的层遮罩住。  
  
  
绝对定位：在布局里不可能有绝对定位的，再怎么样都有一个参照位置的，绝对定位的参照位置就看它的上级或上上级有没有定位，也就是有没有position:relative;当要绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位会导致元素脱离文档流。  
  
  
padding和margin的使用情况：padding:父元素与子元素；margin：同级子元素。padding会对边框造成影响。  
  
  
块元素和行元素的区别：  
  
  
1、块元素独自占一行，行元素不会独自占一行。  
  
  
2、块元素可以设置宽高，行元素不行。  
  
  
3、块元素可以设置margin和padding值，行元素只能设置水平方向的padding和margin值。  
  
  
浏览器常见的hack ：  
  
  
“-″减号是IE6专有的hack  
  
  
“\\9″ IE6/IE7/IE8/IE9/IE10都生效  
  
  
“\\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack  
  
  
“\\9\\0″ 只对IE9/IE10生效，是IE9/10的hack  
  
  
常用浏览器的内核及内核前缀：  
  
  
浏览器 浏览器内核 浏览器前缀  
  
  
chrome Webkit -webkit(Blink最新)  
  
  
Opera Presto(webkit最新) -o-(webkit最新)  
  
  
safari Webkit -webkit-  
  
  
Firefox gecko(壁虎) -moz-  
  
  
IE Trifent -ms-  
  
  
1.做好的页面在手机端测试时，发现部分浏览器，tap后会出现一个半透明的灰色背景，（被批…），起初以为是outline作怪，加上后发现没反应，最后发现是tap后的背景高亮，要重设这个表现，则需要设置-webkit-tap-highlight-color为所需色彩，直接透明吧：  
  
  
a,img,button,input,textarea\{-webkit-tap-highlight-color:rgba(255,255,255,0);\}  
  
  
2.另外，如何去掉textarea,input的默认样式（IOS上的圆角及内阴影等，Android未测试）：  
  
  
input,textarea\{-webkit-appearance:none;\}  
  
  
html禁止清除input文本输入缓存  
  
  
多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。  
  
  
如果不想让浏览器缓存input的值，有2种方法：  
  
  
方法一：  
  
  
在不想使用缓存的input中添加 autocomplete="off";  
  
  
eg: <input type="text" autocomplete="off" name="test" />  
  
  
方法二：  
  
  
在 input 所在的form标签中添加 autocomplete="off";  
  
  
eg:  
  
  
<form action="\#" autocomplete="off">  
  
  
<input type="text" autocomplete="off" name="test" />  
  
  
</form>