HTML&CSS经验
标签（空格分隔）： HTML和CSS
行高
在没有设置高度的情况下，行高会影响容器的高度 设置了高度，行高不会影响容器高度
内联标签换行被解析间隙
- 父级
font-size: 0; - 移除空格
<div id="box">
<a href="">热血</a
><a href="">高校</a
><a href="">狂热</a>
</div>
- 使用margin值 这个方法不适合用
- 借助html注释等
<div id="box">
<a href="">热血</a><!--
--><a href="">热血</a><!--
--><a href="">热血</a><!--
--><a href="">热血</a>
</div>
清浮动
1.给父级加height或者
display: inline-block;
2.after伪类清浮动
.clearfix:after{
content: "";
display: block;
clear: both;
}
3.以浮制浮
透明度
- opacity0~1透明度 子孙元素都会受影响
- IE 滤镜：
filter:alpha(opacity=0~100); 100 不透明 0 全透明 设置透明度后，子孙元素都会受到影响
表格
<table border="1" cellspacing="" cellpadding="">
<thead>
<th>星期一</th>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
</table>
- tr设置border无效果
- th,td{padding:0;}重置单元格默认填充
- table{border-collapse:collapse;} 单元格间隙合并
- colspan 属性规定单元格可横跨的列数。
<td colspan="2"></td>在行间设置才有效- rowspan 属性规定单元格可横跨的行数。
<td rowspan="2"></td>
form表单 所有的表单元素必须放在form里面
<input type="……" name="" value="" />
text 文本框
password 密码
radio 单选
checkbox 复选
submit 提交
reset 重置
button 按钮
image 图片
file 上传
hidden 隐藏
- name 是表单元素的名称（传递给后端的字段）
- value是表单元素的值（传递给后端你的值）,一般都是用户输的
- select/option 下拉选框 对高度的支持不兼容；
- textarea 文本域 各个浏览器下的默认滚动条显示不兼容
- label 标签为 input 元素定义标注
关于margin-top传递的一些问题
块元素才能触发margin-top的传递，比如元素设置
display:inline-block;不会触发top传递
清除默认样式
<style>
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
dl,
dd{
margin: 0;
}
ul, ol{
margin: 0;
padding: 0;
list-style: none;
}
a{
/* color: #333; */
text-decoration: none;
}
img{
vertical-align: top;
border: none;
}
table{//表格
border-collapse:collapse;
}
th,td{
padding: 0;
}
</style>
盒模型垂直居中方法
- 父级
display: flex;子级margin: auto;
dl dt dd
<style>
dl dd{
margin: 0;
}
dl{
width: 300px;
}
dt{
height: 22px;
/* overflow: hidden; */
}
dt div{
float: left;
line-height: 30px;
}
</style>
<dl>
<dt><div>测试出现的问题</div></dt>
<dd>文字溢出</dd>
</dl>
当内容大小大于父级大小时
overflow: hidden
其它
类似：当li左浮动 margin-right：20px； 父级 margin-right：-20px；就好了，不用给最后一个li加margin了
<ul>
<li></li>
<li></li>
</ul>
1 内联元素不支持上下的paddingmargin line-height也不会改变容器的大小 只能内容撑开宽度
2 text align: center;`文本居中并不是上下方向的
3
position: absolute;子集相对于父级的padding+内容区域进行定位不包含边框
前端规范
1、所有书写均在英文半角状态下的小写； 2、id，class必须以字母开头； 3、所有标签必须闭合； 4、html标签用tab键缩进； 5、属性值必须带引号； 6、 html 7、/* css注释 */ 8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签； 9、p,dt,h标签 里面不能嵌套块属性标签； 10、a标签不能嵌套a； 11、内联标签不能嵌套块标签
