css 特殊样式解决
一、前言
html ,css 特殊的问题。
二、小问题
2.1 img 标签,图片为空时 去掉默认边框
这个是谷歌高版本加的特性,当图片的src加载失败,就会这样显示,但是很丑,反而让我们需要额外的写 css 去掉这个样式。
如果 img 给了固定的宽高,并且初始 src 为 null,或者是 src 错误显示 alt 时,img 标签就会存在默认边框,很丑的。需要解决掉。
标签下面的两个属性可以解决,具体就看自己是怎么写的,哪个比较好解决。
/* 1 */
img[src=""] {
display: none;
}
/* 2 */
img:not([src]) {
opacity: 0;
}
/* 3 */
img[src=""]{
opacity: 0;
}
/* 4 */
<img src="abc.jpg" οnerrοr="src='123.jpg'" />
/* 5 */
<img src="error.jpg" οnerrοr="whenError(this)">
<script>
function whenError(a){
a.οnerrοr=null;
a.src='http://avatar.csdn.net/1/E/E/1_qq_27080247.jpg';
console.log('图片出错的时候调用默认的图片');
}
</script>
2.2 子元素的 margin 会突破父元素
# 问题1:
# 父元素与外界的边界原来希望是 10px 的,但是由于 `第一个子元素`设置的 margin-top:20px; 导致这个父元素与外界的边界变成 20px 了。
# 或者是 `最后一个子元素`设置的 margin-bottom:20px;导致这个父元素与外界的边界变成 20px 了。
<div style="height:200px;width:200px;background:red;">
</div>
<div style="height:200px;width:200px;background:gray;margin-top:10px;" >
<div style="height:100px;width:100px;background:gold;margin-top:50px;"></div>
</div>
# 问题 2:
# 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。
`<div style="height:200px;width:200px;background:gray;"> `
`<div style="height:100px;width:100px;background:gold;margin-top:50px;"></div>`
`</div>`
这个 bug 原因:
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
所有毗邻的两个或更多盒元素的 margin 将会合并为一个 margin 共享之。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding 或 Border分隔。
“嵌套”的盒元素也算“毗邻”,也会 Collapsing Margins。
解决办法:
1、修改父元素的高度,增加 padding-top 样式模拟(padding-top:1px;常用)。或者对应的是 padding-bottom 样式
2、为父元素添加 overflow:hidden; 样式即可(完美)!!!!!!!!!!!!!!!!!!!!!
这个简单好用
3、为父元素或者子元素声明浮动(float:left;可用)
4、为父元素添加border(border:1px solid transparent可用)
5、为父元素或者子元素声明绝对定位
2.3 input 输入框的高度与 button 还有 select 都是不同的,怎么让他们变得一致。
原因:其实是因为 padding 导致的,修改 padding 也可以的,但是我们还是直接使得盒子模型是 border-box 就不需要考虑 padding 的问题了。
<style>
input,select {
height: 50px;
}
input{
box-sizing: border-box;
}
</style>
<div>
如何解决input和select的宽高不一致问题
</div>
<input type="text">
<input type="button" value="22222">
<select name="" id=""></select>
2.4 首行缩进
text-indent: 2em; /* 首行缩进 */
2.5 怎么让 Chrome支持小于12px 的文字
谷歌浏览器中,默认的中文汉字最小字体是12px,不管你设置成 8px 还是 10px,在浏览器中只会显示 12px
<style>
p span{
font-size:10px;
transform: scale(0.8);
-webkit-transform:scale(0.8);
}
</style>
<p>
<span> 10px</span>
</p>
2.6 两个 div 一个固定宽度,另一个填充满窗口
<div class="parents">
<div class="div1"></div>
<div class="div2"></div>
</div>
.parents {
display: flex;
height: 100px;
line-height: 100px;
background: pink;
text-align: center;
.div1 {
width: 100px;
height: 100%;
background: yellow;
}
.div2 {
flex: 1;
background: green;
height: 100%;
}
}
.product-box {
width: 100%;
margin: 10rpx;
display: flex;
flex-direction: row;
align-items: center;/*flex 的子项在父元素中 垂直方向居中*/
text-align: center; /*元素 在 盒子中居中 ,可以被继承*/
image {
width: 100px; /*flex 的子项设置固定宽度,就不会缩放 flex:0*/
}
.groupProduct-name {
flex: 1;/*flex 的子项 设置为 1 表示的是会缩放*/
}
.price {
width: 100px;/*flex 的子项设置固定宽度,就不会缩放 flex:0*/
}
}
2.7 文本省略
单行文本后面多余的部分省略号表示
/* 三行配合完成 */
text-overflow: ellipsis;/* 溢出省略 ellipsis:翻译为 省略*/
white-space: nowrap; /* 文本强制不换行; */
overflow:hidden;/* 溢出部分隐藏 */
2 行文本后面多余的部分省略号表示 (
css3
)!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
注意的问题是设置了这样之后,就不能设置高度了,设置了的话会发现,文字太多的话,高度还有的话,就会发现第 3 行就会出来了.
- 如果有布局的需求,就给它的父级去添加高度就好了
- padding 也不能有的,不然第 3 行还是会出来的
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical; /*从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)*/
-webkit-line-clamp: 2; /*这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。*/
/* display: -webkit-box; 将对象作为弹性伸缩盒子模型显示。*/
/* autoprefixer: off 这一行注释要加上,它是代码的一部分。不然下面一句有的时候不生效,-webkit-box-orient: vertical; 不兼容*/
/*-webkit-box-orient: vertical; 从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)*/
/* -webkit-line-clamp: 2; 这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。*/
2.8 margin 与 width:100% 的问题
.parents{
width: 100%;
background: red;
.child {
width: 100%;
height: 100px;
margin: 20px;
background: blue;
}
}
/* 看上面的图片, 就知道这样设置是错误的,这个就是 盒子模型的原理了。
除了 ie 浏览器是 box-sizing:boder-box 之外其他的都是 box-sizing:content-box
不管是什么浏览器 margin 都不会包含在 width 里面的。
而我们上面的样式设置中 width: 100%; 已经占满了父元素的 100% 了,还要设置一个 margin: 20px; 当然就会超出了
背景颜色是涵盖到 border 边框上,margin 是不包括的。*/
/* 想要得到理想中的效果,可以在父元素去设置 padding 值,父元素的 padding 会包含在 父元素的 width 里面的。*/
.parents{
width: 100%;
background: red;
padding:20px;
.child {
width: 100%;
height: 100px;
/* margin: 20px; */
background: blue;
}
}
/* 子元素之间希望有间隔的话可以设置上下的,不要设置左右的,设置就会超出了呀 margin: 20rpx 0; */
2.9 felx 布局与 line-hieght
2.10 文本靠底部对其
使用相对,绝对定位的办法,其他的办法也有。
.parents {
width: 100%;
height: 50%;
position: relative;
.child{
position: absolute;
bottom: 0;
}
}
/* 这个办法,并不成功,至少在微信小程序是不成功的 */
display:table-cell;
vertical-align:bottom;