search

i12n / i12n.github.io

3 stars 0 forks source link

About CSS #3

Open i12n opened 9 years ago

i12n commented 9 years ago

Negative Margin

image

Set more float right and move it up with negative margin. Example

i12n commented 9 years ago

CSS3 Gradient

Zig Zag

image

Use css3 linear-gradient set background

Example

i12n commented 9 years ago

Missing Corner(Dog Ear)

image

Set a triangle by border and cover the corner of box.

Example

In addition, css3 line-gradient can do the same thing.

Example

i12n commented 9 years ago

Tag Style

image

Make triangle by ::after and ::before. Example

i12n commented 9 years ago

Album Cover Mask

image

Example

i12n commented 8 years ago

Rate Star

image

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.

Example

i12n commented 8 years ago

Div Border Collapse

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

i12n commented 8 years ago

PingFangSC-Regular & font-smoothing

<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>
i12n commented 8 years ago

|

<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.

i12n commented 8 years ago

get a square by padding

<div style="padding:50%;background:#999;"></div>

i12n commented 8 years ago

img set width & height

<img src="xxx" />

在 <img> 标签中如果不设置长宽属性，在Android机器上会出现变大的现象；而在iPhone则显示正常。

例如：

为了避免这种情况发生，需要设置width和height

img {
    width: 1.6rem;
    height: 1rem;
}
i12n commented 8 years ago

Remove space inline-block space between elements

在做响应式布局时，常常需要等百分比来设置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>
i12n commented 8 years ago

更改 checkbox 样式

<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 隐藏

  1. checkbox 虽然长宽都已经为 0 ，但是还要 设置 hidden，因为在 iphone 会出现一个点
  2. label 的 for 属性与 checkbox 关联，这样点击 label 可以触发checkbox，将label区域覆盖 checkbox:after 区域
  3. 背景图片要用 background-size: cover; 和 background-position: center center; 否则在 Android 上适配会出现问题。
  4. vertical-align: top; 也是为了适配 Android
i12n commented 7 years ago

flex 实现简单的左右布局

<div class="container">
  <p class="left">示例代码</p>
  <a class="right" href="#">点击查看</a>
</div>
.container {
  display: flex;
}
.left {
  flex: 1;
}

代码示例

i12n commented 7 years ago

通过 border 实现箭头 > 方法

<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);
}

示例代码

i12n commented 7 years ago

flex 实现一个简单 tab 样式

<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;
}

代码示例

i12n commented 7 years ago

display:flex 与 display:-webkit-box

两者的区别如下：

  1. display:flex 在某些Android机器上不支持，而 display:-webkit-box在某些浏览器（如 火狐）不支持。为了适配的好一些，可以把两者都写上
  2. 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;
}

代码示例

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

i12n commented 7 years ago

关于滑动

  1. 元素滑动时阻止页面的body滑动 http://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling

  2. 滑动不流畅，需要做如下设置 https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

    -webkit-overflow-scrolling: touch;

  3. 滑动吸顶 在 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;
})();