Open i12n opened 9 years ago
absolute
>
rgba
or opacity
Two span
, the outer span
has a fixed width and its background is a gay star image; the width of the inner span
is variable based on inline-style and its background is an orange star image.
The first method, set one of the contacting borders' width = 0
.
Example
The second method, the out and inner div's display
can be set table
and table-cell
, then border-collapse
can be used.
Example
The third method, not set border
but set box-shadow
. This is an interest method, we can get more detail thing about it in here.
Example
<style>
html {
font-family: PingFangSC-Regular,'Source Sans Pro','Lucida Grande',sans-serif;
}
</style>
Maybe the font seem to be a little bord, using font-smoothing fix it.
<style>
html {
font-family: PingFangSC-Regular,'Source Sans Pro','Lucida Grande',sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<p>ID<span style="border-left:2px solid; margin-left: 12px;padding: 10px 6px 1px;font-size: 0;"></span>Email</p>
If we use |
, we can't control its height.
padding
<div style="padding:50%;background:#999;"></div>
<img src="xxx" />
在 <img>
标签中如果不设置长宽属性,在Android机器上会出现变大的现象;而在iPhone则显示正常。
例如:
为了避免这种情况发生,需要设置width和height
img {
width: 1.6rem;
height: 1rem;
}
在做响应式布局时,常常需要等百分比来设置with,例如:
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
ul {
display: block;
width: 100%;
position: relative;
}
ul li {
display: inline-block;
width: 25%;
}
每个 <li>
的width为<ul>
的1/4,因为在 inline-block 元素之间会有一个空白缝隙,导致<ul>
不能完全放得下四个 <li>
.
可以参照 fighting-the-space-between-inline-block-elements提出的几种方法进行处理。 值得注意的是,如果 使用的是 font-size: 0; 那么在一些 Android 机器上的 APP 中浏览页面时,还是会出现那个空白缝隙,也就是没有起作用。这个时候使用下面的方式则不会在 Android 机器 出现问题:
<ul>
<li>
A</li><li>
B</li><li>
C</li><li>
D</li>
</ul>
<div>
<input type="checkbox" id="check-input"/>
<label for="check-input">已经阅读该协议 </label>
</div>
input[type=checkbox] {
display: inline-block;
width: 0;
height: 0;
outline: 0;
-webkit-appearance: none;
visibility: hidden;
}
input[type=checkbox]:after {
content: " ";
width: .38rem;
height: .38rem;
display: inline-block;
visibility: visible;
vertical-align: top;
background-image: url('xxx.png');
background-size: cover;
background-position: center center;
}
input[type=checkbox]:checked:after {
content: " ";
background-image: url('xxxx.png');
width: .38rem;
height: .38rem;
background-size: cover;
background-position: center center;
}
label {
margin-left: -.02rem;
padding-left: .5rem;
height: .38rem;
line-height: .38rem;
display: inline-block;
vertical-align: top;
font-size: .28rem;
color: #666666;
}
关键点: 1.用 ::after 来实现 checkbox 效果,checkbox 隐藏
background-size: cover;
和 background-position: center center;
否则在 Android 上适配会出现问题。vertical-align: top;
也是为了适配 Android<div class="container">
<p class="left">示例代码</p>
<a class="right" href="#">点击查看</a>
</div>
.container {
display: flex;
}
.left {
flex: 1;
}
>
方法<a href="#">点击链接</a>
a {
color: #b0b0b0;
text-decoration: none;
}
a::after {
content: '';
display: inline-block;
position: relative;
width: 8px;
height: 8px;
border-left: 2px solid #b0b0b0;
border-bottom: 2px solid #b0b0b0;
transform: scaleX(0.7) rotateZ(-135deg);
}
<ul class="list">
<li class="item"><span>Food</span></li>
<li class="item item-active"><span>Book</span></li>
<li class="item"><span>Movie</span></li>
</ul>
.list {
display: flex;
margin: 0;
padding: 0;
height: 30px;
border-bottom: 1px #B0B0B0 solid;
}
.item {
flex: 1;
position: relative;
line-height: 30px;
list-style: none;
}
.item span {
display: block;
text-align: center;
}
.item-active span {
color: #f18c16;
}
.item-active::after {
content: '';
position: absolute;
width: 100%;
height: 0;
bottom: -2px;
border-bottom: 3px #f18c16 solid;
}
两者的区别如下:
display:flex
在某些Android机器上不支持,而 display:-webkit-box
在某些浏览器(如 火狐)不支持。为了适配的好一些,可以把两者都写上display:flex
对应项目的伸缩属性为 flex,默认值为 flex:0 1 auto
即项目元素在主轴方向不可伸长、可以缩短;而 display:-webkit-box
对应项目的伸缩属性为 -webkit-box-flex,默认值为 -webkit-box-flex:0
,表示项目元素在主轴方向既不能伸长也不能缩短<!-- 文字过长被隐藏 -->
<p class="webkit-box">
<span class="title"> -webkit-box 布局示例:文字隐藏</span>
<span class="tag">hot</span>
</p>
<!-- 文字太短间距太大 -->
<p class="webkit-box">
<span class="title"> -webkit-box 示例</span>
<span class="tag">hot</span>
</p>
<!-- 额外的元素占位 -->
<p class="webkit-box">
<span class="title"> -webkit-box</span>
<span class="tag">hot</span>
<span class="fill"></span>
</p>
<!-- 文字过长被隐藏 -->
<p class="flex-box">
<span class="title">css flex 布局示例样式:文字隐藏</span>
<span class="tag">hot</span>
<span class="fill"></span>
</p>
<!-- 文字太短 -->
<p class="flex-box">
<span class="title">css flex 示例</span>
<span class="tag">hot</span>
</p>
.webkit-box {
display: -webkit-box;
width: 300px;
font-size: 20px;
}
.flex-box {
display: flex;
width: 300px;
font-size: 20px;
}
.title {
display: block;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tag {
display: block;
background: #e95200;
font-size: 18px;
color: #fff;
vertical-align: middle;
text-align: center;
line-height: 20px;
}
.webkit-box .title {
-webkit-box-flex: 1;
}
.webkit-box .fill {
display: block;
-webkit-box-flex: 20;
}
.flex-box .title {
flex: 0 1 auto;
}
元素滑动时阻止页面的body滑动 http://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling
滑动不流畅,需要做如下设置 https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
-webkit-overflow-scrolling: touch;
滑动吸顶 在 pc 端上实现吸顶一般都是通过scroll事件监听实现,但是在移动端上滑动的时候不能保持实时的吸顶,只有在停止滑动的时候才能吸顶。可以使用 position:sticky 来解决部分设备的问题。 https://developers.google.com/web/updates/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
2017.08.24 更新: 如何判断浏览器是否支持 sticky:
CSS.supports('position', 'sticky'); // 某些浏览器不支持
var supportSticky = (function () {
var vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
vendorListLength = vendorList.length,
stickyElement = document.createElement('div');
for (var i = 0; i < vendorListLength; i++) {
stickyElement.style.position = vendorList[i] + 'sticky';
if (stickyElement.style.position !== '') {
return true;
}
}
return false;
})();
Negative Margin
header
in horizontal center of containermore
link at right of containerheader
andmore
are alignSet
more
float right and move it up with negative margin. Example