CSS若干常见问题小结_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-24 11:50:52

原创

1399人浏览过

1.边框部分问题

【边框为虚线】

立即学习“前端免费学习笔记（深入）”；

border:1px dashed #ddd;

登录后复制

【边框为实线】

立即学习“前端免费学习笔记（深入）”；

 border:1px solid #ddd;

登录后复制

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

在css中做如下声明

立即学习“前端免费学习笔记（深入）”；

 .mytable{border-collapse: collapse;}

登录后复制

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

<table cellspacing="0" cellpadding="0"></table>

登录后复制

立即学习“前端免费学习笔记（深入）”；

2. 表单部分问题

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

<form>  <label for="male">Male</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">Female</label>  <input type="checkbox" name="sex" id="female" /></form>

登录后复制

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

立即学习“前端免费学习笔记（深入）”；

3. 表格部分问题

【td内文字的对齐问题】

【td 文字垂直对齐】

立即学习“前端免费学习笔记（深入）”；

<td valign="top"></td>

登录后复制

属性可选值： top middle bottom baseline

【td 文字水平对齐】

立即学习“前端免费学习笔记（深入）”；

<td align="center"></td>

登录后复制

属性可选值：left right center justify

【tr中设置行高】

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

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

【td中如果内容为空】

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

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

在css中做如下声明

立即学习“前端免费学习笔记（深入）”；

 .mytable{border-collapse: collapse;}  tr{border:1px solid #ddd;}

登录后复制

立即学习“前端免费学习笔记（深入）”；

4. 滚动条部分问题

【不想出现滚动条】

 overflow:hidden;

登录后复制

【不想出现水平滚动条】

 overflow-x:hidden; overflow-y:auto;

登录后复制

【不想出现垂直滚动条】

立即学习“前端免费学习笔记（深入）”；

 overflow-y:hidden; overflow-x:auto;

登录后复制

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

立即学习“前端免费学习笔记（深入）”；

 overflow-x:hidden; overflow-y:auto; min-hight :xxx px;

登录后复制

[注意：] 使用此法必须确保自增长的高度包括了 padding 和 margin 否则还是会出现垂直滚动条

那么需要注意的是 dom中的元素（除了height外还必须考虑 margin和padding）没有超出父容器的实际高度

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

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

立即学习“前端免费学习笔记（深入）”；

overflow:visible;

登录后复制

立即学习“前端免费学习笔记（深入）”；