Heim > Web-Frontend > HTML-Tutorial > CSS若干常见问题小结_html/css_WEB-ITnose

CSS若干常见问题小结_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:50:52
Original
1170 Leute haben es durchsucht

1.边框部分问题

【边框为虚线】

border:1px dashed #ddd;
Nach dem Login kopieren

【边框为实线】

 border:1px solid #ddd; 
Nach dem Login kopieren

【table中的tr加下划线边框】

 在css中做如下声明

 .mytable{border-collapse: collapse;} 
Nach dem Login kopieren

【table 中的单元格 出现间断边框】

Nach dem Login kopieren
Nach dem Login kopieren


2. 表单部分问题


【给单选/复选 添加文字可选信息】


Nach dem Login kopieren
Nach dem Login kopieren


注意使用 label 标签时 for属性的值  对应的是表单中元素的id属性的值


3. 表格部分问题


【td内 文字的对齐问题】

【td 文字垂直对齐】

<td valign="top"></td>
Nach dem Login kopieren

属性可选值: top   middle    bottom    baseline

【td 文字水平对齐】

<td align="center"></td>
Nach dem Login kopieren

 属性可选值:left  right   center   justify

【tr中设置行高】

 不建议使用 height属性 这样会使部分内容隐藏

 line-height:15px; /*建议使用此属性*/
Nach dem Login kopieren

【td中如果内容为空】

 请使用空格字符填充:   
 这样即使没有 内容 依然会填充空白进去

【table中的tr加下划线边框】

 在css中做如下声明

 .mytable{border-collapse: collapse;}  tr{border:1px solid #ddd;}
Nach dem Login kopieren

4. 滚动条部分问题

【不想出现滚动条】

 overflow:hidden;
Nach dem Login kopieren
【不想出现水平滚动条】
 overflow-x:hidden; overflow-y:auto;
Nach dem Login kopieren

【不想出现垂直滚动条】

 overflow-y:hidden; overflow-x:auto;
Nach dem Login kopieren

【不想出现滚动条 但是垂直方向高度随内容自增长】

 overflow-x:hidden; overflow-y:auto; min-hight :xxx px;
Nach dem Login kopieren

[注意:] 使用此法 必须确保 自增长的高度包括了 padding 和 margin 否则还是会出现垂直滚动条
 
 那么需要注意的是 dom中的元素(除了height外 还必须考虑 margin和padding)没有超出 父容器的实际高度

【那么水平方向同上 修改部分参数即可】

【若想出现滚动条,但是是出现在浏览器边框滚动条】

overflow:visible;
Nach dem Login kopieren






Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage