CSS3笔记
1.1基本选择器
标签选择器
类选择器
id选择器
1.2后代选择器：在某个元素的后面
body p{
/*color: green;*/
/*后代选择器*/
background: red;
}
1.3子选择器 儿子 一代：
/*子代选择器*/
body>p{
background: yellow;
}
1.4相邻兄弟选择器：只有一个，相邻 向下延申 同辈：
.active+p{
background: black;
}
1.5通用选择器：
通用兄弟选择器，当前选种元素的向下所有兄弟元素
记住 ：后代空格 子代> 相邻兄弟+ 通用下级兄弟~
1.6结构伪类选择器
nth-child（n）选择某个父元素的一个或多个特定的子元素
n可以是数字，关键字或者公式
n如果是数字，就是选择第n个子元素，里面数字从1开始
n可以是关键字：even偶数，odd奇数
n可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数就会被忽略）
公式 取值
2n 偶数
2n+1 奇数
5n 5 10 15.
n+5 从第5个开始（包含第5个）到最后
-n+5 前5个（包含第5个）
区别：nth-child（）：会把所有的盒子都排列序号 执行的时候首先看：nth-child（1）之后再回去看前面div nth-of-type（）：会把指定元素的盒子排列序号执行的时候首先看div指定的元素，之后回去看:nth-of-type(1)第几个孩子
/* 1.选择ul里面第一个孩子 */
ul li:first-child{
background-color: pink;
}
/* 2.选择ul里面最后一个孩子 */
ul li:last-child{
background-color: pink;
}
/* 3.选择ul里面的第二个孩子 */
ul li:nth-child(2){
background-color: pink;
}
/* 把所有的偶数的孩子选出来 */
ul li:nth-child(even){
background-color: pink;
}
/* 把所有的奇数数的孩子选出来 */
ul li:nth-child(odd){
background-color: gray;
}
/* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n不能是其他的字母 选择了所有的孩子*/
ol li:nth-child(n){
background-color: pink;
}
从第三个开始及以后
ol li:nth-child(n+3){
background-color: pink;
}
选中前五个
ol li:nth-child(-n+5){
background-color: pink;
}
1.7属性选择器（常用）id+class结合
/*存在id属性的元素 a[]{}
=绝对等于
*=包含这个
^=以这个开头
$=以什么结尾*/
a[id="first"]{
background: blueviolet;
}
1.8伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
选择符 简介
：：before 在元素内部的前面插入内容
：：after 在元素内部的后面插入内容
before和after创建一个元素，但是属于行内元素
新创建的这个元素是在HTML文档树内找不到的，所以称为伪元素
语法：element：：before{}
before和after必须有content属性
before在父元素内容的前面 after在父元素内容后面
两者权重都为1
div{
width: 200px;
height: 200px;
background-color: pink;
}
div::before{
content: '我';
/* 必须要写 */
}
div::after{
content: '小猪佩奇';
}
</style>
</head>
<body>
<div>是</div>
伪元素使用场景伪元素字体图标1
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?fo3gy0');
src: url('fonts/icomoon.eot?fo3gy0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?fo3gy0') format('truetype'),
url('fonts/icomoon.woff?fo3gy0') format('woff'),
url('fonts/icomoon.svg?fo3gy0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div{
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after{
position: absolute;
top: 10px;
right: 10px;
content: '';
font-family: 'icomoon';
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div></div>
伪元素使用场景2：仿土豆
.tudou::before{
content: '';
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
}
/* 当我们鼠标经过了这个盒子，就让里面的遮罩层显示出来 */
.tudou:hover::before{
/* 而是显示元素 */
display: block;
}
伪元素选择器使用场景3伪元素清除浮动
2.美化网页元素
2.1span标签
重点要突出的字，使用span标签套起来
#tenglong{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id=tenglong>前端</span>
</body>
2.2字体样式
font-family ： 字体 font-size：字体大小 font-weight:blod字体粗细 color：字体颜色
2.3文本样式
color 颜色 text-align 排版 text-indet 段落首行缩进 line-height 行高 ： 行高和块的高度一致就可以居中 text-decoration: 下划线 文本图片水平对齐：vertical-align:middle 超链接伪类：鼠标悬浮的颜色：a：hover{ color：red} a：active{color：yellow}：鼠标点住未释放的状态 a：visted{color:red} :鼠标点击之后的颜色 阴影：text-shadow：阴影颜色 ，水平偏移， 垂直偏移， 阴影半径 四个属性
2.4.列表
列表：
list-style：none 去掉圆点 circle 空心圆 decimal 数字 square 正方形 ul li{ }
2.5.背景图像
background-image:添加背景图片 background-repat ：repat-x 水平 -y竖直平铺 no repat 不平铺 颜色 图片 图片位置 平铺方式 background：red url（） 200px 100px no-repat 定位：background-position：270px 2px； 渐变：网站 Grabient
3.盒子模型
margin：外边距 border：边框 padding：内边距
常见操作：h1， ul，li， a，body{
margin：0；
padding：0}
边框：solid 实线 dashed虚线
外边距的妙用：居中对齐：margin：0 auto；前提条件：块元素 有宽度
盒子的计算方式：你这个元素到底多大 margin+border+内容宽度
3.1圆角边框
圆角边框：border-radius img{
border-radius: 50px;
width: 50px;
height: 50px;
}
源码之家 element 飞冰 ice-work
3.2盒子阴影
h-shadow:必需，水平阴影的位置，允许负值
v-shadow：必需 垂直阴影的位置 允许负值
blur: 可选 模糊距离 虚的还是实的
spread：可选 阴影的尺寸
color：可选 阴影的颜色
inset：可选，将外部阴影（outset）改为内部阴影
3.3 网页布局
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动！
4.display和浮动
display：block 块元素 inline 行内元素 inline-block 是块元素，但是可以内联在一行! 也是一种实现行内元素排列的方式，但是很多情况用float none 消失 浮动：左浮动 floa：left； 右浮动:float:right; 清除浮动： clear属性right left both两侧不允许有浮动
4.1浮动特性
脱离标准普通流的控制（浮）移动到指定位置（动）（俗称脱标）
浮动的盒子不再保留原先的位置
如果多个盒子都设置了浮动，则它们 会按照属性值在一行内显示并且顶端对齐排列
浮动元素会具有行内块元素特性
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子是紧紧挨在一起的
为了约束浮动元素位置，网页布局一般采用：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
网页布局第二准则：先设置盒子大小，之后设置盒子的位置
浮动布局注意点：
1.浮动和标准流的父盒子搭配：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其余兄弟元素也要浮动：一个盒子里边有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
4.2父级边框塌陷问题
解决方案：
1.增加父级元素的高度
2.增加一个空的div标签，清除浮动 3.overflow两个属性 hidden隐藏 scrollw滚动条 auto 4.父类添加一个伪类：after：
#father:after{
content"";//添加一个空内容
display:block;
clear:both;
}
双伪元素清除浮动：
.clearfix:before,.clearfix:after{
content:"";
display：table;//表格放在一行
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1//照顾低版本浏览器
}
小结：1.浮动元素后面增加空的div 简单，代码中尽量避免空div 2.设置父元素的高度 简单，元素假设有了固定的高度，就会被限制 3.overflow： 简单，下拉的一些场景避免使用 4.父类添加伪类:after 写法稍微复杂，但是没有副作用，推荐使用！ 对比：display不可以控制方向 float 浮动起来的话会脱离标准文档流，所以要解决 父级边框塌陷的问题
4.3清除浮动
为什么需要清除浮动？
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子
本质：清除浮动的本质是清除浮动元素造成的影响，清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了！
clear:both;
5.定位
5.1相对定位
相对于自己原来的位置进行偏移，他仍然在标准文档流里；原来的位置会被保留；（自恋型）以自己为中心移动 原来位置也保留！ position：relative； 上下左右 自己记住:相反的 top:20px; left:20px; bottom：-10px； right：20px；
5.2绝对定位
绝对定位：position：absolute；
#aaa{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
-
没有父级元素定位的前提下，相对于浏览器定位
2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移；以最近一级的有定位祖先元素为参考点移动位置！ 3.在父级元素范围内移动；它不在标准文档流里，原来位置不会保留
固定定位：position：fixed 固定定位
right：0；
bottom：0；
#sss{
width: 100px;
height: 100px;
background-color: #000000;
position: fixed;
right: 0;
bottom: 0;
}
<style type="text/css">
body{
height: 2000px;
}
#aaa{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
#sss{
width: 100px;
height: 100px;
background-color: #000000;
position: fixed;
right: 0;
bottom: 0;
}
</style> 绝对定位和相对定位的练习
固定定位是元素固定与浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
特点：1.以浏览器的可实视窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动
2.固定定位不占有原有位置
脱离标准流！
5.3.1固定定位小技巧：固定在版心右侧位置
小算法：
1.让固定定位的盒子left：50% 走到浏览器可视区（也可以看做版心）的一半位置
2.让固定定位的盒子margin-left：版心宽度的一半距离，多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了！
##
字体行高一般是12-25 z-index：相当于图层；默认是0，最高无限； opacity0.5；：设置背景透明度 动画：canvas动画网站；
5.4子绝父相
1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
2.父盒子需要加定位限制子盒子在父盒子内显示
3.父盒子布局时，需要占有位置，因此父亲只能是相对定位！
5.5 黏性定位
postition：sticky；
top：0px；
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位占有原先位置（相对定位特点）
3.必须添加top left right bottom 其中一个才有效
5.6 Z-index 定位叠放次序
选择器{z-index：1；}
定位布局时，可能会出现盒子重叠情况
数值可以是正整数 负整数或0 默认是auto 数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来者居上！
数字后面不能加单位
只有定位的盒子才有z-index属性
5.7 定位的拓展
1.绝对定位的盒子居中 固定定位也可！
加了绝对定位的盒子不能通过margin：0 auto； 水平居中，但是可以通过一下计算方法实现水平和垂直居中
水平居中： left：50% 让盒子的左侧移动到父级元素的水平中心位置 margin-left：-100px：让盒子向左移动自身高度的一半 垂直居中：top：50%； margin-top：-15px；负一半
2.定位的特殊特性
绝对定位和固定定位也和浮动类似
1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3.脱标的盒子不会触发外边距塌陷
浮动元素，绝对定位（固定定位）元素都不会出发外边距合并的问题；
4.绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面的标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片） 浮动产生的目的是文字环绕！
但是绝对定位（固定定位）会压住下面标准流所有的内容。
淘宝焦点图
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.tb-promo {
position: relative;
width: 520px;
height: 280px;
margin: 100px auto;
}
.tb-promo img{
width: 520px;
height: 280px;
}
/* 并集选择器可以集体声明相同的样式 */
.prev,
.next{
position: absolute;
top: 50%;
margin-top: -15px;
/* 加了绝对定位的盒子可以直接设置宽度和高度 */
width: 20px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
}
.prev{
left: 0;
/* 加了绝对定位的盒子可以直接设置宽度和高度 */
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.next{
/* 如果一个盒子既有left属性也有right属性，则默认会执行left属性同理 投票 bottom会执行top */
right: 0;
/* 加了绝对定位的盒子可以直接设置宽度和高度 */
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.provo-nav{
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background: rgba(255, 255, 255, .3);
border-radius: 7px;
}
.provo-nav li{
float: left;
width: 8px;
height: 8px;
border-radius: 4px;
margin: 3px;
}
/* 不要忘记选择题权重问题 */
.provo-nav .selected{
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="../img/tb.jpg" alt="">
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
<ul class="provo-nav">
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
6.CSS书写顺序
1.布局属性如：display
2.盒子自身属性
3.文本属性
4.其他属性
6.1页面布局整体思路
为了提高网页制作的效率，布局时通常有以下的整体思路：
1.必须确定页面的版心（可视区），我们测量可得知
2.分析页面中的行模块，一起每个行模块中的列模块，其实页面布局第一准则
3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则
4.制作HTML结构，我们还是遵循先有结构，后又样式的原则，结构永远最重要
5.所以，先理清楚布局结构，再写代码尤为重要，这需要我们多写多积累
实际开发中，我们不会直接用链接a，而是用li包含链接的做法！
7.布局总结
1.标准流
可以上盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
3.定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局
8.元素的显示与隐藏
本质：让一个元素在页面中隐藏或者显示出来
8.1display：显示隐藏
display：none 隐藏对象
display：block 除了转换为块级元素之外，同时还有显示元素的意思
后期应用及其广泛，搭配js可以做很多网页特效
display 隐藏元素后，不再保留位置！
8.2visibilty显示隐藏
visibility：visible 元素可视
visiblity：hidden 元素隐藏
visibility 隐藏元素后，继续占有原来位置
如果隐藏元素想要原来位置就用visibility：hidden
如果不想要原来位置就用display：none（用处更多 重点）
8.3overflow 溢出显示隐藏
对溢出显示与隐藏
overflow属性指定了如果内容溢出了一个元素的框（超过其指定高度及宽度）时，会发生什么
overflow：四个属性
visible 显示
hidden：溢出隐藏
scroll ： 加滚动条
auto： 在需要的时候添加滚动条 溢出显示滚动条 否则不显示
一般情况下，我们都想让溢出的内容显示出来，因为溢出的部分会影响布局
但是如果有定位的盒子，请慎用overflow：hiiden 因为他会隐藏多余部分
vscode土豆案例
.tudou{
position: relative;
width: 444px;
height: 320px;
margin: 30px auto;
}
.tudou img{
width: 100%;
height: 100%;
}
.mask{
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
}
/* 当我们鼠标经过了这个盒子，就让里面的遮罩层显示出来 */
.tudou:hover .mask{
/* 而是显示元素 */
display: block;
9.CSS精灵图 精灵技术
9.1理论部分
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以
精灵技术目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
使用精灵图核心：
1.精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中。
2.这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position
4.移动的距离就是这个目标图片的x和y坐标，注意网页中的坐标有所不同 （千万注意网页中的坐标：x轴往右边走是正值，左边走是负值，y轴同理）
5.因为一般情况都是往上往左移动，所以数值是负值。
6.使用精灵图的时候就需要精确测量，每个小背景图片的的大小和位置
精灵图拼自己名字
div{
background: url(../img/abcd.jpg) no-repeat;
}
.f,.t,.l{
float: left;
width: 99px;
height: 120px;
}
.f {
background-position: 0px -137px ;
}
.t {
background-position: -368px -411px ;
}
.l {
background-position: -6px -272px t;
}
10.字体图标
字体图标使用场景：主要用于显示网页中通用 常用的一些小图标
字体图标iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
总结：
1.如果遇到一些结构和样式比较简单的小图标，就用着字体图标。
2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图
10.1字体图标的下载
推荐网站 icomoon字库 http：//icomoon.io
阿里 iconfont字库 http：//www.iconfont.cn/
10.2字体图标的引入
1.把下载包里面的fonts文件放入页面根目录下
2.字体声明
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?fo3gy0');
src: url('fonts/icomoon.eot?fo3gy0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?fo3gy0') format('truetype'),
url('fonts/icomoon.woff?fo3gy0') format('woff'),
url('fonts/icomoon.svg?fo3gy0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
3.打开demo页面 复制字体粘贴
4.再给标签添加font-family: 'icomoon';
10.3字体图标的追加
把压缩包里面的selection.json从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可
11.CSS三角
.box2{
width: 0;
height: 0;
/* transparent透明色 三角形想变大变小控制边框像素 就可以*/
border: 50px solid transparent;
border-top-color: pink ;
}
京东小三角案例 用定位做
.jd{
position: relative;
width: 120px;
height: 249px;
}
.jd span{
position:absolute ;
right: 15px;
top: -10px;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
12.CSS 用户页面样式
12.1鼠标样式 cursor
<ul>
<li style="cursor:default ;">我是默认的小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor:text">我是鼠标文本样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
12.2表单轮廓和防止拖拽文本域
<style>
input, textarea{
/* 取消轮廓文本边框线 */
outline: none;
}
textarea{
resize: none;
}
</style>
</head>
<body>
<!-- 取消轮廓文本边框线 -->
<input type="text">
<!-- 防止拖拽文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 文本域最好写一行 -->
13. vertical-align 实现图片文字居中对齐
经常用于设置图片或者表单（行内块元素）和文字垂直对齐
vertical-align：baseline top middle bottom
14.图片底侧有空白缝隙解决方案
第一种方案1..给图片添加vertical-align:top/middle/bottom 都可以 只要不是默认baseline
第二种解决方案2.把图片转换为块级元素display：block
15.溢出的文字用省略号显示
15.1单行文字省略号显示
先强制一行内显示文本
white-space：nowrap；（默认normal自动换行）
超出的部分隐藏
overflow：hidden；
文字用省略号替代超出的部分
text-overflow：ellipsis；
div{
width: 150px;
height: 80px;
margin: 100px auto;
/* 这个单词的意思是如果文字显示不开自动换行 */
/* white-space: normal; */
/* 这个单词的意思是强制一行显示 */
white-space: nowrap;
/* 溢出的部分隐藏 */
overflow: hidden;
/* 文字用省略号显示 */
text-overflow: ellipsis;
}
15.2多行文本省略号显示
多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）
div{
width: 150px;
height: 80px;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
16.常见布局技巧
16.1margin负值的运用
让每个盒子向左移动-1个像素，压住1px边框使得1+1=2
ul li{
float: left;
width: 150px;
height: 200px;
border: 1px solid red;
list-style: none;
margin-left: -1px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style>
ul li{
position: relative;
float: left;
width: 150px;
height: 200px;
border: 1px solid red;
list-style: none;
margin-left: -1px;
}
/* ul li:hover{
1.如果盒子没有定位则鼠标经过加相对定位保留位置
/* position: relative;
border: 1px solid blue;
} */
ul li:hover{
/* 2.如果盒子有定位则鼠标经过时给z-index提高层级即可 */
z-index: 2;
border: 1px solid blue;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
16.2文字围绕浮动元素巧妙运用
巧妙运用浮动元素不会压住文字的特性
<style>
.box{
width: 300px;
height: 70px;
margin: 0 auto;
}
.pic {
float: left;
width: 120px;
height: 60px;
}
.pic img{
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="../img/use.png" alt="">
</div>
<p>范腾龙 范腾龙</p>
16.3行内块巧妙运用
行内块元素，给父元素加text-align：center；就很容易让行内块元素居中对齐
<style>
*{
margin: 0;
padding: 0;
}
.box{
text-align: center;
}
.box a{
display:inline-block;
width: 36px;
height: 36px;
border:1px solid #ccc ;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
font-size: 14px;
}
/* 考虑权重问题 */
.box .prev,.box .next{
width: 85px;
}
.box .current,.box .elp{
border: none;
}
.box input{
height: 36px;
width: 45px;
border: 1px solid #ccc;
outline: none;
}
.box button{
width: 45px;
height: 36px;
border:1px solid #ccc ;
}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="elp">...</a>
<a href="#" class="next">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
16.4CSS三角强化巧妙运用
直角三角形
.box{
width: 0;
height: 0;
border-color: transparent red transparent transparent;
/* 只保留右边边框有颜色 */
border-style: solid;
/* 样式都solid */
border-width: 100px 50px 0 0 ;
/* 上边框宽度要大,右边框 宽度稍微小,其余的边框为0 */
}
京东图标：
.price{
width: 160px;
height: 24px;
border: 1px solid red;
margin: 0 auto;
line-height: 24px;
}
.miaosha{
position: relative;
float: left;
width: 90px;
height: 100%;
text-align: center;
color: #fff;
font-weight: 700;
margin-right: 8px;
}
.miaosha i{
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin{
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="miaosha">
1650
<i></i>
</span>
<span class="origin">5650</span>
</div>
17.CSS初始化
京东初始化为例子
/* 内外边距清零 */
*{
margin: 0;
padding: 0;
}
/* em i斜体变正常 */
em,
i {
font-style: normal;
}
/* 去掉li的小圆点 */
li{
list-style: none;
}
img{
/* border 0 照顾低版本浏览器 如果图片碗面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底测右空白缝隙的问题 */
vertical-align: middle;
}
button{
/* 当我们鼠标经过按钮是变成小手 */
cursor: pointer;
}
a {
color: #666;
text-decoration: none;
}
a:hover{
color: #c81623;
}
button,
input{
font-family: Microsoft YaHei;
/* \5B8B\4F53 就是宋体 微软雅黑的意思 */
}
body{
/* 抗锯齿行 让文字显示的更加清晰 */
-webkit-font-smoothing:antialiased;
font: 12px/1.5;
}
18.H5的新特性
新增的语义化标签
<header></header>
头部标签
<nav></nav>
<!-- 导航标签 -->
<article></article>
<!-- 内容标签 -->
<section></section>
<!-- 定义文档某个区域 -->
<aside></aside>
<!-- 侧边栏标签 -->
<footer></footer>
<!-- 尾部标签 -->
19.CSS3盒子模型
css3中可以通过box-sizing来指定盒模型，有两个值：即可指定为content-box。border-box，这样我们计算盒子大小的方式就发生了改变
1.box-sizing：content-box盒子大小为width+padding+border（默认）
2.box-sizing：border-box盒子大小为width
padding和border就不会撑大盒子了！
20.CSS3的其他特性
20.1图片变模糊
css3滤镜filter：
filter：函数（）；eg：filter：blur（5px）数值越大越模糊
img{
/* blur是一个函数，小括号里面数值越大图片越模糊px单位 */
filter: blur(5px);
}
img:hover{
filter: blur(0);
}
</style>
</head>
<body>
<img src="../img/tb.jpg" alt="">
20.2CSScalc函数
calc（）此CSS函数可以让你在声明CSS属性值时执行一些计算
width：calc（100%-80px）；
括号里面可以用+-*/
.father{
width: 300px;
height: 200px;
}
.son{
width: calc(100%-30px);
height: 30px;
}
</style>
</head>
<body>
<!-- 子盒子宽度永远比父盒子小30px -->
<div class="father">
<div class="son"></div>
</div>
21.CSS3过渡
过渡动画：是从一个状态渐渐过渡到另外一个状态；
transition：要过渡的属性 花费时间 运动曲线 何时开始
1.属性：想要变化的css属性，宽度高度 背景颜色 内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
2.花费时间：单位是秒（必须写单位）比如0.5s
3.运动曲线：默认是ease（可以忽略）
4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间，默认是0s（可以忽略）
记住过渡使用口诀：谁做过渡给谁加 通常和：hover搭配使用
div{
width: 200px;
height: 100px;
/* 如果想要多个属性加逗号分隔 */
transition: width 0.5s,height 0.5s;
/* 如果想要多个属性都变化写all 谁做过渡给谁加*/
transition: all 0.5s;
}
div:hover{
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
进度条案例：
.bar{
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
/* padding: 1px; */
}
.bar-1{
width: 50%;
height: 100%;
border-radius: 7px;
transition: width 0.5s;
}
.bar:hover .bar-1{
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar-1"></div>
</div>
22. 网站favicon图标
制作favicon图标
1.把品优购图标切成png图片
2.把png图片转换为ico图标 网站：http://www.bitbug.net/
3.HTML页面引入ico图标<link rel="shortcut icon" href=" /favicon.ico" />
23. 网站TDK三大标签SEO优化
页面必须有三个标签用来符合SEO优化
1.tietle网站标题
建议：网站名（产品名）-网站的介绍（尽量不要超过30个汉字）
2.description网站说明
简要说明网站主要做什么的
3.keywords关键字
keywords是页面关键词，是搜索引擎的关注点之一
注意：logo里面首先方一个h1标签
再放一个链接，可以返回首页，把logo的背景图片给链接即可
为了搜索引擎收录我们，我们链接里面要放文字（网站名称）但是文字不要显示出来
方法1：text-indent移动到盒子外面（text-indet：-9999px）然后overflow：hidden
方法2：直接给font-size：0 就看不到文字了，京东的做法
4.最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了
24.常用命名
25.2D转换
转换（tranform）
25.1移动：translate
transform:translate(x,y)
特点：2d移动不会影响其他盒子
translate中的百分比单位是相对于自身元素的translate：（50%，50%）
对行内标签没有效果
div{
position: relative;
width: 500px;
height: 500px;
/* transform: translate(50%,50%); */
}
p{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
/* margin-top: -100px;
margin-left: -100px; */
/* translate(-50%,-50%) 盒子往上走自己高度的一半 */
transform: translate(-50%,-50%);
}
25.2旋转：rotate
2d旋转是指在二维坐标系中旋转
tranform：rotate（度数）
重点：rotate里面跟度数，单位是deg 比如rotate(45deg)
角度为正时，顺时针，为负时角度为逆时针
默认旋转的中心点是元素的中心点
设置元素转换中心点：transform-origin：x y；
可以加方位名词
注意x和y是空格隔开
默认是元素中心点
img{
/* 顺时针旋转45度 */
/* transform: rotate(45deg); */
border-radius: 50%;
border: 5px solid pink;
/* 过渡写到本身上，谁做给谁加 */
transition: all 2s;
}
img:hover{
transform: rotate(360deg);
}
</style>
<body>
<img src="../bj.jpg" alt="">
eg：代码写小三角
div{
position: relative;
width: 249px;
height: 65px;
border: 1px solid #ccc;
}
div::after{
content: '';
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
}
eg：旋转中心点案例：
div{
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
}
div::before{
display: block;
content: '黑马';
width: 100%;
height: 100%;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.4s;
}
div:hover::before{
transform: rotate(0deg);
}
</style>
<body>
<div></div>
25.3缩放：scale
transform:scale(x,y)
注意：x和y用逗号分隔
div{
width: 200px;
height: 200px;
margin: 100px auto;
transform-origin: left bottom;
}
div:hover{
/* 里面写的数字不跟单位就是倍数的意思 1倍就是本身*/
/* transform: scale(2,2); */
/* 等比例缩放同时修改宽度和高度，我们有简单写法 */
/* transform: scale(2); */
/* 我们可以进行缩小，小于1就是缩放 */
/* transform: scale(0.5); */
/* scale的优势之处：不会影响其他的盒子 而且可以设置缩放的中心点 */
transform: scale(2);
}
</style>
<body>
<div></div>
eg：图片缩放案例
div{
overflow: hidden;
float: left;
margin: 10px;
}
img{
transition: all 0.4s;
}
div img:hover{
transform: scale(1.1);
}
</style>
<body>
<div><a href="#"><img src="../study/img/boxs.png" alt=""></a></div>
<div><a href="#"><img src="../study/img/boxs.png" alt=""></a></div>
<div><a href="#"><img src="../study/img/boxs.png" alt=""></a></div>
eg：分页按钮缩放案例
li{
float: left;
margin: 10px;
width: 30px;
height: 30px;
border: 1px solid pink;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 15px;
cursor: pointer;
transition: all .4s;
}
li:hover{
transform: scale(1.2);
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
26.2D转换综合写法
注意：
1.同时使用多个转换，其格式为：transform：translate（） rotate（） scale（）
2.其顺序会影响转换的效果（先旋转会改变坐标轴的方向）
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前
27.CSS3动画
动画的基本使用：
1.先定义动画
2.再使用（调用）动画
1.用keyfarms定义动画（类似定义类选择器）
@keyfarms 动画名称{
0%{
width：100px；
}
100%{
width：200px；
}
}
定义动画
2.调用动画
animation-name:动画名称；
animation-duration：持续时间；
eg:
/* 我们想页面一打开 ，一个盒子从左边走到右边 */
/* 1.定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100%{
transform: translateX(1000px);
}
}
div{
width: 200px;
height: 200px;
/* 2.调用动画 */
animation-name: move;
animation-duration: 2s;
}
27.2动画序列
0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
/* 动画序列 */
/* 可以做多个状态的变化 keyform关键帧动画
里面的百分比要是整数
里面的百分比就是总的时间（我们这个案例10s）的划分 */
/* from to 等价于 0% 100% */
/* @keyframes move {
from{
transform: translate(0,0);
}
to{
transform: translate(1000px,0);
}
} */
@keyframes move{
0%{
transform: translate(0,0);
}
25%{
transform: translate(1000px,0);
}
50%{
transform: translate(1000px,500px);
}
75%{
transform: translate(0,500px);
}
100%{
transform: translate(0,0);
}
}
div{
width: 100px;
height: 100px;
animation-name: move;
animation-duration: 10s;
}
27.3动画的常见属性
| 规定动画。 | 3 | |
|---|---|---|
| 所有动画属性的简写属性。 | 3 | |
| 规定 @keyframes 动画的名称。 | 3 | |
| 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 | |
| 规定动画的速度曲线。默认是 "ease"。linear匀速 | 3 | |
| 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 forward停留到最后一个样式 | 3 | |
| 规定动画何时开始。默认是 0。 | 3 | |
| 规定动画被播放的次数。默认是 1。 infinite无限重复 | 3 | |
| 规定动画是否在下一周期逆向地播放。默认是 "normal"。alternate逆向播放 | 3 | |
| 规定动画是否正在运行或暂停。默认是 "running"。paused 停止 |
27.3 动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
eg：animation：myfirst 5s linear 2s infinite alternate
简写属性里面不包含animation_play_state ；它经常和鼠标经过等其他配合使用
27.4速度曲线细节
steps（指定了时间函数中的间隔数量（步长））
steps就是分几步来完成我们的动画 有了steps 就不要在写ease或者linear
eg：奔跑的熊大
<style>
body{
}
div{
/* position: absolute; */
width: 200px;
height: 100px;
background: url(../img/bear.png) no-repeat;
/* 我们元素可以添加多个动画，用逗号分隔 */
animation: bear 1s steps(8) infinite;
/* move 8s forwards; */
}
@keyframes bear{
0%{
background-position: 0 0;
}
100%{
background-position: -1600px 0;
}
}
@keyframes move{
0%{
left: 0;
}
100%{
left: 50%;
/* margin-left: -100px; */
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div>
</div>
28. 3D
28.1 3D移动
transform:translateZ(100px); 仅仅是在Z轴上移动
注意：只跟px单位
transform：transform3d（100px，100px,100px）
xyz是不能省略的 如果没有就写零
28.2 perspective透视
如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
透视的单位是像素
注意：透视写在被观察元素的父盒子上
28.3 3D旋转 rotate3d
3D旋转指可以让元素在三位平面内沿着x y z轴旋转
eg：transform：rotateX（45deg）
X轴旋转:左手准则：左手的手拇指指向X轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向
28.3 3D呈现
transform—style：
控制子元素是否开启三位立体环境空间
默认：flat
transform-style：prever—3d
注意：给父级元素写
29.浏览器私有前缀
-moz-:代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit-“代表safair chrome私有属性
-o-：代表Opera私有属性
30. 移动开发之流式布局
30.1视口
布局视口layout viewport(忽略）
视觉视口visual wiewport
重点：理想视口 ideal viewport
需要手动填写meta视口标签通知浏览器操作
主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就有多宽。
30.2 meta视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,miinimum-scale=1.0,user-scalable-no">
30.3 物理像素比 二倍图
PC端1px等于1物理像素
移动端不一定
物理像素就是我们说的分辨率
30.4 2倍图
我们准备的图片比我们实际需要的大小，大2倍 ，这种方式就是2倍图
然后手动压缩到大小
30.5背景缩放 background-size
background-size：背景图片宽度，背景图片高度；
div{
width: 500px;
height: 500px;
border: 1px solid red;
background: url(../img/yuhe.jpg) no-repeat;
/* background-size: 300px 200px; */
background-size: 300px;
/* 只写一个参数，肯定是宽度，那高度会等比例缩放 */
/* 2.里面的单位可以跟% 相对于父盒子来说的 */
background-size: 50%;
}div{
width: 500px;
height: 500px;
border: 1px solid red;
background: url(../img/yuhe.jpg) no-repeat;
/* background-size: 300px 200px; */
/* background-size: 300px; */
/* 只写一个参数，肯定是宽度，那高度会等比例缩放 */
/* 2.里面的单位可以跟% 相对于父盒子来说的 */
/* background-size: 50%; */
/* background-size: cover; */
/* cover图片会完全覆盖盒子 等比例缩放直到完全覆盖盒子，可能有部分背景图片显示不全*/
background-size: contain;
/* 高度和宽度等比例拉伸 当宽度或者高度铺满div盒子，就不再进行拉伸 可能有部分空白 */
}
31. 移动端技术解决方案
CSS初始化：http：//necolas.github.io/normalize.css/
32.流式布局（百分比布局）
流式布局，就是百分比布局，也称非固定像素布局
通过盒子的宽度设置成百分比来根据屏幕的宽度就行伸缩，不受固定像素的限制，内容向两侧填充
流式布局方式是移动web开发使用的比较常见的布局方式
*{
margin: 0;
padding: 0;
}
section{
width: 100%;
限制最大最小宽度
max-width: 980px;
min-width: 320px;
}
section div{
float: left;
width: 50%;
height: 400px;
}
section div:nth-child(1){
}
section div:nth-child(2){
}
</style>
33.flex弹性布局（强烈推荐）
布局原理：flex是flexible box的缩写，意思为弹性布局 用来为盒状模型提供最大的灵活性，任何一个容易都可以指定为flex布局
当我们为父盒子设为flex布局以后，子元素的flex布局以后，子元素的float， clear 和vertical-align属性将失效，
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
总结flex布局原理：
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
33.1flex布局父项常见属性:
flex-direction:设置主轴的方向： 在flex布局中，是分为主轴和侧轴两个方向
row：
默认从左到右默认主轴是x轴 那么y轴就是侧轴，子元素跟着主轴排列
row-reverse：反转（简单了解）
column：y轴变主轴
column-reverse：反转（简单了解）
justify-content：设置主轴上的子元素排列方式：
flex-start：默认值 从头部开始，如果主轴是x轴，则从左到右
flex-end：从尾部开始排列
center：在主轴居中对齐（如果主轴是x轴则水平居中）
space-around：平分剩余空间
space-between：先两边贴边再平分剩余空间（重要）
space-evenly：均匀排列每个元素，每个元素之间的间隔相等。
flex-wrap：设置子元素是否换行
默认情况下，项目都排列在一条线上（又称轴线）flex-warp属性定义，flex布局中默认是不换行的，如果装不开，换缩小子元素的宽度，放到父元素里面
nowrap：默认值，不换行
wrap：换行
align-items 设置侧轴上的子元素排列方式 在子项为单项（单行）的时候使用：
flex-start：从上到下
flex-end：从下到上
center：挤在一起居中（垂直居中）
stretch：拉伸，但是子盒子不要给高度（了解）
align-content 设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式并且只能运用
于子项出现换行的情况（多行），在单行下是没有效果的：
flex-start：默认值在侧轴的头部开始排列
flex-end：在侧轴尾部开始排列
center：在侧轴中间显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头，再平分剩余空间
strch：设置子项元素高度平分父元素高度
总结：单行找align-items多行找align-content（有换行才能视为多行）
把设置主轴方向和是否换行（换列）简写：
flex-flow:row wrap;
33.2 flex布局子项常见属性
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
section{
display: flex;
width: 60%;
height: 150px;
margin: 0 auto;
}
section div:nth-child(1){
width: 100px;
height: 150px;
}
section div:nth-child(2){
flex: 1;
}
section div:nth-child(3){
width: 100px;
height: 150px;
}
align-self：控制子项自己单独在侧轴上的排列方式
order属性定义项目的排列顺序 eg：order：-1；默认是0，-1比0小，所以在前面
34.less+rem+媒体查询布局混合布局
34.1rem基础
rem单位是一个相对单位，类似于em，em是父元素字体大小
注意：不同的是rem的基准是相对于html元素的字体大小
有点：rem的优点就是可以通过修改html里面的文字的大小来改变页面中元素的大小
34.2媒体查询
媒体查询（Media Query）是CSS3的新语法
mdia可以针对不同的屏幕尺寸设置不同的样式
语法规范：
mediatype查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
screen 用于电脑手机等
关键字：
and可以将多个媒体按行连接到一起
/* 这句话的意思就是：在我们屏幕上并且最大宽度是800px，设置我们想要的样式 */
/* max-width 小于等于800 */
/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
@media screen and (max-width:800px){
body{
"> }
}
@media screen and (max-width:500px){
body{
}
}
eg：媒体查询页面宽度改变背景颜色案例
/* 1.媒体查询一半按照从大到小或者从小到大 的顺序来 */
/* 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width:539px) {
body{
}
}
/* 540-970 我们的背景颜色变为绿色 */
/* @media screen and (min-width:540px) and (max-width:969px) {
body{
}
} */
@media screen and (min-width:540px) {
body{
}
}
/* 大于等于970 我们页面的颜色改为红色 */
@media screen and (min-width:970px) {
body{
}
}
/* screen 还有and必须带上不能省略，数字后面必须跟单位 */
/* 一般从小到大写，代码简洁 会层叠 */
34.3 引入资源（理解）
当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）
原理就是直接在link中判断设备的尺寸，然后引用不同的css文件
<link rel="stylesheet" href="" media="screen and (min-width:320px)">
在index.less中引入common.css
//首页的less文件
@import "common";
34.4 less基础
Less是一门CSS扩展语言，也称为CSS预处理器
less使用：先新建一个less文件，然后书写less代码
less变量：@变量名：值； 必须以@开头，不能以数字开头 大小写敏感
@color:pink;
@font14:14px;
body {
}
less编译：easy less插件ctrl s保存即可
less嵌套：
// 1.less嵌套，子元素的样式直接写道父元素里面就好了
如果有伪类，交集选择器，伪元素选择器，我们内层选择器的前面需要加&字符
.header{
width: 200px;
height: 200px;
a{
color: red;
}
}
.nav{
.logo{
color: red;
}
}
less运算：两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
两个数都有单位，而且不一样的单位，最后的结果以第一个单位为准
@border:5px+5;
div{
width: 200px-50;
height: 200px*2;
border: @border solid red;
}
img{
width: (82/50)rem;
}
rem取值=页面元素值（px）/(屏幕宽度/划分的分数)
rem=页面元素值（px）/html文字大小
注意：1.首先我们选一套标准尺寸750为准
2.我们用屏幕尺寸除以我们划分的份数，得到了html里面的文字大小，但是我们知道不同屏幕的文字大小是不一样的
3.页面元素的rem值=页面元素在750像素的下px值/html里面的文字大小
34.5 简介高效的rem适配方案flexible.js
34.6 移动端准备工作
1.建好文件夹
2.选适配方案
3.引入CSS初始化文件
4.设置视口标签
5.引入CSS文件
6.设置body
建议：选取一种主要技术选型，其他技术作为辅助
34.7 swiper轮播图插件
1.下载需要的css和js文件
2.官网找到类似案例，复制html结构，css样式和js语法
3.根据需求定制修改模块
35.响应式页面兼容移动端（其次）
35.1响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而设配不同设备的目的
响应式需要一个父级布局容器，来配合子级元素来实现变化效果
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从然再不同屏幕下，看到不同页面布局和样式变化
响应式尺寸划分：
超小屏幕：100%
小屏幕：750px
中等屏幕：970px
大屏幕：1170px
媒体查询
.container{
height: 150px;
margin: 0 auto;
}
/* 1.超小屏幕下 小于768 布局容器的宽度为100% */
@media screen and (max-width:767px) {
.container{
width: 100%;
}
}
/* 2.小屏幕下 大于等于768 布局容器改为750px */
@media screen and (min-width:768px){
.container{
widows: 750px;
}
}
/* 3.中等屏幕下 大于等于992px 布局容器修改为970px */
@media screen and (min-width:992px) {
.container{
width: 970px;
}
}
/* 4. 大屏幕下 大于等于1200 布局容器修改为1170 */
@media screen and (min-width:1200px) {
.container{
width: 1170px;
}
}
35.2 bootstrap前端开发框架
详情请看bootstarp5网格系统
使用四部曲：
1.创建文件夹结构
2.创建html骨架结构
3.引入相关样式文件
4.书写内容
35.3栅格系统的使用
1.先有一个container容器 行和列组合创建页面布局
2.行必须在容器内
3.加类前缀： class="col-lg-3"
如果孩子的份数相加等于12，则孩子能占满整个container的宽度
如果孩子的份数相加小于12，则占不满，会有空白
如果孩子的份数相加大于12，则多余一列会另起一行
不同屏幕下，可以为列增加多类名写法
注意：每一列默认都有15px的左右padding值
<div class="container"></div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
35.4 列嵌套
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的padding值，而且高度自动和父级一样高 -->
<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">B</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
35.5列偏移
<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<div class="col-md-4 offset-md-4">右侧</div>
</div>
<div class="row">
<div class="col-md-8 offset-md-2">左侧</div>
</div>
</div>
35.6列排序
<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<div class="col-md-8 order-first">右侧</div>
</div>
order-first排序到第一
36. 2倍精灵图做法
先把精灵图等比例缩放到原先一半
之后根据大小测量坐标
注意代码里面也要写background_size 原来一半
37.背景线性渐变
background:linear-gradient(起始方向，颜色1，颜色2)
背景渐变必须添加浏览器私有前缀 起始方向默认是top也可以为方位名词
38.vw vh
vw/vh是一个相对单位（类似em和rem相对单位）
1vw=1/100视口宽度
1vh=1/100视口高度
eg：当前屏幕视口是375像素，则1vw=3.75像素
