css总结

技术2025-09-30 40

什么是CSS

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表。

1.用于HTML文档中元素样式的定义。

实现了将内容与表现分离。

提高代码的可重用性和可维护性。

2.文件后缀是.css。

CSS与HTML之间的关系

1.HTML用于构建网页的结构

2.CSS用于构建HTML元素的样式

3.HTML是页面的内容组成，CSS是页面的表现

结构层 HTML

表示层 CSS

行为层 JavaScript

使用CSS样式表的方式

1.内联方式

直接把CSS代码用style属性添加到开始标签中

2.内部样式表

直接把CSS代码添加到头部的style标签中

<head>

<style>

p{color:red;}

</style>

</head>

3.外部样式表

4.导入式

<head>

<style>

@import url(my.css);

</style>

</head>

优先级：行内样式>内部样式>外部样式>导入样式

注：css加载方式link和@import的区别，为什么不推荐使用@import?

1. @import是CSS提供加载样式的一种方式，只能用于加载CSS。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属性等。

2. 加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显。

3. 兼容性的差别。@import在IE5以上才能识别，而link标签无此问题。

4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成。

5.使用@import方式会增加HTTP请求，会影响加载速度，所以谨慎使用该方法。

css语法

1.css是以属性/值对形式出现

2.属性和属性值之间用冒号（:）连接

3.多对属性之间用分号（;）隔开

如：color：red；

CSS样式表特征

1.继承性

指被包含在内部的标签可以拥有外部标签的样式，比如：text-*、font-*、line-*，但有些属性不能继承，比如：border、padding、margin

2.层叠性

可以定义多个样式

3.优先级

样式定义冲突时，按照不同样式规则的优先级来应用样式

css基础选择器

1.通用选择器，全局选择器（*）

可以与任何元素匹配

常用于设置一些默认样式

优先级最低

2.元素选择器

HTML文档中的元素

p、b、div、a、img、body等

3.类选择器

.className{ } 如：.box{ color:red; }

类名不能以数字开头

一个页面中class名字可以重复

4.ID选择器

#idName{ } 如：#box{color:red;}

一个页面中id相同的id名只能出现一次

一般重复使用的样式不使用ID选择器，因为ID属性是唯一的

5.合并选择器

语法：选择器1,选择器2,...{ }

作用：提取共同的样式，减少重复代码

例如：.header,.footer{height:300px;}

div+css布局

内容和显示分离，便于维护扩展，网页布局方便，当需求改变的时候，效果最明显

div：

1.可定义文档中的分区或节

2.可以把文档分割为独立的、不同的部分。

3.是一个块级元素。这意味着它的内容自动地开始一个新行

4.通常与css进行配合，会有更加强的表现形式

布局实例时需要用到的css属性

width:数值

height:数值

background-color:颜色

float:left 使div不占据一行

css基础样式和css3选择器

一、背景

1.background-color 背景颜色

默认值是transparent(透明的)

当同时定义了背景图像和颜色时，背景图像将覆盖在背景颜色之上

.divclass{ background-color:#808080;}

颜色的取值：

1.关键字：red、blue等

2.16进制：#000000、#cccccc、#ff0000等

3.rgb(0,0,0)

4.rgba(0,0,0,.5)

2.background-image 背景图片

默认值是none(没有图片)

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距

通过url使用绝对或相对地址指定图片

3.background-repeat 背景图片是否重复

body

{

background-repeat: no-repeat;

}

4.background-size 背景图片大小

5.background-position 背景图片位置（相对于外层容器）

6.background-attachment：背景图片是否随内容滚动

body

{

background-attachment: fixed;

}

7.background

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性：

background-color

background-image

background-repeat

background-attachment

background-position

background-size

如果不设置其中的某个值，也不会出问题，取默认值，比如 background:url('smiley.gif') no-repeat; 也是允许的。

二、字体属性

1.color 规定文本的颜色

如：

div{ color:red;}

div{ color:#ff0000;}

div{ color:rgb(255,0,0);}

div{ color:rgba(255,0,0,.5);}

2.font-style 指定文本的字体样式（正常、斜体）

默认值 normal

属性值

normal 正常字体

italic 斜体字

p{ font-style:italic; }

3.font-size 指定文本字体大小

通过像素来指定字体大小 1px = 1像素

p{ font-size:12px; }

4.font-family 定义文本使用某个字体

默认值由浏览器确定

示例

font-family:microsoft YaHei;

font-family:"Microsoft YaHei","Simsun","SimHei";

5.font-weight 指定文字的粗细

6.letter-spacing:;设置字的间距如：div{letter-spacing:2px;}

7.opacity 设置颜色的透明度，整个元素都会透明

默认值1，取值为0-1

1为不透明，0为完全透明

示例

p{ opacity: 0;} 隐藏一个元素，完全不显示，但是会占空间，只是看不到。

p{ opacity: 1;} 显示一个元素

它和rgba中的”a”作用一样

8.overflow: hidden|auto|scroll;当内容溢出元素框时隐藏|自动|显示滚动条

9.text-overflow：让溢出的文字以省略号显示

p{ height: 20px; width:100px; background:#ddd;

white-space: nowrap; //让文字在同一行显示，不换行

overflow: hidden; //溢出部分隐藏

text-overflow: ellipsis; //文字溢出部分省略号显示，另外一个值为clip

}

<p>这段文字多余的部分会显示为省略号</p>

三、文本属性

1.text-align 内容对齐方式，它是针对于元素的内容

属性值 left |center |right

p{text-align: center;}

p是块元素，left、right和center会作用于整个行

2.text-decoration 指定文字有无装饰，默认值为none

属性值：

underline 指定文字的装饰是下划线

overline 指定文字的装饰是上划线

line-through 指定文字的装饰是贯穿线，类似于删除标签的效果

3.text-transform 设置对象中的文本的大小写

默认值none 无转换

属性值

capitalize 将每个单词的第一个字母转换成大写

p{ text-transform: capitalize; }

<p>this is paragraph</p>

uppercase 全部转换成大写

p{ text-transform: uppercase; }

lowercase 转换成小写

p{ text-transform: lowercase; }

<p>THIS IS PARAGRAPH</p>

4.text-indent文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

如：p {text-indent:2em;}

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。

5.word-wrap 设置当前行超过指定容器的边界时是否换行

首先我们要知道一种情况：如果你容器中的单词过长，超出了容器本身的宽度，会造成“长单词溢出”

word-wrap: break-word;可设置过长的文本自动换行

5.vertical-align 设置对象内容的垂直对其方式。

是容器中元素相对于内容的显示

示例

div{ background:orange; height: 100px;}

a {display:inline-block; height:100px; width:80px; background:red; vertical-align: middle;}

<div>这里有内容<a href="#"></a></div>

*div中定义a，vertical定义的是a相对于div内容的对齐方式，它和容器的高度无关，与文字内容有关

示例2

p{ background:orange; }

img{ width:100px; vertical-align: middle; }

<p>this is paragraph!!!<img src="images/boy.jpg" alt=""/></p>

6.line-height 设置对象的行高（不允许使用负值）

我们一般用行高来使一行文字垂直居中，当行高等于高时，一行文字垂直居中

四、列表属性

1.list-style-image 设置列表项标记的图像(项目符号)

只有一个属性url，引导一个图片

ul{ list-style-image: url("images/icon.png");}

示例

用list-style-image重置项目符号示例

.test{list-style-image:url(skin/ico.png);}

//整体重置作用于ul，单个设置用于li上

</ul>

2.list-style-position 设置列表项标记如何根据文本排列

这个属性有两个值outside和inside

outside项目符号放在文本以外（默认）

ul li{ list-style-position:outside; width:100px; border:1px solid red;}

inside项目符号放在文本以内

ul li{ list-style-position:inside; width:100px; border:1px solid red;}

3.list-style-type 设置列表项所使用的预设标记

可选值

none不使用项目符号

disc实心圆（相当于html属性type=”disc”）

circle空心圆

square实心方块

示例

ul{ list-style-type:circle;}

4.list-style

复合属性

写法

list-style：list-style-image list-style-position list-style-type

把之前几个属性值写在一个list-style中

示例

ul{ list-style: url("images/icon.png") outside disc;}

前面设置了图片，最后再设置项目符号的目的是，如果图片未能正常显示，可以有符号来代替

css3选择器

首先CSS选择器分这么几大类：

1.基础选择器

2.合并选择器

3.关系选择器

4.属性选择器

5.伪类选择器

6.伪对象选择器

一、关系选择器

1.后代选择器 (E F)

选择所有被E元素包含的F元素，中间用空格隔开

ul li{ color:red; }

<ul>

</ul>

2.子代选择器 (E > F)

选择所有作为E元素的直接子元素F，对孙子元素不起作用，用大于号表示

div>a{ color:red;} //div下的一级子元素a

<div>

<a href="#">这是子元素</a>

<p><a href="#">这是孙子元素</a></p>

</div>

3.相邻兄弟选择器 (E+F)

选择紧贴在E元素之后F元素，用加号表示，选择相邻的第一个兄弟元素。

p+span{ color:red;} //只会选中第一个span

<p>这是p元素</p>

<span>这是紧挨着p元素的第一个span</span>

<span>这是第二个span</span>

4.通用兄弟选择器 (E~F)

选择E元素之后的所有兄弟元素F，作用于多个元素，用~号隔开。

p~span{ color:red;}

//和p之后平级的span元素都被选中了，有几个选中几个

<span>这span在p元素之前不会被选中</span>

<p>这是p元素</p>

<span>这是紧挨着p元素的第一个span</span>

<span>这是第二个span</span>

<span>这是第三个span，它和p是兄弟关系</span>

二、CSS属性选择器：

通过html的属性来选择元素，<p class=”p1”></p> class即是属性，p1是class的属性值。

写法：元素[ 属性名= “属性值”] ，等号不固定，可换其它符号

1.E[att]

2.E[att="val"]

3.E[att~="val"]

4.E[att^=“val"] 以val开头

5.E[att$=“val"] 以val结尾

6.E[att*=“val"] 包含val

7.E[att|="val"]

1.E[att] 选择具有attr属性的E元素

p[class]{ color:red;} //选择带有class属性的p标签

*不管class名为什么，只要有class属性，即符合

2.E[att="val"] 选择具有att属性且属性值等于val的E元素。

它不仅要有符合的属性，值也要符合才会被选中。

p[class="p4"]{ color:red;} //选择p元素里class等于p4的元素，属性值要用引号引起来

3.E[att~="val"] 选择有att属性的元素，且属性值列表中有一个符合val的元素

比如我们的class属性，它的值通常是多个样式，中间以空格隔开，只要有一个值符合就被选中

p[class~="p1"]{ color:red;} //选中p元素下class值包含p1的元素

<p class="p1 paragraph p11">这是个段落</p>

<p class="p1paragraph p11">这是个段落</p> //不会被选中，p1paragraph被看作一个整体

<p class="p1">这是个段落</p>

<p class="paragraph p1 p11">这是个段落</p> //与位置无关，这行也会被选中

<p class="p11">这是个段落</p>

4.E[att^=“val"] 选择E元素中有att属性，且以”val”开头的元素

p[class^="p"]{ color:red;} //选择带有class属性，属性值以p开头的元素

<p class="p1 paragraph p11">这是个段落</p>

<p class="p1paragraph p11">这是个段落</p>

<p class="p1">这是个段落</p>

<p class="paragraph p11">这是个段落</p>

<p class="p11">这是个段落</p>

*以上全部是以class值以p开头的，所以全部选中

5.E[att$=“val"] 选择具有att属性且属性值为以val结尾的字符串的E元素

p[class$="p"]{ color:red;} //选择p元素中class属性值以p结尾的元素

<p class="p1 paragraph p11p">这是个段落</p>

<p class="p1paragraph p11">这是个段落</p>

<p class="p1">这是个段落</p>

<p class="paragraph p1 p11">这是个段落</p>

<p class="p11p">这是个段落</p>

6.E[att*=“val"] 选择具有att属性且属性值包含val的字符串的E元素。

a[href*="baidu"]{font-weight: bold;} //选择a标签中href属性值包含baidu的元素

<a href="#">空的超链接</a>

7.E[att|="val"] 选择具有att属性，并且属性值用“链接符隔开”，以val开头的元素（val指链接符前完整的前缀）

项目中我们命名class名时，经常会以这种方式”sxt-work”，中间以一个中划线隔开。这时候使用此属性再合适不过。

div[class|="sxt"]{ color:red;} //div里class类名中有链接符，并且以sxt开头的元素

<div class="sxt-work">这是块元素work</div>

<div class="work-sxt">这是块元素car</div> //不是以sxt开头

<div class="sxt-pen">这是块元素pen</div>

<div class="sxtpen">这是块元素pen</div> //没有链接符

三、伪类选择器

伪类通过冒号来定义，它定义了元素的状态，如点击按下、点击完等等，我们之前都是直接操作元素的样式，现在可以为元素的状态改样式，使元素看上去更“动态”。

1.E:link

2.E:visited

3.E:hover

4.E:active

5.E:not()

6.E:first-child

7.E:last-child

8.E:only-child

9.E:empty

10.E:checked

11.E:nth-child()

1.E:link

设置超链接a在未被访问前的样式（特指a标签）

a:link{ color:red;} //未访问时a的颜色，设置别的元素没有效果

2.E:visited

设置超链接a在其链接地址已被访问过时的样式（特指a标签）

a:visited{ color:green;} //点击过后的超链接样式

*测试时，在url后面加参数使页面达到未访问过的状态

3.E:hover

设置鼠标悬停在元素上时的样式。不限于a标签，p、li也可以使用

a:hover{ color:red;}

p:hover{ color:red;}

<a href="#">这是个超级链接</a>

<p>这是个段落</p>

4.E:active

设置元素在鼠标按下时的样式（不限于a标签）

a:active{ color:red;}

p:active{color:yellow;}

div:active{ color:blue;}

<div>这是div</div>

注：四个同时存在顺序为：lvha

5.E:not(s选择器) 匹配不含有s选择器的元素E。

div:not(.d1){ color: red;}

//选择除了类名为d1的元素，注意，not()中的值不加引号！

5.E:not(s选择器) 匹配不含有s选择器的元素E。

div:not(.d1){ color: red;}

//选择除了类名为d1的元素，注意，not()中的值不加引号！

6.E:first-child 父元素的第一个子元素E。

要使该属性生效，E元素必须是某个元素的子元素。一般元素都是body的子元素，所以都可以使用此伪类。而body标签不是子元素，所以 body:first-child

{ background:#ddd;} 是无效的。

<ul>

</ul>

<ul>

</ul>

注意观察两个样式的区别

li:first-child{ color:red;}

ul:first-child{ color:red;}

这个属性的意思是被选元素本身是子元素，并且是它父元素中的第一个

7.E:last-child 父元素的最后一个子元素E

<ul>

</ul>

<ul>

<li>元素</li> 不会变红，因为它不是最后一个

<h3>底部第一个</h3>

</ul>

8.E:only-child E元素是唯一的子元素时被匹配

<body>

</body>

此时body中只有这一个元素，所以 p:only-child{ color: deepskyblue;} 会生效

<body>

</body>

这时body的子元素不是唯一的了，所以 p:only-child{ color: deepskyblue;} 不会生效

9.E:empty 匹配没有任何子元素（并且不包括text节点）的元素E

p:empty{ border:1px solid red;padding:10px;}

<p></p>

<div></div> //空，但不是P元素

<p>我是一个p元素</p> //有text文本节点

<p><a href="#">百度</a></p> //有子元素

10.E:checked

匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

input:checked+span{color:red;}

*input下被选中的元素紧挨着的span颜色为红色，因为选中状态会变，所以看着像动态的

11.E:nth-child() 选中第几个子元素

</div>

.box p:nth-child(2){

color: red;

}

//选中第二个p元素

.box p:nth-child(even){

color: red;

}

//选中第偶数个子元素

.box p:nth-child(odd){

color: red;

}

//选中第奇数个子元素

四、伪对象选择器

伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上应该 :weilei ::weiyuansu，而现在我们为了兼容旧的书写方式，用一个冒号引导伪元素也是能被解析的。

伪类一般反映无法在CSS中轻松或者可靠检测到的某个元素的状态或者属性；

伪元素表示DOM外部的某种文档结构

伪类更多是定义元素的状态，而伪元素则是改变文档结构，在结构外另加一个没有实际存在的元素(伪元素)

常用伪元素

1.E:before/E::before

2.E:after/E::after

1.E:before/E::before

before 选择器在被选元素的”内容”前面插入内容。用来和content属性一起使用

虽然E:before可转化为E::before，但是你写伪元素时要规范，用两个冒号 p::before{ content:"在P标签元素内容前加了内容"; color: red;}

//它并没有在html文件结构中

<p></p>

2.E:after/E::after

after选择器在被选元素的”内容”后面插入内容

p::after{ content:"在P标签元素内容前加了内容"; color: red;}

<p></p>

*content属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

CSS选择器优先级

优先级数值比较：以数值大的为准

记住以下四个然后进行计算

style = 1000

id = 100

class = 10

element = 1

style样式>ID选择器>class选择器>元素选择器

优先级相同，写在后面的样式起作用

盒子模型

一、盒子模型

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成是一个个盒子。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border)、外边距(margin)。转换到我们日常生活中，可以拿红酒来对比，红酒=内容，内边距=盒子中的填充物，边框=盒子的厚度，外边距=两个红酒之间的距离。

二、W3C盒模型

盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成

border边框

border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称“边框三要素”。

三要素书写的时候一般如下顺序

border：宽度样式颜色

border: 1px solid red;

不过不按此顺序来写依然能正常显示。

div{ border: red solid 2px; }

border-style设置边框的样式，有五种常用样式可选

点状dotted

实线solid

双线double （需要最起码设置为3像素，不然显示不下）

虚线dashed

无边框none

border的三要素可以统一写在”border”属性中，也可以单独设置。

统一的写法：border: 1px solid red;

单独设置的写法：

border-width:;

border-style:;

border-color:;

要注意，在style属性为空的情况下，整个边框是不会出现的。这不论是统一写在border或是单独设置都是这样的。

不写width会有默认3像素的值。

不写颜色会默认为黑色。

外边距

围绕在元素边框周围的空白区域会在元素外创建额外的空白区域外边距是透明的语法：margin:value;单边设置 margin-top/right/bottom/left: value;value可取值为像素，%，auto，负值外边距简写 margin:value(四个方向相同) ; margin: value(上下) value(左右); margin: value(上) value(左右) value(下); margin: value(上) value(右) value(下) value(左);

外边距合并

当两个垂直外边距相遇时，他们将形成一个外边距，成为外边距合并合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

margin设置元素外边距的宽度，它有这么几个特点

1. 块级元素的垂直相邻外边距会合并

2. 行内元素实际上不占上下外边距。行内元素的的左右外边距不合并

3. 浮动元素的外边距也不会合并

4. 允许指定负的外边距值，不过使用时要小心

内边距

内容区域和边框之间的空间会扩大元素边框所占用的区域语法：padding:value;单边设置 padding-top/right/bottom/left:value;value可取值为像素，百分比，但不能为负数内边距的简写 padding:value(四个方向相同) ; padding: value(上下) value(左右); padding: value(上) value(左右) value(下); padding: value(上) value(右) value(下) value(左);

三、怪异盒模型

盒子模型分两种，一种是符合W3C规范的标准例子模型，另一种是IE的盒子模型，IE的盒子模型也被叫怪异盒子。

可以看到 IE 盒子模型也包括 margin、border、padding、content，不过，和标准盒子模型不同的是：IE 盒子模型的宽，包含了 border 和 pading。

Box-sizing

box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素，以适应区域。换句话说，当前元素使用哪种盒模型，可以由box-sizing属性来指定

它有两个值

content-box（标准）

padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型。

border-box（怪异）

padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。

四、伸缩盒模型flexbox

伸缩盒模型也叫弹性盒模型，或flexBox。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建“自适应”浏览器窗口的流动布局。

flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于HTML文档流排列，使用弹性盒模型可以规定特定的顺序。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。

目的：在浏览器窗口变化时，盒子相应改变大小。

设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用。

flexbox的基础知识

由于 flexbox是一个整体的模块，它们之中一些属性是在父容器上设置，而一些是在子容器上设置。

一个flexbox的基本结构：

.box{ display: flex;} //最外层的为父容器，定义此容器为弹性布局

.item1{ flex-grow: 1; background:pink} flex-grow占1比例

.item2{ flex-grow: 2; background:orange} 占2比例

.item3{ flex-grow: 3; background:red} 占3比例

</div>

1.首先规定哪个是父容器，父容器中包含多个“项目”（每个子div），项目是可以在父容器中弹性布局的。

2.其次还可以规定父容器中要怎么来显示它里面的项目，如是否换行、项目排列方向等

父容器常用属性

1.父容器中的常用属性

display: flex;

定义一个flex容器

新弹性盒设置父元素是一个弹性盒，子元素会自动水平排列

2.父容器中的常用属性

justify-content: flex-end;

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

3.父容器常用属性

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

4.子元素常用属性

*伸缩盒中的每一个元素称为一个项目。

flex-grow: number;

一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

.item1{ flex-grow: 1; background:pink}

.item2{ flex-grow: 1; background:orange}

.item3{ flex-grow: 1; background:red}

旧的伸缩盒

伸缩盒从被提出到如今一直在修改，所以这里涉及到了新老写法

伸缩盒最老版本

display:box;

将对象作为弹性伸缩盒显示（火狐和webkit内核都支持display:-webkit-box;或display:-moz-box;）

子元素 box-flex:;

伸缩盒过渡版本

display:flexbox;

将对象作为弹性伸缩盒显示

伸缩盒最新版本

display:flex;

将对象作为弹性伸缩盒显示

五、浏览器内核以及其前缀

CSS标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所以会加厂商前缀加以区分。如果某个属性已经从草案变为了或接近推荐方案，并且厂商已经完全实现了推荐属性，那就不用加厂商前缀。如border-radius已经很成熟，不用加前缀。

根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种，其它的内核都是基于此四种进行再研发的。

1.Gecko内核前缀为-moz- 火狐浏览器

2.Webkit内核前缀为-webkit- 也叫谷歌内核，chrome浏览器最先开发使用，safari浏览器也使用

该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。

3.Trident内核前缀为-ms- 也称IE内核

4.Presto内核前缀-o- 目前只有opera采用

CSS浮动定位

1.定义

定义元素框相对于其正常位置应该出现的位置

2.分类

普通流定位

浮动定位

相对定位

绝对定位

固定定位

浮动定位指将元素排除在普通流之外元素将不在页面中占据空间将浮动元素放置在包含框的左边或者右边浮动元素依旧位于包含框之内浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止浮动元素的外边缘不会超过其父元素的内边缘浮动元素不会互相重叠浮动元素不会上下浮动行内元素浮动后会变为块级元素语法：float:none/left/right;

当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边框碰到包含框的左边缘

包含框中有三个元素，如果把框1向右浮动，则它脱离文档流并且向右移动，直到它的右边框碰到包含框的右边框

如果把三个框都向左移动，那么框1向左浮动直到遇到包含框，另外两个框向左浮动直到碰到前一个浮动框，三个框在同一行显示

如果包含框太窄，那么其他浮动块会自动向下移动，直到有足够的空间（左图），如果浮动元素的高度不同，那么当他们向下移动时可能被其他浮动元素卡住（右图）

CSS 清除浮动：

描述：清除浮动是在使用了浮动之后必不可少的，为了网站布局的效果，清除浮动也变得非常麻烦。

属性：clear

值：left、right、both

清除浮动的常用方式：

1.结尾处加空div标签 clear:both （或在下一个元素上加clear:both;）

2.浮动元素的父级div定义伪元素::after

3.浮动元素的父级div定义 overflow:hidden

4.浮动元素的父元素定高

display属性

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。

块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变。

display常见属性值

1. none：隐藏对象

2. inline：指定对象为内联元素

3. block：指定对象为块元素

4. inline-block：指定对象为内联块元素

5. table-cell：指定对象作为表格单元格

6. flex：弹性盒

visibility:hidden和display:none和opacity:0的区别：

1.visibility:hidden和opacity:0会将元素隐藏，但是物理空间实际存在2.display:none 影藏元素，不保留物理空间

position定位

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

取消

网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。当然我们也可以让占用文档流的元素转换成不占文档流，这就要用到CSS中属性position、float、display来控制。默认情况下，所有元素都处在文档流中，四种情况将使得元素离开文档流：浮动float、绝对定位absolute、固定定位fixed、元素不显示display:none，这种情况不占文档流的空间，而普通元素的位置基于文档流。

z-index堆叠顺序

一旦修改了元素的定位方式，则元素可能会发生堆叠可以使用z-index属性来控制元素框出现的重叠顺序z-index仅能在定位的元素上生效z-index属性：值为数值，数值越大表示堆叠顺序越高，即离用户越近可以设置为负值，表示离用户更远，一般不要设置Z-index 仅能在定位元素上奏效

CSS3动画

CSS3

CSS3是CSS（层叠样式表）技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。

圆角border-radius 语法 border-radius：value；四个角border-radius：value value；左上右下、右上左下border-radius：value value value value；

代表设置对象左上角、右上角、右下角、左下角

顺时针设置

盒阴影box-shadow语法：box-shadow: h-shadow v-shadow blur spread color inset;

上传取消

盒阴影

HTML文档

CSS样式

.shadow{

width: 300px;

height: 100px;

background-color: red;

box-shadow: 10px 10px 5px 3px darkred;

}

消

文字阴影语法：text-shadow: h-shadow v-shadow blur color;

文字阴影

.text1{

font-size: 50px;

font-weight: bold;

color: palegreen;

text-shadow: 10px -5px 5px pink ;

}

CSS3 渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），使用代码来实现渐变可以减少请求和节约带宽。

CSS3 定义了两种类型的渐变（gradients）

线性渐变（Linear Gradients）

径向渐变（Radial Gradients）

CSS3 渐变（Gradients）

CSS3 定义了两种类型的渐变（gradients）：

1.线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

background: linear-gradient(direction, color-stop1, color-stop2, ...);

2.径向渐变（Radial Gradients）- 由它们的中心定义

background: radial-gradient(center, shape， size, start-color, ..., last-color);

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形）

它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形

转换Transform（2D转换）

CSS3中的转换允许我们对元素进行旋转、缩放、移动或倾斜。它为分2D转换或 3D 转换。

在css2时代，如果要做一些图片转换角度，都依赖于图片、Flash或JavaScript才能完成。但是现在借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。通过CSS变形，可以让元素生成静态视觉效果，但也可以很容易结合CSS3的transition和动画的keyframe产生一些动画效果。

二、转换Transform 2D的属性

通常的属性包含了属性名和属性值，而CSS3的transform属性是用函数来定义的。Transform 2D函数包括了translate()、scale()、rotate()和skew()。

书写格式:

transform:函数名(x轴值，y轴值);

转换的效果：

1.translate()函数

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。接受CSS的标准度量单位（px）

translate(x,y)：转换，沿着X和Y轴移动元素。

2.rotate()

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。它以deg为单位，代表了旋转的角度。

3.scale()

通过值把宽和高转换为原始尺寸的n倍，接受两个参数，前面的为宽，后面的为高。

可取值：

默认值为1

缩小：0-1之间的数

放大：大于1的数

4.skew()

根据水平轴和垂直轴翻转，接受两个或一个值，两个值时前面为水平，后面为垂直的角度，一个值只是水平轴的角度。此函数是指元素的倾斜角度。

三、转换Transform 3D的属性

Transform 3D常用函数有：

四、过度Transition

1.什么是过渡

使用css的属性值在一段时间内平滑的过渡

比如，鼠标悬停后，背景色在1s内，由白色平滑的过渡到红色

1）指定四个要素：

过渡属性，如background、color等

过渡所需时间

过渡函数，即过渡的速度、方式等

过渡延迟时间，表示开始执行的时间

2）触发过渡

通过用户的行为触发，如点击、悬浮等

1.过渡属性

transition-property: none|all|property;

多个属性用逗号隔开

可设置过渡的属性

颜色属性

取值为数值的属性

转换属性

渐变属性

阴影属性

2.过渡时间

transition-duration: s|ms;

默认值为0，意味着不会有效果，所以必须设置transition-duration属性

3.过渡函数

transition-timing-function: ;

取值：

ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果

linear：匀速

ease-in：规定以慢速开始，加速效果

ease-out：规定以慢速结束，减速效果

ease-in-out：规定以慢速开始和结束，先加速后减速效果

4.过渡延迟

transition-delay: s|ms;

改变元素属性值后多长时间开始执行过渡效果

5.简写属性transition

transition属性是一个简写属性，用于设置四个过渡属性

语法：transition:property duration timing-function delay;

#box{

width: 200px;

height: 200px;

background-color: #1fb57b;

transition: background 4s linear 1s;

}

#box:hover{

background-color: red;

}

五、animation动画

过渡属性只能模拟动画效果

animation属性可以制作类似Flash动画

通过关键帧控制动画的每一步

使元素从一种样式逐渐变化为另一种样式

实现复杂的动画效果

1.@keyframes

作用：用于声明动画，指定关键帧

帧，用于分解动画动作

每个帧代表某个时间点

定义每个帧上的动作

@keyframes的语法

@keyframes name {

from|0%{

css样式

}

percent{

css样式

}

to|100%{

css样式

}

2.animation属性

animation属性用于控制动画

调用由@keyframes定义的动画

设置动画属性，如时间、次数等

animation属性是一个简写属性

语法为：animation:name duration timing-function delay iteration-count direction;

3.动画子属性

animation-name: ; 调用动画，规定需要和keyframes的名字一致

animation-duration: s|ms; 动画完成一个周期所需要的时间

animation-timing-function: ; 规定动画的速度变化类型

animation-delay:s|ms ; 播放之前的延迟时间

动画子属性

animation-iteration-count: 数值|infinite; 播放次数

infinite表示无限次播放

animation-direction: normal|alternate; 动画播放方向

normal为默认值，表示正常播放

alternate表示轮流播放，即动画会在奇数次正常播放，而在偶数次向后播放

animation-fill-mode: forwards; 动画停在最后一帧

默认值为none

animation-play-state:paused|running; 属性规定动画正在运行还是暂停

默认值为running

六、绘制简单特殊图形（三角形、梯形、圆形）

（1）以CSS绘制三角形

1.首先需要有个元素作为三角的容器

2.制作三角型使用的是border属性，内容区宽高值为0

div{

width:0;

height: 0;

border-top:50px solid red;

border-left:50px solid blue;

border-right:50px solid orange;

border-bottom:50px solid green;

}

（2）以CSS绘制梯形

绘制三角型时宽和高都是0像素，给它加100的宽度看看效果。这样是不是我们只取下面的红色的区域就构成了一个梯形？

这个红色区域实际上是底部的边border-bottom，所以梯形的高度是

底部边的宽度，梯形也是借助border属性完成的。

div {

border-bottom: 80px solid red;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0;

width: 100px;

}

CSS3媒体查询、CSS3多列布局

一、Media Query响应式布局—媒体查询

应式布局是在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多的网站采用这个技术。

响应式设计一定是最佳选择吗？

如果预算充足且形势需要，做一个真正的“手机版”网站是首选。因为响应式设计没有专门设计一个手机版网站的功能多，比如获取当前用户的GPS定位，只是用响应式设计会很难实现。但如果只是根据视口大小为用户提供匹配的视觉效果还是优先选择响应式设计。

优点：

1.面对不同分辨率设备灵活性强

2.能够快捷解决多设备显示适应问题

缺点：

1.兼容各种设备工作量大，效率略慢

2.代码累赘，会出现隐藏无用的元素，加载时间加长

3.其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

4.一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

CSS中的Media Query（媒介查询）是什么？

作为CSS3规范的一部分，媒体查询可以针对不同的屏幕尺寸设置不同的样式，它为每种类型的用户提供了最佳的体验，网站在任何尺寸设置下都能有最佳的显示效果。

通过不同的媒体类型和条件定义样式表规则。

媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。

媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width

Media Queries功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式

CSS中的Media Query（媒介查询）是什么？

通过不同的媒体类型和条件定义样式表规则。

媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。

媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width

媒体查询实例

通过此实例观察媒体查询的功能后，再来分析语法

body{background-color:grey; } //正常情况是灰色

@media screen and (min-width: 992px) {//宽度大于 992px 的时候被应用 pc端

.class {background: #666;} }

@media screen and (max-width: 768px) { //宽度小于768px的时候被应用移动端

.class { background: #ccc; } }

@media screen and (min-width: 768x) and (max-width: 992px) { //宽度在 768px 和 992px 之间的时候被应用

.class { background: #333; } }

使用Media Query的基本语法

@media mediatype and|not|only (media feature) {

CSS-Code;

}

以上通过@media定义媒体查询，mediatype代表了设备类型，目前只有screen最常用，and|not|only为条件，media feature为媒体特点，通常是写设备的宽度。

@media screen and (max-width:960px) 的意思为：当前设备为screen（电脑、平板、手机）时，并且最大宽度为960时，显示的样式。

媒体类型有：

all 所有设备

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，智能手机等

speech 应用于屏幕阅读器等发声设备

用媒体查询改造我们的设计：

我们都知道，样式表里面，后面的样式会覆盖前面的样式。因此，我们可以在设置好网站基本样式后，使用媒体查询来进一步重写相应的部分。例如，在PC端将导航显示成简单的链接，然后再针对小视口，使用媒体查询重写这一部分。理论上讲最好是从小屏幕设备开始设计，然后渐进增强。但实际上我们使用媒体查询要解决的问题，都是已经存在PC端站点了，更多的是要将现有的桌面版网页改造成响应式的。

加载媒体查询的最佳方法：

使用多个独立的CSS文件会增加HTTP请求的数量，使页面加载变慢。所以我们的媒体查询样式的文件尽量放在一个里面，以注释加以区分。

阻止移动浏览器自动调整页面大小

ios和android浏览器都基于webkit内核，这两种浏览器和许多其它浏览器都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的<head>标签中插入一个<meta>标签，meta标签中可以设置具体的宽度或缩放比。下面为示例

name=”viewport” 说明此meta标签定义视口的属性

initial-scale=2.0 意思是将页面放大两倍

width=device-width 告诉浏览器页面的宽度等于设备宽度

允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半

禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放

二、多列

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。它的显示如同word中的多列。但在CSS3多列出现前，想要多列显示，要么使用定位，要么手动给文本分段落。

多列有这么几个常用属性

column-count 分几列

column-gap 列间距

column-rule 列分割线的样式

雪碧图和滑动门

一、CSS Sprite（雪碧图）

CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。

CSS Sprite原理：

其实就是把网页中的一些背景图片整合到一张图片文件中，再利用CSS的background-image、background-repeat、background-position属性，对这张大图进行定位。background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprite优点：

1. 利用CSS Sprite能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2. CSS sprite能减少图片的字节，(网络传输以字节为单位，1MB=1024千字节)，三张图片大小的总合大于拼成一张图片的大小。

3. 解决了命名困扰，只需要对一张图片命名，而非数十个小图片命名

用一句话来概述就是

“CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。”

怎么制作CSS Sprite图

我们程序员一般通过雪碧图生成工具来制作雪碧图

如何使用雪碧生成工具

1.用PS把需要的图切出来

2.打开CssSprite.exe文件

下载地址：http://download.csdn.net/detail/wx247919365/8641795

3.点击左上角按钮打开图片

4.排列图片

可以点击按钮来排列，也可以自己拖动排列，拖动完程序会根据图片的位置生成面积最小的雪碧图

5.是否是手机端

勾选后雪碧图的大小会缩小2倍

6.代码生成

有sass和css两个选项，选择后者。sass是一种CSS预处理语言，能清晰的、结构化的描述文件样式。

7.大图类型要选择png，图片背景色为Transparent透明

二、滑动门

1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。

1.2 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。

1.3 最常见于各种导航栏的滑动门。

Processed: 0.008, SQL: 9

css总结

什么是CSS

CSS与HTML之间的关系

使用CSS样式表的方式

注：css加载方式link和@import的区别，为什么不推荐使用@import?

css语法

CSS样式表特征

css基础选择器

div+css布局

css基础样式和css3选择器

一、背景

二、字体属性

三、文本属性

四、列表属性

css3选择器

首先CSS选择器分这么几大类：

一、关系选择器

二、CSS属性选择器：

三、伪类选择器

四、伪对象选择器

CSS选择器优先级

盒子模型

CSS浮动 定位

CSS3动画

CSS3媒体查询、CSS3多列布局

雪碧图和滑动门

CSS浮动定位