CSS学习笔记

Cascading Style Sheet（层叠样式表、级联样式表）

px与屏幕分辨率有关

css样式表推荐的书写顺序：

显示属性（display、list-style、position、float、clear)
自身属性（width、height、margin、padding、border、background）
文本属性（color、font、text-decoration、text-align、vertical-align、white-space、othertext、content)。

边偏移

top：定义元素相对于其父元素上边线的距离。

right：定义元素相对于其父元素右边线的距离。

bottom:定义元素相对于其父元素下边线的距离。

left:定义元素相对于其父元素左边线的距离。

例如：

top:auto/长度值/百分比

层叠定位属性

z-index

h1和p元素之间默认会保留间隙，浏览器在标记上应用默认的上下边界

为标题指定一个负的下边距

边距可以是负值，填充不可以是负值

span可以单独设置样式

行间距（行高）可以用line-height

line-height可以不用单位，有单位的话，span将会继承实际的行距，而不会继承比例。

hr水平线的样式：基于Mozilla的李岚清使用background-color定义线的颜色，IE用color定义

图片边框：img { border： ... }

属性border="0"即css中的border: none

body添加background-image（默认是横纵向都平铺）设置背景图像，以前是在body添加background属性。

可以在任何网页元素上使用背景图像，比如标题，链接。

eg:

a: hover {

background-image: url(dotty.gif);

}

定位背景图像：background-position（如果仅指定了其中一个值，另一个默认为居中center或50%）

向文档里添加一幅以上的背景图像：

可以通过在嵌套元素上应用背景给出多幅背景图像效果，比如html标记和body标记

background-attachment:

display: block;

padding: 5px 5px 2px 0.5em;

border-left: 12px solid #711515;

border-right: 1px solid #711515;

border-bottom: 2px solid #711515;

:hover在Mozilla中可以用于任一元素，IE中只能应用于超链接。

翻转效果：用:hover、color和background-color

子导航用嵌套列表

<ul>

<li>

<a href="">Recipes</a>

<ul>

</ul>

</li>

</ul>

li用display:inline

li的border-bottom: 1px solid #FFFFFF;

content的border-top: none;

cursor

text

move

..-resize

a {

padding: 10px;

border-top: 1px solid #FFFFFF;

border-bottom: 1px solid #717171;

border-left: 1px solid #FFFFFF;

border-right: 1px solid #717171;

text-decoration: none;

}

a:hover{

border-bottom: 1px solid #FFFFFF;

border-top: 1px solid #717171;

border-right: 1px solid #FFFFFF;

border-left: 1px solid #717171;

}

a可以加background图片top left no-repeat

可以在导航前加图像

/*中文也有效*/

p:first-letter {

font-size: 2em;

padding: 0.1em;

color: red;

font-family: arial, "times new roman", "楷体";

vertical-align: middle; /*这个属性我好少用*/

}

p:first-line {

color: orange;

}

p:first-child {

margin-left: 4em;

}

.me:after {

content: "Look at me now";

}

#ha:before {

content: "O(∩_∩)O哈哈~";

}

组：用一个框把成组的元素围起来

fieldset

legend 即名称

input元素里可以设置快捷键accesskey="p"

input:focus伪类 border: 2px solid #000;

IE不支持的时候，可以通过onfocus属性、onblur属性和js添加

CSS适用的场合

保证一个网页上相同元素具有一致的风格

保证同一网站上多个网页风格一致

通过CSS样式定义DIV标签，实现网页布局设计

CSS三个层次
- 内联样式表(内联样式、行内样式)
- 文档样式表(内嵌样式、内部样式表)
- 外部样式表
- 浏览器缺省样式
当出现同一个 HTML元素被不止一个样式定义时, 就产生冲突，则较低层次的优先
内联样式只出现在标签内部, 作用于单个标签元素
文档样式出现在<head></head>, 作用于整个文档
外部样式表以外部文件独立存储, 作用于多个文档
- 如<link rel="stylesheet" type="text/css"

href="http://www.zhku.edu.cn/styles/w.css"/>

或@import url(http://abc.com/www.css)

标签选择器(标记选择器、类型选择器)

id选择器只能作用于文档中唯一一个标签实例

(id在同一个页面也可以用好几次)

上下文选择器(标签指定式选择器、后代选择器)

限定文档中某些特定位置上的元素

form em {font-size ： 14pt； < form action= C010r ： red < p 〉 < em > 样式作用的文字 < / em > 其他文字〈 / p 〉

其他文字

一回冈 0 CSS 一 Tindovs Int ernet. 贮、仲恺享校、时 v ，收 0 css # 过倘．之李其他文字其他文字我的电 " v:shapes="图片_x0020_307">

伪类

当某种事件发生时才作用的样式

如 hover对应鼠标悬浮在控件上发生的事件

focus对应控件获取焦点的事件

超链接样式的伪类（有顺序的）

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

注意这四个是有顺序的！

属性	描述	例子
:active	被激活的元素时的样式	a:active
:focus	拥有键盘输入焦点的样式	input:focus
:hover	鼠标悬浮在元素上方时的样式	a:hover
:link	未被访问的链接的样式	a:link
:visited	已被访问的链接的样式	a:visited
:first-child	元素的第一个子元素的样式	p:first-child
:last-child	元素的最后一个子元素的样式	p:last-child
:first-letter	元素第一个文本字符的样式	p:first-letter
:first-line	元素第一行的样式	p:first-line
:only-child	只有一个儿子元素的样式	p:only-child
:empty	没有儿子元素的	p:empty

< style type="text/css"> p ： first-child {C010r ： red} p ： last-child { C010r ： blue ； }

first-child

不是 first-child

first-child

不是 first-child

last-child

< / body> 二 file:///F: first-child 不是 first-child fi rst-child 不是 first-child last-child " v:shapes="图片_x0020_306">

[title] { C010r ： blue ； } a[href] {C010r ： red; } a[href="abc.com/] {C010r ： blue <,/head> < body >

< h3 > 没有应用 t tle 属性 < / h3 > < p > 没有应用 t tle 属性 < / p >

以 F 、仲芑学、旧应用 title 属性应用 titlea•t± 没有应用 title 属性没有应用 title 属性 fiö*hrefä# 没有应用属性齑用 hre 性

ßi 用 < a > 没有应用属性〈 / a × br / 〉 < a href="abc.com/>hü用 href,"ft

< / body> " v:shapes="图片_x0020_305">

子代选择器（P110）

限定某个元素下的第一级元素（第一个儿子节点）

0 CSS - 胤 0 il I FirefO* 文件 0 缉圓萱吾 (Y) 历 strong > { 90 ；、《彗 } , 〈闻中心首、 CSS 0 # 循工笋硭

亻中恺农寸2 工《程 # 循工笋硭

亻中恺农寸2 工《程

" v:shapes="图片_x0020_303">

临近兄弟选择器（+）

限定某个元素下的第一个同级元素（第一个兄弟节点）

< style type="text/css"> P+h2 { c010r ： blue } ； < body> < h2 〉《赠江伦》

< p > 李白乘舟将欲行，

< h2 〉忽闻岸上踏歌声。 < / h2 〉〈 h2 〉桃花潭水深千尺， < / h2 〉 < h2 〉不及江伦送我情 < / h2 > < / body> 《赠江伦》李白乘舟将歆行，忽闻岸上踏歌声。桃花潭水深千尺，不及江伦送我情 " v:shapes="图片_x0020_302">

< style type="text/css"> {C010r ： blue < body> < h2 〉《赠江伦》 < p > 李白乘舟将欲行，

< h2 〉忽闻岸上踏歌声。 < / h2 〉〈 h2 〉桃花潭水深千尺， < / h2 〉 < h2 〉不及江伦送我情 < / h2 > < / body> ：内用到 201i 年 01 月 [ ] 煨 0 《赠江伦》李白乘舟将歆行， 0 忽闻岸上踏歌声。桃花潭水深千尺，不及江伦送我情 " v:shapes="图片_x0020_301">

字体

<style type="text/css">

p {font-weight:bold;

font-style:italic;

font-size:14pt;

font-family:"Times New Roman", Arial;

}

</style>

可以改为

<style type="text/css">

p{font:bold italic 14pt "Times New Roman", Arial;}

</style>

顺序很重要

字体名称必须放最后, 字体大小倒数第二位, 其他顺序随意.

颜色

（即前景颜色）Color

粗细

font-weight:bold(粗)、normal(正常)、lighter(浅)

font-weigth:900(最粗)、700(bold)、400(normal)

100(最浅)

样式

font-style:italic(斜)、normal(正常)

大小

绝对大小 font-size:16pt

相对大小 font-size:xx-small,x-small,small,medium,large,xlarge,xx-large

相对大小 font-size:1.2em(相对父元素字体的1.2倍)

字体单位：（1）px；

（2）em和ex都是字体高，1em相当于一个大写字母M的高度，等于用户的默认字号，或者在父子元素字号不同时等于父元素字号，但ex相当于一个小写字母x的高度

（3）%

（4）pt（point，1/72英寸）和pc（pica，1/6英寸）是固定大小，为打印设计设置尺寸比较好

字体名称

如： font-family:Arial, Helvetica, Futura

说明: 如果浏览器支持Arial字体, 则按这种字体显示,

否则, 使用Helvetica字体显示,

如果不支持两者, 则使用Futura字体显示,

如果都不支持, 则使用浏览器默认字体.

如果字体名称超过一个单词，则需要包含在单引号中

如：

<style type="text/css">

p {font-family:"Times New Roman"}

</style>

中英文混排, 即英文与中文用特定字体时,

中文字体有对应名称.

p {font-family:arial,黑体}

英文用arial

中文用黑体

英文要放在中文前

为了提供非英文操作系统的支持：

黑体：SimHei

宋体：SimSun

新宋体：NSimSun

仿宋：FangSong

楷体：KaiTi

仿宋_GB2312：FangSong_GB2312

楷体_GB2312：KaiTi_GB2312

文本间距（可负数）

letter-spacing 控制字与字之间的间距

word-spacing 控制单词之间的间距（针对英文）

line-height 控制行与行之间的间距

断词

word-wrap 允许长单词换行

.break {word-wrap:break-word;}

文本对齐

text-indent

每个段落的第一行缩进

整个段落缩进用padding-left

text-align

text-align: justify可以使左右边垂直对齐

text-decoration: underline overline;

text-transform: uppercase | capitalize | lowercase | none(默认值）

background

无序列表

list-style-type: disc(实心圆圈, 默认)、circle(空心圆圈)、square(实心方形)、none(无符号)

有序列表

list-style-type

属性值	序号说明	序号举例
decimal	阿拉伯数字, 从1开始	1,2,3,4
decimal-leading-zero	阿拉伯数字, 从0开始	0,1,2,3
lower-alpha	小写字母	a,b,c,d
upper-alpha	大写字母	A,B,C,D
lower-roman	小写罗马数字	i,ii,iii,iv
upper-roman	大写罗马数字	I,II,III,IV
lower-greek	小写希腊字母	αβγδεζηθ

list-style-position:inside/outside（默认值）

控制项目符号在列表中显示位置的属性

list-style-image: url(bullet.gif);

以上都是写在ul时,li会继承，也可以单独设每一个li

ul可以取消缩进的左边距：

padding-left: 0;

margin-left: 0;

li水平:

display: inline;

17种标准(有名字)颜色, 能够在所有浏览器上正确显示

如 p{color:red;} 或 h1{color:#ff0000;} 或
h1{color:#f00;}

color属性指定前景色，即字体颜色

background-color属性指定背景颜色

选择器

标签 { 属性:值;}

#id{ 属性:值; }

.class{ 属性:值; }

初始化reset页面边距（删除每个元素上默认的浏览器填充和空白边）

*{margin:0; padding: 0}

CSS盒子模型：

边框：border

外边距：margin

内边距：padding

盒子中内容：content

元素的并列显示。也就是说，使用 mlme 一 block 盒模型也可以实现前面介绍的多栏布局。在默认情况下，多个 mime-block* 模型的组件将会采用底端对齐的方式，也就是它们的底部将会位于同一条水平线上，这可能不是多栏布局期望的结果。为了让多个 mlme 一 № Ck 盒模型的纟且件在顶端对齐，为它们增加 vertical-align: top; 即可。 " v:shapes="图片_x0020_296">

box-sizing: border-box; // 设置该元素的宽度（width）属性包括边框，

这样可以保证该元素实际占用的空间不会超过width属性指定的宽度。

居中是：margin: 0px auto;即自动外边距

margin : a b c d;

如：

margin : 10px 9px 8px 7px;（上边距10px，右边距9px，下边距8px，左边距7px。）顺时针

其他赋值方式：

magin : a b c; 上，（左右），下

margin : a b; （上下），（左右）

margin : a; （上下左右）

padding同上

一些Opera版本将margin和padding应用于html元素来代替body元素，因此，为了支持Opera，取消页边距可以写：

html, body {

margin: 0;

padding: 0;

}

#fff白色

#000黑色

对于文字：

垂直居中用line-height:*px;

水平居中用text-align:center;

虽然margin可以应用到所有元素，但display属性不同时，表现也不同

【1】block元素可以使用四个方向的margin值

【2】inline元素使用上下方向的margin值无效

【3】inline-block使用上下方向的margin负值看上去无效

[注意]inline-block使用上下方向的margin负值只是看上去无效，这与其默认的vertical-align:baseline有关系，当垂直对齐的属性值为其他值时，则会显示不同的视觉效果

CSS盒子3D模型

margin与可视尺寸：

适用于没有设定width/height的普通block水平元素

只适用于水平方向尺寸

p 元素 margin-left

图片左浮． ..

图片左浮动，跟随文字自然环绕效果。给

元素增加 margin-left ，可视尺寸减小，实现自适应效果；如果希望右侧固定，左侧自适应，直接让图片右浮动，文字右 margin 即可；如果你希望 DOM 的前后顶序符合最终元素展现的前后顺序，需要略微调整 HTML 嵌套结构，以及使用 margin 负值进行定位，具体实现可参见第 5 话的 "margin 负值定位 " " v:shapes="图片_x0020_292">

即600*10%

div { margin: 50%; } " v:shapes="图片_x0020_287">

margin collapse：（margin重叠）

margin重叠也叫【外边距合并】（也有人会称作外边距塌陷）

writing-mode就是水平或垂直的文字。

父级：

*EEson #Hson *EHson " v:shapes="图片_x0020_283">

margin口诀：

BFC（块格式化上下文）相当于一个“结界”

overflow，浮动，定位，display，table，table-cell等可以触发BFC。

BFC内部所有的元素都依据父元素进行排版和布局，相当于独立布局和排版。

外边距margin叠加

简单地说，当两个垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距高度的较大者。如图：

当一个元素包含在另一个元素中时，它们的顶和或底外边距也发生叠加。如图：

外边距叠加其实是为了保持距离一致：

注意：内边距padding、浮动框、绝对定位框之间的外边距不会叠加。

margin: auto

margin负值：

解决方案：两端对齐

两个小例子：

先看效果图：

代码如下：

.myBox {

width:200px;

height:100px;

border:1px solid #F00;

margin-top:15px;

padding-left: 15px;

}

</style>

</head>

<body>

<div class="myBox">Hello World！</div>

</body>

先看效果图：

代码如下：

* { padding:0; margin:0;}

.mainBox {

width:960px;

margin:0 auto;

background-color:#CFF;

overflow:visible; // overflow 属性规定当内容溢出元素框时发生的事情。

}

.leftBox {

width:740px;

height:300px;

background-color:#C9F;

float:left;

}

.rightBox {

width:210px;

height:300px;

background-color:#FCF;

float:right;

}

.clear {

clear:both; // 图像的左侧和右侧均不允许出现浮动元素

height:0; /*解决IE6下有高度的问题*/

overflow:hidden;

}

</style>

</head>

<body>

</div>

常用样式

1. 透明度

（1）opacity: 0.6;（IE9以上）

filter: alpha(opacity=60);（IE8及以下）

filter滤镜

（2）rgba(0,0,0,0.5)

2. 圆角

border-radius: 3px 3px 3px 3px; （CSS3）

-moz-border-radius: 3px 3px 3px 3px;（-moz针对火狐Firefox浏览器）

-webkit-border-radius: 3px 3px 3px 3px;（-webkit针对苹果Safari，谷歌Chrome浏览器，因为它们用的内核都是webkit）

3. 渐变

background: -webkit-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);

background: -moz-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);

background: -o-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);

background: linear-gradient(to bottom,#EFF5FF 0,#E0ECFF 100%);

background-repeat: repeat-x;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#E0ECFF,GradientType=0);

CSS3:

background-image: linear-gradient(#4fec50, #42c264);

4. 文本居中对齐

text-align: center;

line-height:30px; （设置行高）

5. 图片与文字对齐

设置图片样式：

vertical-align: middle;

6. 按钮4种状态样式设置

与<a>链接一样，有4种状态:link，:visited ，:hover，:active

把按钮状态的背景图片做成一张图片，使用移动坐标的方法。可以避免反应迟钝和闪烁

等问题。

accordion_arrows.png

<a>标签

1. href=”#”; 空连接

2. 链接的4种状态

:link 初始状态

:visited 已点击状态

:hover 鼠标经过

:active 鼠标按下（激活）

强调：设置样式时需要按照以上次序设置，因为如果次序反过来，鼠标停留和激活样式就不起作用了。

3. 去掉下划线

text-decoration: none;

对比：

li元素：去除序列号：list-style-type: none;

布局

1. 理解float概念

float：right;

left;

none;

（1）元素设置浮动效果，与Photoshop的图层概念很像，元素自动成为一个图层（位于最上面）。

a. 在body内画两个矩形：

b. 在第一个矩形中加入一条新样式：float：left；效果如下

啊嘞？怎么只剩一个了！！！

原因是加了float属性的黄色矩形浮在蓝色矩形上面。

c. 两个矩形都加float属性，这样他们才处于同一层。

（2）当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。

（3）会对紧跟它的元素产生影响

消除浮动影响方式：（受浮动元素设置）

① clear:both; （或clear:left;clear:right;）

② width:100%;

③ overflow:hidden;

2. 应用float布局

（1）两列浮动布局

</div>

#content{

Width: 520px;

Float: right;

}

#mainNav{

Width: 180px;

Float: left;

}

#footer{

Clear: both;

}

（2）三列的浮动布局

</div>

#mainContent{

Width: 320px;

Float: left;

}

#secondaryContent{

Width: 180px;

Float: right;

}

（3）流体布局

就是把上面（2）的width用百分比表示

#wrapper{

Width:85%;

}

#mainNav{

Width: 23%;

Float: left;

}

#content{

Width: 75%;

Float: right;

}

#mainContent{

Width: 66%;

Float: left;

}

#secondaryContent{

Width: 31%;

Float: right;

}

#footer{

Clear: both;

}

（4）弹性布局

就是把上面（2）的width用em或rem（根元素是html元素）表示，1em≈10px。

主要是为了控制字体显示大小，可以使字体随浏览器窗口增大而增大。

代码示例：

Body{

Font-size: 62.5%;（大多数浏览器默认字号是16px，62.5%即相当于16*62.5%≈10px）

}

#wrapper{

Width:72em;（即720px）

Margin: 0 auto;

Text-align: left;

}

#mainNav{

Width: 18em;

Float: left;

}

（5）弹性-流体混合布局

就是width用em表示，然后用百分比设置最大宽度。

目的是让整个布局和字体都可以随浏览器窗口增大而增大。

代码示例：

#wrapper{

Width:72em;

Max-width: 100%;

Margin: 0 auto;

Text-align: left;

}

#mainNav{

Width: 18em;

Max-width:23%;

Float: left;

}

HTML5和CSS3

IE7和IE8不支持

1. HTML5网页开头

<!DOCTYPE html>

<head>

</head>

2. HTML5新元素

①<section>

用来定义文档或应用程序中的区域（或节）

②<nav>

用来定义主导航区域

③<article>

文章内容片断

④<aside>

侧边栏

⑤<hgroup>

标题组，可以把<h1><h2><h3>等包裹起来

⑥<heaser>

⑦<footer>

⑧<address>

3. CSS3的新增选择器

①img[alt]{} 任意一个包含有alt属性的图片标签

②img[alt = ” film”]{} 选择alt属性值为film的图片标签

③img[alt ^ = ”film”]{} 选择alt属性值以film开头的图片标签

④img[alt * = ” film”]{} 选择alt属性值中包含film字符串的图片标签

⑤img[alt $ = ” film”]{} 选择alt属性值以film结尾的图片标签

⑥结构伪类

1):first-child

Nav ul li: first-child{} 选择第一个列表项

2):last-child

Nav ul li: last-child{} 选择最后一个列表项

3)否定（:not）

Nav ul li:not(.film){} 选择没有类film的列表项

4. CSS3颜色格式和透明度

①十六进制

②RGB color: rgb(252 ,2, 8);

③HSL（色相、饱和度、亮度）color: hsl(315, 100%, 60%)

色相：值0-360，即度数（0°-360°）

HSL 模式基于一个360°的色相环，第一个数字代表色相，

60°:黄色(Y)，

120°:绿色(G)，

180°:青色(C)，

240°:蓝色(B)，

300°;洋红色(M)，

360°;红色(R)。

(Young Guys Can Be Messy Rascals)肮脏的流氓

只有RGB和HSL格式有透明度

Color: rgba(252,2,8,0.5);

Color: hsla(315,100%,60%,0.6);

5. CSS3阴影效果

①文字阴影

Text-shadow: 1px 1px 1px #cccccc

// 右侧阴影大小左侧阴影大小模糊距离阴影颜色

②盒阴影

Box-shadow: 1px 1px 1px #444444

// 水平偏移距离垂直偏移距离模糊半径阴影颜色

盒子内阴影

Box-shadow: inset 0 0 1px #444444

6. CSS3渐变色

①线性渐变

Background: linear-gradient(90deg,#ffffff 0%,#e4e4e4 50%,#ffffff 100%);

// 渐变方向渐变起点颜色和位置

②径向渐变

Background: radial-gradient(center,ellipse cover,#ffffff 72%, #dddddd 100%);

7. CSS3过渡、变形和动画

①过渡效果的4个属性

Transition-property:all;要过渡的CSS属性名称

Transition-duration:1s;过渡效果持续的时间

Transition-timing-function:ease;过渡期间速度如何变化

Transition-delay:0s;过渡开始前的延迟时间

简写：transition: all 1s ease 0s;

②变形

Transform: scale(1.7);放大到原始大小的1.7倍

Scale：放大或缩小

Translate：移动（上下左右四个方向）

Rotate：旋转（单位deg）

Skew：沿X和Y轴对元素进行斜切

Matrix：允许以像素精度来控制变形效果

8. HTML5表单

①placeholder

Placeholder=”请输入密码”

用来显示提示占位符文字，输入框获取焦点时该文字自动消失。

②required

Required=”true” 表明该表单域为必填项

③autofocus

该属性可以让表单在加载完成时就有一个表单域被默认聚焦（或选中），以便于用户输入。

④list

使输入框开始输入时，输入框下面就会显示一个数据选择框，其中包含从datalist中检索到的匹配数据。（仅匹配输入的第一个字符）

例子：

<div>

<label for="awardWon">Award Won</label>

</select>

</datalist>

</div>

9. CSS3伪类选择器

Input: required{} 选择必填表单域

Input: focus: invalid{} 选择当前聚焦的且含有非法输入值的表单域

Input: focus: valid{} 选择当前聚焦的且含有合法输入值的表单域

十、媒体查询

1. 浏览器支持

Firefox 3.6+、Safari 4+、Chrome 4+、Opera 9.5+、iOS Safari 3.2+、Opera Mobile 10+、Android 2.1+ 、Internet Explorer 9+

2. 使用方法

识别不同设备的媒体类型和特性，如视口宽度width、height、color等。

可以将媒体查询想象成对浏览器的提问。如果浏览器回答“是”，则应用样式；如果回答是“否”，则不应用样式。

如

方式一

@media screen and (max-device-width: 400px) {

h1 { color: green }

}

方式二

@import url("phone.css") screen and (max-width:360px);

缺点：使用CSS 的@import 方式会增加HTTP 请求（这会影响加载速度）。

3. 属性

种类	属性	描述	值
视口	Width	视口宽度
	Height	视口高度
	Aspect-ratio	视口宽度/高度比	16/9
屏幕	Device-width	屏幕的宽度
	Device-height	屏幕的高度
	Device-aspect-ratio	屏幕宽度/高度比	16/9
	Resolution	屏幕或打印机的分辨率	300dpi
	Scan	电视机的扫描方式	Progressive（逐行扫描） Interlace（隔行扫描）

十一、响应式Web设计

1. 响应式设计的核心

使用百分比布局创建流动的弹性界面；
使用媒体查询来限制元素的变动范围。

2. 百分比公式

目标元素宽度 ÷ 上下元素宽度 = 百分比宽度

百分比保留7位小数

3. em（文字缩放）

em：特定字母的宽度和高度相对于特定字体磅值得比例。

文字使用em单位，可以进行文字缩放；em的实际大小是相对于其上下文的字体大小而言的。

现代浏览器的默认文字大小都是16px。

4. 图片缩放

不要设置图片的宽和高，设置图片的max-width和max-height。

img{

max-width:100%;

}

十二、CSS样式（3种）

1.行内样式

（内联样式表）

写在标记内，只对所在标记有效

2.内部样式

（内部级联样式表）

3.外部样式

（外部级联样式表）

<link>

十三、脚本

整个页面的document加载完成后执行脚本

Windown.onload=function(){}

方法一：

$(document).ready(function(){});

方法二：

$(function(){});

十四、文本

1.文本溢出

实现方法：

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

效果如图：

十五、代码规范

1. ID和class名称

在分配ID和类名时，一定要尽可能保持名称有意义并与表现方式无关。

因为后面元素的表现形式很有可能会发生改变。

2. 避免“多类症”

“多类症”给每个元素都添上类，以精细控制它们的样式。如：

可以将相同样式的代码放在一个div里面，简化代码。如下：

3. 代码注释

为了使注释更有意义，使用关键字类区分重要的注释。

TODO 表示某些东西需要在以后进行修改、修复或复查；

BUG 表示代码或特定浏览器遇到的问题；

KLUDGE 表示并不完善的权宜之计；

如：

position的absolute与fixed共同点与不同点

共同点：

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

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

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

不同点：

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

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

position ：规定元素的定位类型。

任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

值	描述
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 属性的值。

fixed:固定定位

absolute:绝对定位

区别很简单：

1、没有滚动条的情况下没有差异

2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动

可以这么理解，fixed：固定在当前window不动， absolute：会随参照对象元素的高度和宽度变化而变化

一般fixed用在遮盖层和固定在页面某个位置，如固定在顶端的菜单栏，又如弹出提示框居中显示

下面例子可是简单测试两者之间的区别，注意拖动滚动条看差异

<!DOCTYPE html>

<head>

<style>

body {

height:1000px;/*让窗体出现滚动条*/

}

.fixed {

position: fixed;

left: 100px;

right: 100px;

top: 100px;

bottom: 100px;

width: auto;

height: auto;

border: 1px solid blue;

}

.absolute {

position: absolute;

left: 100px;

right: 100px;

top: 100px;

bottom: 100px;

width: auto;

height: auto;

border: 1px solid red;

}

</style>

</head>

<body>

<div class="fixed">fixed定位</div>

<div class="absolute">absolute定位</div>

</body>

</html>

效果如下：当滚动条下拉时，absolute层会上移，fixed层不动

动画的transform（变形，改变，转换）和transition（过渡，动画）：

（1）

transform（变形）可以设置4种几何变换：

rotate（旋转，单位为deg。如rotate(45deg)），

translate（平移，属性是可以有两个参数的，分别表示向X轴和向Y轴进行平移的量，单位为 px，第二个参数可以默认不填写，比如translate(20px,30px)），

还有translate3d(x, y, z)

scale（缩放，放大和缩小不一定是维持比例的。scale的参数有两个，分别表示向X轴和Y轴进行放大的倍数，大小在0~正无穷，第二个参数可以默认不填写，如果不填写则是默认等比放大缩小。比如scale(2)），

skew（倾斜）

tranlateZ(tz)：沿Z轴移动tz距离
translate3d(tx, ty, tz)：沿X轴移动tx距离，沿Y轴移动ty距离，

沿Z轴移动tz距离

transform-origin：

（2）

transition只要指定哪些CSS属性需要动画效果执行变化，并指定动画的持续时间。

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

transition-property 设置过渡效果的 CSS 属性的名称
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

默认值：

all 0 ease 0

transition： transition-property transition-duration transition-timing-function

transition-property可以是width、transform之类的属性

transition-timing-function的值可以是：

perspective透视，“近大远小”，值越小透视效果越明显。

（3）

比transition更强大的是animation，可与4种几何变换结合，也可以指定多个关键帧，从而定义自定义动画。

n mat 主动画 < / t t 二 0 > < 0ty10 type="te,xt/css"> ／ * 定义一个关键帧 * / @—webki€—keyfza—mes ' complex { / 定义动画开始处的关誕帧 * / content="text/html; charset=GBK" —webkit—transform ： ro 乜乜 e (Odeg) background—color ： # f00 ， / * 定义动画进行 4 “ 时的关键帧虫 / 40 { scale （ 1 ）， —webki€—transform ： rotate (720deg) background—color ： #ffO, / * 定义动画进行 8 时的关键帧吖 80 { —webkit—transform ： rotate （ 1080deg ） Scale （ 0 、 1 ）； scale （ 4 ）， background—color ． #fOf 定义动画进行 10 时的关键帧 * / 100 { —webkit—transform ： rotate 〈 Odeg) background—color ： # 00f ， scale （ 1 ）， " v:shapes="图片_x0020_234">

< /body> " v:shapes="图片_x0020_233">

CSS伪类和伪元素：

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。

对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

CSS3为了区分伪类和伪元素，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

单冒号(:)用于css3伪类，双冒号(::)用于CSS3伪元素。伪元素由双冒号和伪元素名称组成。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。

CSS伪元素：用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

或元素设置了每列的宽度，则表格宽度将等于所有列宽的总和。（ 2 ）如果表格的第一个单元格设置了宽度信息，则表格宽度将等于第一行内所有单元格宽度的总和。（ 3 ）直接平均分配每列的宽度，忽略单元内容的实际宽度。 " v:shapes="图片_x0020_230">

css hack原理及常用hack

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有1）属性hack。2）选择器hack。3）IE条件注释

IE条件注释：适用于[IE5, IE9]常见格式如下

针对所有IE(注：IE10+已经不再支持条件注释)：

针对IE6及以下版本： 。

这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

—-1 if Ite IE8j> / body href= " v:shapes="图片_x0020_228">

选择器hack：不同浏览器对选择器的支持不一样.

例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno { color: red }

* html .class { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

*:first-child+html .class { color: red }

/* IE7, FF, Saf, Opera */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

*+html .class { color: red }

/* Firefox only. 1+ */
#veinticuatro, x:-moz-any-link { color: red }

/* Firefox 3.0+ */
#veinticinco, x:-moz-any-link, x:default { color: red }

属性hack：不同浏览器解析bug或方法

例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

淘宝网学习笔记：

1.padding是控件的内容相对控件的边缘的边距．margin是控件边缘相对父空间的边距． 2.字体的属性如下： font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em;

line-height:140%; font-family:"Lucida Grande",sans-serif; 可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

3.font-size:100%;设置字体属性为默认大小，是相对于浏览器默认字体大小或继承body设定的字体大小来说的。

4.list-style的属性： list-style-type list-style-position list-style-image 5.a{text-decoration:none}链接没有下划线 6.a:hover{text-decoration:underline}

7.border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

8.border-spacing指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 border-collapse 被设置为 separate，否则将忽略这个属性。

9.背景的属性如下： background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;

可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position

10.font - face规则： font-family: myFirstFont;字体文件包含在您的服务器上的某个地方，参考CSS： src: url('Sansation_Light.ttf') 如果字体文件是在不同的位置，请使用完整的URL：

src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')

11.display:block此元素将显示为块级元素，此元素前后会带有换行符。

12.overflow这个属性定义溢出元素内容区的内容会如何处理。hidden:内容会被修剪，并且其余内容是不可见的。

13.background-repeat repeat默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。

14.display:inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。

15.text-indent是用来设定文本块中第一行的缩进。

16.transparent 默认值。边框颜色为透明。

@font-face{font-family:global-iconfont;src:url(//at.alicdn.com/t/font_1404888168_2057645.eot);

src:url(//at.alicdn.com/t/font_1404888168_2057645.eot?#iefix) format("embedded-opentype"),

url(//at.alicdn.com/t/font_1404888168_2057645.woff) format("woff"),

url(//at.alicdn.com/t/font_1404888168_2057645.ttf) format("truetype"),

url(//at.alicdn.com/t/font_1404888168_2057645.svg#uxiconfont) format("svg")}

左浮动的盒子的左边界不会超出容器的左边界，右浮动同理.

如果盒子是左浮动的,那么在html文档中晚出现的左浮动盒子只允许出现在先出现的左浮动盒子的右边或者晚出现的左浮动盒子的顶部必须在早出现左浮动盒子的底部之下。右浮动同理.

浮动盒子的顶部不会超出在html文档中早出现的的块级元素(block)或者是浮动元素的顶部

html

css

div{
margin:5px;
}

#outer-div{
    height:400px;
    width:500px;
    background-color:red;
}

#float-left {
    height:100px;
    width:100px;
    float:left;
    background-color:lightblue;
}

#float-right{
    height:100px;
    width:200px;
    float:right;
    background-color:lightyellow;
}
body{
    background-color:yellow
}

显示效果:

如果将红色容器的矿都缩短为，使之单行之内不能够容下三个浮动元素，那么哪一个盒子会被挤到下一行呢？1？2？3？

我们来试着将红色容器盒子的宽度缩减为400px

#outer-div{
    height:400px;
    width:400px;
    background-color:red;
}

我们将会得到下面显示效果

可见盒子三被挤到了下一行，这是因为盒子二的html文件中比盒子三早出现，所以盒子二不能低于盒子三。于是就将盒子三下沉。

浮动盒子的顶部不会超出在html文档中早出现的包含盒子的line-box元素顶部

显示效果

为什么浮动元素不浮动上去把一个图片元素挤下来呢？如果浮动元素向上浮动将一个图片元素挤到第二行，那么现在浮动元素就高于比它早出现的图片元素。就违反了规则

这里我们试着将红色盒子容器宽度缩小，使之一行之内容不下四个图片。

css

#outer-div{
      height:400px;
      width:400px;
      background-color:red;
}

那么图片将会折行，如下所示

行内元素图片四就环绕浮动元素，但是浮动元素并没有超出行内元素的。

最后说两句，浮动元素其实对在它出现之前的元素影响不大，但是由于浮动是使元素脱离了文档流，那么在浮动元素之后出现的元素：

块元素:直接无视浮动元素，该怎么显示就怎么显示，并且会被浮动元素覆盖。
行内元素:行内元素会环绕在浮动元素周围。

下面我们就来一个简单的例子:

html

<div id="outer-div">
    <p>
        P1 : Augue neque, gravida in fermentum et, sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla?
    </p id="p1">
    <div id="float-left"> 100 x 100</div>
    <p id="p2">
            P2 : At lectus urna duis convallis convallis tellus, id interdum velit laoreet id donec ultrices tincidunt arcu, non sodales neque sodales ut etiam. Feugiat vivamus at augue eget arcu dictum varius?
    </p>
</div>

css

div{
margin:5px;
}

#outer-div{
    height:400px;
    width:500px;
    background-color:red;
}

#float-left {
    height:100px;
    width:100px;
    float:left;
    background-color:lightblue;
}

body{
background-color:yellow
}

显示效果

这里因为p1是block元素，直接卡住了浮动元素，然后p2这个block元素直接忽视了浮动元素的存在，然后排版在浮动元素的下方，但是p2的中的文本是inline元素，于是就围绕浮动元素排布。

（因为我的OneNote笔记粘贴到网页图片无法显示，所以后续将进行调整）

来源：oschina

链接：https://my.oschina.net/u/4278466/blog/4012107

标签

RED