首页  思维导图  详情

前端CSS知识点

2017-05-22 11:21:04   0  举报





仅支持查看

AI智能生成

前端CSS知识点

前端

CSS

作者其他创作

大纲/内容

拓展知识

命名规则

基于功能

它是用来干什么的

.button/.form/.list/.tab-list/.nav

优先使用

样式与内容无关

基于内容

元素里面放的是什么

.news/.user-info/.help/.contact-me

中小型网站可以给予内容去命名

基于视觉

看起来是什么样？

.round-image/.nowrap

大型网站可以基于视觉去命名

不要使用太具体的样式

现在比流行的命名方式

BEM

块Block

.block

元素Element

.block__element

修饰符Modifier

.block__element--modifer

eg. tab__item--active

文件结构

basic

css reset

设置HTML标签的默认样式

使其在各个浏览器表现基本一致

让默认样式归零

normalize.css

设置HTML标签的默认样式

使其在各个浏览器表现基本一致

保留标签的默认样式

moudles

可复用的css代码段

与模块在HTML中的位置无关

（一般）与使用的HTML标签无关

抽取css模块原则

面向对象

结构和皮肤分离

.btn .btn--primary .btn--info .btn--danger

容器和内容分离

/* 不推荐这样写 */
.header .btn {
background: #f66;
color: #fff;
}

这样就没有遵循与位置无关原则

单一职责

尽可能细的拆分成可独立复用的组件

通过组合方式使用多个组件

比如将布局和其它样式拆分

开闭原则

对扩展开放

对修改关闭

DRY

pages

CSS预处理

Less

Sass

PostCSS

stylus

响应式

媒体查询

基础知识

CSS语法

引用

方法

行内式

语法：<h1 style="font-size:18px;">xxxx</h1>

俗称行内样式，在style属性中设置CSS样式

标记本身定义的style优先于其他所有的样式定义

嵌入式

导入式

先加载页面，后加载样式

链接式

先加载样式，后加载页面

外部样式表优先级低于内部样式表

CSS中 link 和@import 的区别是

(1) link属于HTML标签，而@import是CSS提供的;

(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

(4) link方式的样式的权重高于@import的权重.

CSS选择器

分类

元素选择器

通配选择器* { }

标签选择器(div, h1, p)

id选择器(#id)

类选择器(.class)

关系选择器

后代选择器(E F)

子选择器(E>F)

相邻选择器(E+F)

兄弟选择器(E~F)

选择E元素后面的所有兄弟元素F。

属性选择器

E[att]

选择具有att属性的E元素。

E[att="val"]

选择具有att属性且属性值等于val的E元素。

E[att~="val"]

选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

E[att^="val"]

选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"]

选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"]

选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"]

选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

伪类选择器

E:link，E:visited，E:hover，E:active

E:focus

设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。

E:not()

匹配不含有s选择符的元素E。

E:first-child

匹配父元素的第一个子元素E

E:last-child

匹配父元素的最后一个子元素E

E:only-child

匹配父元素仅有的一个子元素E

E:nth-child(n)

匹配父元素的第n个子元素E

E:nth-last-child(n)

匹配父元素的倒数第n个子元素E

E:first-of-type

匹配同类型中的第一个同级兄弟元素E

E:last-of-type

匹配同类型中的最后一个同级兄弟元素E

E:only-of-type

匹配同类型中的唯一的一个同级兄弟元素E

E:nth-of-type(n)

匹配同类型中的第n个同级兄弟元素E

E:nth-last-of-type(n)

匹配同类型中的倒数第n个同级兄弟元素E

E:empty

匹配没有任何子元素（包括text节点）的元素E

E:checked

匹配用户界面上处于选中状态的元素E

E:enabled

匹配用户界面上处于可用状态的元素E

E:disabled

匹配用户界面上处于禁用状态的元素E

E:target

匹配相关URL指向的E元素

伪元素选择器

E:first-letter/E::first-letter

设置对象内的第一个字符的样式。

E:first-line/E::first-line

设置对象内的第一行的样式。

E:before/E::before

设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

E:after/E::after

设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

E::selection

设置对象被选择时的颜色

优先级

1.优先级就近原则，同权重情况下样式定义最近者为准;

2.载入样式以最后载入的定位为准;

3.!important > id > class > tag

4.important 比内联优先级高，但内联比 id 要高

5.行内样式 > 内嵌样式 > 外部样式

6.ID选择器 > 类选择器 > 标签选择器

属性

盒子模型

1）盒模型：内容(content)、填充(padding)、边框(border)、外边距(margin)

2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;

display

inline 强制显示行内级别元素

行内元素会在一条直线上排列，都是同一行，不会换行

block 强制块级元素显示

块级元素各占据一行，垂直方向排序，块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素
属性不同，主要在盒模型上行内 width、height无效，margin上下无效、padding上下无效

inline-block 行内块级元素

行内块级元素：将对象呈递为内联对象，但是对象的内容作为块对象呈递。

none

隐藏对应的元素，在文档布局中不在给他分配空间，它各边的元素会合拢，当不存在

visibility：hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间

postion

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

absolute和fixed的区别

A：共同点：

1.改变行内元素的呈现方式，display被置为block；

2.让元素脱离普通流，不占据空间；

3.默认会覆盖到非定位元素上

B不同点：

absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。

当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

float

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留
1、使用空标签清除浮动。在所有浮动标签后面添加一个空标签，定义css clear:both 弊端就是添加了无意义的标签
所以我们在使用浮动进行布局的时候会需要一个块级元素（行内元素无效）来设置 clear 属性，如果浮动元素下方本来就有元素，那我们可以直接对该元素设置 clear:both ，若没有其他元素需要展示，我们往往会写一个空白标签来清除浮动
<div stylr="clear:both"></div>
2、使用overflow。给包含浮动元素的父标签添加css属性，overflow:auto;zoom:1
3、使用after伪对象清除浮动。适合非IE
所以考虑使用伪元素 :after 来代替这个空白标签，因为清除浮动需要在浮动元素后面，所以不可以使用 :before ，对 :after 设置 content:"" ，并使其 display:block 成为块级元素后 clear:both 来清除浮动：
<div><div></div>::after</div>

#content:after{content:"";display:block;clear:both;}

浮动元素引起的问题和解决办法

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若非第一个元素浮动，该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决办法：
使用css中的clear：both；属性来清除元素的浮动，可以解决2、3问题
对于问题1：.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

        .clearfix{display: inline-block;} 

使用after伪元素
1、使用额外标签法，<div style="clear:both;"></div>
2、使用after伪元素
#parent:after{

    content:".";

    height:0;

    visibility:hidden;

    display:block;

    clear:both;

}

3、浮动外部元素
4、设置overflow为hidden或者auto

布局

flexbox

float

变形与动画

transition（过渡）

transform（变换）

translate()

rotate()

scale()

skew()

matrix()

animation（动画）

继承

可继承的样式：

1.font-size

2.font-family

3.color

4.text-indent

不可继承的样式：

1.border

2.padding

3.margin

4.width

5.height

媒体查询 media query

排版

居中浮动元素

设置宽度，margin：0 auto

position：relative；width，height，top，right，margin-left，margin-top

  超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
    L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

CSS sprites

将网页中的一些背景图片整合到一张图片文件中
利用css：background-image，background-repeat，background-position组合进行背景定位

这样可以减少很多图片请求的开销，因为请求耗时比较长
请求虽然可以并发，但是有限制

CSS hack

CSS 条件 Hack

CSS 属性 HACK

语法：

selector{<hack>?property:value<hack>?;}

大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。
\9 ：IE6+都支持
_和- ：仅IE6支持
* ：IE6、E7支持
\0 ：IE8、IE9支持，opera部分支持
\9\0 ：IE8部分支持、IE9支持
\0\9 ：IE8、IE9支持

例如

.test{	
 color:#090\9; /* For IE8+ */	
 *color:#f00;  /* For IE7 and earlier */	
 _color:#ff0;  /* For IE6 and earlier */
}

CSS 选择符 HACK

目前最常见的：

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

参考资料

CSS hack大全&详解

CSS HACKs 大全

BFC块级格式化上下文

原理

应用

与haslayout的区别

速查词典

Gpu加速