HTML5与CSS3学习笔记（二）

一、实体字符

1、常用实体

*空格（ ）（ ）

*"（"）（"）

*>（>）（62）

*<（<）（60）

*版权符号©（©）（169）

*&（&）

二、CSS3——选择器

1、标签选择器

2、属性选择器：[att]

[disabled]{background-color:#eee;}

[type=button]{
color:blue;
}

<p lang="en"></p>
<p lang="en-us"></p>
<p lang="en-au"></p>
<p lang="enfr"></p>
<p lang="cy-en"></p>

<span style="color:#ff0000;">[lang|=en]{color:red;}//选中前三段落，以en-</span>

[att^=val] 如下：

<div>
<a href="http://www.w3.org/">W3C</a>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
</div>

[href^="#"]{color:red;}

[att$=val] 如下：

<a href="http://xxx.doc">word文档</a>
<a href="http://xxxx.pdf">pdf文件</a>

[href$=pdf]{color:red;}

[att*=val]属性值中包含val值的

3、伪类选择器：以冒号开头

<a href="http://www.163.com">网易首页</a>

a:link{color:gray;}

与a标签选择器的不同：这个选择器选择的是a标签中href有值的链接

还有:visited，:hover，:active。。。

:enabled,:disabled,:checked

li:first-child、last-child、nth-child、nth-last-child(倒着数)

:only-child、first-of-child、nth-of-child

:empty（没有子元素的元素）

4、类选择器

5、id选择器

6、通配符选择器：*{}

7、伪元素选择器：以两个冒号开头

::first-letter

::before{content:"before";}

::after{content:"after";}          这两个伪类选择器要与content属性一起用，before表示在内容之前插入content属性值的内容，after则在内容后面插入。

::selection伪元素选择器应用于被用户选中的内容。

::selection{
color:red;
background-color:#ccc;
}

8、组合选择器：

-后代选择器 用“ ”

-子选择器 >

-兄弟选择器  +，向后选择第一个兄弟元素；~，选择后面符合的所有兄弟元素

-选择器分组

三、继承、优先级、层叠

1、继承属性：

color

font

text-align

list-style

2、非继承属性：

background

border

position

如何知道属性是否可以继承：查看文档中的inherited项

3、计算优先级：

-a类=行内样式

-b类=ID选择器的数量

-c类=类、伪类和属性选择器的数量

-d类=标签选择器和伪元素选择器的数量

value=a*1000+b*100+c*10+d

4、层叠

当两个优先级一样的选择器写了同一个属性：后面覆盖前面

改变样式：可以用到!important

四、文本

1、字体

font-size 大小

font-family 字体

font-weight：normal|bold  字体粗细

font-style：normal|italic（就是字体里的斜体）|oblique（强制倾斜）

line-height:normal|<number>|<length>|<percentage>

font：[<font-style>||<font-weight>||<font-size>(必填)||/<line-height>||<font-family>（必填）]

2、颜色

color：red|#ff0000|rgb(255,0,0)|rgba(255,0,0,1(不透明))|rgba(255,0,0,0.5(半透明))|rgba(0,0,0,0)(全透明)|transparent（全透明）

3、对齐方式

text-align：left|right|center|justify（两端对齐）

在一段文字中插入一个表情（图标），默认情况下，图标是靠底部的，我们如何把它弄成居中？

垂直对齐方式：vertical-align：baseline（基线）|sub（下标）|super（上标）|top（对齐到当前这行的最高点）|text-top（对齐到文本的最高点）|middle|bottom|text-bottom|<percentage>（以line-height为参照）|<length>（以baseline为起点往上走length）

4、首行缩进

text-indent：<length>|<percentage>（参照物为容器的宽度）

写作文：text-indent：2em

SEO中会用到：将text-indent设为负值

5、格式处理

white-space：用来设置换行要不要保留，空格要不要合并，Tab要不要合并，是否要自动换行

normal|nowrap|pre|pre-wrap|pre-line

	New Lines	Spaces and Tabs	Text Wrapping
normal	Collapse	Collapse	Wrap
nowrap	Collapse	Collapse	No wrap
pre	Preserve	Preserve	No wrap
pre-wrap	Preserve	Preserve	Wrap
pre-line	Preserve	Collapse	Wrap

word-wrap:normal|break-word（允许自动换行）
word-break：normal|keep-all|break-all（任意两个字母都可以换行）

6、文本修饰

text-shadow：none|[<length>{2,3}&&<color>？]#（当length有两个值时，分别代表x轴的偏移值、y轴的偏移值，有三个值时，第三个值代表阴影的模糊半径）

text-decoration：none|[underline||overline||line-through]

7、高级设置

一行文字当显示不下时，希望它自动隐藏后面显示不下的文字，并用...表示文字未显示完：

text-overflow：clip|ellipsis（文本溢出）

配合：overflow：hidden；      white-space：nowrap；

cursor：定义鼠标形状 [<uri>,（表示可以用一张图片，即可以自定义   xxx.cur）]*[auto|default|none|help|pointer|zoom-in（放大镜）|zoom-out（缩小镜）|move]

强制继承：inherit

五、盒模型

查看《前端知识易混点整理（1）》-2

1、width：<length>|<percentage>（一般只对块级元素设定宽度）max-width/min-width

2、border-radius:设置边框的四个角

border-radius有八个值时，/之前的四个值分别代表顺时针方向四个角的水平半径，/之后代表垂直半径。

正圆：border-radius:50%；

3、当盒子中的内容超过盒子的容量时：用overflow

overflow：visible|hidden|scroll（不管有没有超出都有滚动条）|auto（当内容没有超出时就没有滚动条，超出时才有滚动条）

overflow-x，overflow-y

4、当box-sizing为content-box时，盒子大小就是width，height，padding，border；当box-sizing为border-box时，盒子大小就只是width，height。

box-sizing用来设置width，height指定的区域

5、盒阴影：

box-shadow：4px 6px 3px 3px red；（水平偏移 垂直偏移 模糊半径 阴影大小）

内阴影：box-shadow：inset 0px 0px 5px red；

多阴影：box-shadow：3px 3px 5px 2px，inset 0px 0px 5px red；

6、轮廓

outline：[<outline-width>]||[<outline-style>]||[outline-color]

-不占空间

-b
4000
order外

六、背景

1、背景是否跟着滚动条滚动：

background-attachment：scroll（背景不动，默认）|fixed|local（背景跟着一起动）

2、background-position（精灵图中有大作用）

3、background-image：linear-gradient（）设置一个线性渐变

background-image：linear-gradient（to right bottom，red，blue）；从左上角到右下角红色到蓝色的渐变背景

radial-gradient（）径向渐变

4、background-origin：<box>

<box>=border-box|padding-box（默认）|content-box

决定了背景图片（0,0）点和100%的位置 ，决定了背景图片的显示位置

5、background-size：<length>|<percentage>|auto|cover（背景尽可能小，但是最小不能小于容器大小，也就是占满容器）|contain（尽可能得大，但是宽高都不能超过容器的宽高）

6、在background的中设置position和background-size一起时，position放在前面，并且之间用“/”隔开。

七、布局：

-将元素以正确大小放在正确的位置

-元素的摆放模式

1、display：block|inline|inline-block|none

-设置元素的显示方式

①display：block（块级元素）默认元素有：div、p、h1-h6、ul、form。。。

-默认宽度为父元素宽度

-可设置宽高

-在前序元素和后续元素都是换行显示

②display：inline（行级元素） 默认元素有：span、a、label、cite、em。。。

-默认宽度为内容宽度

-不可设置宽高

-同行显示

③display：inline-block  默认元素：input、textarea、select、button。。。

-默认宽度为内容宽度

-可设置宽高

-同行显示

-内容超过宽度，将会整块换行

④display：none

-设置元素不显示

-后续元素会占据他的位置

与visibility：hidden区别：visibility:hidden的位置依旧占据

块级元素水平居中：

<div>
<div class="content">content area</div>
</div>

.content{
<span style="color:#ff0000;">margin:auto;（左右边距平分，就达到内容居中的效果了）</span>
width:978px;
}

居中导航：

<ul>
<li><a href="#">推荐</a></li>
<li><a href="#">歌单</a></li>
<li><a href="#">大牌DJ</a></li>
<li><a href="#">歌手</a></li>
<li><a href="#">新碟上架</a></li>
</ul>

ul{
<span style="color:#ff0000;">text-align:center;（只对行级元素起效果）</span>
height:30px;
line-height:30px;
}
li,a{
<span style="color:#ff0000;">display:inline-block;</span>
width:80px;
height:100%;
}
li{
margin:0 10px;
}

2、position：元素叠加

登录框盖在主页面上：

①定位

*position-设置定位方式（参照物）

position：static|relative|absolute|fixed

position：relative

-仍在文档流中

-参照物为元素本身

-改变z-index

position：absolute

-默认宽度为内容宽度

-脱离文档流

-参照物为第一个定位祖先/根元素

相对定位最主要的一个作用场景就是作为绝对定位元素的参照物。

案例：轮播头图

描述：图片title盖在图片上，轮播按钮也盖在图片上

<div class="is">
<img src="2014/7/b2a0.jpg">
<p class="title"><a href="/0687">老徐视线：北京潮女出门逛街不穿内衣</a></p>
<div class="controls">
<span></span><span class="cur"></span><span></span><span></span><span></span>
</div>
</div>

.is{
<u>position:relative;</u>
width:480px;
}
.is .title{
<u>position:absolute;</u>
bottom:0;
width:100%;
}
.is .controls{
<u>position:absolute;</u>
bottom:18px;
right:10px;
}
.is .controls span{
display:inline-block;
width:10px;
height:10px;
}

position：fixed；固定定位
-默认宽度为内容宽度

-脱离文档流

-参照物为视窗
案例：固定顶栏

<body>
<div class="top">top bar</div>
<div class="main">main content area</div>
</body>

body{
padding-top:50px;   //给top占位
}
.top{
position:fixed;
top:0;
width:100%;
height:50px;
}

案例：遮罩

<div class="mask"></div>

.mask{
<u>position:fixed;</u>
top:0;
left:0;
<u>z-index:999;</u>
width:100%;
height:100%;
}

案例：三行自适应布局

描述：顶栏固定在窗口最上面，footer固定在窗口最下面，内容区是自适应的

<div class="head">head</div>
<div class="body">body</div>
<div class="foot">foot</div>

.head{
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
}
.body{
position:absolute;
<u>top:100px;
left:0;
bottom:100px;
right:0;（内容会被撑开</u>）
}
.foot{
position:absolute;
bottom:0;
left:0;
width:100%;
height:100px;
}

*top，right，bottom，left，z-index-设置位置（必须配合position使用）

top、right、bottom、left都是指的元素边缘与参照物边缘的距离

元素没有设置宽高，当同时设置了top和bottom / right和left时：元素将被撑开

z-index：z-index设置元素在z轴上的排序，默认为0，不一定z-index值大的在上面：

z-index栈：还要参看元素的参照物的z-index

3、float

①float：left|right|none|inherit

-默认宽度为内容宽度

-脱离文档流（与position脱离不一样，这里未完全脱离）

-向指定方向一直移动

-float的元素在同一文档流

-float元素半脱离文档流（对元素，脱离文档流；对内容，在文档流。即元素重叠，内容不重叠）

②clear

clear：both|left|right|none|inherit

-应用于浮动元素的后续元素

-应用于块级元素

方案：

-在浮动元素后写空白元素

-clearfix（在浮动元素的父元素上加一个class：clearfix）

.clearfix:after{
content:".";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
.clearfix{
zoom:1; //不支持：after选择器时写
}

案例：两列布局

描述：块级元素同行显示，在文档流中，如网易云音乐的content部分

<div class="body clearfix">
<div class="side">side</div>
<div class="main">main</div>
</div>

.side{
float:right;
width:200px;
}
.main{
float:left;
width:500px;
}
.clearfix:after{
content:".";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}

案例：两列自适应布局

4、flex 弹性布局





以flex item的摆放方向为main axis，它的垂直方向为cross axis。

1、创建flex container

-display：flex

2、flex item

-在文档流中的子元素

<div style="display:flex">
<div>block</div>
<div style="float:left;">float</div>
<span>inline</span>
<div style="position:absolute;"></div>    //不是弹性元素
<div>
<div>grandson</div>              //不是弹性元素
</div>
</div>

3、方向

①flex-direction：row （行，从左至右，默认） | row-reverse（反向行） | column （列，从上到下）| column-reverse

②flex-wrap：nowrap（默认,不换行） | wrap | wrap-reverse

③flex-flow：一次性设置两个值，<flex-direction> || <flex-wrap>

④order：<interger> 相对排列顺序

initial：0

4、弹性

①flex-basis

-flex-basis：main-size（默认） | <width>

-设置flex item的初始宽 / 高

②flex-grow（分配的是空白剩余空间）

-flex-grow：<number>

-initial：0

弹性布局的宽度=flex-basis + flex-grow  / sum（flex-grow）* remain

③flex-shrink

-flex-shrink：<number>

-initial：1

剩余空间是负的

flex：<flex-grow> | <flex-shrink> | <flex-basis>

5、对齐

①justify-content：不用left，right，top，bottom是因为有可能是水平布局，也可能是垂直布局。

space-around是首尾也有分到剩余空间。



②align-items：分配辅轴上的对齐方式

-align-items：flex-start | flex-end | center | baseline | stretch（默认）



③align-self

-align-self：auto（默认） | flex-start | flex-end | center | baseline | stretch

-设置单个flex item在cross-axis方向上对齐方式

④align-content 出现多行，并且有剩余空间

-设置cross-axis方向上行对齐方式

-align-content：flex-start | flex-end | center | space-between | space-around | stretch（默认）

案例：三行两列自适应布局

<div class="head">head</div>
<div class="body">
<div class="side">side</div>
<div class="main">main</div>
</div>
<div class="foot">foot</div>

body{
display:flex;
flex-flow:column;
}
.head,.foot{
height:100px;
}
.body{
flex:1;
display:flex;
}
.side{
width:200px;
}
.main{
flex:1;
}

.body{
<span style="white-space:pre">		</span>width:500px;
<span style="white-space:pre">		</span>align-self:center;  //居中
}

多行自适应

多列自适应

间距自适应

任意对齐

八、变形

1、2D变形

transform：none | <transform-function>+  多个设置时用空格隔开

①rotate（<angle>）旋转

transform：rotate（50deg）；

②translate（<translation-value>[,<translation-value>]?）偏移

translateX（）

translateY（）

transform：translate（50px）；//X轴方向上偏移50px

transform：translate（50px，20%）；//20%的参照物为盒子的高度

③scale（<number>[,<number>]?）第二个值没写时，默认第二个值等于第一个值      缩放

scaleX（<number>）

scaleY（<number>）

④skew（<angle>[,<angle>]?）倾斜 第一个值表示Y轴向X轴倾斜的度数，第二个值是X轴向Y轴方向倾斜的度数

skewX（<angle>）

skewY（<angle>）

⑤transform-origin 重心

默认值：transform-origin：50% 50%；

transform-origin：0 0；

transform-origin：20%；第二个值为默认的50%

三个值时，第三个为z轴方向上的移动

2、3D变形

①perspective：none | <length>   透视

perspective：2000px；人眼到元素的距离，越小越明显，相当于Y轴旋转

②perspective-origin 透视角度

③translate3d()
translateX（<translation-value>）

translateY（<translation-value>）

translateZ（<length>）

④scale3d（）

⑤rotate3d()

⑥transform-style：flat（扁平化，默认） | preserve-3d（保留3d效果）

一个元素经过transform之后内部就没有透视效果了，就变成了扁平化，我们如果想要它的内部依然有3d效果，就要设置这个属性。

⑦旋转之后，设置背面不可见：backface-visibility：visible | hidden

九、动画

1、transition   要有触发

①transition-property：none | <single-transition-property>[',' <single-transition-property>]*

<single-transition-property> = all | <IDENT>

transition-property：left；//当有left发生变化时，就有动画效果，不是瞬间变化的

②transition-duration：<time> [,<time>]*  //设置动画的持续时间

③transition-time-function：                //动画持续时间的函数

④transition-delay：<time> [,<time>]*      动画延时

2、animation   可以自己做动画，可以是多帧动画

①animation-name：   //指定动画的名称

②animation-duration：//动画的执行时间

③animation-timing-function   

④animation-iteration-count  //执行动画的次数

   infinite 为无限次

⑤animation-direction： normal   reverse（反方向）  alternate（往返） alternate-reverse

⑥animation-delay：//动画延时时间

⑦animation-play-state：running | paused    //播放状态

⑧animation-fill-mode：动画在开始时是否保持第一帧的设置，动画在结束时是否保持最后一帧2的状态

：none | backwards（开始时保持第一帧的状态） | forwards（结束时保持最后一帧的状态） | both

⑨   @keyframes   关键帧定义

@keyframes abc{
from {opacity:1;height:100px;}    //第一帧
to {opacity:0.5;height:200px;}    //最后一帧
}

@keyframes abc{
0% {opacity:1;height:100px;}    //第一帧
100% {opacity:0.5;height:200px;}    //最后一帧
}

//在透明和不透明之间切换
@keyframes flash{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}

animation:abc
b0db
0.5s both;
animation:flash 0.5s both;
animation:abc 0.5s both,flash 0.5s both;

demo练习：立方体