分类 Html5 下的文章

神通广大的CSS3选择器

每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分。但是,大家可能每天写的大多是#id,.class这样的选择器,这并不稀奇,但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器,就可以简化我们的代码。

我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度,如果有需要,可以在这里查看它的浏览器支持情况:「caniuse.com」。

文章目录:

* 1. 通配选择器 「」**

2.元素选择器 「Element」

3.ID选择器 「#id」

4.类选择器 「.class」

需要注意的是:多个页面元素可以有相同的类名,但是元素的id在页面中必须是唯一的。

5.群组选择器 「selector1,...,selectorN」

6.后代选择器「E F」

选择匹配E的元素内的所有匹配F的元素。

7.子选择器「E > F」

选择配配E的元素的匹配F的直系子元素。

8.相邻兄弟元素选择器「E + F」

E和F是同辈元素,具有相同的父元素,并且F元素紧邻在E元素的后面,此时可以使用相邻兄弟选择器。

9.通用兄弟选择器「E ~ F」

E和F是同辈元素,具有相同的父元素,并且F元素在E元素之后,E ~ F将选中E元素后面的所有F元素。

10.动态伪类选择器「E:link,E:visited,E:active,E:hover,E:focus」

11.目标伪类选择器「E:target」

选择匹配E的所有元素,且匹配元素被相关URL指向。

阅读全文

CSS书写规范及顺序

css-written-order

CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

abbreviation

del-zero

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

name

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

color-abb

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用”_”下划线来命名CSS选择器,为什么呢?

这里有一篇破折号与下划线的详细讨论,英文:点击查看 中文篇:点击查看

underline

id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

阅读全文

CSS 各种定位(position)方式的区别

在FF中的测试代码:

采用position定位之后必须采用偏移属性定义偏移量,也就是相对包含块的偏移。注意应用于position值不是static的元素。

有时也需要定义width和heigth,但是可能会和偏移属性的定义冲突,因为四个偏移属性实际上已经定义了元素的大小。此时,根据width和left属性定义左右,根据top和height属性定义上下。

一个元素的大小固定,但是其内容放不下,就会导致溢出。overflow控制溢出部分的可见(visible)、不可见(hidden)、滚动可见(scroll)。

visibility:hiddendisplay:none的区别:visibility:hidden设置元素不可见,但是元素依旧会影响布局,只是元素部分呈现为空白;display:none元素不显示并且从文档流中删除,对文档布局没有任何影响。

阅读全文

CSS魔法堂:你真的理解z-index吗?

假如只是开发简单的弹窗效果,懂得通过z-index来调整元素间的层叠关系就够了。但要将多个弹窗间层叠关系给处理好,那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了。本文作为对W3C Recommendation-Layered presentation学习后整理的笔记,以便日后查阅。

由于将英文名词翻译为中文名词容易产生歧义(如Normal flow被翻译为文档流),因此本文将直接采用原英文名词,而涉及到的英文名词解释如下:

non-positioned element:无CSS定位的元素,也就是position: static的元素。

positioned element:CSS定位的元素,也就是position: relative/absolute/fixed的元素。

box:文档树由element组成,渲染树由box组成,实际进行元素大小、布局渲染操作的对象是box进行而不是element。box由element对应生成(也有是anonymous box不是由element对应生成,而是渲染器根据规则自动生成),non-positioned element对应的是non-position box,positioned element对应的是position box。

z-axis:box定位坐标系中的z轴。

stacking context:层叠上下文,z-axis的基本组成单位。box与stacking context的映射关系为N:1。每个stacking context有一个父context(除了root stacking context外)和0~N个子context。

root stacking context:与根box(html/body对应的box)对应的层叠上下文,是其他stacking context的祖先context,root stacking context的范围覆盖整条z-axis。

阅读全文

CSS实现垂直居中的常用方法

在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。

首先,定义一个需要垂直居中的div元素,他的宽度和高度均为300px,背景色为橙色。代码如下:

效果如下:

我们需要使得这个橙色的div居中,到底该怎么办呢?首先我们实现水平居中,上面已经提到过了,可以通过设置margin: 0 auto实现水平居中,代码如下:

效果如下:

很好,已经实现水平居中了!接下来该打大boss了——实现垂直居中。不过,在这之前,我们先要设置div元素的祖先元素html和body的高度为100%(因为他们默认是为0的),并且清除默认样式,即把margin和padding设置为0(如果不清除默认样式的话,浏览器就会出现滚动条,聪明的亲,自己想想问什么)。

接下来,需要做的事情就是要让div往下移动了。我们都知道top属性可以使得元素向下偏移的。但是,由于默认情况下,元素在文档流里是从上往下、从左到右紧密的布局的,我们不可以直接通过top属性改变它的垂直偏移。这就需要使用position属性,设置它的值为relative,就可以通过top、bottom、right、left等属性使它在正常的文档流中发生位置偏移(注意,此时它在并没有脱离文档流,原来的位置还会占据着的!)。对于position属性不熟悉的,可以自己去w3c看一下。设置了position: relative后的代码如下:

阅读全文