标签归档:CSS

我的第一个Chrome扩展:GhostPage(网页X光)

没有接触过Chrome扩展的时候,觉得它一定很复杂。crx的后缀也让我猜不出是用什么语言编写的,现在才发现不过就是HTML+CSS+JavaScript……

这个扩展本身很简单,实际只有一行代码。Google提供了一个非常好的入门指导,过一遍基本上就可以编写简单的扩展了。这个扩展作用也就是通过去掉页面样式来检查页面结构(参考这篇文章),可以用来解决下面的问题:

  • 元素超出边线,挤出的空白导致多余的平行滚动
  • 元素不对齐

使用这个扩展配合Chrome的检查工具可以快速的定位到出问题的元素。

Chrome商店的地址:
https://chrome.google.com/webstore/detail/ghostpage/hegpcollkgldlimbhkimijhhhoaicipp

crx文件下载(备用):https://chrome-extension-downloader.com/77577d1b5c39e945e597a9981f6e0ee6/hegpcollkgldlimbhkimijhhhoaicipp/GhostPage_v1.0.crx

附注:虽然扩展编写很简单,但为了交5美元的开发者认证费用却花了我一天时间。尝试了下面几种方式均失败了:

  • 全球付
  • Google Play礼品卡
  • 其他几个虚拟信用卡服务

最后花了两倍多的价格在淘宝上买了一个虚拟信用卡,第二天中午扣款成功了。

页面右侧出现空白?试试这个CSS调试器!

很多新手在写CSS会遇到很多问题,比如发现页面右侧出现了很多空白。你在网上搜索了之后,发现使用这行代码可以解决:

body, html {
    overflow-x: hidden;
}

但是虽然滚动条被隐藏了,问题并没有解决,你还是不知道是哪个元素在作怪。而且,隐藏了x向的滚动条会导致很多副作用,比如缩小浏览器后无法滚动。

调试工具

最佳的解决方法是使用一个CSS调试工具来把出问题的元素揪出来。你可以访问这个页面,点击页面第二行的链接(Click me……),然后看看发生了什么……不用担心,刷新一下,页面就会恢复正常

如果你使用Chrome浏览器,那么可以试试这个GhostPage扩展。

使用方法

你可以拖拽这个链接到你浏览器的书签栏(或是使用上面提到的Chrome扩展),然后在任一个打开的页面,都可以通过点击这个书签来查看整个页面的元素结构。比如一开始我打开知乎的主页,是这样:

知乎主页

正常的页面

当我点了这个书签,页面就变成了这样:

使用了Ghost CSS后的页面

使用了Ghost CSS后的页面

很神奇吧?

其实原理很简单,只是在页面的CSS文件里加入了这几行代码:

* {
    background: #000 !important;
    color: #0f0 !important;
    outline: solid #f00 1px !important;
}

更改所有元素的背景,颜色和边框(你可以通过修改书签的链接内容来自定义颜色)。

在你的出现右侧空白问题的页面上,你会看到有一个元素一直顶到最右边的边界,修正这个元素就可以彻底的解决问题。这样,一旦页面出现了奇怪的问题时,你就可以通过点击这个书签来检查问题。把它放到你的日常开发工具箱里吧:)

方法来自:Debug Ghost CSS Elements Causing Unwanted Scrolling

CSS笔记:Layout

目录

 

一、Display

元素的默认display值是block或inline。

block

block层级的元素总是新起一行,占全宽度。下面的元素默认为block:

<div>
<h1> – <h6>
<p>
<form>
<header>
<footer>
<section>

如果不想让block元素占据全宽度,可以使用width属性设置宽度,同时,如果想让内容适应不同大小的屏幕,使用max-width

inline

inline元素不新起一行,而且只占用需要的宽度。inline元素有:<span>、<a>、<img>

可以重写元素的display默认值来获得特殊效果。

inline-block

inline-block元素和inline元素差不多,但是它可以设置固定的高宽。

none

如果元素的display的属性值为none,那么这个元素将不会显示。<script>元素的display值就是none。这经常被用来控制一个元素的显示的隐藏(使用JavaScript):

document.getElementById("mask").style.display ='none';

display:none or visibility:hidden?

display:none是隐藏一个元素,像是这个元素不存在一样。而visibility:hidden只是使元素不可见,元素仍然占据原有的空间

 

二、Position

有四种值(默认为static):

static 
relative 
fixed 
absolute

static

position属性为static的元素的位置没有特殊效果。

relative

相对定位。这里的relative是指相对于正常的位置进行定位。可以设置top,right,bottom和left来偏移位置。

fixed

固定定位。相对于浏览器窗口来说是固定的,无论你怎么缩放窗口大小,或是滚动内容。可以设置top,right,bottom和left来偏移位置。

absolute

绝对定位。相对于最近的父元素(position值为static的元素除外)进行定位。可以设置top,right,bottom和left来偏移位置。

z-index

z-index属性用来指定一个元素在z轴上的位置,利用这个属性可以实现元素的重叠。如果不指定,在HTML文件里,代码位置靠后的元素会在上面。主要使用场景有: 1. 在图片上添加一个按钮,这时把按钮的z-index设置比图片大,就可以点击到按钮而不是图片。 2. 在图片上显示文字,只要把图片的z-index设为-1就可以了。

 

三、Overflow

Overflow用来定义当元素的内容超过限定的范围后的显示方式。有四种值:

visible

默认值。超出的内容仍然显示。

hidden

超出的内容将被隐藏。

scroll

添加一个滑动条。(将同时添加水平方向和竖直方向的滚动条,即使不需要。)

auto

类似于scroll,不过只在需要的时候添加滑动条。

overflow-x overflow-y

这两个值用来分别定义两个方向的overflow值。

div { 
    overflow-x: hidden; /* 隐藏超出内容 */ 
    overflow-y: scroll; /* 添加垂直滑动条 */ 
}

 

四、Float

float用来设置元素的滚动,像这样float: left;。一般的用法有:让文字包裹图片;制作navbar,让li元素向左浮动。

浮动的元素下面的元素会包裹住浮动的元素,这时可以用clear用来控制元素的滚动,下面这行让左边的元素不滚动:

div { 
    clear: left; 
}

 

五、Align

  • 水平居中:使用margin: auto;(在IE8里需要声明!DOCTYPE)。这时要给元素限定宽度,比如width: 50%;,限定的宽度之外的空间会被一分为二。
  • 垂直居中:使用padding属性可以让元素在父容器里垂直居中padding: 50px 0;
  • 文本居中:text-align: center;
  • 图片居中:

display: block; 
margin: auto;
  • 居左或右:使用float。

  • 水平+垂直居中:使用padding加上text-align: center;。或是使用position和transform:

.center { 
    height: 200px; 
    position: relative; 
    border: 3px solid green; 
} 

.center p { 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

CSShake——元素摇晃特效

效果演示

所谓的摇晃特效,就是当你把光标移到文字上的时候……我可以轻微的晃慢慢的晃猛烈晃疯狂晃,甚至左右晃上下晃旋转着闪烁着 ……

摇晃的驴子

光标移到驴子身上就可以摇晃它

 

前段时间在家没事做,突然想到之前看到的CSS特效,觉得文字摇晃很好玩。google了一下,原来是一个开源的css包。心血来潮,便想做个网页试一下。

下面是css shake的用法介绍,整理翻译自github页面的介绍:
首先在html里声明包含css文件,最简单的方法是通过CDN加载(你也可以将https://csshake.surge.sh/csshake.min.css下载到本地然后加载):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css" />

然后通过添加class来使用不同的效果:

<div class="shake">Foo</div> 
<div class="shake shake-hard">Bar</div> 
<div class="shake shake-slow">Baz</div> 
<div class="shake shake-little">Qux</div> 
<div class="shake shake-horizontal">Egg</div> 
<div class="shake shake-vertical">Ham</div> 
<div class="shake shake-rotate">Snake</div> 
<div class="shake shake-opacity">Apple</div> 
<div class="shake shake-crazy">Orange</div>

还可以通过增加class来控制动画的状态(比如一直摇晃,还是光标放上去摇晃)

<!-- Freeze the animation at that point when :hover --> 
<div class="shake shake-freeze">Hello</div> 
<!-- Continuous animation instead on :hover --> 
<div class="shake shake-constant">Hola</div> 
<!-- and stop when :hover --> 
<div class="shake shake-constant shake-constant-hover">Halo</div>

另外,还可以自定义摇晃类型,具体的用法请参考https://elrumordelaluz.github.io/csshake/