HTML5学习总结

最新推荐文章于 2023-07-09 20:48:21 发布

JourneyX

最新推荐文章于 2023-07-09 20:48:21 发布

阅读量3.6k

点赞数 9

分类专栏： H5 文章标签： html5 HTMLWeb知识整理前端开发资料整理

本文链接：https://blog.csdn.net/journeyx/article/details/53232327

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 表格元素

table、thead、tbody、tfoot、tr、th、td、col、colgroup、caption

<th><td>均属于单元格，包含两个合并属性：colspan、rowspan 等

--<caption>添加表格标题

<caption>这是一个人物表</caption>

--<colgroup>设置列

--<col>更灵活的设置列

<col>

</colgroup>

2 分组元素

p、div、blockquote、pre、hr、ul,ol、li、dl,dt,dd、figure、figcaption

--<blockquote>引用大段他出内容：包含了首尾缩进的功能

--<pre>展现格式化内容：编辑器怎么排版的，原封不动的展现出来

--<ol><li>添加有序列表：ol 元素属性：start、reversed：是否倒序排列、type：1、a、A、i、I

li 元素属性:value:强行设置某个项目的编号。

--<dl><dt><dd>生成说明列表:这三个元素是一个整体，但<dt>:标题或<dd>:说明。并非都必须出现。

--<figure><figcaption>使用插图：这两个元素一般用于图片的布局。

<figcaption>这是一张图</figcaption> //标题

<img src="img.png"> //图片

</figure>

3 文档元素

h1~h6、header、footer、nav、section、article、address、aside、hgroup、details、summary

--<header>表示首部：这里部分一般是页面头部，包括：LOGO、标题、导航等内容

--<hgroup>组合标题：

--<section>文档主题：这里一般是存放文档主题内容。

--<nav>添加导航：这里存放文档的导航

--<article>添加一个独立成篇的文档：里面可以包含头、尾、主题等一系列内容

--<aside>生成注释栏：专门为某一段内容进行注释使用。

--<address>表示文档或article 元素的联系信息。

--<details>元素生成详情区域、<summary>元素在其内部生成说明标签：由于大多数主流浏览器尚未支持，暂略

<h1>这里是一个大标题</h1>

<h4>这里是一个副标题</h4>

</hgroup>

<nav>这里是一个导航</nav>

这里存放网页的标头部分：LOGO，标题，导航等。

</header>

这里是文档的主题部分。

</section>

4 嵌入元素

img、map、area、audio、video、iframe、embed、canvas、meter、object、param、progress、source、svg、track

--<img>嵌入图像：src、alt、width、height、ismap<创建服务器端分区响应图>、usemap<关联<map>元素>

--<map>创建分区响应图:

</map>

--<iframe>嵌入另一个文档:name 表示用于target 的名称

<br>

<iframesrc="http://www.soso.com" width="800"height="600" name="in"></iframe>

--<embed>嵌入插件内容：

<embedsrc="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf"type="application/x-shockwave-flash" width="800"height="600"></embed>

--<object>和<param>元素

--<progress>显示进度：<progressvalue="30" max="100"></progress>

--<meter>显示范围里的值：

<meter value="90"min="10" max="100" low="40" high="80"

optimum="60"></meter> ----low 表示小于它的值过低，high 表示大于它的值过高，optimum表示最佳值

5 音频和视频

video 视频元素、audio 音频元素

主流视频容器支持的格式为：.avi、.flv、.mp4、.mkv、.ogg、.webm。

主流的音频编解码器：AAC、MPEG-3、Ogg Voribs，

视频编解码器：H.264、VP8、Ogg Theora

--video 视频元素：主流的视频为.webm，.mp4，.ogg 等

<sourcesrc="10anzhu.ogg">

</video>

（

属性：src、width、height

--autoplay：设置后，表示立刻开始播放视频

--preload：设置后，表示预先载入视频

--controls：设置后，表示显示播放控件

--loop：设置后，表示反复播放视频

--muted：设置后，表示视频处于静音状态

--poster：指定视频数据载入时显示的图片

）

--预加载设置：preload="...":preload属性有三个值：none 表示播放器什么都不加载；metadata 表示播放

之前只能加载元数据（宽高、第一帧画面等信息）；auto 表示请求浏览器尽快下载整个视频。

--使用预览图:poster 属性表示在视频的第一帧，做一张预览图。

<videosrc="http://li.cc/test.webm" width="800"height="600" controls

poster="img.png"></video>

--兼容多个浏览器:通过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。

===audio 音频元素:主流的音频格式有：.mp3，.m4a，.ogg，.wav。

（

属性：src、autoplay、preload、controls

）

6 表单元素

form、input、textarea、select、option、optgroup、button、datalist、fieldset、legend、label、output

--<form>定义表单：action、method、name、target

（

属性：

--enctype：表示浏览器对发送给服务器的数据所采用的编码格式。有三

种：application/x-www-form-urlencoded（默认编码，不能将文件上传到服务器）、multipart/form-data（用于上传文件到服务器）

、text/plain（未规范的编码，不建议使用，不同浏览器理解不同）

--target：_blank、_parent、_self、_top

--autocomplete：设置浏览器记住用户输入的数据，实现自动完成表单。默认为on 自动完成，如果不想自动完成则设置off。

--novalidate：设置是否执行客户端数据有效性检查

--<input>表示用户输入数据：

（

属性：

--autofocus：让光标聚焦在某个input 元素上，让用户直接输入

--disabled：禁用input 元素

--autocomplete：单独设置input 元素的自动完成功能

--form：让表单外的元素和指定的表单挂钩提交

--type：input 元素的类型，内容较多

--name：定义input 元素的名称，以便接收到相应的值

）

--聚焦光标：<input name="user"autofocus>

--禁用input：<inputname="user" disabled>

--禁止自动完成：<inputname="user" autocomplete="off">

--表单外的input：<formmethod="get" id="register">

...

</form>

--<label>添加说明标签：<p><labelfor="user">用户名：<input id="user"name="user"></label></p>

--<fieldset>对表单进行编组：

（

属性：

--name：给分组定义一个名称

--form：让表单外的分组与表单挂钩

--disabled：禁用分组内的表单

）

---<legend>添加分组说明标签：<legend>元素给分组加上一个标题

</fieldset>

--<button>添加按钮：（type：submit、reset、button）

对于type 属性为submit 时，按钮还会提供额外的

（

属性：】

--form：指定按钮关联的表单

--formaction：覆盖form 元素的action 属性

--formenctype：覆盖form 元素的enctype 属性

--formmethod：覆盖form 元素的method 属性

--formtarget：覆盖form 元素的target 属性

--formnovalidate：覆盖form 元素的novalidate属性

）

--表单外关联提交：<button type="submit"form="register">提交</button>

7 input 元素的type 汇总

--type类型:text、password、search、submit、reset、button、number、range、checkbox、radio、image、color、

email、tel、url、date、month、time、week、datetime、datetime-local、hidden、file

==<input type="text">：

（

属性：

--list：指定为文本框提供建议值的datalist元素，其值为datalist 元素的id 值

--maxlength、

--pattern：用于输入验证的正则表达式

--placeholder：输入字符的提示

--readonly：文本框处于只读状态

--disabled：文本框处于禁用状态

--size：设置文本框宽度--<inputtype="text" size="50">

--value：设置文本框初始值

--required：表明用户必须输入一个值，否则无法通过输入验证：必须输入值

）

==<input type="password">：

（

属性：

--maxlength：设置密码框最大字符长度

--pattern：用于输入验证的正则表达式

--placeholder：输入密码的提示

--readonly：密码框处于只读状态

--disabled：文本框处于禁用状态

--size：设置密码框宽度

--value：设置密码框初始值

--required：表明用户必须输入一个值

）

==type 为number、range 时：

（

属性：

--list：指定为文本框提供建议值的datalist元素，其值为datalist 元素的id 值

--min：设置可接受的最小值

--max：设定可接受的最大值

--readonly、required、value

--step：指定上下调节值的步长

）

==type 为date 系列时：

--目前还是推荐使用jQuery等前端库来实现日历功能。额外属性和number 一致。

==type 为color 时：<inputtype="color">

==type 为checkbox、radio 时：

（

属性：

--checked：设置复选框、单选框是否为勾选状态

--required：表示用户必须勾选，否则无法通过验证

--value：设置复选框、单选框勾选状态时提交的数据。默认为on

）

==type 为image 时：

（

属性：

--src、alt、width、height、提交额外属性：formaction、formenctype、formmethod、formtarget和formnovalidate

）

==type 为email、tel、url 时：都应遵循相应的格式。

==type 为hidden 时：生成一个隐藏控件，一般用于表单提交时关联主键ID 提交，而这个数据作为隐藏存在。

==type 为file 时：生成一个文件上传控件，用于文件的上传--<input type="file">

（

属性:

--accept:指定接受的MIME 类型

--required:表明用户必须提供一个值，否则无法通过验证

accept="image/gif, image/jpeg,image/png"

）

==<input type="text"list="abc" required>

<optionvalue="1">苹果</option>

<optionvalue="2">桔子</option>

<optionvalue="3" label="香蕉">

<optionvalue="菠萝">

</datalist>

8 表单数据验证和其他元素

==其他元素：select、optgroup、option、textarea、output

--生成下拉列表select属性：name、disabled、form：将表单外的下拉列表与某个表单挂钩、size、multiple、autofocus、required

selected

==多行文本框</textarea>：

（

属性：name、readonly、disabled、maxlength、autofocus、rows、cols

--form：将表单外的多行文本框与某个表单挂钩

--placeholder：设置输入时的提示信息

--wrap：设置是否插入换行符，有soft 和hard 两种

--required：设置必须输入值，否则无法通过验证

）

==计算结果：

</form>

==输入验证：

--必须填写一个值：<inputtype="text" required>

--限定在某一个范围内：<inputtype="number" min="10" max="100">

--使用正则表达式：<input type="text"placeholder="请输入区号+座机" required

pattern="^[\d]{2,4}\-[\d]{6,8}$">

--禁止表单验证：<formaction="http://li.cc" novalidate>

9 全局属性和其他

==实体：HTML 实体就是将有特殊意义的字符通过实体代码显示出来。

（

实体与结果显示： 

--<空格【<】、>【>】、&【&】、"【"】、'【'】、¢【分】、£【£镑】、¥【¥日圆】

--€【€欧元】、§【§小节】、©【©版权】、®【®注册商标】、™【™商标】、×【×乘号】、

--÷【÷除号】

）

==元数据：<meta>元素可以定义文档中的各种元数据，而且一个HTML 页面可以包含多个<meta>元素。

--指定名/值元数据对：

--声明字符编码：<metacharset="utf-8">

--模拟HTTP 标头字段：

==5 秒跳转到指定URL：<metahttp-equiv="refresh" content="5;http://li.cc">

==另一种声明字符编码：<metahttp-equiv="content-type" content="text/htmlcharset=utf-8">

==全局属性：id、class、hidden

--accesskey 属性：快捷键操作，windows 下alt+指定键，前提是浏览器alt并不冲突。

--contenteditable 属性：让文本处于可编辑状态，设置true 则可以编辑，false 则不可编辑。或者直接设置属性。

<p contenteditable="true">我可以修改吗</p>

--dir 属性：让文本从左到右（ltr），还是从右到左（rtl）--<pdir="rtl">文字到右边了</p>

--lang 属性：可以局部设置语言。<plang="en">HTML5</p>

--title 属性：对元素的内容进行额外的提示。

--tabindex 属性：表单中按下tab 键，实现获取焦点的顺序。如果是-1，则不会被选中。

--style 属性：设置元素行内CSS 样式

10 CSS入门

--创建CSS 样式表有三种方式：1.元素内嵌样式；2.文档内嵌样式；3.外部引入样式。

==文档内嵌样式：<styletype="text/css"></style>

==外部引用样式：<linkrel="stylesheet" type="text/css"href="style.css">

@charset "utf-8"表明设置CSS 的字符编码，如果不写默认就是utf-8。

==层叠和继承：优先级从低到高

(1).浏览器样式（元素自身携带的样式）；

(2).外部引入样式（使用<link>引入的样式）；

(3).文档内嵌样式（使用<style>元素设置）；

(4).元素内嵌样式（使用style 属性设置）。

==强行设置最高优先级：color:green !important;

==强制继承：inherit：@charset"utf-8";

p {

color: green;

font-style: italic;

}

11 CSS选择器

分为基本选择器、复合选择器和伪元素选择器。

==选择器：*、<type>、#<id>、.<class>、[attr]系【属性选择器】、s1,s2,s3...【分组选择】、s1 s2【后代选择器】、

s1 > s2【子选择器】、s1 + s2【相邻兄弟选择器】、s1 ~ s2【普通兄弟选择器】、

伪元素选择器：::first-line【选择块级元素文本的首行】、::first-letter【选择块级元素文本的首字母】

::before【选择元素之前插入内容】、::after【选择元素之后插入内】

--属性选择器：[href]、[type="password"]、

[href^="http"]：属性值开头匹配的属性选择器。

[href$=".com"]：属性值结尾匹配的属性选择器。

[href*="baidu"]：属性值包含指定字符的属性选择器

[class~="edf"]：属性值具有多个值时，匹配其中一个值的属性选择器。

[lang|="en"]：属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比如<i lang="en-us">HTML5</i>。

p::first-line {color: red;}

p::first-letter {color: red;}

a::before {content: '点击';}

a::after {content: '搜索';}

12 CSS样式之伪类选择器

（HTML5 中CSS 选择器中的伪类选择器，和伪元素选择器一样，面向某种共同特征来选择元素。）

==伪类选择器总汇---伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器

（

《子元素选择器》:root【根元素选择器】、:first-child【子元素选择】、:last-child【子元素选择】、

:only-child【子元素选择器，选择元素中唯一子元素】

:only-of-type【子元素选择器，选择指定类型的唯一子元素】、:nth-child(n)【子元素选择器，选择指定N 个子元素】

《UI 选择器》：:enabled【选择启用状态的元素】、:disabled【选择禁用状态的元素】、:checked【选择被选中input 勾选元素】

:default【选择默认元素】、:valid【验证有效选择input 元素】、:invalid【验证无效选择input 元素】

:required【有required 属性选择元素】、:optional【无required 属性选择元素】

《动态选择器》：:link【未访问的超链接元素】、:visited【已访问的超链接元素】、:hover【悬停在超链接上的元素】

:active【激活超链接上的元素】、:foucs【获取焦点的元素】

《其他选择器》：:not【否定选择的元素】、:empty【选择没有任何内容的元素】、:lang【选取包含lang 属性的元素】、

:target【选取URL 片段标识指向元素】

）

==结构性伪类选择器

--子元素选择器：ul >li:first-child【选择第一个子元素】

==ul > li:last-child【选择最后一个子元素】 ul > li:only-child【选择只有一个子元素的那个子元素】

==div > p:only-of-type【选择只有一个指定类型的子元素的那个子元素】

--:nth-child(n)系列：ul >li:nth-child(2)【选择子元素的第二个元素】

ul> li:nth-last-child(2)【选择子元素倒数第二个元素】 div >p:nth-of-type(2)【选择特定子元素的第二个元素】

div > p:nth-last-of-type(2)【选择特定子元素的倒数第二个元素】

--其他伪类选择器：

:not【否定选择器，反选】 :empty【匹配没有任何内容的元素】

:lang(en)【选择包含lang 属性，属性值前缀为en 的元素。和属性选择器匹配结果一致】

:target【定位到锚点时，选择此元素】 ::selection【】

13 颜色和度量单位

==颜色表方案：

black、silver【银灰色】、gray【灰色】、white、maroon【栗色】、栗色、purple【紫色】、fuchsia【紫红】、green、lime【闪光绿】、olive【橄榄色】、yellow

navy【海军蓝】、blue、teal【水鸭色】、aqua【浅绿色】

十进制表示方法就比较多样化：

rgb(r,g,b)--用 RGB 模型表示颜色--rgb(0,128,128)

rgba(r,g,b,a)--同上， a 表示透明度 0~1 之间--rgba(0,128,128,0.5)

hsl(h,s,l)--用 HSL 模型（色相、饱和度和透明度）来表示颜色--hsl(120,100%,30%)

hsla(h,s,l,a) --同上， a 表示透明度 0~1 之间--hsla(120,100%,30%,0.5)

==度量单位

绝对长度单位：in【英寸】 cm【厘米】 mm【毫米】 pt【磅】 pc【pica】

相对长度单位：em【与元素字号挂钩】 ex【与元素字体的“x 高度”挂钩】 rem【与根元素的字号挂钩】 px【像素，与分辨率挂钩】 %【相对另一值的百分比】

14 CSS文本样式

@charset "utf-8";

==字体总汇：font-size、

--font-variant：设置英文字体是否转换为小型大写

--font-style：设置字体是否倾斜

--font-weight：设置字体是否加粗

--font-family：设置 font 字体

--font：设置字体样式复合写法

--@font-face：设置 Web 字体

==设置字体大小。每个值从小到大的固定值。

x-small

small

medium

large

x-large

xx-large

smaller

larger

X+px X+%

==font-style:设置字体是否倾斜。normal、italic、oblique

==font-variant：设置字体是否以小型大写字母显示：normal、small-caps

==font-weight：设置字体是否加粗。normal、bold、bolder、lighter、100 ~ 900 之间的数字：600 及之后是加粗，之前不加粗

==font-family：备用字体font-family: 楷体,微软雅黑,宋体;

==font：字体设置简写组合方式。格式如下：[是否倾斜|是否加粗|是否转小型大写] 字体大小字体名称

==Web 字体：//服务器提供字体

@font-face {

font-family: abc;

src: url('BrushScriptStd.otf');

}

p {

font-size: 50px;

font-family: abc;

}

15 CSS文本样式[下]

==文本总汇：

text-decoration：装饰文本出现各种划线。

text-transform：将英文文本转换大小写

text-shadow：给文本添加阴影

text-align：给文本添加阴影

white-space：排版中的空白处理方式

letter-spacing：设置字母之间的间距

word-spacing：设置单词之间的间距

line-height：设置行高

word-wrap：控制段词

text-indent：设置文本首行的缩进

==文本样式：CSS 文本样式有三种：文本装饰、英文大小写转换和文本阴影

--text-decoration：设置文本出现下划线：none、underline、overline【让文本的头部出现一条上划线】、

--line-through【让文本的中部出现一条删除划线】、blink【让文本进行闪烁，基本不支持了】

--text-transform：none、capitalize、uppercase、lowercase

--text-shadow：给文本添加阴影。text-shadow: 5px 5px 3px black;其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第

三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）

==文本控制：

--text-align：left、right、center、justify【内容两端对齐】、start【让文本处于开始的边界】、end【让文本处于结束的边界】

--white-space：处理空白排版方式。normal、nowrap【空白符被压缩，文本不换行】、pre【空白符被保留，遇到换行符则换行】

pre-line【空白符被压缩，文本会在排满或遇换行符换行】、pre-wrap【空白符被保留，文本会在排满或遇换行符换行】

--letter-spacing：设置文本之间的间距。normal、长度值

--word-spacing：设置英文单子之间的间距。normal、长度值

--line-height：设置段落行高

--word-wrap：让过长的英文单词断开。normal、break-word

--text-indent：设置文本首行的缩进normal、长度值

16 CSS盒模型[上]

==元素尺寸：width、height、min-width、min-height、max-width、max-height

==元素内边距：padding-top、padding-bottom、padding-left、padding-right、padding

==元素外边距：margin-top、margin-bottom、margin-left、margin-right、margin

==处理溢出：overflow-x、overflow-y、overflow【auto、hidden《溢出的内容，直接剪掉》、scroll《都会出现滚动条》、visible《默认值，不管是否溢出，都显示内容》】

17 CSS盒模型[下]

==元素可见性:visibility【visible、hidden、collapse《元素不可见，隐藏表格的行与列，如果不是表格，则和 hidden 一样》】

==元素盒类型：块级元素、行内元素、行内-块元素、隐藏元素

--块级元素：<div>、<p>

--行内元素：<span>、<b>

--行内-块元素：<img> 》》display【block【盒子为块级元素】、inline【盒子为行内元素】、inline-block【盒子为行内-块元素】、none【盒子不可见，不占位】】

==元素的浮动：float【left、right、none】

==clear 属性来处理取消元素的浮动情况：float【clear：none《允许两边均可浮动》、left/right【左/右边界不得浮动】、both】

18 CSS 边框和背景

==声明边框:三个属性设置：border-width、border-style【样式，必选】、border-color

==边框样式：none、dashed【破折线】、dotted【圆点线】、double【双线】、groove 【槽线】、inset【使元素内容具有内嵌效果】

outset【使元素内容具有外凸效果】、ridge【脊线】、solid【实线】

==边框宽度取值表：长度值、百分数、使用长度名称的预设宽度。这三个值的具体意义由浏览器来定义，从小到大依次增大【thin、medium、thick】

==圆角边框：使用border-radius 属性进行设置

（

属性：

--border-radius：四条边角

--border-top-left-radius：左上边角

--border-top-right-radius：右上边角

--border-bottom-left-radius：左下边角

--border-bottom-right-radius：右下边角

）

19 CSS 边框与背景[下]

《盒模型的尺寸可以通过两种方式实现可见性，一种就是之前的边框，还有一种就是背景。》

==设置背景：

（

属性：

--background-color、

--background-image：none 或url

--background-repeat：背景图片的样式

--background-size：背景图像的尺寸

--background-position：背景图像的位置【位置坐标】

--background-attachment：背景图片的滚动

--background-clip：背景图片的裁剪

--background-origin：背景图片起始点

--background：背景图片简写方式

）

==background-color：颜色/transparent

==background-image：none【如果多个div 批量设置了背景，而其中某一个不需要背景，可以单独设置none值取消背景】、url

==background-repeat：repeat-x、repeat-y、repeat、no-repeat

==background-position：top、left、right、bottom、center、长度值【偏移图片的位置】、百分数【偏移图片的位置】

--background-position: top left;【置于左上方偏移】 --background-position: 20px 20px;【左边、上边偏移】

==background-size：

（

属性：长度值、百分比

--auto：默认值，图像以本尺寸显示

--cover：等比例缩放图像，使图像至少覆盖容器，但有可能超出容器

--contain：等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合

）

使用cover 相当于100%，全屏铺面一张大图，这个值非常实用。body {background-image: url(loading.gif);background-size: cover;}

使用contain 表示，尽可能让图片完整的显示在元素内。background-size: 240px 240px;

==background-attachment：scroll【默认值，背景固定在元素上，不会随着内容一起滚动】

fixed 【背景固定在视窗上，内容滚动时背景不动】

==background-origin：border-box【在元素盒子内部绘制背景】 padding-box【在内边距盒子内部绘制背景】

content-box【在内容盒子内部绘制背景】

==background-clip： border-box【在元素盒子内部裁剪背景】 padding-box【在内边距盒子内部裁剪背景】

content-box【在内容黑子内部裁剪背景】

20 CSS 表格与列表

==表格样式

（

--border-collapse：边框样式，相邻单元格的边框样式

--border-spacing：相邻单元格边框的边距，长度值

--caption-side：表格标题的位置【位置名称】

--empty-cells：空单元格是否显示边距【显示值】

--table-layout：指定表格的布局样式【布局样式】

==border-collapse：separate【默认值，单元格边框独立】、collapse【单元格相邻边框被合并】

border-collapse: collapse;//单元格相邻的边框被合并。

==border-spacing：长度值 0表示间距，其他使用CSS 长度值

border-spacing:10px;【border-collapse: separate;的状态下才有效。因为要设置间距，不能合并。】

==caption-side：top【默认值，标题在上方】 bottom【标题在下方】

==empty-cells：show【默认值，显示边框】 hide【不显示边框】

==empty-cells: hide;【单元格内容为空时隐藏边框。】

==table-layout：auto【默认值，内容过长时，拉伸整个单元格】、fixed【内容过长时，不拉伸整个单元格】

）

==列表样式

列表有四种独有样式：list-style-type【类型值，列表中的标记类型】 list-style-image【none 或url图像作为列表标记】

list-style-position【位置值，排列的相对位置】 list-style【列表的简写形式】

==list-style-type：

（

属性：none【没有标记】、disc【实心圆】、circle【空心圆】、square【实心方块】、decimal【阿拉伯数字】、lower-roman【小写罗马数字】

upper-roman【大写罗马数字】、lower-alpha【小写英文字母】、upper-roman【大写英文字母】

）

==list-type-position：outside【默认值，标记位于内容框外部】、inside【标记位于内容框内部】

==list-type-image：none【不使用图像】、url【通过url 使用图像】list-style-image: url(bullet.png);//使用图片作为前缀的标记

==list-style：简写形式 ul {list-style: lower-alpha insideurl(bullet.png);}

==其他功能：

《在<table>中<td>单元格，我们可以使用text-align 属性水平对齐，但是垂直对齐就无法操作了。CSS 提供了vertical-align 属性用于垂直对齐》

（

--baseline：内容对象与基线对齐

--top：内容对象与顶端对齐

--middle：内容对象与中部对齐

--bottom：内容对象与底部对齐

）

==上下标功能：sub【垂直对齐文本的下标】、super【垂直对齐文本的上标】b{vertical-align: super;}

==长度值【设置上下的偏移量，可以是负值】百分比【同上】 vertical-align: -200px;

负值往下，正值往上。如果默认基线在上面，用负数。如果默认基线在下面，用正值。

21 CSS 其他样式

：包括颜色、透明度、盒子的阴影轮廓以及光标的样式。

==颜色和透明度：color【设置文本前景色】 opacity【0 ~ 1：设置元素的透明度】

==盒子阴影和轮廓：box-shadow【一个非常实用的效果样式，就是阴影效果】

（

属性：

--hoffset：阴影的水平偏移量，是一个长度值，正值表示阴影向右偏移，负值表示阴影向左偏移。

--voffset：阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子的下方，负值代表阴影位于元素盒子上方。

--blur：（可选）指定模糊值，是一个长度值，值越大盒子的边界越模糊。默认值为0，边界清晰

--spread：（可选）指定阴影延伸半径，是一个长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小

--color：（可选）设置阴影的颜色，如果省略，浏览器会自行选择一个颜色

--inset：（可选）将外部阴影设置为内部阴影。

==【box-shadow: 5px 4px10px 2px gray; ||box-shadow: 5px 4px 10px 2px gray inset;】

）

==outline：轮廓样式，它和边框一样，只不过它可以在边框的外围再加一层。

（

属性：

--outline-color：【颜色，外围轮廓的颜色】

--outline-offset：【长度，轮廓距离元素边框边缘的偏移量】

--outline-style：【样式，轮廓样式，和border-style一致】

--ontline-witdh：【轮廓宽度】

--outline：<颜色> <样式> <宽度> outline: 10px double red;

）

==光标样式cursor：auto,default,none,context-menu,help,pointer,progress,wait,cell,crosshair,text,verticaltext,

alias,copy,move,no-drop,not-allowed,e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize

,ew-resize,ns-resize,nesw-resize,nwse-resize,col-resize,row-resize,all-scroll

22 CSS3 前缀和rem

==CSS3 前缀：

（浏览器，厂商名称

--Chrome、Safari：-webkit-

--Opera：-o-

--Firefox：-moz-

--Internet Explorer：-ms-

）

//实验阶段的写法

div {

-webkit-border-radius: 50px;

-moz-border-radius: 50px;

-o-border-radius: 50px;

-ms-border-radius: 50px;

border-radius: 50px;

}

//前缀写法写在标准后面，且值不一样，就会出现问题

div {

border-radius: 50px;

-webkit-border-radius: 100px;

}

==长度单位rem：

《这里重点推荐一个：rem 或者成为(根em)。目前主流的现代浏览器都很稳定的支持。它和em、百分比不同的是，

它不是与父元素挂钩，而是相对于根元素<html>的文本大小来计算的，这样能更好的统一整体页面的风格。》

1em=10px; em:【灵活】它挂钩的是它父元素所以，W3C 推出了直接基于根元素单位：rem：【与根元素挂钩】

23 CSS3 文本效果

==文本阴影：

//正值阴影

text-shadow: 1px 1px 1px red;

//负值阴影

text-shadow: -1px -1px 1px red;

//多重阴影叠加

text-shadow:0px 0px 0 rgb(188,178,188),

1px 0px 0 rgb(173,163,173)...

==文本裁剪：

《CSS3 提供了text-overflow 属性来控制文本的溢出部分，它的作用是对溢出的部分裁剪掉，然后判定是否添加省略号。》

---text-overflow：clip【默认值，裁剪文本时不添加“...”省略号】

ellipsis【裁剪文本时添加“...”省略号】

//必须不换号和使用overflow 控制溢出

p {

width: 160px;

white-space: nowrap;

background: silver;

/*text-overflow: clip;*/

text-overflow: ellipsis;

overflow: hidden;

}

==文本描边：

《CSS3 提供了描边属性，即text-stroke、text-stroke-width、text-stroke-color。目前只有webkit

引擎的浏览器支持，并且必须加上-webkit-前缀才能有效。》

//实验阶段的产物，了解即可

p {

font-size: 50px;

-webkit-text-stroke:1px red;

}

//修改描边的颜色和厚度

p {

font-size: 50px;

-webkit-text-stroke:1px red;

-webkit-text-stroke-color: orange;

-webkit-text-stroke-width: 2px;

}

==文本填充：

《CSS3 提供了一个文本颜色填充功能：text-fill-color，感觉和color 属性很像。其实在配合其他属性才能达到不一样的效果。》

//不配合背景样式时，和color 属性没区别

p {

font-size: 150px;

-webkit-text-fill-color: red;

}

//和CSS3 背景的新特性搭配产生渐变文字

p {

font-size: 150px;

font-family: 黑体;

background:

-webkit-linear-gradient(top,#eee,#aaa50%,#333 51%,#000);

-webkit-background-clip:text;

-webkit-text-fill-color: transparent;

}

24 CSS3 渐变效果

《HTML5 中CSS3 背景渐变功能，主要有两种渐变方式：线性渐变和径向（放射性）渐变。》

==线性渐变linear-gradient：CSS3 提供了linear-gradient属性实现背景颜色的渐变功能。linear-gradient(方位, 起始色, 末尾色)

方位：to top、to topright、to right、to bottom、to bottom left、toleft、to top left。

起始色：必选参数，颜色值

末尾色：必选参数，颜色值

//可以使用以角度单位的数值来设置方位。比如0度（0deg）相当于to top；角度会沿逆时针方向随着你的角度的增加而增加。

//通过角度设置方位，0 ~ 360 度之间，可以是负值

background-image:linear-gradient(45deg,orange,green);

//多色线性渐变

background-image:linear-gradient(-45deg,orange,green,blue,red);

//通过百分比设置多色线性位置

background-image: linear-gradient(-45deg,orange 0%, green 20%, blue 40%,red 100%);

//结合背景，并使用透明渐变实现强大层次感

background-color: red;

rgba(0,0,0,0));

//重复渐变属性值

background-image:repeating-linear-gradient(to top, orange 10px, green

30px);

==径向渐变radial-gradient：

《CSS3 提供了径向渐变，也叫做放射性渐变：radial-gradient 属性值。它是从一个点向四周发散的方式扩展。》

==radial-gradient(方位, 起始色, 末尾色)

方位：可选参数，径向的方位。可以使用的值有：像素、百分比、固定值，或复合搭配使用：

起始色：必选参数，颜色值

末尾色：必选参数，颜色值

//两个必选参数

//如果想设置第一个可选参数，有一种做法是设置为：cirlce(圆形)或ellipse(椭

圆形)。默认是椭圆形。

//不单单可以设置形状，还可以设置形状的发散方向：top、left、right、bottom、center

//也可以复合方向，比如右下方

//可以设置发散的距离，即圆的半径长度：

（

关键字说明：closest-side【指定径向渐变的半径长度为从圆心到离圆心最近的边】

closest-corner【指定径向渐变的半径长度为从圆心到离圆心最近的角】

farthest-side【指定径向渐变的半径长度为从圆心到离圆心最远的边】

farthest-corner【指定径向渐变的半径长度为从圆心到离圆心最远的角】

）

//关键字有点拗口，可以用像素表示半径，但不接受百分比

//同样，也有重复背景方式

background-image:repeating-radial-gradient(circle 50px, orange,green);

//兼容模式

//两个重复背景只要加上前缀就是兼容模式了

25 CSS3 边框图片效果

==属性解释：

《CSS3 提供了一个新的属性集合，用这几个属性可以嵌入图片形式的边框。这样，边框就可以自定义了。》

（

属性：

--border-image-source：引入背景图片地址

--border-image-slice：切割引入背景图片

--border-image-width：边框图片的宽度

--border-image-repeat：边框背景图片的排列方式

--border-image-outset：边框背景向外扩张

--border-image：上面五个属性的简写方式

）

==属性解释

显示排列方式:border-image-repeat

(

属性：

--stretch：指定用拉伸方式填充边框背景图。默认值。

--repeat：指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。

--round：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小，直至正好可以铺满整个边框。

--space：指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距，直至正好可以铺满整个边框。

)

//另一个按钮的小例子

div {

width: 400px;

height: 40px;

border-image-source: url(button.png);

border-image-width: 10px;

border-image-slice: 10 fill;

border-image-repeat: stretch;

}

border-image-source: url(border.png);

border-image-width:27px;

border-image-slice:27;

border-width:20px;

border-image-repeat:round;

==简写和版本:border-image:url(border.png) 27/27px round;

26 CSS3 变形效果[上]

《HTML5 中CSS3 的变形效果，通过变形效果，可以平移、缩放和旋转元素的功能。》

==transform：

《CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个：transform 和transform-origin。》

--transform：指定应用的变换功能

--transform-origin：指定变换的起点

（

于transform 的属性值：none、

--translate、translateX、translatY(长度值或百分数值)【平移】：在水平方向、垂直方向或两个方向上平移元素。

--scale、scaleX、scaleY(数值)【缩放】：在水平方向、垂直方向或两个方向上缩放元素

--rotate(角度)【旋转】：旋转元素

--skew、skewX、skewY(角度)【倾斜】：在水平方向、垂直方向或两个方向上使元素倾斜一定的角度

--matrix(4~6 数值，逗号隔开)：指定自定义变换。

transform: scale(1.5,1.5);

/*旋转*/：transform:rotate(-45deg);

/*通过六个值自定义矩形*/：transform:matrix(1, 0, 0, 1, 30, 30);

/*多个属性值空格隔开*/transform:rotate(45deg) scale(1.5);

）

==transform-origin：《可以设置变换的起点。默认情况下，使用元素的中心作为起点。》

（

属性：

--百分数值：指定元素x 轴或y 轴的起点

--指定x 轴的位置：left、center、right

--指定y 轴的位置：top、center、bottom

//默认值，以中心点变形

transform-origin: center center;

transform-origin: 50% 50%;

//以左上角为基准点变形

transform-origin: left top;

transform-origin: 0px 0px;

）

==浏览器版本：兼容完整版==添加代表各个浏览器的前缀

27 CSS3 变形效果[下]

《HTML5 中CSS3 的变形效果，主要接着上节课的2D 平面变形转换到3D立体变形。》

==3D 变形简介

（

3D 变形的属性值表：

--translate3d(x,y,z)：3D 方式平移元素，设置x、y 和z 轴

--translateZ(z)：设置3D 方式平移元素的z 轴【平移】

--scale3d(x,y,z)：设置3D 方式缩放元素的z 轴

--scaleZ(z)：设置3D：方式缩放元素的z 轴【缩放】

--rotate3d(x,y,z,a)：3d 方式旋转元素

--rotateX(a)、rotateY(a)、rotateZ(a)：分别设置3D 方式的旋转元素的x、y 和z 轴【旋转】

--perspective(长度值)：设置一个透视投影矩阵

--matrix3d(多个值)：定义一个矩阵

）

//兼容版本完整形式

==transform-style：是指定嵌套元素如何在3D空间中呈现。

（

属性：flat：默认值，表示所有子元素在2D 平面呈现。

preserve-3d：表示子元素在3D 空间中呈现。

）

==perspective：perspective 是3D 变形的重要属性，该属性会设置查看者的位置，并将可视内容映射

到一个视锥上，继而投放到一个2D 平面上。

（

属性：none：默认值，表示无限的角度来看3D 物体，但看上去是平的。

长度值：接受一个长度单位大于0 的值，其单位不能为百分比。值越大，角度出现的越远，就好比你人离远一点看物体。值越小，正相反。

）

==perspective-origin 属性来设置3D 变形中的源点角度。该属性默认值为50% 50%也就是center center。

（

--百分数值：指定元素x 轴或y 轴的起点

--长度值：指定距离

--指定x 轴的位置：left、center、right

--指定y 轴的位置：top、center、bottom

）

28 CSS3 过渡效果

==过渡简介：过渡效果一般是通过一些简单的CSS动作触发平滑过渡功能，比如：:hover、:focus、:active、:checked 等。

CSS3 提供了transition 属性来实现这个过渡功能，主要属性如下表：

（

--transition-property：指定过渡或动态模拟的CSS属性

--transition-duration：指定完成过渡所需的时间

--transition-timing-function：指定过渡的函数

--transition-delay：指定过渡开始出现的延迟时间

--transition：简写形式，按照上门四个属性值连写

）

==transition-property：none【没有指定任何样式】、all【默认值，指定元素所支持transition-property属性的样式】、

指定样式【指定支持transition-property的样式】

==transition-proerty 支持的样式有哪些：【background-color、background-image、background-position、border-bottom-color、border-bottom-width、border-color

border-left-color、border-left-width、border-right-color、border-right-width、border-spacing、border-top-color、border-top-width、border-width

bottom、color、crop、font-size、font-weight、grid-*、height、left、letter-spacing、line-height、margin-bottom、margin-left、margin-right、margin-top

max-height、max-width、min-height、min-width、opacity、outline-color、outline-offset、outline-width、padding-bottom、padding-left、padding-right、padding-top

right、text-indent、text-shadow、top、vertical-align、visibility、width、word-spacing、z-index、zoom】

==transition-duration：设置过渡的样式--transition-duration:1s;

==transition-timing-function：当过渡效果运行时，比如产生缓动效果

（

--ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。(0.25, 0.1,0.25, 1.0)

--linear：终止状态速度是恒速等同于贝塞尔曲线(0.0,0.0, 1.0, 1.0)

--ease-in：速度越来越快，呈一种加速状态等同于贝塞尔曲线(0.42, 0,1.0, 1.0)

--ease-out：速度越来越慢，呈一种减速状态等同于贝塞尔曲线(0, 0, 0.58,1.0)

--ease-in-out：先加速，再减速。等同于贝塞尔曲线(0.42,0, 0.58, 1.0)

）

//恒定速度

transition-timing-function: linear;

以上五种都是设定好的属性值，我们也可以自定义这个缓动。使用 cubic-bezier()属性值，里面传递四个参数 p0,p1,p2,p3，值在 0~1 之间。

//自定义缓动

transition-timing-function:cubic-bezier(0.25, 0.67, 0.11, 0.55);

==transition-delay：这个属性可以设置一个过渡延迟效果，就是效果在设置的延迟时间后再执行。

//设置延迟效果如果有多个样式效果，可以设置多个延迟时间，以空格隔开

transition-delay: 0s, 1s, 0s;

29 CSS3动画效果

==动画简介：

animation 实现动画效果主要由两个部分组成：

1.通过类似 Flash 动画中的关键帧声明一个动画；

2.在 animation 属性中调用关键帧声明的动画。

==CSS3 提供的 animation 是一个复合属性，它包含了很多子属性：

--animation-nam：用来指定一个关键帧动画的名称，这个动画名必须对应一个@keyframes 规则。CSS 加载时会应用 animation-name 指定的动画，从而执行动画。

--animation-duration：用来设置动画播放所需的时间

--animation-timing-function：用来设置动画的播放方式

--animation-delay：用来指定动画的延迟时间

--animation-iteration-count：用来指定动画播放的循环次数

--animation-direction：用来指定动画的播放方向

--animation-play-state：用来控制动画的播放状态

--animation-fill-mode:用来设置动画的时间外属性

--animation:以上的简写形式

==属性详解:

@keyframes://创建动画的第一步，先声明一个动画关键帧。

@keyframes myani {

0% {

background-color: white;

margin-left:0px;

}

50% {

background-color: black;

margin-left:100px;

}

100% {

background-color: white;

margin-left:0px;

}

//或者重复的，可以并列写在一起

@keyframes myani {

0%, 100% {

background-color: white;

margin-left:0px;

}

50% {

background-color: black;

margin-left:100px;

}

==animation-name://调用@keyframes 动画--animation-name:myani;

--none:默认值，没有指定任何动画

--INDEX:是由@keyframes 指定创建的动画名称

==animation-duration://设置动画播放的时间--animation-duration:1s;

==animation-timing-function://设置缓动--animation-timing-function:ease-in;【ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier】

==animation-delay：//设置延迟时间-----animation-delay: 1s;

==animation-iteration-count：//设置循环次数---animation-iteration-count:infinite;【次数，默认值为 1、infinite：表示无限次循环】

==animation-direction：//设置缓动方向交替--animation-direction:alternate;【normal：默认值，每次播放向前、alternate：一次向前，一次向后，一次向前，一次向后这样交替】

==animation-play-state//设置停止播放动画--animation-play-state:paused;

==animation-fill-mode//设置结束后不在返回--animation-fill-mode:forwards;【none：默认值，表示按预期进行和结束、forwards：动画结束后继续应用最后关键帧位置，即不返回

backforwards：动画结束后迅速应用起始关键帧位置，即返回、both：根据情况产生 forwards 或 backforwards 的效果】

==简写和版本：

//简写形式完整版

animation: myani 1s ease 2 alternate 0sboth;

30 CSS 传统布局[上]

==布局模型:

--从最低分辨率1024 * 768 设计即可。当然，也有一些网站在近两年讲最低分辨率设置为1280 减去滚动条宽度，因为大显示器逐步主流。

--刚才所说的固定长度的布局，还有一种是流体布局，就是布局的长度为百分比，比如100%。不管你是什么分辨率，它都能全屏显示，

--当然，局限性也特别大，只适合一些单一页面，复杂的页面，会随着不同浏览器产生各种阅读障碍。

==表格布局:

--表格布局，就是通过设定固定的单元格，去除表格边框和填充实现的布局。当然这个布局非常不建议使用，只是教学了解。

--表格应该用它最为语义的地方，就是二维表的数据显示。

==固定布局://CSS 部分

body {margin:0;}

table {margin:0 auto;width:960px;border-spacing: 0;}

==流体布局:表格的固定布局改成流体布局非常简单，只需要设置table 为100%即可。table {width: 100%;}

==浮动布局:浮动布局主要采用float和clear 两个属性来构建。【固定布局、流体布局】【float: left;、float:right;、clear:both;】

流体布局只要更改body 元素的限定长度为auto 或100%。然后左右两列分别设置20%和80%即可。

31 CSS 传统布局[下]

==定位布局：position 属性来实现元素的绝对定位和相对定位。

（

属性：

--static：默认值，无定位。

--absolute：绝对定位，使用top、right、bottom、left进行位移。【脱离文档流，z-index判定层次关系】

--relative:相对定位，使用top、right、bottom、left进行位移。【占位偏移】

--fixed:以窗口参考定位，使用top、right、bottom、left 进行位移。【脱离文档流】

）

==//绝对定位，脱离文档流，以窗口文档左上角0,0为起点【absolute】

--所谓脱离文档流的意思，就是本身这个元素在文档流是占位的。如果脱离了，就不占有s文档的位置，好像浮在了空中一般，有了层次感。

--由于绝对定位脱离了文档流，出现层次概念。那么每个元素到底在那一层，会不会冲突覆盖。这时通过z-index 属性来判定它们的层次关系。

（z-index：auto【默认层次】、数字【设置层次，数字越大，层次越高】

）

==//以窗口参考定位，脱离文档流，会随着滚动条滚动而滚动【fixed】

==//相对定位，不脱离文档流，占位偏移：既要脱离文档流、以父元素为参考点、还必须是绝对定位。

//第一步，将需要设置参考点的父元素设置为相对，且不设置坐标【占位】

body {position: relative;}

//第二步，如果父元素设置了参考点，子元素的绝对定位将以它为基准

header {position: absolute;top: 0px;left:0px;}

==box-sizing：

《我们了解到元素盒子如果加入了内边距padding 和边框border后，它的总长度会增加。那么如果这个元素用于非常精确的布局时，

我们就需要进行计算增减。这其实是比较烦人的操作，尤其是动态设置页面布局的时候。》

==CSS3 提供了一个属性box-sizing，这个属性可以定义元素盒子的解析方式，从而可以选择避免掉布局元素盒子

增加内边距和边框的长度增减问题。

（box-sizing

--content-box：默认值，border 和padding 设置后用于元素的总长度。

--border-box：border 和padding 设置后不用于元素的总长度。

）

//设置border-box 让border 和padding 不在额外增加元素大小

aside {

width: 200px;

height: 500px;

background-color: purple;

padding: 10px;

border: 5px solid red;

box-sizing: border-box; 【不在额外增加元素大小】

float: left;

}

==box-sizing 是CSS3 推出的，各个厂商在实现时设置了私有前缀。

//完整形式

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

==resize：CSS3 提供了一个resize 属性，来更改元素尺寸大小。

（

属性：

--none：默认值，不允许用户调整元素大小。

--both：用户可以调节元素的宽度和高度。

--horizontal：用户可以调节元素的宽度。

--vertical：用户可以调节元素的高度。

）

一般普通元素，默认值是不允许的。但如果是表单类的textarea 元素，默认是允许的。

而普通元素需要设置overflow:auto，配合resize 才会出现可拖拽的图形。

//允许修改

aside {

resize: both;

overflow:auto;

}

32 CSS3 多列布局

【流体多列布局】【columns】

《HTML5 中CSS3 提供的多列布局，通过多列布局我们方便的创建流体的多列布局。》

//如果想用浮动和定位实现流体三列，基本不可能。所以，CSS3 提供了多列布局属性columns 来实现这个动态变换的功能。

==属性及版本：CSS3 提供了columns 多列布局属性等7 个属性集合，具体如下：

（

--columns：集成column-width 和column-count两个属性。

--column-width：定义每列列宽度

--column-count：定义分分列列数

--column-gap：定义列间距

--column-rule：定义列边框

--column-span：定义多列布局中子元素跨列效果，firefox不支持

--column-fill：控制每列的列高效果，主流浏览器不支持

）

《由于column 属性集尚未纳入标准，大多数浏览器必须使用厂商前缀才能访问，好在主流的浏览器都可以很好的支持了。》

//完整形式

-webkit-columns: 150px 4;

-moz-columns: 150px 4;

columns: border-box;

==属性解释：

--columns：包含columns-width 和columns-count这两种简写--//分成四列，每列宽度自适应：-moz-columns: auto 4;

--column-width：用于设置每列的宽度---moz-column-width:200px;【auto、长度值】

这里设置了200px，有点最小宽度的意思。当浏览器缩放到小于200 大小时，将变成1

列显示。而如果是auto，则一直保持四列。

--column-count：用于设置多少列。//设置列数：-moz-column-count:4;【auto：默认值，表示就1 列。||数值：设置列数】

--column-gap：column-gap 属性，用于设置列间距//设置列间距-moz-column-gap:100px;【】

--column-rule：设置每列中间的分割线--//设置列边线-moz-column-rule:2px dashed gray;

（

--column-rule：<宽度> <样式> <颜色>的边框简写形式。

--column-rule-width：单独设置边框宽度

--column-rule-style：单独设置边框的样式。

--column-rule-color：单独设置边框的颜色。

《列边线不会影响到布局，它会根据布局的缩放自我调整是否显示。如果我们把页面缩放到只能显示一列时，它自动消失了。》

）

--column-span：设置跨列大标题【none：默认值，表示不跨列。、all：表示跨列。】

//跨列标题，由于火狐尚未支持，固使用webkit---webkit-column-span:all;

（

实例：@charset "utf-8";

div {

-webkit-column-width: 150px;

-webkit-column-count:3;

-webkit-column-gap:50px;

-webkit-column-rule:2px dashed gray;*/

}

h1 {

text-align:center;

-moz-column-span:all;

-webkit-column-span:all;

column-span:all;

}

）

33 CSS3 弹性伸缩布局[上]

==布局简介：CSS3 提供一种崭新的布局方式：Flexbox布局，即弹性伸缩布局模型(Flexible Box)。用来提供一个更加有效的方式实现响应式布局。

在发展中，可能还有各种改动，浏览器的兼容性还存在问题。

div {

display: -moz-box;

display: -webkit-box;

display: box;

}

//通过以上设置，在除了IE 浏览器外，布局实现了水平分布。

==旧版本:

如果属性和属性值为：display:box.属于旧版本。

--容器属性display：【box：将容器盒模型作为块级弹性伸缩盒显示（旧版本）、inline-box：将容器盒模型作为内联级弹性伸缩盒显示（旧版本）】

//块级它是占用整行的，类似<div>元素，而内联级不占用整行，类似<span>元素。

//设置弹性，以火狐为例

div {

display: -moz-box;

}

==box-orient 属性：主要实现盒子内部元素的流动方向。

（

属性：

--horizontal：伸缩项目从左到右水平排列

--vertical:伸缩项目从上到下垂直排列

--inline-axis:伸缩项目沿着内联轴排列显示

--block-axis:伸缩项目沿着块轴排列显示

）

//设置垂直流动:div{-webkit-box-orient: vertical;}

==box-direction 属性:主要是设置伸缩容器中的流动顺序。【normal：默认值，正常顺序、reverse：逆序】

--div {-moz-box-direction: reverse;}

==box-pack属性：用于伸缩项目的分布方式。

（

属性：

--start：伸缩项目以起始点靠齐

--end：伸缩项目以结束点靠齐

--center：伸缩项目以中心点靠齐

--justify：伸缩项目平局分布，-webkit-支持，-moz-不支持

）

==box-align属性：用来处理伸缩容器的额外空间。

（

属性：

--start：伸缩项目以顶部为基准，清理下部额外空间

--end：伸缩项目以底部为基准，清理上部额外空间

--center：伸缩项目以中部为基准，平均清理上下部额外空间

--baseline：伸缩项目以基线为基准，清理额外的空间

--stretch：伸缩项目填充整个容器，默认

）

//居中对齐，清理上下额外空间

div {

-moz-box-align: center;

}

==box-flex属性：可以使用浮点数分配伸缩项目的比例

//设置每个伸缩项目占用的比例

p:nth-child(1) {

-ms-flex:1;

-ms-flex-order:3;

}

p:nth-child(2) {

-ms-flex:3;

-ms-flex-order:2;

}

p:nth-child(3) {

-ms-flex:1;

-ms-flex-order:1;

}

==box-ordinal-group 属性：可以设置伸缩项目的显示位置。

//将第一个位置的元素，跳转到第三个位置

p:nth-child(1) {

-moz-box-ordinal-group: 3;

}

34 CSS3 弹性伸缩布局[中]

==混合过渡版

--设置伸缩盒的display 有如下两个属性值：

（

--flexbox：将容器盒模型作为块级弹性伸缩盒显示（混合版本）

--inline-flexbox：将容器盒模型作为内联级弹性伸缩盒显示（混合版本）

）

//需要IE 前缀-msdiv

{

display: -ms-flexbox;

}

==flex-direction：和旧版本box-orient属性一样，都是设置伸缩项目的排列方式。

（

属性：

--row：设置从左到右排列

--row-reverse：设置从右到左排列

--column：设置从上到下排列

--column-reverse：设置从下到上排列

）

==flex-wrap属性:类似与旧版本中的box-lines，但是box-lines 我们没有讲解，原因是没有浏览器支持它。

==flex-flow 属性:是集合了排列方向和控制换行的简写形式。

==flex-pack 属性:和旧版本中的box-pack一样，设置伸缩项目的对其方式。【start、end、center、justify】

==flex-align 属性：和旧版本中的box-align 一样，处理伸缩项目容器的额外空间。【start、end、center、baseline、stretch】

==flex 属性：和旧版本中的box-flex 类似，用来控制伸缩容器的比例分配。

==flex-order 属性：和box-ordinal-group属性一样控制伸缩项目出现的顺序。//设置伸缩项目顺序

p:nth-child(1) {

-ms-flex-order: 2;

}

35 CSS3 弹性伸缩布局[下]

==新版本display 有如下两个属性值：flex【将容器盒模型作为块级弹性伸缩盒显示（新版本）】

inline-flex【将容器盒模型作为内联级弹性伸缩盒显示（新版本）】

==flex-direction：和旧版本box-orient属性一样，都是设置伸缩项目的排列方式。

（

属性：

--row：设置从左到右排列

--row-reverse：设置从右到左排列

--column：设置从上到下排列

--column-reverse：设置从下到上排列

）

==flex-wrap属性:类似与旧版本中的box-lines，但是box-lines 我们没有讲解，原因是没有浏览器支持它。

(

属性：

--nowrap：默认值，都在一行或一列显示

--wrap：伸缩项目无法容纳时，自动换行

--wrap-reverse：伸缩项目无法容纳时，自动换行，方向和wrap 相反

//设置无法容纳时，自动换行

div {

-ms-flex-wrap: wrap;

}

)

==flex-flow 属性：是集合了排列方向和控制换行的简写形式。

//简写形式

div {

flex-flow: row wrap;

}

==justify-content 属性：和旧版本中的box-pack一样，设置伸缩项目的对其方式。

（

属性：

--flex-start：伸缩项目以起始点靠齐

--flex-end：伸缩项目以结束点靠齐

--center：伸缩项目以中心点靠齐

--space-between：伸缩项目平局分布

--space-around：同上，但两端保留一半的空间

）

==align-items属性：和旧版本中的box-align 一样，处理伸缩项目容器的额外空间。

（

属性：

--flex-start：伸缩项目以顶部为基准，清理下部额外空间

--flex-end：伸缩项目以底部为基准，清理上部额外空间

--center：伸缩项目以中部为基准，平均清理上下部额外空间

--baseline：伸缩项目以基线为基准，清理额外的空间

--stretch：伸缩项目填充整个容器，默认

）

==align-self:align-items 一样，都是清理额外空间，但它是单独设置某一个伸缩项目的。所有的值和align-itmes 一致。

==flex 属性:和旧版本中的box-flex类似，用来控制伸缩容器的比例分配。

==order 属性和box-ordinal-group 属性一样控制伸缩项目出现的顺序。

36 使用Emmet 插件

了解一下Sublime Text3 的一个HTML5 代码提示插件：Emmet，这个插件比自带原生的要强大许多

37 实战旅行社网站

==网站结构：

<nav></nav> 【导航】

<header></header> 【头部】

<section></section> 【页面主体】

JourneyX

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习总结

1 表格元素table、thead、tbody、tfoot、tr、th、td、col、colgroup、caption 均属于单元格，包含两个合并属性：colspan、rowspan 等--添加表格标题这是一个人物表--设置列--更灵活的设置列 2 分组元素p、div、blockquote、pre、hr、ul,ol、l
复制链接

扫一扫