持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
行内块元素
img input td
超大背景图片的做法 背景定位
height: 3000px;
background-position: center top;
background-attachment:fixed; //背景附着,固定scroll
css继承与权重
text-, color, font-, line-
继承的权重为0
嵌套关系垂直外边距合并 (塌陷 )解决方案
1.给父亲定义上边框 border: 1px solid transparent;
2.可以给父亲制定一个上padding值 pading-top: 1px;gei
3.给父元素添加overflow: hidden;
清除浮动的本质
浮动是为了让多个块级元素一行内显示
清除浮动为了解决父级元素因为子级浮动引起高度为0的问题
1.额外标签法 clear:both; (在浮动元素的最后添加一个空标签
)2.给父亲添加属性方法: overflow: hidden;
3.使用after伪元素清除浮动
.clearfix:after{
content: '',
display:block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; //ie6,7专门清除浮动样式
}
4.使用双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content: '',
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom:1;
}
18.显示与隐藏visibility 隐藏之后,位置还会保留
inherit: 继承上一个父对象的可见性
visible: 对象可视
hidden: 对象隐藏
collapse: 主要用于隐藏表格的行或列,隐藏的行或列能够被其他内容使用,对于表格外的其他对象,其作用等同hidden,ie.5.5不支持
textarea 防止任用户意拖拽文本域
resize:none;
vertical-align垂直对齐
只针对于行内元素或者行内块元素
vertical-align: baseline | top | middle | bottom;
图片底部3px空白解决
原因: 因为默认的是基线对齐,所以底侧会有空白缝隙(图片与文字基线对齐)
解决 1.vertical-align:top;
2.display:block;
超出显示省略号
white-space: nowrap; //强制一行
overflow: hidden; //超出显示省略号
text-overflow: ellipsis; //超出显示省略号
