前言

本文是 Pink 老师HTML CSS 教程学习后的补充记录。

参考：黑马程序员pink老师前端入门教程

HTML 补充

浏览器内核

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕在厕所里面了。
chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera blink 现在跟随chrome用blink内核。

标签

基本补充

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html> <!-- 用来说明你用的XHTML或者HTML是什么版本，告诉浏览器按照HTML5标准解析页面 -->

<html lang="en"> <!-- lang指定该html标签内容所用的语言，帮助翻译工具做识别等 -->

<meta charset="UTF-8" /> <!-- 字符编码，其他编码 GB2312 、BIG5 、GBK -->

<!-- 排版标签
b 和 strong 文字以粗体显示
i 和 em 文字以斜体显示
s 和 del 文字以加删除线显示
u 和 ins 文字以加下划线显示
-->

<a href="" target=""></a>
<!-- 如果 href 里面地址是一个文件或者压缩包，会下载这个文件 -->
<!-- target="_self"  默认窗口弹出方式，target="_blank" 新窗口弹出 -->
<!-- src 与 href 的区别：src 是引入资源的 href 是跳转url的，
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。-->
<!-- 锚点定位: 目标元素上添加 id="xxx" 属性，a 标签上 href="#xxx" -->

<!-- 字符补充 -->
空格符号&nbsp;
小于符号&lt;
大于符号&gt;

绝对路径

直接打开 HTML 文件绝对路径是根据盘符开始的，服务器运行根目录使用/开始（如localhost:3000）

表格元素属性

属性名 属性值 描述
align left,center,right 规定表格相对周围元素的对齐方式
border 1或者”” 规定表格单元是否拥有边框，默认为” “，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度
  • 跨行合并：rowspan=“合并单元格的s个数”
  • 跨列合并：colspan=”合并单元格的个数”

自定义列表标签

1
2
3
4
5
<dl>
     <dt>关注我们</dt>
     <dd>新浪微博</dd>
     <dd>联系我们</dd>
</dl>

表单

  • 表单属性：action=”url地址” method=”提交方式” name=”表单域的名称”
  • input 元素 type=”reset” 重置表单
  • checked 属性主要针对于单选框和复选框
  • selected 属性主要争对下拉选项

CSS 补充

杂乱补充

  • css 书写风格，使用大写的也可以（ HTML 不区分大小写），但是不推荐。
  • 列表清除点位：list-style：none；或者list-stype-type：none；

字体属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
p {
    /* 可以写多个字体（依次往后查找），如果是多个字母组成的需要使用 ''  */
    font-family: 'Times New Roman', Times, serif;
}

/* 字体的复合属性写法 */

div {
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Microsoft yahe';
    /* 复合属性：简写的方式  节约代码*/
    /* 顺序：font-style font-weight  font-size/line-height  font-family */
    font: italic 700 16px 'Microsoft yahe';
    /* 不需要设置的属性可以省略(取默认值)，但必须保留 font-size 和 font-family属性，
    否则 font 属性将不起作用 */
    font: 20px 'Microsoft yahe';
}

文本属性

1
2
3
4
5
6
7
8
9
10
11
/* text-decoration 属性用于装饰文本，可以给文本添加下划线，删除线，上划线等
none：默认  underline：下划线  overline：上划线  line-through：删除线 */

/* em 补充
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size 
注意：不要把em当作继承父元素的字体，子元素改变了font-size就是根据自己的了
*/

/* 颜色 #ffffff 简写成 #fff （前三个与后三个相同可以简写） */
/* 想要图片居中对齐,则是让它的父亲 p标签添加 水平居中的代码 */

Emmet 语法

HTML 部分

  1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成

  2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*

  3. 就可以快速生成3个div3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了

  4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p

  5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了

  6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $

  7. 如果想要在生成的标签内部写内容可以用 { } 表示

CSS 部分

  1. 比如 w200 按tab 可以 生成 width: 200px;

  2. 比如 lh26px 按tab 可以生成 line-height: 26px;

复合选择器

伪类选择器

1
2
3
4
5
6
7
8
9
10
11
/* 链接伪类，是利用交集选择器
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接 
注意：一般按照上面的顺序写法，否者会样式无效。
*/

/* :focus选择器 用于input元素
input:focus {}
*/

CSS 元素显示模式

1
2
3
4
5
6
7
8
/* 文字类的元素内不能使用块级元素 （h1-h6，p）
链接里面不能再放链接

在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点
①：和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)
②：默认宽度就是它本身内容的宽度(行内元素特点)
③：高度，行高，外边距以及内边距都可以控制(块级元素特点)
*/

CSS 背景

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
background-color: transparent /* 默认值 透明 */
background-image : none | url(url)  /* 背景图片（）设置成 none 或者 地址 */
background-repeat: repeat| no-repeat| repeat-x| repeat-y /* 背景图片平铺 */
background-position: x y /* 背景图片位置 */
 /* 
 1.参数是方位名词：top、center、bottom、left、right 
 （前后顺序无关，只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐） 
 2.参数是精准单位：第一个x坐标，第二个y坐标。只指定一个，那该一定是x坐标，另一个默认垂直居中。
 3.使用百分比：x轴上0%相当于left，100%相当于right（注意：并不是单一的当前元素宽高的百分比，
 如果以背景图单位左上角参考，相对的百分比应该是当前元素的宽减去背景图的宽）
 4.混合单位：第一个值是x坐标，第二个值是y坐标
 */    
background-attachment: scroll | fixed /* 背景图片固定默认值scroll */
background-size: px | 当前元素百分比 | cover | contain | auto /* 后面补充 */
/* 背景的复合写法
background: background-color background-image background-repeat background-attachment
            background-position/background-size background-origin background-clip
.example {
    background: aquamarine
    url(img.png)
    no-repeat
    scroll
    center center / 50%
    content-box
    content-box;
}
属性值之一缺失并不要紧，只要按照此顺序设置其他值即可（如不写 background-attachment ）。
*/

CSS 三大特性

  1. 层叠性：相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。

  2. 继承性：子继承父元素部分样式，font家族样式（注意继承的样式优先度最低，会被浏览器默认样式覆盖，如：a标签的color属性），行高可不写单位相对于当前元素的字体大小。

  3. 优先级：权重来比较。

    important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承

    注意：权重计算不会出现进位，无论多个 class 都不会比一个 id 大

    继承的权重为0

盒子模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 边框：下面的调换顺序无影响，border-top 单独设置
border : borde-width || border-style || border-color
控制浏览器绘制表格边框的方式，它控制相邻单元格的边框，合并边框
border-collapse : collapse;
box-sizing: border-box; 元素的总高度和宽度包含内边距和边框(padding 与 border)

*/

/* padding 内边距
如果盒子本身没有指定width或height属性，则此时padding则不会撑开盒子没有指定的宽或高的大小
*/

/* margin 外边距
1.外边距塌陷问题：相邻块元素垂直外边距的合并，嵌套块元素垂直外边距的塌陷
嵌套元素解决：可以为父元素定义上边框，可以为父元素定义上内边距，可以为父元素添加 overflow: hidden
还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题。后面会进行总结。
*/

/* 行内元素设置 上下margin不生效 */

CSS 圆角

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 边框圆角，设置一个矩形左右圆角（高度一般）*/
border-radius:length; /* 一个代表全部；四个代表左上角，右上角，右下角，左下角；两个则是对角*/
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
/* 圆角的水半径于垂直半径分别相对于宽高 */
border-radius: 2em 1em 4em / 0.5em 3em; 
/* 等价于 */
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

盒子阴影与文字阴影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
box-shadow: h-shadow v-shadow blur spread color inset;
/*
h-shadow 必需。水平阴影的位置，允许负值
v-shadow 必需。垂直阴影的位置，允许负值
blur 可选。模糊距离。（理解为阴影的虚实）
spread 可选，阴影的尺寸。
color 可选，阴影的颜色。
inset 可选，将外部阴影（outset）改为内部阴影
注意：默认的是外阴影（outset），但是不可以在后面写这个单词，否则导致阴影无效
*/

text-shadow: h-shadow v-shadow blur color
/*
h-shadow 必需。水平阴影的位置，允许负值
v-shadow 必需。垂直阴影的位置，允许负值
blur 可选。模糊距离
color 可选，阴影的颜色。
*/

CSS 浮动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
设置 float 后元素变成类似于inline-block 不会继承父元素的宽
注意：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
（三个div，第一个左浮动、第二个标准流、第三个左浮动，第三个不会影响第二个所以不会于第一个一起挨着）
清除浮动：
1.额外标签法(隔墙法) <div style="clear:both"></div>
2.父级添加overflow属性方法，将其属性值设置为hidden,auto或scroll
3.使用after伪元素清除浮动
4.使用双伪元素清除浮动
.clearfix:before,.clearfix:after{
   content:"";
   display:table;
}
.clearfix:after {
     clear:both;
}

*/

PS 补充

PS 有很多的切图方式：图层切图、切片切图、PS 插件切图等。

  • 图层切图：右击图层 ➡导出 PNG 切片，多个图片按住Shift选中 后Ctrl+E合并图层后再导出。
  • 切片切图
  • 插件切图：Cutterman官网，PS 必须是完整版，不能是绿色版。

定位

  • 默认的值：position:static。

  • 绝对定位的祖先级没有非static的情况下，相对于浏览器窗口而非body。

  • 绝对定位与固定定位是脱离文档流的。

  • 固定定位小技巧，固定在版心右侧位置：

    1.让固定定位的盒子 left: 50% 走到浏览器可视区（也可以看做版心）的一半位置。

    2.让固定定位的盒子 margin-left 版心宽度的一半距离。多走版心宽度的一半位置。

  • 粘性定位：position:sticky 相对于浏览器的可视窗口、占有原来的位置、必须添加top，left，right，bottom其中一个才有效。

  • 浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题。

  • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度

  • 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

界面样式

鼠标样式cursor

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

轮廓线outline

input添加outline:0; 或者outline: none;样式后，就可以去掉默认的蓝色边框

防止拖拽文本域

textarea { resize: none; }

vertical-align

  • 使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
  • 官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效
1
vertical-align: baseline | top | middle | bottom

图片底侧空白缝隙解决

  • 图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐（给图片加边框就可以看见）

主要解决办法有两种：

  1. 给图片添加 vertical-align: middle | top | bottom 等 （推荐）
  2. 把图片转换为块级元素 display:block 因为块级元素不会有 vertical-align 属性

溢出文字省略

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 1.先强制一行内显示文本 */
white-space: nowrap;  /*默认 normal 是自动换行，nowrap是强制一行显示文本*/

/* 2.超出的部分隐藏 */
overflow: hidden;

/* 3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;
/*ellipsis:省略号*/

/*-----------*/

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient : vertical;

直角三角形

1
2
3
4
5
6
7
8
9
10
.box1 {
    width: 0;
    height: 0;
    /* 1.只保留右边的边框有颜色 */
    border-color: transparent red transparent transparent;
    /* 2. 样式都是solid */
    border-style: solid;
    /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
    border-width: 100px 50px 0 0 ;
}

HTML5

新增标签

1
2
3
4
5
6
7
<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签
<video>：视频标签，支持mp4、WebM、ogg三种视频格式（浏览器基本都支持mp4）
属性 值 描述
autoplay autoplay 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls controls 向用户显示播放控件
width pixels(像素) 设置播放器宽度
height pixels(像素) 设置播放器高度
loop loop 播放完是否继续播放该视频,循环播放
preload auto(预先加载视频)none(不应加载视频) 规定是否预加载视频(如果有了autoplay 就忽略该属性)
src url 视频url的地址
poster lmgurl 加载等待的画面图片
muted muted 静音播放 
1
2
3
4
5
6
7
8
<!-- 谷歌浏览器禁用了自动播放（需要开启muted静音才可以） -->
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg">
</video>
<!-- 使用 source 添加不同视频格式 -->
<video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
</video>
1
2
3
4
5
6
<audio>：音频标签，支持mp3、Wav、ogg三种格式（浏览器基本都支持mp3）
<audio src="文件地址" controls="controls"></audio>

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
<!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
<!-- 因为不同浏览器支持不同的格式，也可采取多个source -->

新增input

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

新增表单属性

属性 值 说明
required required 表单拥有该属性表示其内容不能为空，必填
placeholder 提示文本 表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete off/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项，默认已经打开。如autocomplete=“on” ,关闭autocomplete=“off”，需要放在表单内，同时加上name属性，同时成功提交
multiple multiple 可以多选文件提示

CSS3

新增选择器

属性选择器

选择符 简介
E[att] 选择具有att属性的E元素
E[att=“val”] 选择具有att属性且属性值等于val的E元素
E[att^=“val”] 匹配具有att属性且值以val开头的E元素
E[att$=“val”] 匹配具有att属性且值以val结尾的E元素
E[att*=“val”] 匹配具有att属性且值中含有val的E元素

注意：类选择器，属性选择器，伪类选择器，权重为10

伪类选择器

选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type（n） 指定类型E的第n个

注意：

  • n 是从0开始的，前三个相对于父元素（所有元素都排列）、后面的则指定盒子排列
  • nth-child 对父元素里面所有孩子排序选择(序号是固定的)，先找到第n个孩子，然后看看是否和E匹配
  • nth-of-type 对父元素里面指定子元素进行排序选择，先去匹配E,然后再根据E 找第n个孩子
  • 伪类选择器的权重为10

伪元素选择器

  • before 和 after 必须有 content 属性
  • before 在内容前面，after 在内容后面
  • before 和 after 创建的是一个元素，但是属于行内元素
  • 创建出来的元素在 Dom 中查找不到，所以称为伪元素
  • 伪元素和标签选择器一样，权重为 1

filter背景滤镜

CSS属性将模糊或颜色偏移等图形效果应用于元素(图片变模糊)

1
2
3
4
img {
    /* blur 是一个函数，小括号里面的数值越大，图片越模糊，注意数值要加px单位 */
    filter: blur(5px);
}

transition 过渡动画

1
2
3
transition: 要过渡的属性 花费时间 运动曲线 何时开始
运动曲线：默认是ease(可以省略)，单位是秒(必须写单位)
何时开始：可以设置延迟触发事件，默认是0s(可以省略)

transform 变形

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
/* 注意：对行内标签没有效果 */
transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

/* 旋转 ratate
rotate 里面跟度数，单位是 deg 比如 rotate(45deg)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点 */
transform: rotate(度数)

/* 设置元素转换的中心点 transform-origin
注意后面的参数x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点(50% 50%)
还可以给x y 设置 像素或者方位名词(top bottom left right center)
*/
transform-origin: x y;

/*
注意其中的x和y用逗号分割
transform:scale(1,1): 宽和高都放大一倍，相当于没有放大
transform:scale(2,2)：宽和高都放大了2倍
transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小
sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒
*/
transform: scale(x,y);

/* 
其顺序会影响转换的效果(先旋转会改变坐标轴方向)
当我们同时有位移和其他属性时候，记得要将位移放到最前面
transform:translate() rotate() scale() 移动-旋转-缩放
*/

animation 动画

1
2
3
4
5
6
7
8
@keyframes 动画名称 {
   0%{
        width:100px;
   }  
   100%{
        width:200px;
   }
}

动画常用属性

属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了animation-play-state属性。
animation-name 规定@keyframes动画的名称。（必须的）
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function 规定动画的速度曲线，默认是“ease”。
animation-delay 规定动画何时开始，默认是0。
animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite
animation-direction 规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是”running”,还有”paused”。
animation-fill-mode 规定动画结束后状态，保持forwards回到起始backwards

animation-timing-function 的值

值 描述
linear 动画从头到尾的速度是相同的。匀速
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
steps() 指定了时间函数中的间隔数量（步长） 
1
2
3
4
5
6
7
/* 
animation：动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态
*/

animation: myfirst 5s linear 2s infinite alternate;
/* 添加多个动画使用,隔开 */
animation：xxx,xxx;

3D 转换

  • translform:translateX(100px)：仅仅是在x轴上移动
  • translform:translateY(100px)：仅仅是在Y轴上移动
  • translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）
  • transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
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
/* translate3d */
transform: translateX(100px) translateY(100px) translateZ(100px);

transform: translate3d(100px, 100px, 100px) 

/* 透视 perspective
近大远小，单位是像素（值越小就越近观察越大，有translateZ盒子大小才变化、rotate3d等才会生效）
添加透视后translateZ越大观察的就越大
透视写在被观察元素的父盒子上面的 */

transform: rotateX(45deg) ：沿着X轴正方向旋转45度
transform: rotateY(45deg) ：沿着Y轴正方向旋转45度
transform: rotateZ(45deg) ：沿着Z轴正方向旋转45度
transform: rotate3d(x,y,z,deg) ：沿着自定义轴旋转 deg为角度(了解即可)
/*沿着X轴旋转45deg*/
transform: rotate3d(1,0,0,45deg) 
/*沿着对角线旋转45deg*/
transform: rotate3d(1,1,0,45deg) 
/* 添加了旋转后给父元素加上透视会有立体感效果会更好，如 perspective:500px */
/*
左手的手拇指指向 x轴的正方向，其余手指的弯曲方向就是该元素沿着x轴旋转的方向
左手的手拇指指向 y轴的正方向，其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）
*/

/* 3D 呈现
控制子元素是否开启三维立体环境
代码写给父级，但是影响的是子盒子
*/
transform-style: flat （子元素不开启3d立体空间 默认的） | preserve-3d （子元素开启立体空间）

/* 一般3d效果，都是要加透视与3D呈现这两者个属性 */

移动端

视口viewport

布局视口layout viewport

  • 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
  • iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

视觉视口 visual viewport

  • 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
  • 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口 ideal viewport

  • 为了使网站在移动端有最理想的浏览和阅读宽度而设定
  • 理想视口，对设备来讲，是最理想的视口尺寸
  • 需要手动添写meta视口标签通知浏览器操作
  • meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。

meta视口标签

1
2
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, 
maximum-scale=1.0, minimum-scale=1.0">

content 的属性

属性 解释说明
width 宽度设置的是viewport宽度，可以设置device-width特殊值(宽度是设备宽度)
initial-scale 初始缩放比，大于0的数字
maximum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes或no（1或0）

二倍图

物理像素和物理像素比

  • 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8 是 750* 1334
  • 我们开发时候的1px 不是一定等于1个物理像素的
  • PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同
  • 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
  • PC端 和 早前的手机屏幕 / 普通手机屏幕: 1CSS像素 = 1 物理像素的

我们准备的图片，比我们实际需要的大小大2倍，这种方式就是二倍图

CSS初始化 normalize.css

官网地址：http://necolas.github.io/normalize.css/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;

/*点击高亮我们需要清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;

/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;

/*禁用长按页面时的弹出菜单*/
img,a { 
    -webkit-touch-callout: none;
}

flex 布局

  • flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
  • 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

背景渐变

1
background-image: linear-gradient(to bottom, #e1f0f0, #1f99b0);

值

角度 英文 作用
0deg to top 从下向上
90deg to right 从左向右
180deg to bottom 从上向下
270deg to left 从右向左
to top left 右下角到左上角
to top right 左下角到右上角

媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media mediatype and|not|only(media feature){
    CSS-code
}
/*
1.mediatype 媒体类型：
（all用于所有设备，print用于打印机和打印预览，screen用于电脑屏幕、平板电脑、智能手机等）
2.关键字：
（and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。）
3.媒体特性（width、max-width、min-width）
*/
/* link 媒体引入 */
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

rem 布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 使用 scss 自动计算
注意：单独除法无效果需要添加括号
p {
    font: 10px/2px;
    font: (10px/2px);
}
编译后
p {
    font: 10px/2px;
    font: 5px;
}
*/

/* flexible.js 使用
flexible 中将页面画分为 10 等份，所以 10rem 应该是设计稿的宽度
其他的px转成rem为：当前宽度 / (设计稿的高度/10)
*/

/* 超过了 750px （flexible中自定义rem大小）*/
@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}