字体样式属性
- font-size:字号大小
- font-family:字体
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
技巧:
1）网页中普遍使用14px+；
2）尽量使用偶数的数字字号，有些老式浏览器支持奇数会有bug；
3）各种字体之间必须使用英文状态下的逗号隔开；
4）中文字体需要加英文状态下的引号，英文字体一般不需要加引号；当需要设置英文字体时，英文字体名必须位于中文字体名之前；
5）尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。 - font-weight:字体粗细
可使用属性值:normal、bold、bolder、lighter、100~900（100的整数倍）
小技巧:数字 400 等价于 normal，而数字 700 等价于 bold - font-style:字体风格
可使用属性值:
normal：默认值，浏览器会显示标准的字体样式
italic：浏览器会显示斜体的字体样式
oblique：浏览器会显示倾斜的字体样式
外观属性
-
文本颜色:color
-
设置行间距:line-height
line-height: 30px;航宇行之间的距离,即字符的垂直间距,一般称为行高.
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体. -
设置段落首行缩进:text-indent
text-indent: 2em;可用属性值:normal,bole,bolder,lighter,100-900(100的整数倍)
小技巧:1em = 1个汉字的宽度 -
文字水平对齐:text-align
text-align: center; -
设置字间距:letter-spacing
中英文均起作用letter-spacing: 100px; -
设置单词间距:word-spacing
只针对英文单词word-spacing: 100px; -
设置文字阴影:text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色
描述 h-shadow -shadow lur olor text-shadow: 10px 10px 10px rgba(0,0,255,0.5);
背景属性
background-color:背景颜色
background-image:背景图片
background-repeat:是否平铺
background-position:背景位置
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
特点:
1）独占一行
2）高度，行高、外边距以及内边距都可以控制
3）宽度默认是容器的100%
4）可以容纳内联元素和其他块元素
行内元素(inline-level)
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
特点:
1）和相邻行内元素在一行上
2）宽、高无效，但水平方向的padding和margin可以设置，垂直方向的无效
3）默认宽度就是它本身内容的宽度
4）行内元素只能容纳文本或则其他行内元素
注意:
1）文字类块级标签里面不能放其他块级元素.比如：p 标签里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt
2）链接里面不能再放链接
行内块级元素(inline-block)
在行内元素中有几个特殊的标签，比如：<img />、<input />、<td>，可以在同一行显示，也可以对它们设置宽高和对齐属性
特点:
1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙
3）高度、行高、外边距以及内边距都可以控制
2）默认宽度就是它本身内容的宽度
显示模式转换
1）块转行内：display:inline;
2）行内转块：display:block;
3）块、行内元素转换为行内块： display: inline-block;
标签选择器 : 直接用标签作为选择器
p div h1 span em i
类选择器 : .类名
.like {color: blue; }
id选择器 : #id名
#like {color: blue; }
通配符选择器 : * 代表所有选择器
* {color: blue; }
伪类选择器
链接伪类选择器
① :link /* 未访问的链接 /
② :visited / 已访问的链接 /
③ :hover / 鼠标移动到链接上 /
④ :active / 选定的链接 */
a{font-size: 20px; font-weight: 800;}
a:link{
color: deeppink;
}
a:visited{
color: green;
}
a:hover{
color: red;
}
a:active{
color: purple;
}
结构(位置)伪类选择器
① :first-child :选取属于其父元素的首个子元素的指定选择器
② :last-child :选取属于其父元素的最后一个子元素的指定选择器
③ :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
④ :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素，不论元素的类型，从最后一个子元素开始计数。
⑤ n 可以是数字、关键词或公式
li{font-size: 50px;}
/*
li:first-child{
color: blue;
}
li:last-child{
color: green;
}
li:nth-child(4){
color: purple;
}
li:nth-last-child(5){
color: yellow;
}
*/
/*li:nth-child(odd){
color: blue;
}
li:nth-child(even){
color: green;
}*/
/*
n 0 2n+1 0 ->1 2 ->3 4 6 8
*/
li:nth-child(2n+1){
color: purple;
}
目标伪类选择器
:target目标伪类选择器 ，用于选取当前活动的目标元素
:target {color: purple; font-size: 40px; }
交集选择器
比如:
<div class="like">小撩</div>
div.like {color: blue;}
并集选择器
比如:
div, p, span, .like {font-size: 20px;color:red;}
后代选择器
.like p {color: green;}
直接后代选择器
.like > p {color: green;}
属性选择器
- 属性选择器用中括号来表示
a标签和input标签选择带有某种属性的元素a[title]{ color: purple; font-size: 30px; } input[type=text]{ color: red; } - 匹配元素中带有某种字符
/* class^= 字符A 表示 字符A 处于开始位置都可以匹配 */ div[class^=like]{ color: red; } /* class $= 字符B 表示 字符B 处于结束位置都可以匹配 */ div[class$=liao]{ color: green; } /* class *= 字符C 表示 字符C 处于任意位置都可以匹配 */ div[class*=it]{ color: blue; }
概念
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，可以理解成装东西的容器。
每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
常用属性
-
盒子边框（border）
-
圆角边框（border-radius）
-
内边距（padding）
-
外边距（margin）
① 细节1：外边距实现盒子居中
条件: 必须是块级元素,盒子必须指定了宽度（width）,然后就给左右的外边距都设置为auto，就可使块级元素水平居中.main{ width:300px; margin:0 auto;}② 细节2：清除元素的默认内外边距
* { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ }注意:行内元素是只有左右外边距的，是没有上下外边距的 ,尽量不要给行内元素指定上下的内外边距就好了
③ 细节3：外边距合并
1）相邻块元素垂直外边距的合并：选择大的合并
2）嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
解决方案：
1）可以为父元素定义1像素的上边框或上内边距
2）可以为父元素添加overflow:hidden -
content宽度和高度
1）概念：使用宽度属性width和高度属性height可以对盒子的大小进行控制
2）符合W3C规范的宽高计算
① 外盒尺寸计算（元素空间尺寸）
元素空间高度 = content height + padding + border + margin
元素空间宽度 = content width + padding + border + margin
② 内盒尺寸计算（元素实际大小）
元素实际高度 = content height + padding + border （Height为内容高度）
元素实际宽度 = content width + padding + border （Width为内容宽度）
3）使用注意
① 宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）
② 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况
③ 如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小
4）布局稳定性思考：分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？
答案：大部分情况下是可以混用的。
建议：width > padding > margin
原因：
1）margin 会有外边距合并
2）padding 会影响盒子大小， 需要进行加减计算
3）width 没有问题 -
box-sizing
1）概念：CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
2）content-box：盒子大小为 width + padding + border
此值为其默认值，其让元素维持W3C的标准盒子模式
3）border-box：盒子大小为 width
padding 和 border 是包含到width里面的 -
box-shadow
1）概念:box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
|值|描述 |
|–|--|
|h-shadow |必需,水平阴影的位置,允许负值 |
|v-shadow|必需,垂直阴影的位置,允许负值|
|blur|可选,模糊距离|
|spread|可选,阴影的尺寸|
|color|可选,阴影的颜色|
|insert|可选,将外部阴影改为内部阴影|
2）使用注意
前两个属性是必须写的；其余的可以省略
外阴影 (outset) ， 默认，但是不能写；如果想要内阴影 inset
浮动
1）概念认知
网页布局的核心，就是用CSS来摆放盒子位置。
如何把盒子摆放到合适的位置？ ① 标准流 ② 浮动 ③ 定位
2）标准流(normal flow)
标准流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序。比如块级元素会独占一行，行内元素会按顺序依次前后排列。大部分页面遵循该布局。
3）浮动(float)
- 基础概念
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。后来用浮动特性来进行页面布局 - 什么是浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中对应位置的过程。
在CSS中，通过float属性来定义浮动，其语法格式是
值:left:向左浮动 right:向右浮动 none:不浮动(正常)选择器 { float: 属性值; }
浮动目的:让多个块级元素能够在同一行上显示 - 浮动特性
总则：浮动会脱离标准流，不会占位置，但会影响标准流
特性1：浮动的元素总是找离它最近的父级元素对齐；但是不会超出内边距的范围。
特性2：浮动的元素排列位置，跟上一个块级元素有关.
如果上一个元素是标准流，则该浮动元素的顶部会和上一个元素的底部对齐
如果上一个元素有浮动，则该浮动元素顶部会和上一个元素的顶部对齐
特性3：一个父盒子里面的子盒子如果需要一行对齐，只要其中一个子级有浮动，那么其它子级都需要浮动，这样才能一行对齐显示。
4. 总结
1）浮动的目的就是为了让多个块级元素能够在同一行上显示
2）元素添加浮动后，元素会具有行内块级标签的特性。元素的宽高完全取决于定义的宽高或者默认的内容多少
语义化记忆:
浮： 加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
漏： 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。
特： 特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次特别要注意注意浮动可以使元素显示模式体现为行内块级标签特性。
PC端页面常用布局
1）版心
- 概念
在制作网页时，因为页面的内容很多，需要对网页进行“排版”，才能使页面结构更清晰、有条理。
“版心”(可视区) 是指网页中主体内容所在的区域；一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。 - 布局流程
1）确定页面的版心（可视区）
2）分析页面中的行模块，以及每个行模块中的列模块
3）制作HTML结构
4）CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块
2）固宽居中布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.top,.banner,.main,.footer{
width: 1200px;
/*水平居中*/
margin: 0 auto 10px;
border: 1px dashed #ccc;
text-align: center;
}
.top{
height: 120px;
background-color: indianred;
}
.banner{
height: 150px;
background-color: greenyellow;
}
.main{
height: 400px;
background-color: purple;
}
.footer{
height: 180px;
background-color: orangered;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
</html>
3）两列左窄右宽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin: 0;
padding: 0;
}
.top,.banner,.main,.footer{
width: 960px;
/*水平居中*/
margin: 0 auto 10px;
border: 1px dashed #ccc;
text-align: center;
background-color: #e8e8e8;
}
.top{
height: 120px;
}
.banner{
height: 150px;
}
.main{
height: 400px;
}
.left{
width: 360px;
height: 400px;
background-color: red;
float: left;
}
.right{
width: 590px;
height: 400px;
background-color: green;
float: right;
}
.footer{
height: 120px;
}
</style>
</head>
<body>
<header class="top">top</header>
<nav class="banner">banner</nav>
<article class="main">
<section class="left">left</section>
<section class="right">right</section>
</article>
<footer class="footer">footer</footer>
</body>
</html>
4）通栏均分型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
ul{list-style: none;}
.top, .banner, .main, .footer{
margin: 0 auto 10px;
border: 1px dashed #cccccc;
text-align: center;
}
.top{
height: 100px;
background-color: red;
}
.banner{
width: 960px;
height: 150px;
background-color: yellowgreen;
}
.main{
width: 960px;
height: 300px;
}
.main ul li{
width: 240px;
height: 300px;
background-color: orangered;
/*浮动*/
float: left;
}
.main ul li:nth-child(even){
background-color: skyblue;
}
.footer{
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
清除浮动
1）为什么要清除浮动?
解答:由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
准确地说，并不是要清除浮动，而是要清除浮动后造成的影响。
2）本质分析
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题； 只要把浮动的盒子圈到里面，让父盒子闭合出口和入口不让它们出来影响其他元素。
3）清除浮动方法
-
额外标签法
方式:通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或其它标签
优点:通俗易懂，书写方便
缺点:添加许多无意义的标签，结构化较差 -
父级添加overflow属性
方式:通过触发BFC的方式，可以实现清除浮动效果 (BFC);可以给父级添加： overflow为 hidden|auto|scroll .
优点:代码简洁
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素 -
使用after伪元素
方式::after 方式为空元素的升级版 :before.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 */优点:不用单独加新标签，符合闭合浮动思想 结构语义化正确
缺点: 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout
注意: content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则在firefox 7.0前的版本会有生成空格。 -
使用before和after双伪元素
方式:<body> <div class="box1 `clearfix`"> <div class="one"></div> <div class="two"></div> </div> <div class="box2"></div> </body> .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }优点:代码更简洁
缺点: 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout
定位
1）定位的使用场景？
轮播图上下图按钮、侧边栏导航等等
2）定位属性:元素的定位属性主要包括定位模式和边偏移两部分
-
边偏移
top:顶端偏移量，定义元素相对于其父元素上边线的距离
left:左侧偏移量，定义元素相对于其父元素左边线的距离
right:右侧偏移量，定义元素相对于其父元素右边线的距离
bottom:底部偏移量，定义元素相对于其父元素下边线的距离 -
定位模式:position属性用于定义元素的定位模式
选择器{position:属性值;}取值:
static 自动定位（默认定位方式）
relative 相对定位，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位
3）定位模式
-
静态定位（static）
网页中所有元素都默认是静态定位，标准流的特性
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置 -
相对定位（relative）
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
注意：相对定位可以通过边偏移移动位置，但是原来的所占的位置，继续占有、每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）。 -
绝对定位（absolute）
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位
两种情况：
① 父级没有定位：若所有父元素都没有定位，以浏览器为准对齐(document文档)
② 父级有定位：依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位
注意：- 可以通过边偏移移动位置，完全脱离标准流，完全不占位置
-
子绝父相
① 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以）
② 因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方
③ 父盒子布局时，需要占有位置，因此父亲只能是 相对定位 - 绝对定位的盒子水平/垂直居中
left:50%; top:50%; margin-left:-50%;自身宽度一半 margin-top:-50%;自身高度一半
-
固定定位（fixed）
特点：当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。
不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
注意：
固定定位的元素跟父亲没有任何关系，只认浏览器
固定定位完全脱标，不占有位置，不随着滚动条滚动
4）叠放次序（z-index）
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。
使用注意：- z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上；
- 如果取值相同，则根据书写顺序，后来居上；
- 后面数字一定不能加单位；
- 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，也不可指定此属性。
叠放次序（z-index）
防止拖拽文本域resize
在textarea中，使用resize:none防止文本拖拽。
resize：none
防止 火狐 谷歌 等浏览器随意的拖动 文本域
文字处理
-
word-break:自动换行
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行，允许单词拆开显示
keep-all 只能在半角空格或连字符处换行
主要处理英文单词 -
white-space:设置或检索对象内文本显示方式；通常用于强制一行显示内容
normal ：默认处理方式
nowrap : 强制在同一行内显示所有文本，直到文本结束或者有br标签对象才换行
可以处理中文 -
text-overflow 文字溢出:设置或检索是否使用一个省略标记（…）标示对象内文本的溢出
clip : 不显示省略标记（…），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（…）
注意：一定要首先强制一行内显示，再次和overflow属性 搭配使用/*强制在一行*/ white-space: nowrap; overflow: hidden; /*超出的部分，用省略号代替*/ text-overflow: ellipsis;
图片对齐
-
vertical-align 垂直对齐
① 方式:vertical-align : baseline |top |middle |bottom
② 注意:vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素
通常用来控制图片/表单与文字的对齐
③ 表现形式- 默认是基线对齐
- 垂直居中
- 顶部对齐
- 默认是基线对齐
-
去除图片底侧空白缝隙
- 存在问题
图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。 - 解决方法
1）垂直方向给img vertical-align:middle | top等等，让图片不要和基线对齐，基于顶线对齐即可
2）垂直方向给img 添加 display：block; 转换为块级元素就不会存在问题了
3）去除水平方向缝隙，让所有图片左浮动
- 存在问题
基本概念
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态，就可以实现平滑的过渡；
一般为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，还是用逗号隔开。
常用属性
-
transition 简写属性，用于在一个属性中设置四个过渡属性
-
transition-property 规定应用过渡的 CSS 属性的名称
-
transition-duration 定义过渡效果花费的时间，默认是 0
-
transition-timing-function规定过渡效果的时间曲线，默认是 “ease”
-
transition-delay 规定过渡效果何时开始，默认是 0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; height: 200px; background-color: blue; /*过渡属性*/ /*transition: width 0.5s ease 0s, height 0.3s ease-in 1s;*/ /*transition: all 0.5s;*/ transition: width 1s, height 2s; } /*鼠标进入盒子*/ div:hover{ width: 600px; height: 600px; } </style> </head> <body> <div></div> </body> </html>
使用注意
- 如果想要所有的属性都变化过渡， 写一个all 就可以
- transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写
基本概念
tansform是CSS3中很有代表性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式
配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的综合效果
一般transform和transition配合使用，transform设置做何运动，transition设置如何运动。
移动 translate(x, y)
可以改变元素的位置，x、y可为负值；
translate(x,y) 水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x) 仅水平方向移动（X轴移动）
translateY(Y) 仅垂直方向移动（Y轴移动）
利用translate实现居中定位：translate是运动自身
section{
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
缩放 scale(x, y)
可以对元素进行水平和垂直方向的缩放
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
注意: scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，可以使一个元素缩小；而任何大于或等于1.01的值，可以使一个元素放大
旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；
transform:rotate(30deg);
注意：单位是 deg 度数
调整元素转换变形的原点 transform-origin
例如:
改变元素原点到左上角，然后进行顺时旋转60度
div{transform-origin: left top; transform: rotate(60deg); }
如果想要精确的位置， 可以用 px 像素
div{transform-origin: 20px 20px; transform: rotate(60deg); }
倾斜 skew(deg, deg)
通过skew方法把元素水平方向上倾斜60度，垂直方向保持不变
transform: skew(60deg, 0deg);
注意:可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0
3D变形（transform）3D坐标系
- 图示
- 左手坐标系
- CSS坐标系
记忆模型
x 左边是负的，右边是正的
y 上面是负的，下面是正的
z 里面是负的， 外面是正的
rotateX() : 沿着 x 立体旋转
rotateY() : 沿着 y 立体旋转
rotateZ() : 沿着 z 立体旋转
透视(perspective)
透视可以将一个2D平面，在转换的过程当中，呈现3D效果
透视原理： 近大远小
浏览器透视：把近大远小的所有图像，透视在屏幕上
perspective:视距，表示视点距离屏幕的长短,一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
text-align: center;
margin: 200px;
/*透视*/
perspective: 500px;
}
img{
transition: all 5s linear;
}
img:active{
/*transform: rotateY(360deg);*/
transform: rotate3d(100, 100, 200, 270deg);
}
</style>
</head>
<body>
<img src="img/mac.png" alt="" width="30%">
</body>
</html>
backface-visibility : 定义当元素不面向屏幕时是否可见
动画
-
概念
动画也是CSS3中经典特性之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 -
语法格式
animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; -
图示
-
定义动画
@keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100% } animation-iteration-count: infinite alternate; 无限循环播放 animation-play-state: paused; 暂停动画 -
案例
① 简单平移<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 100px; height: 100px; background-color: purple; border-radius: 50%; /*animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/ animation: atob 2s ease 0s infinite alternate; } /*定义动画*/ @keyframes atob { from{ transform: translateX(0); } to{ transform: translateX(500px); } } </style> </head> <body> <div></div> </body> </html>② 多组动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: purple; border-radius: 50%; animation: loop 2s infinite alternate; } @keyframes loop { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(600px, 0, 0); } 50% { transform: translate3d(600px, 200px, 0); } 75% { transform: translate3d(0, 200px, 0); } 100% { transform: translate3d(0, 0, 0); } } </style> </head> <body> <div></div> </body> </html>③ 人物旋转
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> img{ animation: like 3s infinite; } @keyframes like { 0%{ transform: translate3d(0, 0, 0); } 50%{ transform: translate3d(800px, 0, 0); } 51%{ transform: translate3d(800px, 0, 0) rotateY(180deg); } 99%{ transform: translate3d(0, 0, 0) rotateY(180deg); } } </style> </head> <body> <img src="img/liao.jpg" width="100" alt=""/> </body> </html>效果:
自动转身,不停走
④ 流动水果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>13-C3实现无缝滚动</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } nav{ width: 900px; height: 100px; border: 1px solid orangered; margin: 100px auto; /*超出隐藏*/ overflow: hidden; } nav ul li{ float: left; width: 100px; height: 100px; } nav ul li img{ width: 100%; height: 100%; } nav ul{ width: 200%; animation: moving 5s linear infinite; } /*自定义动画*/ @keyframes moving { from{ transform: translateX(0); } to{ transform: translateX(-900px); } } nav:hover ul{ /*动画暂停*/ animation-play-state: paused; } </style> </head> <body> <nav> <ul> <li><img src="img/f01.png" alt=""></li> <li><img src="img/f02.png" alt=""></li> <li><img src="img/f03.png" alt=""></li> <li><img src="img/f04.png" alt=""></li> <li><img src="img/f05.png" alt=""></li> <li><img src="img/f06.png" alt=""></li> <li><img src="img/f07.png" alt=""></li> <li><img src="img/f08.png" alt=""></li> <li><img src="img/f09.png" alt=""></li> <li><img src="img/f01.png" alt=""></li> <li><img src="img/f02.png" alt=""></li> <li><img src="img/f03.png" alt=""></li> <li><img src="img/f04.png" alt=""></li> <li><img src="img/f05.png" alt=""></li> <li><img src="img/f06.png" alt=""></li> <li><img src="img/f07.png" alt=""></li> <li><img src="img/f08.png" alt=""></li> <li><img src="img/f09.png" alt=""></li> </ul> </nav> </body> </html>运行效果:
不停移动,鼠标放上去暂停
为什么使用字体图标
- 使用图片存在的问题
① 图片增加了总文件的大小，而且还增加了很多额外的"http请求"
② 图片不能很好的进行“缩放”，因为图片放大和缩小都会失真，不利于做响应式布局 - 字体图标优点
① 本质是文字，可以随意地改变颜色、产生阴影、透明效果等等
② 本身体积更小，但和图片的作用相当
③ 兼容性好，支持所有的浏览器，移动端响应式布局必备
字体图标使用流程
- 让公司美工设计字体图标效果图（SVG格式）
- 通过在线工具生成兼容性字体文件包
- 把字体文件包引入项目中使用
上传生成字体图标
- 网址制作字体图标
- 常用三方字体图标库
① IcoMoon
② 阿里icon font字库
③ Font-Awesome
④ Glyphicon Halflings
使用兼容字体包
- 在项目中放入对应文件夹
将fonts文件夹和css样式文件引入项目
- 在样式里面声明字体
- 使用字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
margin: 100px auto;
}
/*实心圆*/
#perfect-circle{
width: 200px;
height: 200px;
background-color: red;
border-radius: 100%;
}
/*圆环*/
#circle{
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 100%;
border: 3px solid red;
}
/*绘制三角形*/
#slider{
width: 100px;
height: 100px;
background-color: skyblue;
border-top: 30px solid black;
border-right: 30px solid red;
border-bottom: 30px solid green;
border-left: 30px solid blue;
}
#slider1{
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid red;
}
#talk-bubble{
width: 300px;
height: 60px;
background-color: orangered;
border-radius: 10px;
/*子绝父相*/
position: relative;
}
#talk-bubble:before{
content: '';
width: 0;
height: 0;
border-top: 15px solid transparent;
border-right: 30px solid orangered;
border-bottom: 15px solid transparent;
position: absolute;
top: 10px;
right: 99%;
}
#yin-yang{
width: 400px;
height: 200px;
background-color: #fff;
border-color: red;
border-width: 4px 4px 204px 4px;
border-style: solid;
border-radius: 100%;
position: relative;
}
#yin-yang:before{
content: '';
width: 50px;
height: 50px;
background-color: #fff;
border: 75px solid red;
position: absolute;
left: 0;
top: 50%;
border-radius: 50%;
}
#yin-yang:after{
content: '';
width: 50px;
height: 50px;
background-color: red;
border: 75px solid #fff;
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="yin-yang"></div>
</body>
</html>
实心圆
圆环
三角形
对话框
沿着z轴进行旋转
太极
里圆边框是是内容的1.5倍
图示
基本概念
- 给div这类块状元素设置display:flex，或者给span这类内联元素设置display:inline-flex，即开启了flex布局
- 直接设置display:flex或者display:inline-flex的元素称为flex容器，里面的子元素称为flex子项
- 注意
① flex和inline-flex区别在于，inline-flex容器为inline特性，因此图片和文字可以在一行显示
② flex容器保持块状特性，宽度默认100%，不和内联元素一行显示
属性划分
- Flex布局相关属性正好分为两部分，一部分作用在flex容器上，还有一部分作用在flex子项上
- 划分
① 作用在flex容器上：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
② 作用在flex子项上：order、flex-basis、flex、align-self
③ 注意：无论作用在flex容器上，还是作用在flex子项，都是控制的flex子项的呈现，只是前者控制的是整体，后者控制的是个体。
作用在flex容器上的css属性
- flex-direction
① 用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
② 语法： flex-direction: row | row-reverse | column | column-reverse;
③ 使用细节：
row 默认值，显示为行，默认情况下是从左往右
row-reverse 显示为行，但方向和row属性值是反的
column 显示为列
column-reverse 显示为列，但方向和column属性值是反的 - flex-wrap
① flex-wrap用来控制子项整体单行显示还是换行显示，如果换行，则下面一行是否反方向显示
② 语法： flex-wrap: nowrap | wrap | wrap-reverse;
③ 使用细节
nowrap 默认值，表示单行显示，不换行
wrap 宽度不足换行显示
wrap-reverse 宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面
④ 注意：
如果图片默认有设置max-width:100%，而flex子项div没有设置宽度；
此时，flex子项最小宽度是无限小，表现为图片宽度收缩显示。
如果取消max-width:100%样式，则此时flex子项最小宽度就是图片宽度，图片就会溢出到了flex容器之外。 - flex-flow
① flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性
② 语法： flex-flow: <‘flex-direction’> || <‘flex-wrap’>
③ 注意：当多属性同时使用的时候，使用空格分隔 - justify-content
① 决定了主轴方向子项的对齐和分布方式
② 语法： justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
③ 使用细节：
flex-start 默认值，与文档流方向相关，默认表现为左对齐
flex-end 与文档流方向相关，默认表现为右对齐
center 表现为居中对齐
flex-end 与文档流方向相关，默认表现为右对齐
space-between 表现为两端对齐，between是中间的意思，意思是多余的空白间距只在元素中间区域分配
space-around around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly evenly是匀称、平等的意思；也就是视觉上，每个flex子项两侧空白间距完全相等 - align-items
① align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在垂直方向上的对齐方式
② 语法： align-items: stretch | flex-start | flex-end | center;
③ 使用细节：
stretch 默认值，flex子项拉伸。
flex-start 默认表现为容器顶部对齐
flex-end 默认表现为容器底部对齐
center 表现为垂直居中对齐 - align-content
① 语法：align-content可以看成和justify-content是相似且对立的属性，justify-content指明水平方向flex子项的对齐和分布方式，而align-content则是指明垂直方向每一行flex元素的对齐和分布方式
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
② 使用细节：
stretch：默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%
flex-start：逻辑CSS属性值，与文档流方向相关。默认表现为顶部堆砌
flex-end：逻辑CSS属性值，与文档流方向相关。默认表现为底部堆放
center：表现为整体垂直居中对齐
space-between：表现为上下两行两端对齐。剩下每一行元素等分剩余空间
space-around：每一行元素上下都享有独立不重叠的空白空间
space-evenly：每一行元素都完全上下等分
作用在flex子项上的css属性
- order
① 通过设置order改变某一个flex子项的排序位置
② 语法：order: <number>; /* 数值，可以是小数，默认值是 0 */
③ 使用细节：所有flex子项的默认order属性值是0，因此，如果我们想要某一个flex子项在最前面显示，可以设置比0小的整数，如-1就可以了。 - flex-basis
① 定义了在分配剩余空间之前元素的默认大小，相当于提前告知浏览器，要占据这么大的空间，提前预留出来
② 语法： flex-basis: <length> | auto; /* 默认值是 auto */
③ 使用细节：
默认值是auto，就是自动。有设置width则占据空间就是width，没有设置就按内容宽度来。
如果同时设置width和flex-basis，就渲染表现来看，会忽略width
flex布局剩余空间不足的时候默认会收缩 - flex
① flex属性是flex-grow，flex-shrink和flex-basis的缩写
② 语法： flex: none | auto | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
③ 注意：其中第2和第3个参数（flex-shrink和flex-basis）是可选的。默认值为0 1 auto。 - align-self
① align-self指控制单独某一个flex子项的垂直对齐方式
② 语法： align-self: auto | flex-start | flex-end | center | baseline | stretch;
③ 使用细节:唯一区别就是align-self多了个auto（默认值），表示继承自flex容器的align-items属性值。其他属性值含义一模一样
概述
- 三列布局
- 左右两栏固定宽度，中间部分自适应
- 中间部分要在浏览器中优先展示渲染
圣杯布局
- 设置父元素container的位置
- 将主体部分的三个子元素都设置左浮动
- 设置main宽度为width:100%,让其单独占满一行
- 设置left和right 负的外边距
- 使用相对定位移动left和right到对应的位置
双飞翼布局
- 左右两个div浮动，中间的div放在上面
- 通过margin-left调整到一行
- 中间div添加一个子节点，设置margin调整位置
概念
- rem可以在用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的布局、文字、图片、按钮
- rem（font size of the root element）是指相对于根元素的字体大小的单位。
- 一旦根节点html 定义的 font-size 变化，那么整个网页中运用到 rem的也会随之变化。
使用
- 浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px。那么12px=0.75rem,10px=0.625rem。
- 重新计算那些被放大的字体rem数值，避免字体大小的重复声明
- 目前PC端开始普遍使用rem, 移动端基本完全使用
