调试a标签hover属性-开发者工具
css案例---
1.金立手机官网源码地址：
一、Media Query响应式布局—媒体查询
CSS中的Media Query（媒介查询）是什么？
在CSS3，媒体查询可以针对不同的屏幕尺寸设置不同的样式
媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width
Media Queries功能是非常强大的，他可以让你定制不同的分辨率和设备，并在不改变内容的情况下，让你制作的web页面在不同的分辨率和设备下都能显示正常，并且不会因此而丢失样式
@media mediatype and|not|only (media feature) { CSS-Code; } 以上通过@media定义媒体查询，mediatype代表了设备类型，目前只有screen最常用，and|not|only为条件，media feature为媒体特点，通常是写设备的宽度。
@media screen and (max-width:960px) 的意思为：当前设备为screen（电脑、平板、手机）时，并且最大宽度为960时，显示的样式。 媒体类型有： all 所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，智能手机等 speech 应用于屏幕阅读器等发声设备
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>媒体查询</title>
<style>
/*pc端 宽度大于 992px 的时候被应用*/
@media screen and (min-width: 992px){
body{
background-color: red;
}
}
/*移动端 宽度小于768px的时候被应用*/
@media screen and (max-width: 768px){
body{
background-color: blue;
}
}
/*ipad端 宽度在 768px 和 992px 之间的时候被应用*/
@media screen and (max-width: 992px) and (min-width: 768px){
body{
background-color: orange;
}
}
</style>
</head>
<body>
</body>
</html>
用媒体查询改造我们的设计：
我们都知道，样式表里面，后面的样式会覆盖前面的样式。因此，我们可以在设置好网站基本样式后，使用媒体查询来进一步重写相应的部分。
例如，在PC端将导航显示成简单的链接，然后再针对小视口，使用媒体查询重写这一部分。理论上讲最好是从小屏幕设备开始设计，然后渐进增强。
但实际上我们使用媒体查询要解决的问题，都是已经存在PC端站点了，更多的是要将现有的桌面版网页改造成响应式的。
加载媒体查询的最佳方法：
使用多个独立的CSS文件会增加HTTP请求的数量，使页面加载变慢。所以我们的媒体查询样式的文件尽量放在一个里面，以注释加以区分。
阻止移动浏览器自动调整页面大小
ios和android浏览器都基于webkit内核，这两种浏览器和许多其它浏览器都支持用viewport meta元素覆盖默认的画布缩放设置。只需要在HTML的<head>标签中插入一个<meta>标签，meta标签中可以设置具体的宽度或缩放比。
下面为示例
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
name=”viewport” 说明此meta标签定义视口的属性 initial-scale=2.0 意思是将页面放大两倍 width=device-width 告诉浏览器页面的宽度等于设备宽度
允许用户将页面最大放大至设备宽度3倍，最小压缩至设备宽度的一半
<meta name=”viewport” content=”width=device-width, maximum-scale=3, minimum-scale=0.5” />
禁止用户缩放，可以在混合APP时，为了使html页面更逼真，使页面无法缩放
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” /> //user-scalable=no是禁止缩放
二、多列
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。它的显示如同word中的多列。但在CSS3多列出现前，想要多列显示，要么使用定位，要么手动给文本分段落。 多列有这么几个常用属性 column-count 分几列 column-gap 列间距 column-rule 列分割线的样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>多列</title>
<style>
.box{
width: 500px;
height: 300px;
border: 1px solid red;
column-count: 3;
column-gap: 30px;
column-rule: 2px solid red;
}
</style>
</head>
<body>
<div class="box">
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。它的显示如同word中的多列。但在CSS3多列出现前，想要多列显示，要么使用定位，要么手动给文本分段落。
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。它的显示如同word中的多列。但在CSS3多列出现前，想要多列显示，要么使用定位，要么手动给文本分段落。
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。它的显示如同word中的多列。但在CSS3多列出现前，想要多列显示，要么使用定位，要么手动给文本分段落。
</div>
</body>
</html>
圆角
圆角border-radius 语法
border-radius：value；四个角
border-radius：value value；左上右下、右上左下
border-radius：value value value value； 代表设置对象左上角、右上角、右下角、左下角 顺时针设置
圆环效果
1.设置了边线宽度，需要实现圆形效果，圆角宽度=自身宽度/2 + 边线宽度=50+10=60px
div{
width: 100px;
height: 100px;
background-color: red;
border: 10px solid #ccc;
border-radius: 60px;
}
椭圆效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>圆角</title>
<style>
/* div{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
border: 10px solid #ccc;
border-radius: 60px;
}*/
div{
width: 200px;
height: 100px;
background-color: red;
border-radius: 50%;
/*border: 3px solid #ccc;*/
/*border-radius: 20px 30px 40px 50px ;*/
}
/*.test1{
width: 200px;
height: 150px;
background-color: blue;
border-radius: 30px;
}
.circle{
width: 60px;
height: 60px;
background-color: red;
border-radius: 30px;
}*/
</style>
</head>
<body>
<!--
border-radius 设置值：px % em
-->
<div></div>
<!--<div class="test1">
<div class="circle"></div>
</div>-->
</body>
</html>
阴影
盒阴影box-shadow 语法：box-shadow: h-shadow v-shadow blur spread color inset;
盒阴影 HTML文档 CSS样式
<div class="shadow"></div>
.shadow{
width: 300px;
height: 100px;
background-color: red;
box-shadow: 10px 10px 5px 3px darkred;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>阴影</title>
<style>
div{
margin: 100px auto;
width: 100px;
height: 100px;
border: 2px solid green;
box-shadow: -2px 0 10px #ccc,
0px -2px 10px #ccc,
2px 0px 10px #ccc,
0px 2px 10px #ccc;
/!* box-shadow: -10px 0 10px red, /!*左边阴影*!/
0px -10px 10px #000,/!*上边阴影*!/
10px 0px 10px green,/!*右边阴影*!/
0px 10px 10px blue;/!* 下边阴影*!/!*!/
}
/* .text1{
font-size: 50px;
font-weight: bold;
color: palegreen;
text-shadow: 10px -5px 5px pink;
}*/
</style>
</head>
<body>
<div></div>
<!--<div class="text1">
北京尚学堂
</div>-->
</body>
</html>
文字阴影 语法：text-shadow: h-shadow v-shadow blur color;
CSS3 渐变（Gradients）
CSS3 定义了两种类型的渐变（gradients）：
1.线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color-stop1, color-stop2, ...);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>线性渐变</title>
<style>
.grad{
height: 200px;
background: -webkit-repeating-linear-gradient(red,yellow 10%,green 20%);
background: -o-repeating-linear-gradient(red,yellow 10%,green 20%);
background: -moz-repeating-linear-gradient(red,yellow 10%,green 20%);
background: repeating-linear-gradient(red,yellow 10%,green 20%);/*标准语法*/
}ll
</style>
</head>
<body>
<!--
线性渐变
语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
1.默认时从上往下渐变
.grad{
height: 200px;
background: -webkit-linear-gradient(red,blue);
background: -o-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue);
background: linear-gradient(red,blue);/*标准语法*/
}
2.自定义渐变方向
.grad{
height: 200px;
background: -webkit-linear-gradient(left,red,blue);
background: -o-linear-gradient(to right,red,blue);
background: -moz-linear-gradient(to right,red,blue);
background: linear-gradient(to right,red,blue);/*标准语法*/
}
.grad{
height: 200px;
background: -webkit-linear-gradient(left top,red,blue);
background: -o-linear-gradient(to right bottom,red,blue);
background: -moz-linear-gradient(to right bottom,red,blue);
background: linear-gradient(to right bottom,red,blue);/*标准语法*/
}
.grad{
height: 200px;
background: -webkit-linear-gradient(-90deg,red,blue);
background: -o-linear-gradient(-90deg,red,blue);
background: -moz-linear-gradient(-90deg,red,blue);
background: linear-gradient(-90deg,red,blue);/*标准语法*/
}
3.重复渐变
.grad{
height: 200px;
background: -webkit-repeating-linear-gradient(red,yellow 10%,green 20%);
background: -o-repeating-linear-gradient(red,yellow 10%,green 20%);
background: -moz-repeating-linear-gradient(red,yellow 10%,green 20%);
background: repeating-linear-gradient(red,yellow 10%,green 20%);/*标准语法*/
}
-->
<div class="grad"></div>
</body>
</html>
2.径向渐变（Radial Gradients）- 由它们的中心定义
background: radial-gradient(center, shape， size, start-color, ..., last-color); 默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形） 它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>径向渐变</title>
<style>
.grad{
width: 200px;
height: 200px;
background: -webkit-radial-gradient( farthest-side ellipse at 30px 50px ,red,blue);
background: -o-radial-gradient( farthest-side ellipse at 30px 50px ,red,blue);
background: -moz-radial-gradient( farthest-side ellipse at 30px 50px ,red,blue);
background:radial-gradient( farthest-side circle at 30px 50px ,red,blue);/*标准语法*/
}
</style>
</head>
<body>
<!--
background: radial-gradient(center, shape， size, start-color, ..., last-color);
需要设置的参数：
1.颜色（可以设置多个）
2.中心(at center center)
语法(at x y) 都是从左上角原点为参考
x,y可以时像素(at 30px 50px )
可以时百分比(at 10% 30%)
也可以是top left right center bottom(at left bottom)
3.大小
closest-side(最近边)
farthest-side(最远边)
closest-corner(最近角)
farthest-corner（最远角，默认值）
4.shape形状
ellipse(椭圆，默认值)
circle(圆)
-->
<div class="grad"></div>
</body>
</html>
转换Transform（2D转换）
CSS3中的转换允许我们对元素进行旋转、缩放、移动或倾斜。它为分2D转换 或 3D 转换。 在css2时代，如果要做一些图片转换角度，都依赖于图片、Flash或JavaScript才能完成。但是现在借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。通过CSS变形，可以让元素生成静态视觉效果，但也可以很容易结合CSS3的transition和动画的keyframe产生一些动画效果。
二、转换Transform 2D的属性 通常的属性包含了属性名和属性值，而CSS3的transform属性是用函数来定义的。Transform 2D函数包括了translate()、scale()、rotate()和skew()。 书写格式: transform:函数名(x轴值，y轴值); 转换的效果：
1.translate()函数 translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。接受CSS的标准度量单位（px） translate(x,y)：转换，沿着X和Y轴移动元素。
2.rotate() 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。它以deg为单位，代表了旋转的角度。
3.scale() 通过值把宽和高转换为原始尺寸的n倍，接受两个参数，前面的为宽，后面的为高。 可取值： 默认值为1 缩小：0-1之间的数 放大：大于1的数
4.skew() 根据水平轴和垂直轴翻转，接受两个或一个值，两个值时前面为水平，后面为垂直的角度 ，一个值只是水平轴的角度。此函数是指元素的倾斜角度。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Transform 2D</title>
<style>
.box{
width: 200px;
height: 200px;
background: red;
margin: 100px;
}
.box:hover{
/*transform: translate(5px,-5px);*/
box-shadow: 10px 10px 5px #ddd;
/*transform:translate(50px,-5px) rotate(-45deg) scale(0.5,1.2) ;*/
/*transform:scale(0.5,1.2);*/
transform:skew(30deg,0deg) ;
}
</style>
</head>
<body>
<!--
属性值
1.translate()函数 移动
2.rotate() 旋转
3.scale() 缩放
4.skew() 傾斜
-->
<div class="box">尚学堂</div>
</body>
</html>
三、转换Transform 3D的属性
Transform 3D常用函数有：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Transform 3D</title>
<style>
/* .parent{
width: 200px;
height: 200px;
background: pink;
margin: 100px auto;
perspective: 400px;
}
.son{
width: 100%;
height: 100%;
background: blue;
transform: translatez(-100px);
transition: all 3s;
}
.son:hover{
transform: translate3d(100px,0,100px);
}*/
/* div{
width: 200px;
height: 200px;
background-color: blue;
}
.perspective{
background-color: pink;
transform: perspective(400px) translatez(-100px);
}
.scaled{
background-color: orange;
transform: perspective(400px) scale3d(0.8,0.8,0.8) translatez(-100px) ;
}*/
body{
perspective:400px;
}
img{
margin: 100px;
transition: all 3s;
}
img:hover{
transform: rotatex(180deg);
}
</style>
</head>
<body>
<img src="images/dangang.jpg" width="300px" alt=""/>
<!-- <div>原来尺寸</div>
<div class="perspective">perspective</div>
<div class="scaled">scaled</div>-->
<!--
perspective 透视（呈现3d效果）
<div class="parent">
<div class="son"></div>
</div>
-->
</body>
</html>
四、过度Transition
1.什么是过渡 使用css的属性值在一段时间内平滑的过渡 比如，鼠标悬停后，背景色在1s内，由白色平滑的过渡到红色
1）指定四个要素：
过渡属性，如background、color等
过渡所需时间
过渡函数，即过渡的速度、方式等
过渡延迟时间，表示开始执行的时间
2）触发过渡
通过用户的行为触发，如点击、悬浮等
1.过渡属性 transition-property: none|all|property; 多个属性用逗号隔开 可设置过渡的属性 颜色属性 取值为数值的属性 转换属性 渐变属性 阴影属性
2.过渡时间 transition-duration: s|ms; 默认值为0，意味着不会有效果，所以必须设置transition-duration属性
3.过渡函数 transition-timing-function: ; 取值： ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果 linear：匀速 ease-in：规定以慢速开始，加速效果 ease-out：规定以慢速结束，减速效果 ease-in-out：规定以慢速开始和结束，先加速后减速效果
4.过渡延迟 transition-delay: s|ms; 改变元素属性值后多长时间开始执行过渡效果
5.简写属性transition transition属性是一个简写属性，用于设置四个过渡属性
语法：transition:property duration timing-function delay;
设置背景颜色
#box{
width: 200px;
height: 200px;
background-color: #1fb57b;
transition: background 4s linear 1s;
}
#box:hover{
background-color: red;
}
。。。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
margin: 50px;
/*transition:transform 1s, box-shadow 1s,width 1s,background-color 1s ;*/
/*transition: all 1s linear 1s;*/
transition-property: all;
transition-duration: 1s;
transition-timing-function:linear;
transition-delay:1s;
}
.box:hover{
transform: translate(0,-10px);
box-shadow: 0 15px 30px rgba(0,0,0,.3);
width: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
过渡练习
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>过度练习</title>
<style>
.box{
width: 290px;
height: 390px;
background-color: pink;
}
.box_img{
width: 100%;
position: relative;
}
.box_img>img{
width: 120px;
height: 240px;
position: absolute;
left: 85px;
top:25px;
transition: all 1s;
}
.box_img:hover>.left{
left:55px ;
}
.box_img:hover>.right{
left:115px ;
}
</style>
</head>
<body>
<div class="box">
<div class="box_img">
<img src="images/28_1514451629703.png" alt="" class="left"/>
<img src="images/28_1514451679603.png" alt="" class="right"/>
</div>
</div>
</body>
</html>
五、animation动画
过渡属性只能模拟动画效果 animation属性可以制作类似Flash动画 通过关键帧控制动画的每一步 使元素从一种样式逐渐变化为另一种样式 实现复杂的动画效果
1.@keyframes 作用：用于声明动画，指定关键帧 帧，用于分解动画动作 每个帧代表某个时间点 定义每个帧上的动作
@keyframes的语法 @keyframes name { from|0%{ css样式 } percent{ css样式 } to|100%{ css样式 } }
@-webkit-keyframes name @-moz-keyframes name @-o-keyframes
2.animation属性 animation属性用于控制动画 调用由@keyframes定义的动画 设置动画属性，如时间、次数等 animation属性是一个简写属性 语法为：
animation:name duration timing-function delay iteration-count direction;
-webkit-animation:pictrue 10s ease-in 1s 3 alternate forwards;
@-webkit-keyframes pictrue{
}3.动画子属性
animation-name: ; 调用动画，规定需要和keyframes的名字一致
animation-duration: s|ms; 动画完成一个周期所需要的时间
animation-timing-function: ; 规定动画的速度变化类型
animation-delay:s|ms ; 播放之前的延迟时间
动画子属性 animation-iteration-count: 数值|infinite; 播放次数 infinite表示无限次播放
animation-direction: normal|alternate; 动画播放方向 normal为默认值，表示正常播放 alternate表示（往返）轮流播放，即动画会在奇数次正常播放，而在偶数次倒序播放 例如第一次，帧数从1-2-3-4-5 第二次5-4-3-2-1 播放
animation-fill-mode: forwards; 动画停在最后一帧 默认值为none
animation-play-state:paused|running; 属性规定动画正在运行还是暂停 默认值为running
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动画</title>
<style>
.box{
width: 100%;
height: 400px;
background-image: url("images/1.jpg");
background-size: 100%;
/*2.调用动画*/
/*-webkit-animation:pictrue 10s ;*/
}
.box:hover{
-webkit-animation:pictrue 10s ease-in 1s 3 alternate forwards;
}
/*1.定义动画*/
@-webkit-keyframes pictrue{
0%{
background-image: url("images/1.jpg");
}
25%{
background-image: url("images/2.jpg");
} 50%{
background-image: url("images/3.jpg");
} 75%{
background-image: url("images/4.jpg");
}
100%{
background-image: url("images/5.jpg");
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> 
六、绘制简单特殊图形（三角形、梯形、圆形）
（1）以CSS绘制三角形 1.首先需要有个元素作为三角的容器 2.制作三角型使用的是border属性，内容区宽高值为0
<div></div>
div{
width:0;
height: 0;
border-top:50px solid red;
border-left:50px solid blue;
border-right:50px solid orange;
border-bottom:50px solid green;
}（2）以CSS绘制梯形 绘制三角型时宽和高都是0像素，给它加10的宽度看看效果。这样 是不是我们只取下面的红色的区域就构成了一个梯形？ 这个红色区域实际上是底部的边border-bottom，所以梯形的高度是 底部边的宽度，梯形也是借助border属性完成的。 div { border-bottom: 80px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>绘制图形</title>
<style>
.box{
width: 10px;
height: 10px;
border-top: 20px solid red;
border-left: 20px solid gray;
border-right: 20px solid gray;
border-bottom: 20px solid blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Firefox火狐浏览器-下载网页图片资源
<meta>
提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。
比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
Keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么。
<meta name="keywords" content="web前端,尚学堂培训"> description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。
<meta name="description" content="北京尚学堂,web前端培训">
author作者 标注网页的作者 <meta name="author" content="root,root@xxxx.com"><img>
1.使用<img>元素将图像添加到页面
2.空标记
3.必须属性：src（存储图像的位置）
4.常用属性：width，height，alt，title <img src="URL" width="300" alt=”替换文本属性”/>
title定义了鼠标经过图片时显示的内容，搜索引擎抓取图片时，是根据title定义的内容来分析图片是什么的
alt当图片未能正常显示时，用于给用户的提示信息
加载图片base64--节省空间
1.图片在线转换成base64
2.使用：
background-image: url(data:image/jpeg;base64,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qt77cebt+8c7c8ZwPv8A/wCG5/8Ah5P/AMY4/wDCE/8ACuv+E0/5mX+1f7U+x/ZP9P8A+PbyYfM3/ZPL/wBYu3fu527T8q/8FR/+T7Pib/3DP/TXaV+v/wALv2C/gV8F/HWmeMvBvgc6N4k03zfst7/a9/P5fmRPE/ySzshykjjlTjORggGgDkv2Gf2GR+xf/wAJt/xW3/CY/wDCS/Yv+YT9h+z/AGf7R/02l37vP9sbe+ePK/2ov+CUv/DSfx18TfEf/haP/COf219l/wCJb/wj/wBq8nybWKD/AFv2pN2fK3fdGN2OcZJ/wVa/ai+J37NX/Crh8OPE3/CODWv7U+3/AOgWt153k/ZPK/18T7cebJ93Gd3OcDHwB/w9G/ad/wCimf8AlA0v/wCRqAP3/ooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD//Z);
背景颜色-background
background-color 颜色的取值：
1.关键字：red
2.十六进制：#f00 #0f0 #00f
3.rgb(0,0,0) 参数取值范围：0-255
4.rgba(0,0,0,.5) 最后一个参数的取值范围 0-1 0代表完全透明 0.5半透明 1 不透明
background-image 加载的图片默认在水平垂直方向式平铺的
background-size:contain//宽高适应
<title>背景颜色</title>
<style>
div{
width: 500px;
height: 500px;
background-color:rgb(255,102,255,1);
background-image: url("images/wangfeng.jpg");
background-repeat: no-repeat;
background-size:contain;
}
</style>背景图片位置background-position 定位
1.方位名称 left top right center bottom
2.精确数字
3.混搭
<style>
div{
width: 500px;
height: 500px;
background-color:rgba(255,0,0,0.5);
background-image: url("images/wangfeng.jpg");
background-repeat: no-repeat;
background-position:center center ;/*第一个参数代表水平位置 第二个参数代表垂直位置*/
/*background-position: top; 第二个参数默认是center */
/* background-position: 30px 10px; 第一个参数是水平方向 第二个参数是垂直位置*/
/* background-position: 50px center;*/
}
</style>
background-attachment： 背景图片是否随内容滚动
background-attachment: fixed;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景附着</title>
<style>
body{
background-image: url("images/timg.jpg");
background-attachment: fixed;
}
p{
color: white;
font-size: 50px;
}
</style>
</head>
<body>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
<p>背景图片是否回随着其余内容的滚动而移动 </p>
</body>
</html>
字体颜色透明度和文字溢出
6.letter-spacing:;设置字的间距 如：div{letter-spacing:2px;}
7.opacity 设置颜色的透明度，整个元素都会透明 默认值1，取值为0-1 1为不透明，0为完全透明 示例 p{ opacity: 0;} 隐藏一个元素 ，完全不显示，但是会占空间，只是看不到。 p{ opacity: 1;} 显示一个元素 它和rgba中的”a”作用一样
8.overflow: hidden|auto|scroll;当内容溢出元素框时隐藏|自动|显示滚动条
9.text-overflow：让溢出的文字以省略号显示 p{ height: 20px; width:100px; background:#ddd;
white-space: nowrap; //让文字在同一行显示，不换行
overflow: hidden; //溢出部分隐藏
text-overflow: ellipsis; //文字溢出部分省略号显示，另外一个值为clip } <p>这段文字多余的部分会显示为省略号</p>
<style>
div{
width: 300px;
height: 300px;
background-color:green;
color: red;
opacity: 1;
overflow: scroll;
}
p{ height: 20px; width:100px; background:#ddd;
white-space: nowrap; /* //让文字在同一行显示，不换行*/
overflow: hidden; /* //溢出部分隐藏*/
text-overflow: ellipsis;/* //文字溢出部分省略号显示，另外一个值为clip*/
}
</style>
</head>
<body>
<p>这段文字多余的部分会显示为省略号</p>
文本属性
1.text-align 内容对齐方式，它是针对于元素的内容 属性值 left |center |right p{text-align: center;} p是块元素，left、right和center会作用于整个行
2.text-decoration 指定文字有无装饰，默认值为none 属性值： underline 指定文字的装饰是下划线 overline 指定文字的装饰是上划线 line-through 指定文字的装饰是贯穿线，类似于删除标签的效果
3.text-transform 设置对象中的文本的大小写 默认值none 无转换 属性值 capitalize 将每个单词的第一个字母转换成大写 p{ text-transform: capitalize; } <p>this is paragraph</p> uppercase 全部转换成大写 p{ text-transform: uppercase; } lowercase 转换成小写 p{ text-transform: lowercase; } <p>THIS IS PARAGRAPH</p>
4.text-indent文本缩进 文本缩进属性是用来指定文本的第一行的缩进。 如：p {text-indent:2em;} 1em和当前字体大小相等。在浏览器中默认的文字大小是16px。 因此，1em的默认大小是16px。
5.word-wrap 设置当前行超过指定容器的边界时是否换行 首先我们要知道一种情况：如果你容器中的单词过长，超出了容器本身的宽度，会造成“长单词溢出”
word-wrap: break-word;可设置过长的文本自动换行
5.vertical-align 设置对象内容的垂直对其方式。 是容器中元素相对于内容的显示
6.line-height 设置对象的行高（不允许使用负值）
我们一般用行高来使一行文字垂直居中，当行高等于高时，一行文字垂直居中
行高设置文字居中
p{
height: 80px;
font-size: 20px;
background-color: red;
line-height:4 ;
}
<p> 2006年2月16日 中国北京北京尚学堂科技有限公司成立</p> 
四、列表属性
1.list-style-image 设置列表项标记的图像(项目符号) 只有一个属性url，引导一个图片 ul{ list-style-image: url("images/icon.png");} 示例 用list-style-image重置项目符号示例 .test{list-style-image:url(skin/ico.png);} //整体重置作用于ul，单个设置用于li上 <ul class="test"> <li>列表项一</li> <li>列表项一</li> <li>列表项一</li> <li>列表项一</li> </ul>
2.list-style-position 设置列表项标记如何根据文本排列 这个属性有两个值outside和inside outside项目符号放在文本以外（默认） ul li{ list-style-position:outside; width:100px; border:1px solid red;} inside项目符号放在文本以内 ul li{ list-style-position:inside; width:100px; border:1px solid red;}
3.list-style-type 设置列表项所使用的预设标记 可选值 none不使用项目符号 disc实心圆（相当于html属性type=”disc”） circle空心圆 square实心方块 示例 ul{ list-style-type:circle;}
4.list-style 复合属性 写法 list-style：list-style-image list-style-position list-style-type 把之前几个属性值 写在一个list-style中 示例 ul{ list-style: url("images/icon.png") outside disc;} 前面设置了图片，最后再设置项目符号的目的是，如果图片未能正常显示，可以有符号来代替
duihao.png图片
li{
/* list-style-position: inside;*/
width: 100px;
border:1px solid red ;
list-style:outside url("images/duihao.png") disc ;
}
<ul class="test" >
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
选择器
一、关系选择器
1.后代选择器 (E F)
选择所有被E元素包含的F元素，中间用空格隔开
ul li{ color:red; } <ul> <li>苹果</li> <li>橙子</li> <li>西瓜</li> </ul>
2.子代选择器 (E > F)
选择所有作为E元素的直接子元素F，对孙子元素不起作用，用大于号表示 div>a{ color:red;} //div下的一级子元素a <div> <a href="#">这是子元素</a> <p><a href="#">这是孙子元素</a></p> </div>
3.相邻兄弟选择器 (E+F)
选择紧贴在E元素之后F元素，用加号表示，选择相邻的第一个兄弟元素。 p+span{ color:red;} //只会选中第一个span <p>这是p元素</p>
<span>这是紧挨着p元素的第一个span</span>
<span>这是第二个span</span>
4.通用兄弟选择器 (E~F)
选择E元素之后的所有兄弟元素F，作用于多个元素，用~号隔开。 p~span{ color:red;} //和p之后平级的span元素都被选中了，有几个选中几个
<span>这span在p元素之前不会被选中</span>
<p>这是p元素</p> <span>这是紧挨着p元素的第一个span</span> <span>这是第二个span</span> <span>这是第三个span，它和p是兄弟关系</span>
二、CSS属性选择器：
通过html的属性来选择元素，<p class=”p1”></p> class即是属性，p1是class的属性值。 写法：元素[ 属性名= “属性值”] ，等号不固定，可换其它符号
1.E[att]
2.E[att="val"]
3.E[att~="val"]
4.E[att^=“val"] 以val开头
5.E[att$=“val"] 以val结尾
6.E[att*=“val"] 包含val
7.E[att|="val"]
1.E[att] 选择具有attr属性的E元素
p[class]{ color:red;} //选择带有class属性的p标签
<p class="p1">这是p1标签</p>
<p class="p2">这是p2标签</p>
<p class="p3">这是p3标签</p>
<p class="p4">这是p4标签</p> *不管class名为什么，只要有class属性，即符合
<title>css属性选择器</title>
<style>
/* a[href]{
color: red;
}*/
/*p[class="p2"]{color: red}*/
/*p[class~="p1"]{color: red}*/
/*p[class^="p"]{color: red}*/
/*p[class$="p"]{color: red}*/
/*a[href*="baidu"]{color: red}*/
div[class|="sxt"]{color: red}
</style>
</head>
<body>
<!--<a href="">这是第一个a标签</a>
<a href="">这是第二个a标签</a>
<a href="">这是第三个a标签</a>
<a href="">这是第四个a标签</a>-->
<div class="sxt-work">这是块元素work</div>
<div class="work-sxt">这是块元素car</div> <!-- //不是以sxt开头-->
<div class="sxt-pen">这是块元素pen</div>
<div class="sxtpen">这是块元素pen</div> <!-- //没有链接符-->
</body>三、伪类选择器
伪类通过冒号来定义，它定义了元素的状态，如点击按下、点击完等等，我们之前都是直接操作元素的样式，现在可以为元素的状态改样式，使元素看上去更“动态”。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>链接伪类选择器</title>
<style>
a{
text-decoration: none;
font-size: 16px;
font-weight: 800;
}
a:link{/!*未访问的链接*!/
color: gray;
}
a:visited {/!*已访问过的链接*!/
color:#FF0000
}
a:hover{/!*鼠标移动到链接上*!/
color: plum;
}
a:active{/*选定的链接 鼠标按下时的样式*/
color: blue;
}
*/
a:hover{
color:red;
}
a:active{/*选定的链接 鼠标按下时的样式*/
color: blue;
}
</style>
</head>
<body>
<!--
链接伪类选择器主要针对超链接(a) 注意：顺序不能更改
-->
<a href="#" >秒杀</a>
</body>
</html>5.E:not(s选择器) 匹配不含有s选择器的元素E。 div:not(.d1){ color: red;} //选择除了类名为d1的元素，注意，not()中的值不加引号！ <div class="d1">块元素</div> <div class="d1">块元素</div> <div class="d1">块元素</div> <div class="d2 d1">块元素</div> <div class="d2" id="div2">块元素</div>
6.E:first-child 父元素的第一个子元素E。 要使该属性生效，E元素必须是某个元素的子元素。一般元素都是body的子元素，所以都可以使用此伪类。而body标签不是子元素，所以 body:first-child { background:#ddd;} 是无效的。
7.E:last-child 父元素的最后一个子元素E
8.E:only-child E元素是唯一的子元素时被匹配
9.E:empty 匹配没有任何子元素（并且不包括text节点）的元素E
p:empty{ border:1px solid red;padding:10px;}
<p></p>
<div></div> //空，但不是P元素
<p>我是一个p元素</p> //有text文本节点
<p><a href="#">百度</a></p> //有子元素10.E:checked 匹配用户界面上处于选中状态的元素E。
(用于input type为radio与checkbox时)
input:checked+span{color:red;}
<input type="radio" name="sex"/><span>男生</span>
<input type="radio" name="sex" checked="checked"/><span>女生</span> input下被选中的元素紧挨着的span颜色为红色，因为选中状态会变，所以看着像动态的
11.E:nth-child() 选中第几个子元素
<div class="box">
<p>1</p> <p>2</p> <p>3</p>
</div>
.box p:nth-child(2){ color: red; } //选中第二个p元素
.box p:nth-child(even){ color: red; } //选中第偶数个子元素
.box p:nth-child(odd){ color: red; } //选中第奇数个子元素
.box p:nth-child(n+5){ color: red; } //选中从第5个子元素开始，都实现这宜效果选择前面3个
四、伪对象选择器
伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上应该 :weilei ::weiyuansu，而现在我们为了兼容旧的书写方式，用一个冒号引导伪元素也是能被解析的。
伪类一般反映无法在CSS中轻松或者可靠检测到的某个元素的状态或者属性； 伪元素表示DOM外部的某种文档结构
伪类更多是定义元素的状态，而伪元素则是改变文档结构，在结构外另加一个没有实际存在的元素(伪元素) 常用伪元素 1.E:before/E::before 2.E:after/E::after
1.E:before/E::before before 选择器在被选元素的”内容”前面插入内容。用来和content属性一起使用 虽然E:before可转化为E::before，但是你写伪元素时要规范，用两个冒号 p::before{ content:"在P标签元素内容前加了内容"; color: red;} //它并没有在html文件结构中 <p></p> 2.E:after/E::after after选择器在被选元素的”内容”后面插入内容 p::after{ content:"在P标签元素内容前加了内容"; color: red;} <p></p>
*content属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伪对象选择器</title>
<style>
p::before{
content: "北京";
color: red;
/*content: url("wangfeng.jpg");*/
}
p::after{
content: "科技有限公司";
color: red;
}
</style>
</head>
<body>
<p>尚学堂</p>
</body>
</html>
伪对象选择器after特效
28_1514451554121.png 28_1514451560910.png
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>金立手机官网—金立手机及配件官方正品专卖网站_金立全面全面屏s11新品首发</title>
<style>
.phoneimg>img {
width: 120px;
position: absolute;
left: 85px;
top: 23px;
}
.phoneimg:hover .after {
left: 55px;
}
.phoneimg:hover .before {
left: 115px;
}
</style>
</head>
<div class="phoneimg">
<img src="28_1514451560910.png" alt="" class="after" />
<img src="28_1514451554121.png" alt="" class="before" />
</div>
</body>
</html><pre></pre>
被包围在 pre 元素中的文本通常会保留空格和换行符 示例——用pre定义有换行的文本
<body>
<pre>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
</pre>
</body>
块级元素和行内元素
1.块级元素独占一行，行内元素在同一行显示
2.块级元素默认宽度为100%，行内元素由内容撑开
3.块级元素可以设置宽高，行内元素不可以设置宽高
4.块级元素可以设置margin和padding和四个方向，行内元素只可以设置margin和padding和左右值，上下不起作用
5.块级元素默认的display为block，行内元素的display为inline 6.块级元素可以包含块级元素和行内元素，行内元素一般只包含行内元素和文本 7.常见的块级元素有h1-h6，p，div等，行内元素有a，em，b，i，u等
<a>锚点跳转简介
业余点的解释就是可以让页面定位到某个位置的点。在高度较高的页面中经常见到：
<a href="#2">作者介绍></a> <a name="2"></a>不推荐使用a+name的锚点方法了。一是使用了一个空标签，有铺张浪费，挪用公款之嫌；
二是经常会出现锚点失效的情况。所以，推荐使用id来绑定锚点的。如果使用id实现，代码应该类似下面：
<a href="#2">作者介绍></a> <h2 id="2">作者介绍</h2><table>合并单元格
<table border="1px" width="300px" height="300px" align="center">
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table><lable>-提升用户的体验效果，点击控件范围内会触发点击事件
使用方法：
1.直接使用lable标签包裹input
2.通过label的for指向按钮的id来绑定，for和id属性的值要相同
<p> <label>用户名：<input type="text"/></label></p>
<p> <label>密码：<input type="password"/></label></p>
<hr/>
<label for="pwd">记住密码</label>
<input type="checkbox" name="pwd" id="pwd" />
效果：点击用户名的区域，可以获取焦点
日期控件
日期：<input type="date"/>展开收起控件
<details>
<summary>details中的标题</summary>
<p>详细的内容</p>
</details>
度量衡+进度条
<meter min="0" max="100" value="70" low="20" high="80">度量衡</meter>
<progress max="100" value="80">进度条 </progress>
<datalist></datalist>标签
<datalist> 标签定义选项列表,与 input 元素配合使用该元素，来定义 input 可能的值 datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。 请使用 input 元素的 list 属性来绑定 datalist。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist> 效果：
audio
支持的格式：
ogg
mp3
wav
注意：loop 属性值 正数(代表播放次数) 负数或者不加任何属性值(代表无限播放)
-->
<audio src="images/1.mp3" autoplay controls loop="2" muted></audio>
<hr/>
如果浏览器不支持某种格式的音频，可以将一种音频转换成3中格式
<audio controls>
<source src="images/1.mp3"/>
<source src="images/1.ogg"/>
您的浏览器不支持音频播放
</audio><source>标签
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。 <source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<video>
视频格式：mp4 ogg/移动端 webM/高清
<video> 标签定义视频，比如电影片段或其他视频流
<video src="movie.mp4" controls> 您的浏览器不支持 video 标签。 </video><embed/>标签
标签定义嵌入的内容，比如插件，当然也可以用来嵌入声音 <embed> 标签必须有 src 属性 <embed src="helloworld.mp4" />
嵌入优酷的视频：
<embed src='http://player.youku.com/player.php/sid/XMjkyODAzNDA4/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
css的引入
1.内联方式(行内样式)
例如： <p style="color: red;font-size: 50px;">尚学堂是致力于IT培训的一家公司</p>
2.内部样式表
例如：
<style type="text/css">
p{
color: orange;
font-size: 80px;
}
</style>
3.外部样式表
例如：
<link href="my.css" rel="stylesheet"/>
4.导入式
例如：
<style type="text/css">
@import url(my.css);
</style>
优先级：行内样式>内部样式>外部样式>导入样式
css加载方式link和@import的区别，为什么不推荐使用@import?
1. @import是CSS提供加载样式的一种方式，只能用于加载CSS。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属性等。
2. 加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显。
3. 兼容性的差别。@import在IE5以上才能识别，而link标签无此问题。
4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成。
5.使用@import方式会增加HTTP请求，会影响加载速度，所以谨慎使用该方法。
选择器
格式：
.类名{
属性1：属性值1;
属性2：属性值2;
...
}
注意：一个页面中class名字可以重复
ID选择器 格式：
#ID属性名{
属性1：属性值1;
属性2：属性值2;
...
}
注意：一个页面中id相同的id名只能出现一次
css选择器命名规范：
1.建议使用字符[a-zA-Z0-9]，连接符(-),下划线(_)。不建议使用中文
2.不能以数字开头
优先级：ID选择器>类选择器>标签选择器
css样式表优先级总结：
1.相同的选择器，其样式表排序：行内样式>内部样式>外部样式(就近原则)
2.相同方式的样式表，其选择器排序：ID选择器>类选择器>标签选择器（范围越小越优先）
3.外部样式表的ID选择器>内部样式表的标签选择器
合并选择器
语法：
选择器1,选择器2,...{ } 作用：提取共同的样式，减少重复代码 例如：.header,.footer{height:300px;}
css盒子和浮动以及定位
border边框
border属性设置一个元素的边框，它有三个要素：宽、样式、颜色，统称“边框三要素”。
三要素书写的时候一般如下顺序
border：宽度 样式 颜色 border: 1px solid red;
过不按此顺序来写依然能正常显示。 div{ border: red solid 2px; }
border-style设置边框的样式，有五种常用样式可选
点状dotted 实线solid 双线double （ 需要最起码设置为3像素，不然显示不下）
虚线dashed 无边框none
外边距-margin
围绕在元素边框周围的空白区域
会在元素外创建额外的空白区域
外边距是透明的
语法：margin:value; 单边设置 margin-top/right/bottom/left: value; value可取值为像素，%，auto，负值
块级元素的垂直相邻外边距会合并
当两个垂直外边距相遇时，他们将形成一个外边距，成为外边距合并
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
margin
设置元素外边距的宽度，它有这么几个特点
1. 块级元素的垂直相邻外边距会合并
2. 行内元素实际上不占上下外边距。行内元素的的左右外边距不合并
3. 浮动元素的外边距也不会合并
4. 允许指定负的外边距值，不过使用时要小心
子父类元素设置margin无效的处理办法
<div id="parent">
<div id="son"></div>
</div>#parent{
width: 200px;
height: 200px;
background-color: pink;
/!*overflow: hidden;*!/
/!*margin-top: 100px;*!/
/!*border: 2px solid red;*!/
/!*padding: 1px;*!/
}
#son{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
margin-left: 20px;
}方法：父类设置如下属性的其中一个就可以实现
/!*overflow: hidden;*!/
/!*margin-top: 100px;*!/
/!*border: 2px solid red;*!/
/!*padding: 1px;*!/
效果：
内边距padding
内容区域和边框之间的空间 会扩大元素边框所占用的区域 语法：padding:value; 单边设置 padding-top/right/bottom/left:value; value可取值为像素，百分比，但不能为负数...
内边距的简写
padding:value(四个方向相同) ;
padding: value(上下) value(左右); padding: value(上) value(左右) value(下); padding: value(上) value(右) value(下) value(左);
三、怪异盒模型
盒子模型分两种，一种是符合W3C规范的标准例子模型，另一种是IE的盒子模型，IE的盒子模型也被叫怪异盒子。 可以看到 IE 盒子模型也包括 margin、border、padding、content，不过，和标准 盒子模型不同的是：IE 盒子模型的宽，包含了 border 和 pading。
Box-sizing
box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素，以适应区域。换句话说，当前元素使用哪种盒模型，可以由box-sizing属性来指定 它有两个值
content-box（标准） padding和border不被包含在width和height内，元素的实际大小为宽高+border+padding，此为标准模式下的盒模型。
border-box（怪异） padding和border被包含在定义的width和height中，元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。
四、伸缩盒模型flexbox
伸缩盒模型也叫弹性盒模型，或flexBox。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建“自适应”浏览器窗口的流动布局。
flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于HTML文档流排列，使用弹性盒模型可以规定特定的顺序。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。
目的：在浏览器窗口变化时，盒子相应改变大小。 设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用。
作用相当于float:left
flexbox的基础知识
由于 flexbox是一个整体的模块，它们之中一些属性是在父容器上设置，而一些是在子容器上设置。
一个flexbox的基本结构：
.box{ display: flex;} //最外层的为父容器，定义此容器为弹性布局
.item1{ flex-grow: 1; background:pink} flex-grow占1比例
.item2{ flex-grow: 2; background:orange} 占2比例
.item3{ flex-grow: 3; background:red} 占3比例
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
1.首先规定哪个是父容器，父容器中包含多个“项目”（每个子div），项目是可以在父容器中弹性布局的。
2.其次还可以规定父容器中要怎么来显示它里面的项目，如是否换行、项目排列方向等
父容器常用属性
1.父容器中的常用属性 display: flex;
定义一个flex容器 新弹性盒 设置父元素是一个弹性盒，子元素会自动水平排列
2.父容器中的常用属性 justify-content: flex-end;
设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
3.父容器常用属性 align-items
属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
旧的伸缩盒
伸缩盒从被提出到如今一直在修改，所以这里涉及到了新老写法
伸缩盒最老版本 display:box; 将对象作为弹性伸缩盒显示（火狐和webkit内核都支持display:-webkit-box;或display:-moz-box;） 子元素 box-flex:;
伸缩盒过渡版本 display:flexbox; 将对象作为弹性伸缩盒显示
伸缩盒最新版本 display:flex; 将对象作为弹性伸缩盒显示
五、浏览器内核以及其前缀
CSS标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所以会加厂商前缀加以区分。如果某个属性已经从草案变为了或接近推荐方案，并且厂商已经完全实现了推荐属性，那就不用加厂商前缀。如border-radius已经很成熟，不用加前缀。
根据不同的浏览器内核，css前缀会有不同。最基本的浏览器内核有如下四种，其它的内核都是基于此四种进行再研发的。
1.Gecko内核 前缀为-moz- 火狐浏览器
2.Webkit内核 前缀为-webkit- 也叫谷歌内核，chrome浏览器最先开发使用，safari浏览器也使用 该内核。国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等。
3.Trident内核 前缀为-ms- 也称IE内核
4.Presto内核 前缀为-o- 目前只有opera采用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浏览器内核以及前缀</title>
<style>
div{
width: 400px;
height: 400px;
border: 30px solid rgba(255,255,255,.5);
background: url("images/wangfeng.jpg");
margin: 30px auto;
padding: 120px;
font-size: 200px;
font-weight: bolder;
color:rgba(255,255,255,.5);
/*背景切割*/
-webkit-background-clip: text;
/*
-webkit-background-clip
text 从文本区域开始实现背景
border-box 从边框开始实现背景
content-box 从内容区域开始实现背景
padding-box 从padding区域开始实现背景
*/
}
</style>
</head>
<body>
<div>王者荣耀</div>
</body>
</html>
弹性盒子应用
重置样式，去掉一些默认的样式
reset.css
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}
body {padding:0;margin:0;text-align:center;color:#333;font-size:14px;font-family:"宋体", arial;}
li{list-style-type:none;}
a{text-decoration: none;}
img,input{border:none;vertical-align:middle;}
<template>
<div class="container">
<div class="nav">
<div class="arrow"></div>
<div class="title">
<img src="./images/百度周边_05.png" alt=""/>
<span>发现周边服务</span>
</div>
<div class="search"></div>
</div>
<div class="food">
<div>
<img src="./images/百度周边_14.png" alt=""/><br>
<span>美食</span>
</div>
<div>
<img src="./images/百度周边_14.png" alt=""/><br>
<span>美食</span>
</div>
<div>
<img src="./images/百度周边_14.png" alt=""/><br>
<span>美食</span>
</div>
<div>
<img src="./images/百度周边_14.png" alt=""/><br>
<span>美食</span>
</div>
<div>
<img src="./images/百度周边_14.png" alt=""/><br>
<span>美食</span>
</div>
</div>
<div class="menu">
<div>
<div>
<img src="./images/百度周边_30.png" alt=""/><br/>
<span>小吃</span>
</div>
<div>
<img src="./images/百度周边_30.png" alt=""/><br/>
<span>小吃</span>
</div>
<div>
<img src="./images/百度周边_30.png" alt=""/><br/>
<span>小吃</span>
</div>
<div>
<img src="./images/百度周边_30.png" alt=""/><br/>
<span>小吃</span>
</div>
<div>
<img src="./images/百度周边_30.png" alt=""/><br/>
<span>小吃</span>
</div>
</div>
<div>
<div>
<img src="./images/百度周边_30.png" alt=""/><br/>
<span>小吃</span>
</div>
<div>
<img src="./images/百度周边_30.png" alt=""/><br/>
<span>小吃</span>
</div>
<div>
<img src="./images/百度周边_30.png" alt=""/><br/>
<span>小吃</span>
</div>
<div>
<img src="./images/百度周边_30.png" alt=""/><br/>
<span>小吃</span>
</div>
<div>
<img src="./images/百度周边_30.png" alt=""/><br/>
<span>小吃</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ComeOnTwo",
}
</script>
<style scoped>
@import "css/reset.css";
@import "css/baiduStyle.css";
</style>
使用引入的样式
baiduStyle.css
body{
background-color: #f4f4f4;
}
.nav{
width: 100%;
height: 75px;
background-color: #ff4433;
display: flex;
}
.arrow,.search{
width: 75px;
height: 75px;
}
.arrow{
background: url("../images/百度周边_03.png") no-repeat center;
}
.search{
background: url("../images/百度周边_08.png") no-repeat center;
}
.title{
height: 75px;
flex-grow: 1;
font-size: 20px;
color: #fff;
line-height: 75px;
}
.food{
display: flex;
background-color: #fff;
height: 200px;
align-items: center;
}
.food div{
width: 40%;
min-width: 50px;
}
.menu{
background-color: #fff;
margin-top: 20px;
}
.menu>div{
display: flex;
}
.menu>div>div{
flex-grow: 1;
border-right: 1px solid #f2f4f5;
margin: 30px 0;
}
.menu>div:first-child{
border-bottom: 1px solid #f2f4f5;
}
.menu>div>div:last-child{
border-right: none;
}
浏览器内核例子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浏览器内核例子</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition:1s;
-o-transition: 1s;
transition: 1s;
}
body:hover div{
width: 400px;
}
</style>
</head>
<body>
<!--
-webkit-transition: 1s; 谷歌
-moz-transition: 1s; 火狐
-ms-transition:1s; ie
-o-transition: 1s; opera
transition: 1s; w3c标准样式
-->
<div></div>
</body>
</html>浮动定位
将元素排除在普通流之外
元素将不在页面中占据空间
将浮动元素放置在包含框的左边或者右边
浮动元素依旧位于包含框之内 浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止
浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动
行内元素浮动后会变为块级元素 语法：float:none/left/right;
浮动效果：
当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边框碰到包含框的左边缘
包含框中有三个元素，如果把框1向右浮动，则它脱离文档流并且向右移动，直到它的右边框碰到包含框的右边框
如果把三个框都向左移动，那么框1向左浮动直到遇到包含框，另外两个框向左浮动直到碰到前一个浮动框，三个框在同一行显示
如果包含框太窄，那么其他浮动块会自动向下移动，直到有足够的空间（左图），如果浮动元素的高度不同，那么当他们向下移动时可能被其他浮动元素卡住（右图）
CSS 清除浮动：
描述：清除浮动是在使用了浮动之后必不可少的，为了网站布局的效果，清除浮动也变得非常麻烦。 属性：clear 值：left、right、both
清除浮动的常用方式：
1.结尾处加空div标签 clear:both （或在下一个元素上加clear:both;）
2.浮动元素的父级div定义 伪元素::after
3.浮动元素的父级div定义 overflow:hidden
4.浮动元素的父元素定高
此时1，2是浮动元素，不占用空间，3就往上排列，被遮挡了。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
.parent{
border: 1px solid red ;
/*overflow:hidden;*/
/*height: 100px;*/
}
.child1{
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.child2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.child3{
width: 300px;
height: 120px;
background-color: green;
}
/*.clear{
clear: both;
}*/
.parent::after{
content:"" ;
display: block; /*/!*换位块级元素*!/*/
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<!--<div class="clear"></div>-->
</div>
<div class="child3"></div>
</body>
</html>效果
display属性
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。 块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变 。
display常见属性值
1. none：隐藏对象
2. inline：指定对象为内联元素
3. block：指定对象为块元素
4. inline-block：指定对象为内联块元素
5. table-cell：指定对象作为表格单元格
6. flex：弹性盒
visibility:hidden和display:none和opacity:0的区别：
1.visibility:hidden和opacity:0会将元素隐藏，但是物理空间实际存在
2.display:none 影藏元素，不保留物理空间
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性</title>
<style>
.box>div{
width: 300px;
height: 300px;
background-color: pink;
/*float: left;*/
display: inline-block;
/*display: inline;*/
/*display: block;*/
/*display: table-cell;*/
/*text-align: center;*/
/*vertical-align: middle;*/
/*display: none;*/
/*opacity:0;*/
visibility:hidden;
}
.box>div:nth-child(2){
background-color: hotpink;
}
.box>div:last-child{
background-color: deeppink;
}
span{
width: 200px;
height: 200px;
background-color: red;
display: block;
}
.bottom{
width: 1200px;
height: 500px;
background-color: purple;
}
</style>
</head>
<body>
<!--
display属性值：
inline-block 行内块元素，即在同一行显示，又可以设置宽高，margin和padding可以设置四周
（注意：识别代码之间的空白）
block 指定对象为块元素
inline：指定对象为内联元素
table-cell：指定对象作为表格单元格
none：隐藏对象
-->
<div class="box">
<div>
<div style="width: 100px;height: 100px;background-color: blue;margin: 0 auto"></div>
</div>
<div></div>
<div></div>
</div>
<!--<span>尚学堂</span>
<span>尚学堂</span>
<span>尚学堂</span>-->
<div class="bottom"></div>
</body>
</html>position定位
1.静态定位static
对偏移量不起作用。一般应用于去除定位
2.relative相对定位(自恋型)
相对于自己来偏移位置（相对于原来左上角的基点来便偏移）
通过便偏移来移动位置，但是原来所占的位置 继续占有
3.absolute绝对定位
相对于整个浏览器来边偏移
如果发生边偏移，那么它不在占有空间
4.fixed固定定位
居中总结
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>居中总结</title>
<style>
.parent{
width: 500px;
height: 500px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.child{
width: 200px;
height: 200px;
background-color: blue;
}
/*.parent{
width: 500px;
height: 500px;
background-color: red;
display: table-cell;
vertical-align: middle;
}
.child{
width: 200px;
height: 200px;
background-color: blue;
margin: 0 auto;
}*/
</style>
</head>
<body>
<!--
1.内容水平居中
text-align:center
2.一行文字垂直居中
line-height=height
4.子元素在父元素中居中
1)弹性盒子
2)table-cell
3)绝对定位
-->
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>3.盒子水平居中
div{
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
}子元素在父元素中居中-绝对定位
.parent{
width: 500px;
height: 500px;
background-color: red;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
left: 50%;
top:50%;
margin-left: -100px;
margin-top: -100px;
}z-index堆叠顺序
z-index属性：在定位元素position:fixed上有效
值为数值，数值越大表示堆叠顺序越高，即离用户越近 可以设置为负值，表示离用户更远
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
