css字体样式属性 （1）font-size字体大小 （2）font-family字体 常用技巧： a.网页中普遍使用14px; b.尽量使用偶数得数字字号； c.各种字体之间必须使用英文状态下得逗号隔开。 d.中文字体需要加引号，英文字体中除非包含#,$,空格等符号。 e.尽量使用系统默认字体。 （3） font-weight字体粗细：normal,bold,bolder,
一些常用工具 sublime,Dreamweaver
选择器 （1） 类选择器 以class标识：.类名{属性1：属性值；属性2：属性值} （2）多类名选择器 （3）id选择器 #id {} 注：类选择器可以反复重复使用的，但是id不能重复。 （4）通配符选择器 “* {}”匹配页面中所有的元素。 （5）伪类选择器 ：{}用于向某些选择器添加特殊效果。
命名规则： 长名称或词组可以使用中横线来为选择器命名。不建议用下划线。不要用纯数字或中文等命名。
css外观属性
一般网页字体颜色
css样式表 （1）内部样式表 （2）行内式（内联样式） （3）外部样式表（外链式）
HTML标签分为块标签和行内标签，也称为块元素和行内元素
块级元素
行内元素
块级元素和行内元素的区别
行内块元素
显示模式 转换
css复合选择器 （1）交集选择器 （2）并集选择器 （3）后代选择器 后代选择器可以选择儿子，孙子，重孙子等等。 （4）子元素选择器 （5）属性选择器 属性选择器用中括号 （6）伪元素选择器
CSS背景 精确单位，第一个值一定是x坐标，
背景附着
背景简写
背景缩放 常用cover
多背景图片
凹凸文字
背景半透明
王者荣耀 技巧：在一个行内的盒子内，设定行高等于盒子的高度，就可以使文字垂直居中。
<html> <head> <meta charset="UTF-8"/> <title></title> <script></script> <style> body { background:url(wangzherongyao.jpg) no-repeat scroll top left; } div { height:200px; background:rgba(0,0,0,0.7); } a { width:200px; height:50px; display:inline-block;/*把a从行内元素转换为行内块元素*/ text-align:center;/*文字水平居中*/ line-height:50px; font-size:22px; color:#fff; text-decoration:none; /*取消下划线*/ } a:hover { background-color:orange; } </style> </head> <body> <div> <a href="#">专区说明</a> <a href="#">申请资格</a> <a href="#">资历兑换</a> <a href="#">下载游戏</a> </div> </body> </html>CSS三大特性 CSS层叠性 CSS继承性 CSS优先级
CSS层叠性 层叠行是指多种CSS样式的叠加。出现冲突，则就近原则。
继承性 子标签继承父标签的样式。
CSS优先级 注意： （1）权重可以叠加。 （2）继承的权重是0。
答案是蓝色 答案是黄色 27. 盒子模型
盒子边框 表格的细线边框 圆角边框 （1）一个数值表示四个角都是相同的，顺时针。 （2）数值取宽度和高度一半，则会变成一个圆。或者50%也可以变成一个圆。 （3）两个值，则第一个值表示左上角和右下角，第二个值表示右上角和左下角。 （4）内边距 （1）只写一个值，表示上下左右都是 （2）两个值，表示上下第一个值，左右第二个值 (3)三个值，表示 （4）四个值，顺时针。上右下左。新浪导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> nav { height:41px; background-color: #FCFCFC; border-top: 3px solid orange; border-bottom: 1px solid gray; } nav a { font-size: 14px; color: #4c4c4c; text-decoration: none; padding: 0px 15px; height:41px; line-height: 41px;/*行高等于高度可以文字垂直居中*/ display: inline-block;/*链接是行内元素没有大小，所以需要转换成行内块*/ } nav a:hover { background-color: #eee; } </style> </head> <body> <nav> <a href="#">设为首页</a> <a href="#">手机新浪网</a> <a href="#">网站导航</a> <a href="#">三个字</a> </nav </body> </html> 外边距 小细节 一般情况下，背景图片适合做小图标。产品展示就用插入图片清除元素的默认内外边距 尽量不要给行内元素指定上下的内外边距。外边距合并问题 盒子模型的宽度和高度 解释：盒子没有宽度，所以padding不会影响盒子的宽度。同样，如果盒子没有指定宽度，只是继承了父亲的宽度，padding也不会影响盒子的宽度。高度同理。计算盒子模型宽度案列 搜索趣图分析（案例） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>搜索趣图</title> <style> * { padding:0px; margin: 0px; } ul { list-style: none;/*取消列表自带的小点*/ } div { width: 238px; height: 294px; border:1px solid #ccc; border-top: 3px solid #FF8400; margin: 100px; } .searchPic h3 { border-bottom: 1px solid #ccc; padding-left: 12x; height: 35px; font-size: 16px; font-weight: normal; line-height: 35px;/*文字垂直居中*/ } .searchPic img { width: 218px; height: 160px; margin:7px 0 0 8px; } .searchPic ul li a{ font-size: 12px; color:#666; text-decoration: none;/*取消下划线*/ /*margin-left: 10px;*//*这种调格式的方式不好，右边会多出来，用li的padding较好*/ } .searchPic ul li { paddding-left:10px; height: 26px; line-height: 26px; } .searchPic ul { padding-left: 12px; } .searchPic ul li a:hover { text-decoration: underline; color: #FF8400; } </style> </head> <body> <div class="searchPic"> <h3>搜索趣图</h3> <img src="1.jpg" alt=""> <ul> <li><a href="#">量子传输突袭NASA首次用城市网络实现</a></li> <li><a href="#">量子传输突袭NASA首次用城市网络实现</a></li> <li><a href="#">量子传输突袭NASA首次用城市网络实现</a></li> </ul> </div> </body> </html>缺少一个背景图片当作图标
盒子模型布局稳定性 CSS3盒模型 盒子阴影 水晶图片案例（复习盒子阴影） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> div { width: 249px; height: 249px; margin:250px; line-height: 249px; background: url(shuijin.jpg) 0px 0 no-repeat; font-size:26px; text-align: center; color:rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0px 5px 20px 10px rgba(0, 0, 0, 0.8), 5px 4px 10px rgba(255, 255, 255, 0.4) inset; } </style> </head> <body> <div> 水晶 </div> </body> </html> 浮动流 CSS的定位机制有3种：普通流（标准流）、浮动和定位。 普通流（标准流、文档流） 体会浮动 浮动 浮动使用方式（重点） 块级元素添加浮动之后，具有行内块的特性，行内元素添加浮动之后，具有行内块的特性。行内块：可以一行放多个，有宽度和高度，盒子的大小是由内容决定。 版心和布局流程 一列固定宽度且居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一列固定宽度且居中</title> <style> * { padding: 0px; margin: 0px; } .top, .banner, .main, .footer { border: 2px dashed #ccc; text-align: center;/*文字居中对齐*/ line-height: 100px; width:960px; margin:0 auto;/*盒子居中对齐*/ margin-bottom: 5px; } .top { height: 100px; } .banner { height: 40px; } .main { height: 500px; } .footer { height: 180px; } </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> 两列左窄右宽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两列左窄右宽</title> <style> * { padding: 0; margin:0; } .top { border: 2px dashed #ccc; height: 200px; line-height: 200px; width: 960px; text-align: center; margin: 0 auto; margin-bottom: 10px; } .banner { border: 2px dashed #ccc; height: 80px; line-height: 80px; width: 960px; text-align: center; margin: 0 auto; margin-bottom: 10px; } .center { height: 500px; line-height: 500px; width: 960px; text-align: center; margin: 0 auto; margin-bottom: 10px; } .left { border: 2px dashed #ccc; float: left; width: 300px; /*margin-right: 2px;*//*left+right之和小于center2像素，此时会在中间。*/ } .right { border: 2px dashed #ccc; float:right; width: 650px; } .footer { border: 2px dashed #ccc; height: 280px; line-height:280px; width: 960px; text-align: center; margin: 0 auto; margin-bottom: 10px; } </style> </head> <body> <div class="top">top</div> <div class="banner">banner</div> <div class="center"> <div class="left">left</div> <div class="right">right</div> </div> <div class="footer">footer</div> </body> </html> 通栏平均分布型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通栏平均分布型</title> <style> * { padding: 0; margin:0; } .top { border: 2px dashed #ccc; height: 30px; margin:0 auto; text-align: center; line-height: 30px; margin-bottom: 10px; } .banner { border: 2px dashed #ccc; width: 960px; height: 80px; margin:0 auto; text-align: center; line-height: 80px; margin-bottom: 10px; } .center { width: 960px; height: 70px; margin:0 auto; margin-bottom: 10px; background-color: blue; } .center ul { list-style: none; } .center ul li{ border: 2px dashed #ccc; width: 236px; height: 70px; background-color: red; float: left; } .main { width: 960px; height: 150px; margin:0 auto; margin-bottom: 10px; background-color:yellow; } .footer { border: 2px dashed #ccc; height: 120px; margin:0 auto; text-align: center; line-height: 120px; } </style> </head> <body> <div class="top">top</div> <div class="banner">banner</div> <div class="center"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div class="main"> </div> <div class="footer">footer</div> </body> </html>清除浮动的本质 即清除浮动的影响。
清除浮动法 （1）额外标签法 （2）父级添加overflow属性方法 （3）使用after伪元素清除浮动 （4）使用before和after双伪元素清除浮动
ps基本使用
学成网案例 版心测量：用矩形工具或者标尺工具
定位
静态定位 一般用来清除定位的。一个原来有定位的盒子 ，不想加定位，就可以写这句话。
相对定位 绝对定位完全脱标，完全不占位置。 若父亲没有定位，孩子以浏览器为基准点对齐。 若父亲有定位，则以父元素为基准。position:relative absolute
加了绝对定位的盒子，margin左右auto就无效了。
权重 这个样式被层叠了。由于之前学习的权重问题。解决方式是改变一下选择器，优先级问题。
固定定位 固定定位的盒子一定要写宽度和高度，除非有内容撑开不用写。
叠放次序
定位总结
固定绝对定位模式转换 应用
元素的显示与隐藏
overflow溢出
CSS高级技巧
垂直对齐 不能用于块级元素 图片和文字默认基线对齐 图片、表单和文字对齐都用vertical-align
去除图片底侧空白缝隙 将其转化为块级元素
溢出的文字隐藏
CSS精灵技术 为了避免请求多张图，多服务器发起多次请求，就将所有背景图都放在一张图上，只要移动精灵图的位置，就可以得到想要显示的背景图。
制作精灵图
字体图标的优点
下载兼容字体包
使用下载的字体包
滑动门 为了在各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常用于各种导航栏的滑动门。
微信导航栏
伪元素的本质
鼠标经过显示边框
过滤
2D变形 谁做动画就给谁加过度效果
让盒子完美居中对齐的方式 原有方法，改为绝对定位，left以父级宽度为准，走50%，再margin-left走自己宽度的一半 现有方法
2D变形-缩放
2D变形-旋转
2D-倾斜
3D变形
左手法则
透视 translateZ是物体到屏幕的距离，这个值越大，我们看到物体越近，物体越大。 perspective仅仅是为了让物体有立体效果，但是立体效果展示时物体到底多大，是通过translateZ来展示的
translate3D
开门大吉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>开关门</title> <style> * { margin: 0; padding: 0; } section { width: 1920px; height: 1080px; margin: 200px auto; background: url(yangyuhuan.jpg) no-repeat; position: relative; perspective: 1000px; } .door-l, .door-r { height: 100%; width: 50%; position: absolute; background-color: #7f5233; border: 1px solid #000; transition: all 5s; } .door-l { left: 0; transform-origin: left; } .door-r { right: 0; transform-origin: right; } .door-l::before, .door-r::before { content: ""; position: absolute; top: 50%; width: 50px; height: 50px; border: 1px solid #000; border-radius: 50%; transform: translateY(-50%); } .door-l::before { right: 20px; } .door-r::before { left: 20px; } section:hover .door-l { transform: rotateY(-120deg); } section:hover .door-r { transform: rotateY(120deg); } </style> </head> <body> <section> <div class="door-l"></div> <div class="door-r"></div> </section> </body> </html>翻转的图片
体会动画
多组动画
汽车动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多组动画</title> <style> img { width: 358px; height: 173px; animation: go 6s infinite; } @keyframes go { 0% { transform: translateX(0); } 50% { transform: translateX(1200px); } 51% { transform: translateX(1200px) rotateY(180deg); } 100% { transform: translateX(0) rotateY(180deg); } } </style> </head> <body> <div> <img src="xiaoqiche.png" alt=""> </div> </body> </html> 无缝滚动案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> * { padding:0px; margin: 0px; } nav li img{ width: 200px; float: left; } nav { margin: 200px auto; border: 2px solid red; width: 1200px; overflow: hidden; } nav ul { list-style: none; width: 200%; animation: moveing 3s linear infinite; } @keyframes moveing { from { transform:translateX(0); } to { transform: translateX(-1200px); } } nav:hover ul { animation-play-state:paused; } </style> </head> <body> <nav> <ul> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> <li><img src="4.jpg" alt=""></li> <li><img src="5.jpg" alt=""></li> <li><img src="6.jpg" alt=""></li> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> <li><img src="4.jpg" alt=""></li> <li><img src="5.jpg" alt=""></li> <li><img src="6.jpg" alt=""></li> </ul> </nav> </body> </html> 伸缩布局 传统布局三等份，可以随着屏幕变化 这种会出现问题，不能给section加margin，否则盒子会掉下来。 伸缩布局三等分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伸缩布局三等份</title> <style> section { width: 1200px; height: 400px; border:2px solid red; display: flex; margin: 100px auto; } section div { height: 100%; float: left; } section div:nth-child(1) { background-color: pink; flex: 1; } section div:nth-child(2) { background-color: purple; margin: 0 5px; flex: 2; } section div:nth-child(3) { background-color: pink; flex: 1; } </style> </head> <body> <section> <div>1</div> <div>2</div> <div>3</div> </section> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伸缩布局三等份</title> <style> section { width: 1200px; height: 400px; border:2px solid red; display: flex; margin: 100px auto; min-width: 500px;/*规/*定最小缩放宽度到达500px以后就不会再进行缩放。*/ flex-direction: row;规定排列的方向*/ } section div { height: 100%; float: left; } section div:nth-child(1) { background-color: pink; flex: 1; } section div:nth-child(2) { background-color: purple; margin: 0 5px; flex: 2; } section div:nth-child(3) { background-color: pink; flex: 1; } </style> </head> <body> <section> <div>1</div> <div>2</div> <div>3</div> </section> </body> </html> 携程网案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>携程网案例</title> <style> * { padding:0px; margin: 0px; } ul { list-style: none; } body { min-width: 320px; max-width: 540px; margin: 0 auto; } header { width: 100%; } header img { width: 100%; } nav { padding:5px; } .row { height: 90px; width: 100%; background-color: #ff697a; border-radius: 10px; display: flex; margin-bottom: 5px; } nav .row:nth-child(2){ background-color: #3d98ff; } nav .row:nth-child(3){ background-color: #44c522; } nav .row:nth-child(4){ background-color: #fc9720; } .row3 { /*float: left;*/ height: 100%; flex: 1; border-left:1px solid #fff; } .row div:first-child { border:0; } .hotel { display: flex; flex-direction: column; } .hotel a { /*width: 100%;*/ flex: 1; text-align: center; text-decoration: none; color: #fff; text-shadow: 0 2px 1px rgba(0, 0, 0, 0.3) } .hotel a:first-child { border-bottom: 1px solid #fff; } </style> </head> <body> <div> <header> <img src="guanggaotiao.gif" alt=""> </header> <nav> <div class="row"> <div class="row3">1</div> <div class="row3 hotel"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="row3 hotel"> <a href="#">团购</a> <a href="#">同福客栈</a> </div> </div> <div class="row"> <div class="row3">1</div> <div class="row3 hotel"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="row3 hotel"> <a href="#">团购</a> <a href="#">同福客栈</a> </div> </div> <div class="row"> <div class="row3">1</div> <div class="row3 hotel"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="row3 hotel"> <a href="#">团购</a> <a href="#">同福客栈</a> </div> </div> <div class="row"> <div class="row3 hotel"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="row3 hotel"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="row3 hotel"> <a href="#">团购</a> <a href="#">同福客栈</a> </div> </div> </nav> </div> </body> </html>
justify-content调整主轴对齐（水平对齐）
align-items属性（垂直对齐）
flex-wrap控制是否换行
align-content属性（多行垂直对齐方式）
flex-flow属性
order属性（用CSS来控制盒子的先后顺序） 数值越小越往前。可以是负数
