本文全面介绍了CSS相关知识，包括代码语法、放置位置、继承特性，详细阐述了各类选择器及其优先级。还对背景、字体、文本等样式属性进行讲解，涉及盒模型、浮动、定位等布局内容，此外介绍了CSS3新增的变形、动画、多列等属性及弹性盒模型。
第四章 CSS 概述
第一节 CSS代码语法
• CSS全称为层叠样式表(Cascading Style Sheets)，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
• css代码通常存放在<style></style>标签内
• css 样式由选择符和声明组成，而声明又由属性和值组成
• 选择符{属性:值}例：p{color:red;}
• 选择符：又称选择器，指明网页中要应用样式规则的元素
• 声明：在英文大括号{}中的的就是声明，属性和值之间用英文冒号:分隔。当有多条声明时，中间用英文分号;分隔，如：
p{
font-size:12px;
color:red;
}第二节 CSS 放置位置
行内样式
• 直接书写在标签的style属性中
• 不建议使用
<div style="width:200px; height:200px;"></div>内联式样式表
• 写在<style></style>标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
</body>
</html>外联样式表
• 将一个独立的.css文件引入到HTML文件中，使用<link>标签写在<head>标签中。 链接式会以网页文件主体装载前装载CSS文件。
• rel="stylesheet"定义类型为层叠样式表，一定要写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="My.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>第三节 CSS的继承
• CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
• 不可继承样式：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear
• 可以继承的样式：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor
第五章 CSS 选择器
第一节 选择器的种类
标签选择器
通过标签的名字，修改css样式
div{
width:200px;
height:300px;
}通配符选择器
• 选择页面中所有的元素
*{
margin:0;
padding:0;
}属性选择器
后代选择器
• 选择某个父元素下面所有的元素
.box p{
background-color:red;
}一级子元素选则器
• 选择某个父元素的直接子元素
• 后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素，不会再向下查找元素
.box>p{
background-color:red;
}id选择器
通过id查找页面中唯一的标签，用 # 标示id
#wrap{
width:200px;
height:300px;
}class选择器
通过特定的class（类）来查找页面中对应的标签，以 . class名称
.box{
width:200px;
height:300px;
}
<div class="box"></div>伪类选择器
• :hover鼠标移入某个元素
.box:hover{
color:red;
}• :before在某个元素的前面插入内容
div:before{
content:"- 台词";
background-color:yellow;
color:red;
font-weight:bold;
}• :after在某个元素的后面插入内容
div:after{
content:"- 台词";
background-color:yellow;
color:red;
font-weight:bold;
}群组选择器
• 可以对多个不同的选择器设置相同的样式
.box,.box1,.box2{
width:200px;
height:300px;
}第二节 选择器的优先级
• 当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不同的值时。
• 通过测算那个选择器的权重值最高，应用哪一个选择器的样式
• 权重计算方式
– 标签选择器：1
– class选择器：10
– id选择器：100
– 行内样式：1000
– !important 最高级别，提高样式权重，拥有最高级别
p{width:200px} /*权重 1*/
.box{width:200px} /*权重 10*/
.box p{width:200px} /*权重 11*/
#txt{width:200px} /*权重 100*/• 如果两个选择器的权重值一样高，则应用距离对象最近的css样式
第六章 CSS样式（属性）
第一节 背景样式
背景颜色background-color
• background-color:red
• 背景颜色的值可以是英文，可以是十六进制颜色值，可以是rgb，也可以是rgba
背景图片background-image
• background-image:url(bg01.jpg);
• 背景图片的大小可以和容器大小不一样
• 背景图片不会占位
• 如果容器大，背景图片小，背景图片会平铺 铺满整个容器
背景图片位置background-position
• background-position:10px 100px;
• 背景图片定位的值是两个单位，分别代表坐标x，y轴
• 背景图片定位的值可以是应为left，right，top，bottom，center
• 背景图片定位的值也可以是百分比或者像素
背景图片重复background-repeat
• background-repeat:no-repeat
• no-repeat 设置图像不重复，常用
• round 自动缩放直到适应并填充满整个容器
• space 以相同的间距平铺且填充满整个容器
背景图片定位background-attachment
• background-attachment:fixed
• 背景图像是否固定或者随着页面的其余部分滚动
• background-attachment的值可以是scroll（跟随滚动），fixed（固定）
background缩写
• background:#ff0000 url(bg01.jpg) no-repeat fixed center
•
第二节 字体样式
字体族font-family
• font-family:"微软雅黑","黑体";
使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）
字体大小font-size
• font-size:12px;
• 网页默认字体大小是16px
字体粗细font-weight
• font-weight:400;
• normal（默认）
• bold（加粗）
• bolder（相当于<strong>和<b>标签）
• lighter （常规）
• 100 ~ 900 整百（400=normal，700=bold）
字体颜色color
• 颜色的英文单词color:red;
• 十六进制色：color: #FFFF00;
• RGB(红绿蓝)color:rgb(255,255,0)
• RGBA（红绿蓝透明度）A是透明度在0~1之间取值。color:rgba(255,255,0,0.5)
字体斜体font-style
• font-style:italic
• normal 文本正常显示
• italic 文本斜体显示
• oblique 文本倾斜显示
第三节 文本属性
行高line-height
• line-height:50px;
• 可以将父元素的高度撑起来
文本水平对齐方式text-align
• left 左对齐
• center 文字居中
• right 右对齐
文本所在行高的垂直对齐方式vertical-align
• baseline 默认
• sub 垂直对齐文本的下标，和<sub>标签一样的效果
• super 垂直对齐文本的上标，和<sup>标签一样的效果
• top 对象的顶端与所在容器的顶端对齐
• text-top 对象的顶端与所在行文字顶端对齐
• middle 元素对象基于基线垂直对齐
• bottom 对象的底端与所在行的文字底部对齐
• text-bottom 对象的底端与所在行文字的底端对齐
文本缩进text-indent
• text-indent:2em;
• 通常用在段落开始位置的首行缩进
字母之间的间距letter-spacing
单词之间间距word-spacing
文本的大小写text-transform
• capitalize 文本中的每个单词以大写字母开头。
• uppercase 定义仅有大写字母。
• lowercase 定义仅有小写字母。
文本的装饰text-decoration
• none 默认。
• underline 下划线。
• overline 上划线。
• line-through 中线。
自动换行word-wrap
• word-wrap: break-word;
第四节 基本样式
宽度width
• width:200px;
• 定义元素的宽度
高度height
• height:300px
• 元素默认没有高度
• 需要设置高度
• 可以不定义高度，让元素的内容将元素撑高
鼠标样式cursor
• 定义鼠标的样式cursor:pointer
– default默认
– pointer小手形状
– move移动形状
透明度opacity
• opacity:0.3
• 透明度的值可以使0~1之间的数字，0代表透明，1代表完全不透明
• 透明的元素，只是看不到了，但是还占据着文档流
可见性visibility
• visibility:hidden;
• visible 元素可见
• hidden 元素不可见
• collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。
溢出隐藏 overflow
• 设置当对象的内容超过其指定高度及宽度时如何显示内容
• visible 默认值，内容不会被修剪，会呈现在元素框之外。
• hidden 内容会被修剪，并且其余内容是不可见的。
• scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
边框颜色outline
• input文本输入框自带边框，且样式丑陋，我们可以通过outline修改边框
• outline:1px solid #ccc;
• outline:none清除边框
第五节 样式重置
早期的网页没有css样式，为了界面美观，很多元素自带margin、padding等样式，但这些样式在不同浏览器解析的值都不一样，需要将css样式重置，保证在不同浏览器显示一致。
• 清除元素的margin和padding
• 去掉自带的列表符
• 去掉自带的下划线
*{ margin:0; padding:0; } /*清除页面所有标签自带的外间距和内填充*/
ul,ol{ list-style:none; } /*去掉自带的列表符*/
a{ text-decoration:none; } /*去掉自带的下划线*/
img,input{ border:none; } /*清除IE下自带的边框*/第六节 盒模型样式
HTML元素分类
在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素和内联块状元素。
一、块级元素
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。<br/>2、元素的高度、宽度、行高以及顶和底边距都可设置。<br/>3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
<div> <p> <h1>~<h6> <ol> <ul> <dl> <address> <blockquote> <form>
二、行内元素
1、和其他元素都在一行上；<br/>2、元素的高度、宽度、行高及顶部和底部边距不可设置；<br/>3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
<a> <span> <br/> <i> <em> <strong> <label> <q>
三、行内块状元素
1、和其他元素都在一行上；<br/>2、元素的高度、宽度、行高以及顶和底边距都可设置。
<img> <input> select textarea button iframe
元素分类转换display
• block：将元素转换为块级元素
• inline：将元素装换为行级元素
• inline-block：将元素转换为内联块元素
• none: 将元素隐藏
描边border
• border:2px solid #f00;
• 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
• 线条的样式：
– dashed（虚线）| dotted（点线）| solid（实线）。
• css样式中允许只为一个方向的边框设置样式：
– 下描边border-bottom:1px solid red;
– 上描边border-top:1px solid red;
– 右描边border-right:1px solid red;
– 左描边border-left:1px solid red;
间距margin
• div{margin:20px 10px 15px 30px;}
• 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。
• 也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}• 当margin给一个值时：指的是四个方向
• 当margin有两个值时：指的是上下 左右
• 当margin给三个值时：指的是上 左右 下
• 当margin给四个值时：值的是上 右 下 左
内填充padding
• padding:10px
• 元素内容与边框之间是可以设置距离的，称之为填充。填充也可分为上、右、下、左。
• 如下代码：div{padding:20px 10px 15px 30px;}
• 顺序一定不要搞混。可以分开写上面代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}• 当padding给一个值时：指的是四个方向
• 当padding有两个值时：指的是上下 左右
• 当padding给三个值时：指的是上 左右 下
• 当padding给四个值时：值的是上 右 下 左
•
第七节 浮动float
浮动原理
• 浮动使元素脱离文档普通流，漂浮在普通流之上的。
• 浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。
• 浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么。
清除浮动带来的影响
• clear 清除浮动：
– none : 不清除（默认值）。
– left : 不允许左边有浮动对象
– right : 不允许右边有浮动对象
– both : 不允许两边有浮动对象
• 利用伪类实现清除浮动
.clearFix{
content="";
display:block;
width:0;
height:0;
clear:both;
}
第八节 定位position
定位功能可以让布局变的更加自由。
层模型--绝对定位（相对于父类）
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
• position:absolute;
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
/*实现div元素相对于浏览器窗口向右移动100px，向下移动50px。*/层模型--相对定位（相对于原位置）
如果想为元素设置层模型中的相对定位，需要设置position:relative（相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于原位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
• position:relative;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
/*相对于以前位置向下移动50px，向右移动100px;*/层模型--固定定位（相对于网页窗口）
与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed属性功能相同。
• position:fixed
第二篇 html5和css3开发基础与应用
第一章 html5开发基础与应用
HTML5 和 HTML4 的区别
• DTD 的变化
• HTML5 的语法变化
– 某些元素可以省略结束标签 （<p> <li> <dt> <dd> 等）
– 没有结束标签的元素 (< area> <base> <br> 等）
– 连开头标签一起省略的元素 （<html> <head> <body> <colgroup> <tbody> 等）
• 属性值可以不用引号括起来
• 标签不再区分大小写
• 某些标志性的属性可以省略属性值，通常为 boolean 类型
HTML5 的优势
• 解决跨浏览器，跨平台问题
目前95%的浏览器都支持 HTML5，其中包含移动端等设备上使用的浏览器。 对于开发者来说，各浏览器更好的支持 HTML5，前端程序员开发 HTML+CSS+JavaScript 页面将会更加的轻松。
• 增强了 web 的应用程序
最直观的地方就是以前都需要使用 Flash 来播放视频，现在直接使用 HTML5 来播放视频，使得手机网页看视频成为了可能。
第二节 常用元素和属性
HTML5 保留元素
HTML5 是对以前的 HTML 发展产生出来的，因此，HTML5 保留了以前 HTML 绝大部分标签。
HTML5 废弃元素
废弃标签
说明
basefont big center font strike tt
用 CSS 处理可以更好地替代他们
frame frameset noframes
使用这些标签，破坏了可使用性和可访问性
acronym applet dir
不经常使用、会引起混乱、可被其他元素替代
HTML5 新增元素
在 HTML5 以前，HTML 页面只能用元素来作为结构元素，使得代码 阅读带来了极大的困扰性，故在 HTML5 中增加了大量的结构元素。
新增元素
说明
<header>
用于定义文档或节的页眉
<footer>
用于定义文档或节的页脚
<article>
用于定义文档内的文章
<section>
用于定义文档中的一个区域（或节）
<aside>
用于定义与当前页面或当前文章的内容几乎无关的附属信息
<figure>
用于定义一段独立的引用，经常与说明(caption)<figcaption>配合使用，通常用在主文中的图片，代码，表格等。
<figcaption>
用于表示是与其相关联的引用的说明/标题，用于描述其父节点<figure>元素里的其他数据。
<hgroup>
用于对多个<h1>~<h6>元素进行组合
<nav>
用于定义页面上的导航链接部分
<mark>
用于定义高亮文本
<time>
用于显示被标注的内容是日期或时间（24小时制）
<meter>
用于表示一个已知最大值和最小值的计数器
<progress>
用于表示一个进度条
<audio>
定义声音，比如音乐或其他音频流
<video>
定义视频，比如电影片段或其他视频流
<article>元素和<section>元素在使用上非常容易用错。原因也很明显，他们可以包含很多子元素，同时还可以互相嵌套。其实<article>元素可以看成是 一种特殊类型的<section>元素，它比<section>元素更强调独立性。即<section> 元素强调分段或分块，而<article>元素强调独立性。
HTML5 新增通用（全局）属性
HTML5 规范对通用属性也做了一定的修改。 保留了 id、style、class、dir、title、lang、accesskey 等通用属性。也新增了 contenteditable、designMode、hidden 等通用属性。
新增属性说明
contentEditable ：contenteditable 属性规定元素内容是否可编辑
designMode：相当于一个全局的 contenteditable 属性，如果把 designMode 属 性设置为 on，则该页面上的所有支持 contenteditable 属性的元素都变成可编辑状 态
第三节 HTML5 表单相关元素和属性
HTML5 新增的表单控件<output>
<output>元素用于表示计算或用户操作的结果。一般用来更加明确的显示其 他表单控件的值，如 range 类型的具体值，color 的具体值，等等。这样做的好处 是使得表单更加的人性化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 的 output 元素</title>
</head>
<body>
<form action="" method="get" oninput="x.value=parseInt(a.value)">
0 <input type="range" id="a" value="50"> 100 <br/>
<output name="x" for="a">50</output>
</form>
</body>
</html>HTML5 input新增type类型
类型说明
color：用来创建一个允 许用户使用颜色选择器，或输入兼容 CSS 语法的颜色代码的区域
time：生成一个时间选择器
datetime：生成一个 UTC 的日期时间选择器
datetime-local：生成一个本地化的日期时间选择器
date：显示一个日期输入区域，可同时使用日期选择器，结果值包括年、月、日，不包括时间。
month：生成一个月份选择器，它结果值包括年份和月份， 但不包括日期
week：生成一个选择的几周的选择器
email：生成一个 E-mail 输入框
number：生成一个只能输入数字的输入框，
range：生成一个拖动条，通过拖动条，使得用户只能输入指定范围，指定步长的值
search：生成一个专门用于输入搜索关键字的文本框
tel：生成一个只能输入电话号码的文本框
url：生成一个 URL 输入框
HTML5 input新增属性
属性说明
placeholder：主要用在文本框，规定可描述输入字段预期值的简短的提示信息
autocomplete：为了完成表单的快速输入，一般浏览器提供了自动补全的功能选择
autofocus：当为某个表单控件增加该属性后，当浏览器打开这个页面， 这个表单控件会自动获得焦点
list：为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择
pattern：用于验证表单输入的内容，通常 HTML5 的 type 属性，比如 email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后， 验证会更加高效
novalidate：当提交表单时不对其进行验证
required
必需在提交之前填写输入字段
spellcheck
拼写检查，为<input>、<textarea>等元素新增属性
formenctype
规定在发送到服务器之前应该如何对表单数据进行编码
formtarget
带有两个提交按钮的表单，会提交到不同的目标窗口
multiple
一次上传多个文件
maxlength wrap
<textarea>新增<br />maxlength：用于规定文本区域最大字符数。<br />wrap：是否包含换号符（soft/ hard）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML5 的 list 属性</title></head><body><form id="login" action="" method="get"><label for="username"></label><input id="username" type="text" name="username" placeholder="请输入用户名" /><br /><!--list属性对应datalist的id--><label><input type="text" list="location" placeholder="户口所 在地"/></label><br /><input type="submit" /></form><datalist id="location"><option value="BeiJing">北京</option> <option value="HeBei">河北</option> <option value="HeNan">河南</option><option value="ShanXi">山西</option> <option value="ShanDong">山东</option></datalist></body></html>
第二章 CSS3
第一节 CSS3 新增选择器
兄弟选择器
语法
说明
元素 1 ~ 元素 2
第1个元素之后，所有的元素2都会被选择，且这些元素和第一个元素拥有同一个父元素（两个元素之间不一定要相邻）。
属性选择器
语法
说明
E[attribute^=value]
用于选取带有以指定值开头的属性值的元素
E[attribute$=value]
用于选取属性值以指定值结尾的元素
E[attribute*=value]
用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词
伪类选择器
伪类名
说明
:root
选择文档的根元素，HTML 里，永远是<html>元素
:last-child
向元素添加样式，且该元素是它的父元素的最后一个子元素
:nth-child(n)
向元素添加样式，且该元素是它的父元素的第 n 个子元素
:nth-last-child(n)
向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素
:only-child
向元素添加样式，且该元素是它的父元素的唯一子元素
:first-of-type
向元素添加样式，且该元素是同级同类型元素中第一个元 素
:last-of-type
向元素添加样式，且该元素是同级同类型元素中最后一个 元素
:nth-of-type(n)
向元素添加样式，且该元素是同级同类型元素中第 n 个元 素
:nth-last-of-type(n)
向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
:only-of-type
向元素添加样式，且该元素是同级同类型元素中唯一的元素
:empty
向没有子元素（包括文本内容）的元素添加样式
伪元素选择器
伪元素名
说明
:enabled
向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
:disabled
向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的样式
:checked
向当前处于选中状态的元素添加样式
:not(selector)
向不是 selector 元素的元素添加样式
:target
向正在访问的锚点目标元素添加样式
::selection
向用户当前选取内容所在的元素添加样式
第二节 CSS3 新增属性
新增背景属性
属性
含义
属性值
继承
background-clip
设置背景覆盖范围
border-box/paddingbox/content-box
否
background-origin
设置背景覆盖的起点
border-box/paddingbox/content-box
否
background-size
设置背景的大小
cover/contain/长度/百分比
否
新增的字体文本相关属性
属性
含义
属性值
继承
text-overflow
设置当文本溢出元素框时处理方式
clip/ellipsis
否
word-wrap
规定单词的换行方式
normal/break-word
是
word-break
规定自动换行的方式
normal/break-all/keep-all
是
新增盒模型属性
属性
含义
属性值
继承
border-radius<br />border-top-left-radius<br />border-top-right-radius<br />border-bottom-left-radius<br />border-bottom-right-radius
圆角
长度/百分比
否
box-shadow
阴影
h-shadow v-shadow <br />blur spread color inset
否
resize
调整尺寸
none/both/horizontal
否
outline-offset
轮廓的偏移量
length/inherit
否
第三节 新增变形动画属性
transform
用来设置元素的变形，可以设置一个或一个以上的变形函数。目 前 transform 有五种基本变形函数可以选择：
函数
说明
translate(x,y)
表示元素水平方向移动 x，垂直方向移动 y，其中y可以省略，表示垂直方向没有位移<br />translateX(x)：表示元素水平方向移动 x。<br />translateY(y)：表示元素垂直方向移动 y。
rotate(angle)
表示元素顺时针旋转 angle 角度，angle 的单位通常为 deg
scale(x,y)
表示元素水平方向缩放比为 x，垂直方向上缩放比为 y，其中 y 可以省略，表示 y 和 x 相同，以保持缩放比。<br />scaleX(x)：表示元素水平方向缩放比为 x。<br />scaleY(y)：表示元素垂直方向上缩放比为 y。
skew(angleX ,angleY)
表示元素沿着 x 轴方向倾斜 angleX 角度，沿着 y 轴方向倾斜 angleY 角度，其中 angleY 可以省略，表示 Y 轴方向不倾斜。<br />skewX(angleX)：表示元素沿着 x 轴方向倾斜 angleX 角度。<br />skewY(angleY)：表示元素沿着 y 轴方向倾斜 angleY 角度。
transform-origin
表示元素旋转的中心点，默认值为 50% 50%。第一个值表 示元素旋转中心点的水平位置，它还可以赋值 left、right、center、长度、百分比；第二个值表示元素旋转中心点的垂直位置，它还可以赋值 top、bottom、 center、长度、百分比。
第四节 CSS3 的 3D 变形属性
CSS3 提供了 3D的变形属性，首先了解x轴 y轴 z轴的概念
transform 3D函数
transform 增加了三个变形函数：
• rotateX：表示元素沿着 x 轴旋转。
• rotateY：表示元素沿着 y 轴旋转。
• rotateZ：表示元素沿着 z 轴旋转。
transform-style
用来设置嵌套的子元素在 3D空间中显示效果。它可以设置两个属性值，flat（子元素不保留其 3D 位置，默认值）和 preserve-3d（子元 素保留它的 3D 位置）。
perspective
设置成透视效果，透视效果为近大远小。该属性值用来设置3D元素距离视图的距离，单位为像素，已经内置了，我们只需要写具体数值即可，默认值为0。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective-origin
设置 3D 元素所基于的 x 轴和 y 轴，改变 3D 元素的底部位置，该属性取值同 transform-origin，默认值为 50% 50%。
backface-visibility
用来设置当元素背面面向屏幕时是否可见，通常用于设置 不希望用户看到旋转元素的背面。它的属性值有visible（背面可见，默认值）、 hidden（背面不可见）两个。
第五节 CSS3 的过渡属性
CSS3 增加了一些过渡属性，可以给元素增加过渡动画效果，可以设置在一定的时间，逐渐的从一种样式变成另一种样式。过渡涉及到的属性如下：
属性
含义
属性值
transition-delay
设置过渡的延迟时间
time
transition-duration
设置过渡的过渡时间
time
transition-timing-function
设置过渡的时 间曲线
linear/ease/ease-in/easeout/ease-in-out/cubic- bezier(x1,y1,x2,y2)
transition-property
设置哪条 CSS 使用过渡
none/all/CSS 属性名称列表
transition
一条声明设置 所有过渡属性
transition-delay <br />transition-duration<br />transition-timing-function <br />transition-property
第六节 CSS3 的动画属性
CSS3 提供了强大的补间动画支持：animation。可以做到一系列的图形变换 (包括平移、缩放、旋转、改变透明度等)。动画涉及的属性如下：
属性
含义
属性值
@keyframes
定义动画选择器
name 时间 CSS 样式
animation-name
使用@keyframes 定义的动画
none/动画选择器定义的名字
animation-delay
设置动画的持续动画时间
none
animation-timing-function
设置动画的时间曲线
linear/ease/ease-in<br />/easeout/ease-in-out<br />/cubic- bezier(x1,y1,x2,y2)
animation-iteration-count
设置动画播放次数
数字/infinite
animation-direction
设置动画反向播放
normal/alternate;
animation-play-state
设置动画播放状态
paused/running
transition
一条声明设置所有动画属性
animation-name<br />animation-delay<br />animation-duration <br />animation-timing-function<br />animation-iteration-count<br />animation-direction
第七节 CSS3 新增多列属性
CSS3 为文本排版增加了一种多列模式，例如一个 div 里，实现文本左右分栏的效果。多列用到的属性如下:
属性
含义
属性值
继承
column-count
设置元素应该被分隔的 列数
数字/auto
否
column-width
设置列的宽度
长度/auto
否
columns
一条声明设置列宽和列 数 column
column-count<br />column-width
否
column-gap
设置列之间的间隔
长度/normal
否
column-span
设置元素应该横跨的列数
1/all
否
column-rule-style
设置列之间间隔的样式
none/hidden/dotted/dashed<br />/solid/double/groove/ridge<br />inset/outset
否
column-rule-color
设置列之间间隔的颜色
颜色名/16 进制数/rgb 函数
否
column-rule-width
设置列之间间隔的宽度
thin/medium/thick/length
否
column-rule
一条声明设置列之间间 隔所有属性
column-rule-style<br />column-rule-color<br />column-rule-width
否
第八节 CSS3新增单位
px、em、rem、vh、 vw和% 移动端长度单位
使用CSS单位px、em、rem、vh、 vw等实现页面布局。
- px：绝对单位，页面按精确像素展示
- em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。em会根据父级元素的大小而变化，但是如果嵌套了多个元素，要计算它的大小，是很容易出错的，这样就引申出了rem。
- rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性。
- %：% 百分比，相对长度单位，相对于父元素的百分比值
- vw、vh、vmin、vmax 主要用于页面视口大小布局
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。
第九节 弹性盒模型
这是设计来实现更复杂的版面布局。其本质上就是Box-model的延伸， Box-model定义了一个元素的盒模型，而 Flexbox 更进一步的去规范了这些盒模型之间彼此的相对关系。
弹性盒模型的语法基础概念
• 任何一个容器都可以指定弹性布
• 设置flex布局以后，子元素的float,clear,virtical-align等样式全部失效
• display:flex;或display:inline-flex;
Properties 属性
CSS Version 版本
Inherit From Parent 继承性
Description 简介
box-orient
CSS3
无
设置或检索弹性盒模型对象的子元素的排列方式。
box-pack
CSS3
无
设置或检索弹性盒模型对象的子元素的对齐方式。
box-align
CSS3
无
设置或检索弹性盒模型对象的子元素的对齐方式。
box-flex
CSS3
无
设置或检索弹性盒模型对象的子元素如何分配其剩余空间。
box-flex-group
CSS3
无
设置或检索弹性盒模型对象的子元素的所属组。
box-ordinal-group
CSS3
无
设置或检索弹性盒模型对象的子元素的显示顺序。
box-direction
CSS3
无
设置或检索弹性盒模型对象的子元素的排列顺序是否反转。
box-lines
CSS3
无
设置或检索弹性盒模型对象的子元素是否可以换行显示。
扫一扫
4479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
