未更改有空会修改更新

CSS介绍

1、HTML主要做结构,显示元素内容

2、CSS美化HTML,布局网页

3、CSS最大价值:由HTML专注去做结构呈现,样式交给CSS 即结构(HTML)与样式(CSS)相分离

外部引入css样式

1
<link rel="stylesheet" href="文件路径">

Emmet语法

1
2
3
4
5
6
想生成多个相同的标签 加上*就可以了    例 div*3   可以快速生成3个div
想生成父子类标签则用>符号 例如ul>li 则生成ul里面包含li
想生成兄弟关系的标签 用+就行 例 div+p 则生成一个div 一个p
想生成带有类名或者id名字的 例.deom 或#two 则默认生成一个div内引用这个选择器
想生成标签包含类名是有顺序的 例table.demo$5 则生成5个table并且里面的选择器后面有序号
标签名{内容} 例div{111} 则生成<div>111<div>

选择器

选择器的命名规范

1
2
1、强烈推荐样式选择器,属性名,属性值关键字全部用小写  特殊情况除外
2、属性值前面,冒号后面,保留一个空格; 选择器和大括号中间保留空格

0、全选选择器

1
2
3
4
5
6
* {
color:red;
}
全选选择器,选中了整个页面
缺点:选中的太多,使用不灵活
使用场景:用于去除内外边距

1、标签选择器

1
2
3
4
5
6
7
8
例:p {
color:red;
}
选择了页面中所有的p标签,把字体颜色改为了红色
优点:简洁方便
缺点:选中了全部,比较笨重
使用场景:通常用于去除a下划线,列表的标识,em的斜体,b的加粗等....
权重1

2、类选择器

1
2
3
4
5
6
7
8
例:.red {
color:red;
}
调用:<div class="red"></div> 注:调用多个时,通过空格隔开
优点:节省代码
缺点:取名难度较大
使用场景:在任意地方都可以使用
权重10

3、id选择器

1
2
3
4
5
6
7
例:#red {
color:red;
}
调用:<div id="red"></div>
id在整个页面只能出现一次
使用场景:通常配合js使用
权重100

4、后代选择器

1
2
3
4
5
6
7
8
例:div p {
color:red;
}
选中了div中的所有p标签
优点:可以更好的选中要修改的标签
缺点:选中部分较大
使用场景:通常配合类选择器使用
权重:div+p(因为例子是div和p所以权重则是俩个相加)

5、子选择器

1
2
3
4
5
6
例 div>p {
color:red;
}
选中了div下的所有儿子p标签
使用场景:通常配合类选择器使用
权重:div+p(因为例子是div和p所以权重则是俩个相加)

6、并集选择器

1
2
3
4
例 div,p {
color:red
优点:把一些标签的公共样式放一起,可以节省代码
权重:个自是个自的

7、链接伪类选择器

1
2
3
4
5
6
7
a:link             选择所有未访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标悬浮在超链接上
a:active 选择活动链接(长按鼠标为放手时)

所有标签均可以使用
使用场景:通常给a标签使用

8、focus伪类选择器

1
2
3
4
5
6
例:input:focus{
background-color:red;
}
选取获得焦点的表单元素
焦点就是光标,一般<input>类表单元素才能获取
使用场景:则点击文本框时,变为红色,

9、属性选择器

选择符 简洁
E[att] 选择具有att属性的E元素
E[att=”val”](重点) 选择具有att属性且属性值等于val的E元素
E[att^=”val”] 选择具有att属性且属性值val开头的元素
E[att$=”val”] 选择具有att属性且属性值val结尾的元素
E[att*=”val”] 选择具有att属性且属性值包含val的元素

10、结构伪类选择器

选择器 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中第n个字元素E n可以是数字,关键字even偶数,odd单数,
E:first-of-type 指定类型的第一个
E:last-of-type 指定类型的最后一个
E:nth-of-type(n) 指定类型E的第n个
1
2
3
E:nth-child(1)和E:nth-of-type(1)的区别
E:nth-child(n)是按E标签里面的所有儿子找该下标
E:nth-of-type(1)是按指定标签来找下标

11、伪元素选择器

1
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML标签结构
选择器 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
1
2
3
4
5
6
7
注意:
before和after创建一个元素,但是属于行内元素
新创建的这个元素在文档树中找不到,所以我们称为伪元素
语法:element::before{}
before和after必须有content属性,content中填写要增加的内容
before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
伪元素选择器和标签选择器一样,权重为1

id选择器和类选择器的区别

1、类选择器好比人的名字,一个人可以有多个名字,且也有很多人用这个名字
2、id选择器好比人的身份证号码,全中国是唯一,不得重复
3、id选择器和类选择器最大的不同在于使用次数上
4、类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,通常与js搭配使用

元素模式显示

1、块元素

1
2
3
4
5
6
7
8
9
例:<h1>-<h6>、<p>、<div>、<ul>
特点:
1、独占一行
2、高度,宽度,外边距已经内边距可以控制
3、宽度默认容器(父级宽度)的100%
4、是一个容器,里面可以放行内或者块级元素
注意:
文字类的元素不能放块级元素
<p>标签主要用于放文字,因此<p>里面不能放块级元素,特别不能放<div>

2、行内元素

1
2
3
4
5
6
7
8
9
例:<a> <strong> <b> <em> <i> <span>
特点:
1、相邻行内元素在一行上,一行可以显示多个
2、高、宽字节设置是无效的
3、默认宽度就是他本身内容的宽度
4、行内元素只能容纳文本或其他行内元素
注意:
链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素,但是给<a> 转换一下块级模式最安全

3、行内块元素

1
2
3
4
5
例:<img /> <input> <td>
特点:
1、和相邻行内块元素在一行上,但是他们之间会有空白缝隙,一行可以放多个
2、默认宽度就是他本身内容的宽度(行内元素特点)
3、高度,行高外边距以及内边距都可以控制

4、元素显示模式转换

1
2
3
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display:inline-block;

字体样式

属性 单位 作用
font-family 字体名 设置字体
font-size 阿拉伯数字 px(像素) 设置字体大小
font-weight 通常使用100-900 设置字体粗细
font-style normal:标准 italic:斜体 很少加斜体,反而要把斜体改正
list-style none 去除li前面的点
1
2
3
4
5
6
7
字体复合属性写法
body{
font: font-style font-weight font-size/line-height font-family
}
注:
1、使用font属性,必须要按上面的格式书写,不能调换顺序,并且各个属性以空格隔开
2、不需要设置的属性可以省略(他会取默认值),但必须保留font-size和font-family 否则font属性不起作用

文本属性

属性 作用
color 颜色单词,16进制,RGB代码:(255,0,0) 更改字体颜色
text-align left、right、center 文本对齐
text-decoration none、underline、overline、line-through 上下划线,删除线
text-indent 阿拉伯数字,单位em 文本首行缩进
line-height 阿拉伯数字,单位px 设置文本行高
1
2
3
4
line-height:
若文字高度等于盒子高度,则居中
若文字高度小于盒子高度,则偏上
若文字高度大于盒子高度,则偏下

设置背景

属性 作用
background-color transparent(透明) 颜色 设置背景颜色
background-image none(无背景), url(图片路径) 设置背景图片
background-repeat no-repeat 设置背景不平铺
background-attachment scroll、fixed(固定) 设置背景是否跟在滚动条滚动
background-position 方位单词后百分数 设置背景图片的位置
background:rgba(0,0,0,0.3) 0-1之间 设置背景透明度

盒子边框

属性 参数 作用
border-width px 定义边框粗细,单位
border-style solid实线边框,dashed 虚线边框 dotted 点线边框 边框的样式
border-color 颜色 边框颜色
1
2
3
4
复合写法
border: border-width border-style border-color
合并相邻边框
border-collapse:collapse;

圆角边框

1
2
3
4
border-radius:  参数可以px,也可以百分比
正方形设置圆形则高或宽的一半,或直接写50%
矩形设置为高的一半则圆角矩形
跟一个属性则等于四个角,俩个则对角,

CSS三角

1
2
3
4
5
6
7
8
9
div {
width:0;
height:0;
line-height:0;
font-size:0;
border:5px solid transparent;
border-left-colorLpink;
大小根据边框线决定
}

阴影

描述
h-shadow 必需,水平阴影的位置,允许负值
y-shadow 必需,垂直阴影的位置,允许负值
blur 可选,模糊距离
spread 可选,阴影的尺寸
color 可选,阴影的颜色
Inset 将外部阴影设置为内部阴影inset,设置outset会注释这行
1
2
注意!!!!!!!
字体的阴影则没有spread Inset,其他一样

内间距

值的个数 表达意思
padding:5px 1个值,代表上下左右都有5像素的内边距
padding:5px 10px 2个值,代表上下内边距是5像素,左右内边距是10像素
padding:5px 10px 20px; 3个值,代表上内边距5像素,左右内边距10像素 下内边距是20像素
padding:5px 10px 20px 30px 4个值 , 代表上5像素 右10像素 下20像素 左30像素

浮动

属性 作用
float:left 左浮
float:right 右浮
1
2
注意!!!!!
一个盒子里面有多个子盒子,一个子盒子浮动了则所有子盒子都要浮动

清除浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
因为父级元素在很多情况下,不方便给高度,但是子盒子浮动有不占位置,最后父级盒子高度为0时,就会影响下面的标准流盒子

1、额外标签发也称为隔墙法,是w3c推荐的做法
在最后一个子元素后面追加一个块级标签,调用clear:both
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差(不推荐使用)
2、父级添加overflow属性
在父级添加overflow属性,将其属性值设置为hidden.auto或scroll
优点:代码简洁
缺点:无法显示溢出的部分
3、父级添加after伪元素
增加样式
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
优点:没有增加标签,结构更简单
缺点:需要照顾低版本的浏览器
代表网站:网易,京东
4、父级添加双伪元素
增加样式
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}

.clearfix:after {
clear: both;
}

.clearfix {低版本浏览器使用,必须要加
*zoom: 1;
}
优点:代码简洁
缺点:需要照顾低版本的浏览器
代表网站:小米,腾讯

position定位

定位模式 是否脱标 移动位置 是否常用
static 静态定位 不能使用边偏移 很少
relative相对定位 否(占有位置) 相对于自身位置移动 常用
absolute绝对定位 是(不占有位置) 带有定位的父级 常用
fixed固定定位 是(不占有位置) 浏览器可视区 常用
sticky粘性定位 否(占有位置) 浏览器可视区 当前阶段少

相对定位 relative(重要)

1
2
3
4
5
相对定位是元素在移动位置的时候,是相对于它用来的位置来移动
相对定位的特点
1、移动位置的时候参照点事自己原来的位置
2、移动后,继续保留原来的位置
因此,相对定位并没有脱标,它最典型的应用是给绝对定位当爹的

绝对定位absolute(重要)

1
2
3
4
5
绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的
绝对定位的特点:
1、如果没有父元素或者父元素没有定位,则以浏览器为标准
2、如果父元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素来参考点移动位置
3、绝对定位不保留原先位置

子绝父相(重点)

1
2
3
1、子类绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子
2、父盒子需要加定位限制子盒子在父盒子内显示
3、父盒子布局时,需要占有位置,因此夫妻只能是相对定位

固定定位fixed(重要)

1
2
3
4
5
6
7
8
9
10
固定定位是元素固定于浏览器可视区的位置,主要使用场景:可以在浏览器页面滚动时元素的位置不会改变
1、以浏览器的可视窗口显示
跟父元素没有任何关系
不随着滚动条的滚动滚动
2、固定定位不占有原先位置

固定定位小技巧:固定在版心右侧位置
小算法:
1、让固定定位的盒子left:50%.走到浏览器可视区(也可以看做版心)的一半位置
2、让固定定位的盒子margin-left:版心宽度的一半距离,夺走版心宽度的一半位置

粘性定位sticky(了解)

1
2
3
4
5
6
7
可以被认为相对定位和固定定位的结合
语法:position:spicky:top 10px;
特点:
1、以浏览器的可视窗口为参照点移动元素(固定定位特点)
2、粘性定位占有原先的位置(相对定位特点)
3、必须添加top、left、right、bottom其他一概才有效、
跟页面滚动搭配使用,兼容性差,IE

定位叠放次序 z-index

1
2
3
4
5
使用定位布局时,可能出现盒子重叠的情况。此时可以使用z-index来控制盒子的前后次序(z轴)
数值可以是正整数、负数或者0,默认为auto,数值越大,盒子越靠上
如果属性值相同,则按照书写顺序,后来居上
数值后面不能加单位
只有定位后的盒子才有z-index属性

元素的显示与隐藏

1、display属性(重点)

1
2
3
4
display:none  隐藏对象
display:block 处理转换为块级元素之外,同时还有显示元素的意思
隐藏后的元素,不占有原来的位置
后面应用及其广泛,搭配JS可以做很多的网页特效

2、visibility可见性

1
2
3
4
lnherlt继承附列的可见性
visible:可以看见
hidden:对象隐藏
占有原来的位置

3、overflow溢出

1
2
3
4
5
6
visible 页面默认的,显示溢出的部分
hidden: 隐藏溢出的部分
scroll: 溢出的部分滚动条显示(无论是否溢出都显示滚动条)
auto: 需要的时候添加滚动条(溢出后才显示滚动条)
一般情况下,我们都不想溢出的内容显示出来,因为溢出的部分会影响布局
如果有定位的盒子,请慎用overflow:hidden,因为它会隐藏多余的部分

精灵图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
原理:将网页上的小的背景图片整合到一张大图中,这样服务器只需要请求一次就行了
目的:为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度

使用精灵图核心:
1、精灵技术主要针对背景使用,就把多个小背景图片合并成一个大图片
2、移动背景图片位置,可以用background-position
3、移动的距离就是这个目标图片的xy左边,主要网页中的坐标有所不同
4、因为一般情况都是往上往左移动,所有数值是负值
5、使用精灵图时,需要精准测量每个小北街图片的大小和位置

缺点
图片文件还是比较大;
图片本身放大和缩小会失真
一旦图片制作完毕想要更换非常复杂

字体图标

1
2
3
4
5
6
7
8
9
10
11
12
13
字体图标可以为前端工程师提高一种方便高效的图标使用方式,展示的是图标,本质是字体
轻量级:一个图标字体要比一系列的图像要小,一旦字体加载了,图标就马上渲染出来了,减少了服务器请求
灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影。透明效果、旋转等
兼容性:几乎支持所有浏览器
注意:字体图标不能代替精灵技术,只是对工作中图标部分技术的提升和优化

推荐字体图标下载地址
icomoon字库 http://icomoon.io
国外服务器,打开网速较慢

阿里iconfont字库 http://www.iconfont.cn/
包含淘宝图标库和阿里妈妈图标库, 免费

CSS用户界面样式

1、鼠标样式cursor

属性值 描述
default 小白 系统默认
polnter 小手
move 移动
text 文本
not-allowed 禁止

2、轮廓线 outline

1
outline:none;去除轮廓线

3、防止拖拽文本域resize

1
resize:none;

vertical-align属性应用

1
经常用于设置图片或者表单(行内元素)和文字垂直对齐
描述
baseline 默认。元素放置在父元素的基线上
top 把元素的顶端与行内最高元素的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低元素的顶端对齐

对齐方式

溢出文字显示省略号

1、单行文本溢出显示省略号—必须满足三个条件

1
2
3
4
5
6
1、先强制一行内显示文本
white-space:nowrap;(默认normal自动换行)
2、超出部分隐藏
overflow:hidden;
3、文字用省略号替带超出的部分
text-overflow:ellipsis;

HTML5的新特性

1
2
HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签新的表单和新的表单属性
不过这些新特性都有兼容性问题,基本是IE9+以上的浏览器才支持,如果不考虑兼容性,可以大量使用

HTML5新增的语义化标签

1
2
3
4
5
6
7
8
9
10
11
<header>头部标签
<nav>导航标签
<article>内容标签
<section>定义文档某个区域
<aside>侧边栏标签
<footer>尾部标签

注意:这种语义化标准主要是针对搜索引擎
这些新标签页面中可以使用多次
在IE9中,需要把这些元素转换为块级元素
其实我们移动端更喜欢使用这些标签

HTML5新增的多媒体标签

音频:audio
1
目前只支持三种音频格式:MP3、Wav、Ogg
属性 描述
autoplay autoplay 就绪后自动播放
controls controls 显示播放按钮
loop loop 循环播放
src 音频地址 要播放的音频地址
视频:video
1
目前只支持三种视屏格式:MP4、WebM、Ogg
属性 描述
autoplay autoplay 视屏就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls controls 向商品显示播放控件(例如暂停,静音)
width 像素 设置播放器宽度
height 像素 设置播放器高度
loop loop 循环播放
src url 视屏地址
poster 图片地址 加载等待画面图片地址
muted muted 静音播放
preload auto(预先加载视屏) none (不应加载视屏) 规定是否预加载视屏(如果有了autoplay,就忽略该属性)
多媒体标签总结
1
2
3
4
音频和视屏标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器吧音频和视屏自动播放禁止了
视频标签是重点,我们经常设置自动播放,不适用controls控件,循环和设置大小属性

HTML5新增的input类型

1
运用例:type="email"
属性值 说明
email 输入必须为Email类型
url 输入必须为URL类型
date 输入必须为日期类型
time 输入必须为时间类型
month 输入必须为月类型
week 输入必须为周类型
number 输入必须为数字类型
tel 手机号码
search 搜索框
color 生成一个颜色选择表单

HTML5新增的表单属性

属性 说明
required required 必填
placeholder 提示文本 提示信息
autofocus autofocus 自动获取焦点
autocomplete off/on off记录提交后的值(默认)on 关闭,需要放在表单内,同时加上name属性
multiple multiple 可以多选文件提交(通常与文件域配合使用file)
1
2
3
4
可以通过以下方式修改placeholder里面的字体颜色
input::placeholder{
color:pink
}

盒子模型

1
2
3
4
CSS3通过box-sizing中指定盒模型,有2个值,即centent-box/border-box,计算盒子大小的方式就发生了改变
可以分俩种情况
1、box-sizing:content-box 盒子的大小为width+padding+border(默认)
2、box-sizing:border-box 盒子大小为width

CSS3的其他特性

1
2
filter:blur(10px);数值越大,图片越模糊,需要加px  
width:calc(100%-80px) 可以加减乘除的计算宽度

CSS过度(重点)

1
2
3
4
5
6
7
8
9
10
11
过渡动画是从一个状态渐渐的过渡到另外一个状态
低版本的浏览器不支持,但是不会影响我们的布局
我们经常和:hover一起搭配使用

transition:过渡的属性 花费时间 运动曲线 何时开始
属性 需要变换css属性,宽度高度 背景颜色 内外边距都可以,如果要所有的属性都变化过渡,写一个all 就可以,利用,分割
花费时间:单位是秒(必须要写单位s)
运动曲线:默认ease可以省略
何时开始:单位是秒(必须写单位) 可以设置延迟触发时间(默认0秒)可以省略

哪个盒子要过渡就给哪个盒子加,要实现过渡,要配合hover一起使用
网站favicon图标
1、制作favicon图标
1
2
切成png图片
把png图片转换为ico图标,借助第三方转换网站 例http://www.bitbug.net/
2、图标放到网站根目录下
3、引入favicon图标
1
2
在html页面里面的<head></head>元素之间引入代码
<link rel="shortcut icon" href="图片名" type="image/x-icon" />

网站TDK三大标签SEO优化

1
2
3
4
SEO为搜索引擎优化,是一种医用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式
SEO的目的是对网站进行深度的优化,从而帮助网站获取免费的流量,进而在搜索引擎上提升网站的排名,提高网站的知名度

TDK三大标签 title description keyword
title网站标签
1
2
title具有不可替代性,是我们内页的第一个主要标签,是搜索引擎了解网页的入口和队网页主体归属的最佳判断点
建议:网站名(产品名)-网站介绍
description网站说明
1
2
3
简要说明我们网站主要做说明

<meta name="description" content="网站说明" />
keyword关键字
1
2
3
keyword是页面关键字,是搜索引擎的关注点之一
keyword最后限制为6-8个关键词,用英文逗号分割
例:<meta name="keywords" content="关键字">

2D转换

1、移动translate

1
2
3
4
2D移动是2D转换里面的一种功能,可以改变元素在页面的位置,类似定位
语法:transform:translate(x,y)
优点:不会影响其他元素的位置
注意:用百分比符号,以自身当参照物

2、旋转rotate

1
语法:transform:rotate() 单位deg

3、设置中心点

1
2
3
4
语法:transform-origin:x y;
注意:参数x和y用空格隔开
x y默认中心点为50% 50%
可以给x y设置像素或者方位名词(top bottom left right center)

4、缩放scale

1
2
3
语法:transform:scale(x,y);
里面写的数字不跟单位,是倍数的意识
注意:不会影响其他盒子

综合写法

1
2
空格隔开
当我们同时又位移和其他属性的时候,记得要将位移放到最前面

动画

1
2
动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果

定义动画

1
2
3
4
5
6
7
8
语法:@keyframes 动画名称 {
0%(或from) {
开始状态
}
100%(或to) {
结束状态
}
}

调用动画

1
2
animation-name:动画名称;
animation-duration:持续时间

动画属性

属性 描述
animation 动画属性简写,除了animation-play-state属性
animation-name 动画名称
animation-duration 花费时间
animation-timing-function 速度曲线linear steps(n)分步骤运动
animation-delay 要等多久再运行 默认为0
animation-iteration-count 播放次数,循环播放infinite
animation-direction 设置动画移动回来alternate
animation-play-state 停止动画paused
animation-fill-mode 设置动画结束后状态,原味forwards 初始位置backwards
1
2
3
简写
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
动画之间逗号隔开

3D转换

1、三维坐标系

1
2
3
x轴:水平向右   注意:x右边是正值,左边是负值
y轴:垂直向下 注意:y下面是正值,上面是负值
z轴:垂直屏幕 注意:往外面是正值,往里面是负值

2、3D移动translate3d

1
语法:transform:translate3d(x,y,z)

3、透视perspective

1
2
3
透视我们也称为视距:视距就是人的眼睛看屏幕的距离
透视卸载被观察元素的父盒子里
单位:px

4、3D旋转rotete3d

1
2
3
语法:transform:rotateX(45deg) 沿着x轴正方向旋转45%
transform:rotateY(45deg) 沿着y轴正方向旋转45%
transform:rotateZ(45deg) 沿着z轴正方向旋转45%

5、3D呈现transfrom-style

1
2
3
4
transform-style:flat 子元素不开始3d空间  默认
transform-style:preserve-3d 子元素开启立体空间
代码写给父级,影响的始子盒子

1
注意,旋转移动一起使用,先移动在旋转

浏览器私有前缀

1
2
3
4
5
6
7
8
9
10
11
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加
-moz-:代表firefox浏览器私有属性
-ms-:代表ie浏览器私有属性
-webkit-:代表safari/chrome私有属性
-o-:代表Opera私有属性

提倡写法
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;

移动端

1、meta视口标签

1
2
例:
<meta name="vewport" content="device-width,user-scalable=no,initial-scale=1.0,maximum=1.0,minimum-scale=1.0">
属性 解释说明
width device-width理想窗口
initial-scale 初始缩放比,大于0的数字
maximum-scale 最大缩放比,大于0的数字
minimum-scale 最小缩放比,大于0的数字
user-scalable 用户是否可以缩放,yes或no(1或0)

二倍图

背景缩放background-size

1
2
3
4
5
6
规定背景图像的尺寸
语法:background-size:背景图片宽度 背景图片高度;
1。只写一个参数,肯定是宽度,高度省略了,会等比例缩放
2、里面单位可以跟%,相对于父盒子来说
3、cover 完全覆盖div盒子,可能有部分背景显示不全
4、contain高度和宽度等比例拉伸,高度或宽度又一边到了最大,则不拉伸了

特殊样式

1
2
3
4
5
6
7
8
9
点击高亮我们需要清除,设置transparent 为透明
-webkit-tap-highlight-color:transparent;

移动浏览器默认的外观在ios上加上这个属性才可以给按钮和输入框自定义样式
-webkit-appearance:none;
禁止长按页面时弹出菜单
img,a{
-webkit-touch-callout:none;
}

移动端常见布局

1
2
3
4
5
6
7
8
1、单独制作移动端页面(主流)
流式布局(百分比布局)
flex弹性布局(强烈推荐)
less+rem+媒体查询布局
混合布局
2、响应式页面兼容移动端(其次)
媒体查询
bootstarp

1、单独制作移动端页面

1.1、流式布局(百分比布局)
1
2
3
通过百分比布局,也称非固定像素布局
max-width 设置最大宽 max-height 设置最大高
min-width 设置最小宽 min-height 设置最小高
1.2、flex布局原理
1
2
3
4
5
6
7
8
9
10
11
12
flex是flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局

当我们为父盒子设为flex布局后,子元素的float、clear和vertical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

常见父项属性
flex-direction:设置主轴的方向 colum列
justify-content:设置株洲杀昂子元素的排列方式
flex-wrap:设置子元素是否换行
align-content:设置测轴上子元素的排列方式(多行)
align-items:设置测轴上的子元素排列方式(单行)
flex-flow:复合属性,相当于同时设置了flex-direction和flew-wrap
1.3、适配布局
1.5、justify-content设置主轴上的子元素排列方式
属性值 说明
flex-start 默认值从头部开始 如果主轴是x轴,则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是x轴则水平居中)
space-around 平分剩余空间
space-between 先俩边贴边在平分剩余空间(重要)
1.6flex-wrap设置子元素是否换行
属性值 说明
nowrap 默认,不换号
wrap 换行
1.7align-items设置测轴上的子元素排列(单行)
属性值 说明
flex-start 从上到下
flex-end 从下到上
center 挤在一起居中(垂直居中)
stretch 拉伸(默认值)(子盒子不要高度)
1.8align-content设置测轴上的子元素排列(多行)

在单行的基础上增加俩个属性

属性值 说明
space-around 子项在侧轴平分剩余空间
space-between 子项在测轴先分布在俩头,在平分剩余空间
背景线性渐变
1
2
语法
background:-webkit-linear-gradient(起始反向,颜色,颜色);
笔记未全,有时间了则更新全面的