Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
221 lines (162 sloc) 9.1 KB

CSS

w3s en

CSS Selectors

选择器 类型 功能描述
* 通配选择器 选择文档中所有的 HTML 元素,也可以选择某个元素下的所有元素
E 元素选择器 选择指定的类型的 HTML 元素
#id ID 选择器 选择指定 ID 属性值为“id”的任意类型元素
.class 类选择器 选择指定 class 属性值为“class”的任意类型的任意多个元素
selector1, selectorN 群组选择器 将每一个选择器匹配的元素集合并; 如 h1,h2{}

通配选择器:

 *{margin: 0;padding:0}//Reset 样式文件中经常看到
.demo * {background: orange} //此时元素类名为 demo 下的所有元素都将背景色设置为橙色

层次选择器

选择器 类型 功能描述
E F 后代选择器 选择匹配的 F 元素,且匹配的 F 元素被包含在匹配的 E 元素内
E > F 子选择器(IE7+) 选择匹配的 F 元素,且匹配的 F 元素是所匹配的 E 元素的子元素(孙元素不行)
E + F 相邻兄弟选择器(IE7+) 选择匹配的 F 元素,且匹配的 F 元素紧位于匹配的 E 元素后面(E,F必须同层)
E ~ F 通用选择器(IE7+) 选择匹配的 F 元素,且位于匹配的 E 元素的所有匹配的 F 元素(E,F必须同层)

动态伪类选择器

选择器 类型 功能描述
E:link 链接伪类选择器 选择匹配的 E 元素,而且匹配元素被定义了超链接并未被访问过。常用于 链接锚点上
E:visited 链接伪类选择器 选择匹配的 E 元素,而且匹配元素被定义了超链接并已被访问过。常用于 链接锚点上(:visited优先级高于:link)
E:active 用户行为伪类选择器(IE8+) 选择匹配的 E 元素,且匹配元素被激活(鼠标点击时)。常用于锚点与按钮上
E:hover 用户行为伪类选择器 选择匹配的 E 元素,且用户鼠标在停留在元素 E 上(鼠标悬浮在上面时)。IE 6 及以下浏览器仅 支持 a:hover (:hover的优先级高于:active)
E:focus 用户行为伪类选择器(IE8+) 选择匹配的 E 元素,且匹配的元素获得焦点(如input:focus{background:blue})

Background

铺地板

Text

font-style:

  • normal / italic / oblique
  • italic 斜体,意大利体,意大利的风格难道是倾斜,Tower of pisa
  • oblique 倾斜,斜体是一种倾斜风格的字体,但倾斜是对normal字体进行倾斜处理,实际在各浏览器上,italic 和oblique 显示的效果是一样的,优先使用斜体,没有则做倾斜处理

word-spacing

  • 词与词(空格)之间的间距 可以是负值

letter-spacing

  • 字符或汉字之间的间距 可以是负值

font-variant

  • 设置字体变种,主要是大小写,字体size整体变小,首字母size加大等
  • 并不会带来多大的美观变化

@font-face

Icons

CSS Compatibility

inline-block IE7及以下不支持, 另外inline-block可能会产生空格间隙,可以用margin-right:-3px来解决

display: inline-block;
*display:inline; *zoom:1;
这些标签,IE7及以下无法正确解析,导致结构错乱, 考虑兼容性的话可以不使用

Opacity

filter:alpha(opacity=50); /*IE滤镜,透明度50%*/
opacity:0.5;/*其他,透明度50%*/

区分浏览器

element{
color: #666;
color:#666\9;      //IE8
* color:#999;        //IE7
_color:#EBEBEB;      //IE6
}
:root element{color:#666\9;}//IE9

Img

图片下面会出现莫名的下边距: 在chrome/FF中下边距大概是多出了3像素左右,而IE6更多,在IE8中展示却是完好的,只需要将img定义为块状级就解决了问题: display: block;或者vertical-align设置为top或bottom

Layout

盒模型

  • outline是浮动的border,不会影响box model布局,当outline-offset为负值时会覆盖border

1. @media 响应式布局

  • screen: 用于电脑屏幕,平板电脑,智能手机等 Usage: @media only screen and (max-width: 500px) { }
  • print: 用于打印机和打印预览

有三种方式来使用打印样式

<code>
@media print {
    no-print {
        display:none;
    }
}

<link rel="stylesheet" type="text/css" media="print" href="print.css">

<style type="text/css" media="print">
....
</style>
</code>
  • page-break-before:always表示在所在元素之前新起一页
  • page-break-after:always表示在所在元素之后新起一页
  • 属性的值除了always还有auto,auto等同于没有设置page-break-*,他是按内容长度来决定是否新起一页,另外官方文档的left,right属性值,firefox,chrome,ie都不支持
  • 点击chrome的右键,会有打印,点击后有打印预览,布局可以选择横向/纵向
<div>第一页</div>
<div style="page-break-before:always">第二页</div>
<div style="page-break-before:always">第三页</div>
<div style="page-break-after:always">还是第三页</div>
<div style="page-break-after:always">第四页</div>
<div>第五页</div>

2. block居中

top:50%;margin-top:1/2 of this height;

3. 文字的隐藏

  • 通常用缩进字体的方式,但它只适用于块元素block
I)
text-indent:-9999px; 

II)
a标签默认不是块元素,所以text-indent此时不起作用, 需要转化成block
display:block;
text-indent:-9999px; 

III)
如果将a标签转化成block的话,可能布局结果会出现变化,那么可以用, 但这种隐藏不可点击
line-height:0;
font-size:0;
overflow:hidden; 

IV)
这样就可以点击了
height:$xpx
line-height:(>$x)px;
overflow:hidden; 

V)
而针对input submit value的隐藏
font-size:0;
line-height:0;
text-indent:-9999px;
  • visibility:hidden与display:none的区别:前者即使不可见也会占据页面上的空间。后者不占据页面空间

4. Table

5. Mobile

<meta content="yes" name="apple-mobile-web-app-capable">
  • 该meta的作用就是删除默认的苹果工具栏和菜单栏。默认值是no
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  • 这是一个比较理想的viewport
  • 该meta的作用是让当前viewport的宽度等于device-width,同时不允许用户手动缩放
  • 移动设备的分辨率相对于PC来说都比较小, 为了能在移动设备上正常显示那些传统的为PC浏览器设计的网站, 移动设备上的浏览器都会把自己默认的viewport设为980px或1024px或其它值, 带来的后果就是浏览器会出现横向滚动条,文字非常小,比如iphone5用320px的device-width来显示980px(document.body.clientWidth)宽的网页
  • 设置width=devcie-width,iphone的document.body.clientWidth就不再是980px,而是320px,字就不会变得很小
  • iphone 4的device-width是320 x 480, resolution是640 x 960, 默认viewport是980px
  • iphone 8的device-width是375 x 667, resolution是750 x 1334, 默认viewport是963px
  • PC浏览器中css 1px往往对应着电脑屏幕1个物理pix,会造成一个错觉,就是css中的1px = 1物理pix。实际并非如此,现在移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,resolution提高了一倍,变成640x960,但屏幕尺寸却没变化
  • window对象有一个devicePixelRatio属性,官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素。devicePixelRatio的值因设备而异, 还可能是1.5或3, devicePixelRatio在不同的浏览器中还存在些许的兼容性问题,所以现在还并不能完全信赖这个东西
  • 还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍
<meta name="format-detection" content="telephone=no, address=no">
  • format-detection 启动或禁用自动识别页面中的电话号码等

6. flex布局

7. flex布局

You can’t perform that action at this time.