大前端学习笔记--持续随缘更新

前端知识&HTML常用标签

20200210

1、浏览器及内核介绍:

chrome谷歌:
    特点——简洁、快速、安全
    内核——webkit,Blink
    费用——收费
    前缀—— -webkit-
Firefox火狐——Mozilla公司:
    特点——非盈利、Gecko项目开源
    内核——Gecko
    前缀—— -moz-
Safari苹果——苹果公司:
    特点——移动端
    内核——webkit
    前缀—— -webkit-
Opera欧朋——挪威 opera software ASA:
    特点——自主研发presto内核
    内核——presto、blink
    前缀—— -o-
IE——Microsoft:
    特点——IE和Windows系统捆绑推向市场
    内核——trident
    前缀—— -ms-
1)使用trident内核的IE,及一些国产浏览器
2)使用Gecko内核的Mozilla Firefox
3)使用blink内核的chrome、opera
4)使用webkit内核的Safari、chrome,及一些国产的双核浏览器

2、前端页面的构成:

1)HTML——超文本标记语言 Hypertext Markup Language,结构层
  结构层由HTML标记语言创建,负责页面的语义 
2)css——层叠样式表 cascading style sheets,样式层或表现层
  表现层负责页面的样式
3)JavaScript——脚本语言,行为层
  行为层主要负责描述页面的动态效果

3、什么是HTML?

HTML是超文本标记语言。
HTML是使用标记来描述网页的一种语言。
HTML是的一种语法简单、结构清晰的语言

4、HTML文档——网页

     扩展名:.html
    文件名的格式:主文件名.扩展名

5、HTML标签语法:

标记——标签、元素
HTML标签:由尖括号包围的关键词
单标签:<标签名 />或<标签名>
双标签:<标签名>[内容]</标签名>
<标签名 属性名=“属性值”>[内容]</标签名>
空元素严格模式下在开始标签中进行关闭

HTML的注释:ctrl + /
<!-- HTML注释内容 -->

6、HTML文档的结构

<!DOCTYPE html> <!-- 文档声明 -->
<!-- <!doctype> 文档声明也称为文件类型定义(DTD),作用告诉浏览器给文档的版本信息,让浏览器的解析器知道应该用哪种规范来解析文档。必须写在HTML文档的第一行,是一条声明语句,不是一个HTML标签 
<!DOCTYPE html> 用HTML5的语法去解析页面
-->
<html lang="en"><!-- 网页的根元素,双标签,html标签和head标签是父子关系也称嵌套关系-->
    <head> <!--网页的头部信息,双标签,head标签和body标签是兄弟关系也称并列关系-->
        <meta charset="UTF-8"><!--HTML文档的元信息,单标签
            字符集:ASCII(0-9、大写和小写英文字母、一些特殊符号),国内常用——utf-8、GBK
            utf-8——国际编码,通用型较好
            GBK——包含全部中文字符,其中针对简体汉字的编码方式GB2312
        -->
        <title>网页基本结构</title><!--网页标题-->
    </head>
    <body><!--网页的主体内容,双标签-->
        
    </body> 
</html>

 

7、常用标签:

块级标记:
1)标题标签:h系列标签
    h1~h6大小依次减小,重要程度依次减弱;
    h1在同一个网页中只能使用一次;其他标签可以重复使用
    特点:默认情况下宽度100%;默认情况下高度自适应;独立成行;自带间距和加粗
2)段落标记:p标签
    特点:默认情况下宽度100%;默认情况下高度自适应;独立成行;自带间距
3)div标签:无语义
    语法:<div>[内容]</div>
    特点:默认情况下宽度100%;默认情况下高度自适应;独立成行
其他标签:
4)br标签:强制换行标签——不产生新段落的情况下进行换行
    语法:<br />或 <br>
5)hr标签:水平分割线标签
    语法:<hr />或 <hr>
    特点:默认自带间距、自带边框
行级标签:
文本格式化标记——
6)span标签:万能标签,用于区分样式,双标签

7)b标签:是一个实体标签,用来呈现文字的粗体效果
8)strong标签:是一个语义标签,作用加强字符的语义,用来表示重要文本,在文本中呈现粗体效果

9)i标签:定义与文本中其他部分不同的部分,将这一部分文本呈现为斜体,没有特殊语义
10)em标签:用来呈现被强调的文本,在文本中呈现斜体效果

11)sub标签:定义下标
12)sup标签:定义上标

13)del标签:定义删除线
特点:默认情况下宽度自适应、默认情况下高度自适应、默认情况下横向显示(相邻的行内元素会排列在同一行中,直到一行排不下,才会换行

14)a标签:超链接标签
    语法:<a href="链接的URL地址" title="鼠标悬停时显示的提示信息" target="_blank|_self">链接文本</a>
    target属性:
        _blank 在新窗口打开
        _self 在当前窗口打开
    特点;默认情况下宽度自适应、默认情况下高度自适应、默认横向显示、默认文字颜色为蓝色,访问过后文字颜色为紫色、自带下划线
    可以使用#作为网址的占位符,代表当前页面
    锚点使用:跳转到长页面的某个位置、跳转到不同页面的目标位置
        定义锚点:<a name="锚点名称"></a> <div id="锚点名称">[内容]</div>
        引用锚点:<a href="#锚点名称">链接文字</a> <a href="demo-03.html#box1">demo-03.html box1</a>

行块级标签:
15)img标签:图片标签
    语法:<img src="图片的路径" title="鼠标悬停时呈现的提示信息" alt="图片占位">

标签&语义化&优先级&文本样式

20200211

1、路径:

1)绝对路径:带有域名的文件的完整路径或盘符下的某个路径
2)相对路径:/表示根目录   ./表示当前目录,可以省略   ../表示上一级目录   ../../表示上上级目录  文件名/ 引用下一级目录

2、语义化

什么是html语义化?
根据页面内容的结构,选择合适的标签,便于开发者阅读和写出更优雅的代码,便于浏览器、搜索引擎解析,有利于SEO,便于团队开发和维护。如:标题用h1~h6,段落使用p标签
语义化的好处:
1)在没有css的情况下,页面也能呈现出较好的内容结构;
2)语义化使代码更具有可读性,便于团队开发和维护;
3)语义化有利于用户体验
4)语义化有利于SEO搜索引擎优化

3、特殊字符:

空格 &nbsp;
小于<  &lt;
大于> &gt;
&   &amp;
已注册  &reg;
版权符号  &copy;
商标  &trade;
                  等

文本样式&表格&列表&表单

20200212

1、什么是css?
      css——层叠样式表 cascading style sheet
      主要用于html页面文本内容、图片外形、版本的布局等外观样式的设置

2、css语法规则

1)语法:
    选择器 声明语句   ;   声明语句    ;    声明语句
    div{ width: 200px; height: 200px; background-color: red; }
        属性名称 : 属性值
2)注释:
    /* css注释内容 */

3、css样式的引入方式

1)行内样式——内联式
    语法:<div style="width: 100px; height: 100px;"></div>
    适用于:个别元素添加特殊样式时
    缺点:作用范围小,尽量不要使用

2)内部样式——嵌入式
    语法:
        <head>
            <style type="text/css">css样式</style>
        </head>
    适用于:单个html文档需要特殊样式时
    优点:相对于行内样式,代码能够复用

3)外部样式——外链式,引入的是扩展名为.css的文件
    语法:
        <head>
            <link href="css文件的路径" rel="stylesheet" type="text/css">
        </head>
        rel属性:当前文档与被链接文档之间的关系。只有stylesheet得到所有浏览器的支持,表示外部文件的类型是css文件
    适用于:多个html文档拥有相同样式的时
    创建步骤:
    (1)新建一个扩展名为.css的文件,保存到网站目录的css文件夹中
    (2)打开新建的.css文件,设置编码方式:
        @charset "utf-8";
    (3)在html文档中链接后缀名为.css的文件:
        <link href="css文件的路径" rel="stylesheet">

4)样式表的优先级:
    行间样式>内部样式>外部样式
    外部就近原则

4、基础选择器:选择器——找对象

1)通配符选择器 *:单独使用匹配所有元素

2)元素选择器——标签选择器、类型选择器
    结构中:<标签名></标签名>
    样式中:标签名{ css样式 }

3)class选择器——类选择器
    结构中:<标签名 class="类名"></标签名>
    样式中:.类名{ css样式 }
    选择器的命名规范:
        名称尽量有含义;
        名称建议以英文字母开头,可以包含字母、数字、连字符(-_);
        除了连字符之外的特殊符号不允许使用(包含空格);
        不能使用中文汉字、纯数字,不能以数字开头;
        类名会区分大小写

4)id选择器
    结构中:<标签名 id="id名"></标签名>
    样式中:#id名{ css样式 }
    注意:id名称在本页中只能出现一次

5)选择器的优先级:一般来说选择器的权值越大,优先级越高
    基本选择器的权值由小到大分别为:
    通配符选择器(0)<标签选择器(1)<class选择器(10)<id选择器    (100)<行间样式(1000)
    
    如果选择器的权值相同,后写的内容会覆盖先写的内容;
    行间样式拥有最高优先级但是高不过!important
         background-color: lightcoral !important;

5、文字属性

1)font-size 属性:字号,单位像素
    浏览器的默认字号为16像素

2)font-family属性:字体、字族
    如果字体名称包含空格,或字体名称为中卫,字体名称上加引号;
    多个字体名称作为一个回退系统来保存,如果第一个字体不被浏览器支持,则尝试下一个,多个字体之间                        
    用逗号隔开;
    中英文混排的文字,英文字体要排在中文字体前面;
    Arial,"Times New Roman","微软雅黑","宋体" 

3)font-weight属性:文字加粗,范围100~900之间,100~400之间都是normal
    font-weight: normal; 正常(相当于400)
    font-weight: bold; 加粗(相当于700)
    font-weight: 900; 

4)font-style属性:文字样式
    font-style: normal; 正常
    font-style: italic; 斜体字

5)line-height属性:文字的行高。文字设置行高后,会在行高的范围内垂直居中,但行高撑不起盒高。没有    
   设置单位的行高值,表示字号的倍数

6)font属性
    font: [font-style] [font-weight] font-size[/line-height] font-family;
    注意:只有同时具有font-size属性和font-family属性时,简写生效

6、文本属性

1)color属性:文字颜色
    英文名称:transparent透明、red红色、green绿色、blue蓝色
    十六进制色值:由0-9a-f组成,六位十六进制数  红色#ff0000--#f00   #332344   #332244--#324
    rgb(r,g,b):r-red红色 g-green绿色 b-blue 蓝色 取值范围0-255
    rgba(r,g,b,a):r-red g-green b-blue a-alpha透明度,取值范围0-1之间,0表示完全透明,1表示完全        
    不透明,0~1之间表示半透明效果

2)text-align属性:文本水平对齐方式,设给块级元素。图片的水平对齐也可以设置
    text-align: left; 默认值,左对齐
    text-align: center; 居中对齐
    text-align: right; 居右对齐

3)text-decoration属性:文本装饰线
    text-decoration: none; 去掉文本装饰线
    text-decoration: underline; 下划线
    text-decoration: overline; 上划线
    text-decoration: line-through; 删除线

4)text-indent属性:文本块首行缩进,单位px、em(字符宽度的倍数)、百分比(相对于父元素宽度的百分之多少)

7、css长度单位

px:相对于显示器屏幕分辨率而言,值固定,计算比较容易

em:相对长度单位,相对于父元素的font-size属性值而言
    浏览器默认字号为16像素,未经调整的浏览器都符合1em=16px

    特点:值不固定;会继承父元素的字号大小

%:相对长度单位

rem:相对于根元素的字体大小的单位,是css3新增的单位
    浏览器在默认情况下,1rem = 16像素。在IE8及更早版本的浏览器中不兼容

8、html中的列表

1)无序列表
    语法:
        <ul>
            <li></li>
            <li></li>
        </ul>
    特点:
        宽度100%;高度自适应;独立成行;自带间距、填充、自带列表符(清除自带列表符list-style: none;)

2)有序列表
    语法:  
        <ol>
            <li></li>
            <li></li>
        </ol>

3)自定义列表:
    语法:  
        <dl>
            <dt>定义列表的标题,或专业术语</dt>
            <dd>定义列表项或对专业术语的解释</dd>
            <dt>标题</dt>
            <dd>列表项</dd>
        </dl>
    注意;浏览器显示,dd中的内容会默认缩进显示

9、表格语法

可以将数据有效地组织在一起,并以网格的形式显示。

特性:有内容的、没有固定宽度的单元格,由内容撑开;
      没有固定宽度的空单元格,默认平分表格宽度

语法:
<table border="1">
    <caption>表格标题</caption>
    <tr><!--行-->
        <th>表头单元格,默认文字加粗,并且水平、垂直居中</th>
        <th>表头</th>
    </tr>
    <tr>
        <td>表格单元格,默认水平居左,垂直居中</td>
        <td>表格单元格</td>
    </tr>
    <tr>
        <th>表头单元格</th>
        <td>表格单元格</td>
    </tr>
</table>
<table border="1">
    <thead><!--表格的头,用来放置标题之类的东西-->
        <tr>
            <th>表头单元格</th>
            <th>表头单元格</th>
        </tr>
    </thead>
    <tbody><!--表格的身体,用来放置数据-->
        <tr>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
    </tbody>
    <tfoot><!--表格的底部,用来放置脚注之类的内容-->
        <tr>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tfoot>
</table>

10、表格属性

border属性:表格边框
    border="1|0" border="0"表格没有边框
cellpadding属性:单元格内容和单元格边框之间的距离,单位像素
    <table border="1" cellpadding="20"></table>
cellspacing属性:单元格之间的间距,单位像素,默认大小为2像素
    <table border="1" cellspacing="2"></table>

合并单元格:
    跨行合并单元格:rowspan
    跨列合并单元格:colspan

11、表格常用css属性

 border-collapse属性:设置表格的行和单元格的边是否合并还是独立
        border-collapse: separate; 边框独立
        border-collapse: collapse;相邻边合并
    border-spacing属性:当表格边框独立时,行和单元格的边框在横向和纵向上的间距
        如果两个长度值,第一个用于横向间距,第二个用于纵向间距
        如果只有一个长度值,这个值作用于横向和纵向的间距
        border-spacing: 10px 20px;
表格优点:方便排列一些有规律的、结构均匀的内容或数据
表格的缺点:产生垃圾代码、影响页面下载时间、灵活性不打、难于修改

12、表单属性

    用于采集不同类型的用户输入数据,发送给服务器,实现用户和服务器之间的数据交互

1)表单标签form:用于申明表单,定义数据采集范围
    注意:一个页面可以有多个表单标签,但是标签之间是相互独立的,不能嵌套;
    用户向服务器发送数据时一次只能提交一个表单中的数据;如果要提交多个表单,需要使用JavaScript中的异步交互方式来实现
语法:<form action="提交表单时向何处发送表单数据" method="get|post" name="表单名称">表单元素</form>
    method属性:提交表单时所用的http方法,默认为get方式
        get方式:将数据作为URL地址的一部分发送给服务器;安全性比较低;有长度限制;请求的数据可以被缓存,能够保留在浏览器的历史记录中;能作为书签被收藏。
        https://www.baidu.com/?username=123&psd=asd
        https://www.baidu.com/?参数名=参数值&参数名=参数值
        post方式:将数据隐藏在http数据流中进行传输;安全性比get方式要高;对数据长度没有限制;请求数据不会被缓存,也不会再浏览器的历史记录中保存,更不会作为书签被收藏。
        https://www.baidu.com/

2)input表单域
    <input type="" name="" value="初始值">
    <input type="text" > 单行文本输入框
    <input type="password" placeholder="提示信息"> 密码框

    <input type="radio"> 单选按钮
    <input type="checkbox"> 复选框
    checked属性:用于单选按钮和复选框的默认选中,可以直接在input元素中写checked或checked="checked"

    <input type="submit" value="提交"> 提交按钮
    <input type="reset" value="重置"> 重置按钮
    <input type="button" value="">普通按钮

    <button>按钮</button>,默认类型为submit
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>

    <input type="file"> 上传文件
        注意:实现后台上传文件,必须在form表单中添加enctype属性
        <form action="#" enctype="multipart/form-data"></form>
    <input type="image" src="图片的路径" alt="提示性文字"> 图片形式的按钮
        注意:input必须与src属性和alt属性配合使用
    <input type="hidden" value="值"> 隐藏域。对用户是不可见的,目的是收集或发送信息到服务器,有利于程序处理信息

3)select下拉列表
    <select name="">
        <option value="html" selected>html</option>/*列表项,加载时预先选定的选项*/
        <option value="css">css</option>
    </select>
    selected属性,用于下拉列表的默认选中,可以直接写selected或selected="selected"

4)textarea多行文本域:一般用于需要输入大量文本的位置
    <textarea cols="1" rows="3"></textarea>
    cols属性:cols="1"表示宽度,一行最多可以输入一个汉字,两个字符
    rows属性:表示行数
    textarea{ resize: none; } 禁止用户调整多行文本域的大小

5)label标签:表单标注——扩大点击范围,一般与单选按钮、复选框组合使用。关联式方式:
    显示方式:
        <input type="checkbox" id="eat"> 
        <label for="eat">吃饭</label>
    隐式方式:
        <label><input type="checkbox">吃饭</label>

6)表单相关属性:
    readonly属性:只读属性,不能修改,可以被提交
    disabled属性:禁用表单元素,被禁用的元素不可用,不可点击,不会被提交

    maxlength属性:允许输入的最多的字符数
    size属性:控制input的长度

    value属性:初始值
    placeholder属性:文本域的提示信息

    checked属性:用于单选按钮和复选框的默认选中
    selected属性,用于下拉列表的默认选中

css选择器&盒模型

20200213

1、css选择器进阶——复合选择器

1)后代选择器——选择器之间用空格隔开
    选择器1 选择器2{ css样式 } /*在选择器1范围内的所有的选择器2全部生效*/

2)子代选择器——只能选择第一级子元素
    父选择器>子选择器{ css样式 }

3)群组选择器——分组选择器,选择器之间用逗号隔开
    选择器1, 选择器2{ css样式 } /*选择器1和选择器2都具有相同的属性*/

4)交集选择器——两个以上的选择器组成
    结构中:<div class="active"></div>
    样式中:div.active{ css样式 }

5)伪类选择器:用来添加选择器的特殊效果
   
    语法:选择器:伪类{ css样式 }
    
    链接的不同状态都可以以不同的方式显示:
    a:link{ 链接的默认样式 }
    a:visited{ 链接访问过后的样式 }
    a:hover{ 鼠标悬停到链接上的样式 }
    a:active{ 鼠标按下时的样式 }
    四个伪类状态都生效: LV-Ha

2、盒模型Box Model

css盒模型也称为框模型,在页面布局中,将页面的元素合理有效地组织在一起,形成一套完整的、行之有效的原则和规范。包含:元素内容content、内填充padding、边框border、外间距margin等几个要素。css盒模型的本质是一个盒子,封装周围的html元素。

标准盒模型的计算公式:
  盒子的实际宽度= width属性+ padding-left + padding-right + border-left + border-right
  盒子的总宽度= width属性 + padding-left + padding-right +border-left + border-right + margin-left + margin-right
  盒子的实际高度= height属性+ padding-top + padding-bottom + border-top + border-bottom
  盒子的总高度= height属性+ padding-top + padding-bottom +border-top + border-bottom + margin-top + margin-bottom
盒模型的相关属性:

1)内容属性:
    width属性:元素的宽度
        属性值:auto|数值|inherit
    height属性:元素的高度
    max-width属性:最大宽度    min-width属性:最小宽度
    max-height属性:最大高度    min-height属性:最小高度

2)padding属性:内填充、内边距,元素边框和元素内容之间的空白区域
    单边内填充:
        padding-top属性:上内填充
        padding-right属性: 右内填充
        padding-bottom属性:下内填充
        padding-left属性: 左内填充
    复合写法:
        padding: npx;
        padding: npx mpx;
        padding: npx mpx xpx;
        padding: npx mpx xpx ypx;
    注意:百分比——上下内填充与左右内填充百分数值是相对于父元素的width属性计算的。

3)border属性:边框
    border-width属性:边框的宽度,属性值单位像素
    border-style属性:边框的样式
        border-style: none; 没有边框
        border-style: solid; 单实线
        border-style: double; 双实线
        border-style: dashed; 条状虚线
        border-style: dotted; 点状虚线
    border-color属性:边框颜色。默认的边框颜色是元素本身的前景色
    复合写法:
        border-width: npx; 
        border-width: npx mpx; 
        border-width: npx mpx xpx; 
        border-wdith: npx mpx xpx ypx;
        border-color属性、border-style属性
    单边属性:
        border-top属性:上边框
            border-top-width属性:上边框的宽度
            border-top-style属性:上边框的线型
            border-top-color属性:上边框的颜色
            border-top: border-top-width border-top-style border-top-color; 
        border-right属性:右边框
        border-bottom属性:下边框
        border-left属性:左边框
    border简写:
        border: border-width border-style border-color; 

 4)margin属性:外间距、外边距——定义元素周围的空间
    单边外间距:
        margin-top属性:上外间距
        margin-right属性:右外间距
        margin-bottom属性:下外间距
        margin-left属性:左外间距
    复合写法:  
        margin: npx;
        margin: npx mpx;
        margin: npx mpx xpx;
        margin: npx mpx xpx ypx; 
    盒子的水平居中:
        width属性 
        margin: 0 auto; 
    注意:行级元素实际不占上下外边距
    margin值得问题:
    (1)父子关系外边距塌陷问题——元素嵌套关系,子元素的margin值会叠加给父元素
    现象:给子元素设置外间距,会和父元素的外间距合并,最终会表现其中较大的外间距的值
    原因:父盒和子盒公用一个上外间距的区域
    解决方法:
        给父元素设置边框或内填充;
        给父元素添加overflow:hidden属性,触发BFC,改变父元素的渲染规则
    (2)兄弟关系的外边距叠加——元素并列关系,垂直方向上相邻的margin值相遇会出现叠加
    现象:上一个盒子设置下外间距,下一个盒子设置上外间距,两个值相同时,取当前值,如果两个值不同,取较大值
    原因:上、下两个兄弟关系的盒子共用一个外间距区域
    解决方法:  给两个盒子都套一个父盒子,父盒添加overflow属性

背景属性&css特性&标签分类&浮动属性

20200214

1、背景属性

1)background-color属性:背景颜色,默认值为transparent透明
    关键词|十六进制色值|rgb(r,g,b)|rgba(r,g,b,a)
    背景颜色应用于内容区、padding、border区域
2)background-image属性:背景图片
    语法:background-image: url(图片的路径); 
        background-image: none; 表示无背景图,默认值
3)background-repeat属性:背景图是否重复
    background-repeat: repeat; 默认值,背景图在水平方向和垂直方向重复
    background-repeat: repeat-x; 背景图在水平方向重复
    background-repeat: repeat-y; 背景图在垂直方向重复
    background-repeat: no-repeat; 背景图不重复
4)background-position属性:背景图的位置
    语法:background-position: xpos ypos;
    属性值:
        关键词:left|center|right   top|center|bottom
            保证不超过两个关键词,一个是水平方向,一个是垂直方向;如果只出现一个关键词,另一个关键词默认center
        长度值:图像的左上角0px 0px,负值向盒外,正值向盒内
        百分比:图像在左上角0% 0%,右下角100% 100%
            如果只有一个百分比数值,这个值作为水平方向的值,垂直方向将假设为50%
5)background属性:
    background: background-color background-image background-repeat background-position;
    注意:如果某一个属性不需要可以省略

2、css的三大特征

1)层叠性
    1)样式冲突,遵循就近原则
    2)样式不冲突,不会层叠,但会叠加
2)继承性——子元素会继承父元素的样式
    可以继承的属性:
        字体系列属性——font-family字体系列属性、font-size字号属性、font-weight文字加粗属性、font-style文字的风格属性、line-height行高属性
        文本系列属性——text-indent文本缩进属性、text-align文本水平对齐方式属性、color文本颜色属性
        列表中list-开头的属性
3)优先级
    选择器的权值越大,优先级越高;权值相同时,谁在后面显示谁
    基本选择器权值:通配符选择器(0)、标签选择器(1)、class选择器(10)、id选择器(100)
    复合选择器权值计算方式:组成复合选择器的所有单一选择器的权值累加
        .box div{ }   权值:10+1=11
        #box .box p{ } 权值:100+10+1=111
    行间样式的优先级高于id选择器的优先级;
    继承样式的权值为0,子元素中设置的样式,会覆盖继承到的样式;
    在样式中定义!important,优先级高于行间样式;

3、标签分类 —— 行级标记、块级标记、行块标记

1)行级元素 inline-level
    常用的行级元素:span、b、i、em、strong、a、del、sub、sup等
    默认宽度随元素的内容变化而变化;
    默认高度由内容撑开;
    不会独立成行,相邻的行内元素会排列在同一行中,直到一行拍不下,才会换行;
    换行和空格会被解析;
    具有部分盒模型特征。
使用:一般用来容纳文本和其他内联元素,通常被包含在块元素中使用。

2)块级元素 block-level
    常用的块级元素:h1、h2、h3、h4、h5、h6、p、div、ul、li、ol、dl、dt、dd等
    默认宽度撑满父元素的宽度;
    默认高度由内容撑开;
    垂直布局;
    具有盒模型特征。
使用:块级元素中可以添加块级元素、行级元素、行块元素

3)行块元素 inline-block
    常用的行块元素:img、input等
    具有块级标记的特征:可以设置宽、高、内填充、外间距
    具有行级标记的特征:默认横向显示,直到一行排不下才会换行;换行和空格会被解析

4、框类型转换 —— display属性

display: none; 元素不会被显示——隐藏元素,不占位
display: block; 元素的显示,将元素显示为块级元素,具有块级元素的特征
display: inline; 将元素显示为行级元素,具有行级元素的特征
display: inline-block; 将元素显示为行块元素,具有行块元素的特征

5、浮动

1)什么是浮动?
    文档流:可以显示的对象在排列时所占的位置
    浮动:使元素脱离正常文档流,按照指定方向发生移动,直到碰到它的父元素边界或另外一个浮动元素的边框为止
    注意:元素的水平方向浮动,元素只能左右移动而不能上下移动
2)浮动属性:
    float: left; 元素向左浮动
    float: right; 元素向右浮动
    float: none; 默认值,元素不浮动
3)浮动的特性:
    浮动会使元素脱离正常文档流;
    浮动元素可以提升层级;
    浮动可以使行级元素支持宽高;
    浮动可以使块级元素由内容撑开;
    元素添加浮动之后,不占位,父级盒高度为0
4)浮动带来的影响
    元素浮动以后,脱离正常文档流,导致父元素高度塌陷,会影响与父元素同级的后续元素的正常布局
5)清浮动的几种方法:
    
    (1)为浮动元素的父级盒加固定的高度——不够灵活
    (2)为浮动元素的父级盒加浮动——会产生新的浮动问题
    (3)为浮动元素的父级盒设置overflow属性,属性值可以是hidden|scroll|auto——可能会导致内容显示不完全;代码简洁
    (4)在浮动元素之后,跟浮动元素呈并列关系的位置,加一个空div,在空div上添加一个属性clear: both;——代码冗余;通俗易懂、书写方便
    (5)推荐方式:给浮动元素的父级盒加类名.clearfix
        

        .clearfix{ *zoom:1; }
        
        .clearfix::after{
            content: "";
            display: block;
            clear:both;
            visibility: hidden;
            height: 0;
        }
        
        不会在结构上产生冗余代码,可以重复使用,符合闭合浮动思想,结构语义化正确

6、overflow属性 —— 溢出隐藏,包含水平方向和垂直方向

overflow-x属性:只包含水平方向
overflow-y属性:只包含垂直方向
overflow: visible; /*溢出显示,默认值*/
overflow: hidden;/*溢出隐藏*/
overflow: scroll; /*溢出显示滚动条*/
overflow: auto;/*自动*/
overflow: inherit; /*继承*/

7、clear属性——清浮动

clear: left; 清除左侧浮动
clear: right; 清除右侧浮动
clear: both; 清除两侧浮动

伪元素选择器&浮动

20200217

1、浮动

目的:为了让多个块级元素在同一行显示
最核心的关键点:怎么排列、是否占位

2、伪元素选择器

1)element::before{ content:"伪元素的内容"; 属性名称: 属性值; }
    在element的内部,内容之前添加"伪元素的内容"
2)element::after{ content:"伪元素的内容"; 属性名称: 属性值; }
    在element的内部,内容之后添加"伪元素的内容"

3、样式重置——css reset

网页在显示的过程中,由于浏览器的内核不同、版本不同,对默认样式属性值的解析也不同。
将所有元素的自带样式去掉,然后重置,可以在不同内核、不同版本的浏览器中,都能解析到相同的属性值

定位技术

20200218

1、css的定位机制

css的定位机制:普通文档流、浮动、定位
1)定位原理:允许元素相对于其正常位置、或相对于父元素、或相对于浏览器窗口本身的位置
元素位置的调整:left|right属性、top|bottom属性
2)定位属性:
    静态定位position: static; 默认值
        相当于没有定位,元素出现在正常文档流中;

相对定位position: relative; ——相对于本身的位置进行定位
    一般用于元素的微调;作为绝对定位的参考元素
    (1)不影响元素本身的特性
    (2)相对定位仍然占位
    (3)如果没有定位偏移量,对元素本身没有任何影响;如果定义了定位偏移量,相对于原来位置发生偏移
    (4)提升层级

绝对定位position: absolute;——相对于最近的定位父元素定位(定位父级)
    (1)使元素完全脱离正常文档流,不占位
    (2)有定位父级相对于定位父级发生偏移;没有定位父级相对于整个文档发生偏移
    (3)使行级元素支持宽高;没有设置宽度的块级元素宽度自适应
    (4)提升层级
    绝对定位的步骤:——子绝父相
        为要做特殊定位的盒子(定位盒)添加position: absolute;绝对定位,设置初始位置,通过top|bottom、left|right属性:
            top: 0;| bottom: 0;
            right: 0; | left: 0;
        为定位盒的父级盒(有固定宽度和高度),添加position: relative; 相对定位
        回到定位盒,通过top|bottom、left|right属性进行精确定位

固定定位position: fixed;——相对于浏览器窗口进行定位
    (1)元素定位后脱离正常文档流,不占位
    (2)始终相对于浏览器的四个角为原点进行定位,不会随页面内容滚动而滚动
    (3)使行级元素支持宽、高;没有设置宽度的块级元素宽度自适应
    (4)提升层级

2、定位属性总结 

position: absolute; 绝对定位   元素不占位  相对于定位父级盒
position: fixed; 固定定位      元素不占位  相对于浏览器窗口来定位
position: relative; 相对定位   元素占位    相对于元素本身的位置来定位

position: static; 静态定位     元素占位    相当于没有定位

定位偏移属性:
    left: 0;   right: 0;   水平方向偏移量设置
    top: 0;    bottom: 0;  垂直方向偏移量设置

3、脱离文档流属性总结

    float: left|right; 脱离文档流,但不脱离文本流
    position: absolute | fixed; 既脱离文档流,又脱离文本流
    注意:所有元素都能使用以上属性。元素脱离文档流后,不再区分块级和行级元素,都具有共同的属性,宽度由内容撑开,可以设置width和height属性及所有的盒模型属性

解决图片间隙&对齐方式&自适应布局

20200219

1、定位层级

    z-index属性,定位盒叠放次序的调整,z-index属性值越大,叠放次序越高
        值可能为:正整数、负整数、0(默认值)
    只对定位元素生效;
    数值越大叠放次序越高;
    如果取值相同,则根据书写顺序,后来居上;
    正值向上调整层级,负值向下调整层级;
    属性值没有单位

2、定位实现盒子的水平、垂直居中——绝对居中

1)margin负间距
     必须知道居中盒的宽度和高度;
     为居中盒设置绝对定位;
     距离定位父级左边框和上边框的距离设置为50%;
     将元素分别左移和上移,移动元素宽度和高度的一半

2)margin: auto;实现绝对定位元素的居中
     必须知道居中盒的宽度和高度;
     为居中盒设置绝对定位;
     分别设置left: 0; right: 0; top: 0; bottom: 0;
     为居中盒设置margin: auto;

3、常见属性--vertical-align属性

vertical-align属性:设置元素的垂直对齐方式
    vertical-align: baseline; 将元素放在父元素的基线上 默认值
    vertical-align: top; 顶端对齐
    vertical-align: middle; 中部对齐
    vertical-align: bottom; 底部对齐

    vertical-align: super;上标 <sup></sup>
    vertical-align: sub; 下标 <sub></sub>

4、解决图片间距问题

将图片转成块级元素,解决下方间隙;
为图片设置垂直对齐方式(vertical-align属性),解决下方间隙;
为图片的父元素设置高度,并添加overflow属性,解决下方间隙;
为图片的父元素设置font-size属性或line-height属性,属性值为0,解决下方间隙问题:

5、解决文本框和按钮不对齐现象

为input元素设置vertical-align属性;
为input元素设置浮动属性

6、显示隐藏属性

1)display属性
    display: none; 元素的隐藏,将整个元素隐藏,不占用任何空间
    display: block; 元素的显示
2)visibility属性
    visibility: hidden; 元素内容不可见,只隐藏内容,占位空间仍然保留
    visibility: visible; 元素可见
3)设置元素位置,让其消失
    如设置margin-top: 500px; 移除可视区域
4)overflow属性实现,将要隐藏元素移出父元素的范围
    overflow: hidden;
5)opacity属性,实现元素的不可见
    opacity: 0;

7、透明度属性

1)opacity属性——元素的不透明度,将内容、背景全部透明
    兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器下支持
    取值范围:0~1之间,0表示完全透明,1表示完全不透明,0-1之间表示半透明

2)filter属性——filter: Alpha(opacity=x)
    兼容性:仅支持IE6、7、8、9,在IE10及以上版本中被废除
    取值范围:0~100之间,0表示完全透明,1表示完全不透明,0-100之间表示半透明

3)rgba(r,g,b,a)——用于颜色的不透明度设置
    兼容性:IE6、7、8不支持,IE9及更早版本的浏览器中都支持
    r--red 红色 0-255之间
    g--green 绿色 0-255之间
    b--blue  蓝色  0-255之间
    a--alpha 透明度 0-1之间

8、多栏布局

什么是自适应?
    自适应:让同一个页面自动适应不同大小的设备,从而解决为不同设备提供不同版本页面的问题
    自适应布局:解决在不同大小的设备上呈现相同网页的问题

8.1、两列自适应布局

html结构中——左右两个盒子;
左边固定宽度,右侧宽度100%;
为左侧盒子设置position:absolute;
右侧盒子添加子盒,设置padding-left,属性值为左侧盒子的宽度

8.2、圣杯布局——三列布局

 1、html结构中——先主体内容后侧边栏;
 2、两侧固定宽度,中间内容宽度设置width: 100%;
 3、主体内容和左右侧边栏分别加浮动float: left;
 4、左侧设置margin-left: -100%;将左侧拉到最左边;右侧设置margin-left: -右侧边宽度;
 5、将中间露出来:在外面的大盒子上设置padding: 0 右侧边的宽度 0 左侧边宽度;
 6、分别为左侧边和右侧边设置position:relative; 左侧设置left:-左侧边的宽度;还原左侧边。
 7、右侧边设置right:-右侧边宽度;还原右侧边

8.3、双飞翼布局——三列布局

1、html结构中——先主体结构后侧边;
2、两侧固定宽度,中间宽度设置为width: 100%;
3、主体内容和左、右侧边分别加浮动float:left;
4、左侧边设置marign-left: -100%;将左侧拉到最左边;右侧设置margin-left: -右侧边宽度;
5、在主体内容盒的子盒上设置margin:0 右侧边宽度 0 左侧边的宽度(padding和margin设置都行);将中间内容露出来

9、等高布局

(1)利用内外间距相抵消,为父元素设置overflow:hidden;实现
    每一列使用padding值撑开背景色;并且每一列使用padding撑开的多余的占位让margin负值抵消;
    父级盒设置溢出隐藏
    优点:结构简单,兼容所有浏览器
    缺点:伪等高,需要合理控制margin和padding值

(2)利用内容撑开父元素的特点,为每一列添加对应的容器,进行相互嵌套,并在每个容器中添加背景颜色
    三个嵌套的div负责背景,三列放在最内侧的div盒子中;
    通过相对定位,分配三列的背景的位置;
    通过margin负值,将内容移到对应的背景的位置;
    父元素设置溢出隐藏
    优缺点:扩展性好,可以实现自适应,结构嵌套复杂

(3)利用边框模拟背景,实现等高的显示效果
    左、右边框颜色、内容背景分别负责三列的背景颜色;
    通过margin值,同步列的位置
    特点:扩展性差,三列+的布局不适用

精灵图&BFC

20200220

1、css技巧

1)css sprites——精灵技术、雪碧技术,通常也称“css图像拼合”或“贴图定位”。将一堆小图整合到一张大图上,
通过background-image、background-repeat属性显示图片,并且使用background-position属性实现图片的精确显示,
减少服务器对图片的请求数量。

优点:
    减少网页的http请求,提高页面的性能;
    减少图片命名上的困扰;
    更换风格方便
缺点:
    必须要限定容器的大小,背景图片位置需要计算;
    维护的时候比较麻烦

css sprites的使用步骤:
    制作具有多个状态的拼合图片;
    给要显示背景的盒子一个固定的尺寸,以背景的方式加载,让其局部显示;
    通过background-position背景图定位属性控制不同的显示状态

2)css小箭头
    使用css绘制两个三角形,通过绝对定位让两个三角形不完全重叠,处于上层的三角形比处于下层的三角形的偏移属性多1像素
        在IE6-中添加font-size: 0; line-height: 0; 目的——为了让i标签的height: 0; 生效
        
3)css滑动门技术
    目的:为了使各种特殊形状的背景能够自适应元素中文本内容的多少
    核心:利用css sprites、盒子的padding属性,适应不同字数的导航栏

2、BFC——block formatting context

1)什么是BFC?
    块级格式化上下文,web页面可视化css视觉渲染的一部分,是页面中一个独立的渲染区域。用于决定块盒子的布局和浮动相互影响范围
的一个区域,可以改变父元素的渲染规则。

2)怎样生成BFC?
    根元素
    float: left|right;
    position: absolute|fixed;
    overflow: hidden|scroll|auto;
    display: inline-block;

3)BFC特性:
    内部的元素会在垂直方向是上一个接一个放置;
    垂直方向上的距离由margin值决定,属于同一个BFC的两个相邻元素的margin值会发生重叠;
    每个元素的左外间距与包含快的左边界相接触,浮动也是如此;
    BFC区域不会与float元素区域重叠;
    计算BFC的高度时,浮动子元素也会参与计算;
    BFC是页面上的一个隔离的独立的容器,容器中子元素不会影响到外面元素,反之亦然

4)BFC解决的问题:
(1)外间距折叠问题——避免margin值叠加问题
(2)自适应两栏或三栏布局
    自适应两栏布局——左侧固定宽度,右侧不设宽,则右侧宽度为自适应,随浏览器窗口宽度的变化而发生相应的变化
    自适应三栏布局——左右两边宽度固定,中间不设宽,则中间宽度为自适应,随着浏览器窗口的变化而发生相应的变化
(3)防止字体环绕
(4)清浮动

阴影效果&ps操作

20200221

1、盒子和文字阴

1)盒子阴影box-shadow属性
    box-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 阴影的大小  阴影颜色 内阴影|外阴影(默认值);
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
        x轴偏移量--水平方向的偏移,正值向右偏,负值向左偏
        y轴偏移量——垂直方向的偏移,正值向下偏,负值向上偏
        inset内阴影
    注意:可以向一个元素中添加多个阴影,多组阴影之间用逗号隔开
2)文字阴影text-shadow属性
    text-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 阴影颜色;

2、文本溢出处理

1)单行文本溢出
    text-overflow: clip;文字溢出后直接修剪
    text-overflow: ellipsis; 文字溢出后用省略号代表被修剪的文本   
    text-overflow: string; 文字溢出后用给定的字符串表示被修剪的文本。只在火狐浏览器中生效 
    注意:要实现文本溢出处理,需要与white-space属性和overflow属性配合使用
2)多行文本溢出显示省略号
    (1)使用webkit的css扩展属性
        .box1{
            width: 200px;
            border: 2px solid #000;

            overflow: hidden;
            text-overflow: ellipsis;

            display: -webkit-box;/*将标签设置为弹性伸缩盒子*/
            -webkit-line-clamp: 2;/*行数*/
            -webkit-box-orient: vertical;/*伸缩盒子元素的排列方式*/
        }
    
    (2)使用伪元素模拟溢出显示省略号的效果
        .box2{
            width: 200px;
            border: 2px solid #000;

            height: 60px;
            line-height: 30px;

            overflow: hidden;
            position: relative;
        }
        .box2::after{
            content: "......";
            position: absolute;
            right: 0;
            bottom: 0;
            background: #fff;
            padding-left: 4px;
            padding-right: 10px;
        }

3、PS操作——Photoshop

1)打开文件:“文件”菜单-->“打开”   ctrl+o
2)新建文件:“文件”菜单--“新建”    ctrl+n
3)ctrl+s保存
    注意:背景为透明,工作区显示灰白格子
4)常见工具
(1)移动工具  v    
    有多个图层并且有分组的psd文件,需要在属性栏勾选“自动选择”--“图层”
(2)矩形选框工具  m
    设置ps中的单位:“编辑”菜单--“首选项”--“单位与标尺”--将标尺和文字改为“像素”
    标尺:ctrl+r “视图”--“标尺”
    参考线:在标尺上按住鼠标左键拖动,拉出参考线;水平参考线和垂直参考线的临时切换使用alt键。删除参考线只需要将参考线拖回到标尺即可;“视图”菜单--“清除参考线”
    信息面板:F8  “窗口”菜单--“信息”
    自由变换  ctrl + T
    取消选区  ctrl+d
(3)拾色器--吸管工具  i
(4)文字工具  t
    “窗口”菜单--“字符”
(5)抓手工具  空格键临时切换
(6)放大镜工具:z
    在放大镜工具状态下,点击鼠标左键放大,按住alt键点击鼠标左键缩小;
    在放大镜工具状态下,向外拖动放大,向内拖动缩小;
    按住alt键,滚动鼠标滚轮,向外滚表示放大,向内滚表示缩小
(7)切片工具c ,shift+c工具组组内切换
    在切片工具状态下,按住Ctrl键临时切换成切片选择器工具
(8)保存切片:Ctrl + alt + shift + s--“预设”(选择图片的格式),单击“存储”--选择保存位置,选择格式(仅限图像),切片(选中的切片),输入文件名--“保存”
(9)Ctrl + z撤销
(10)盖印可见图层 ctrl+alt+shift+e

4、图片格式

1)psd: 是ps的源文件格式,分层文件
2)在页面中用到的图片格式
    jpg格式--jpeg:不支持透明,色彩丰富;适合复杂颜色及形状,网页中的高清大图
        文件小;有损压缩,反复保存图片质量会下降
    gif格式:支持透明和不透明,色彩丰富,支持动画;适用于色彩单一的图标、动画图片
        文件小,没有兼容性问题;只支持256种颜色
    png格式:支持透明、不透明、半透明;适用于网页中的小图,存在半透明效果的图片
        png8: 功能跟GIF相似
        png24:色彩丰富,对半透明效果的细节显示较好,IE6不支持
        无损压缩;不支持动画,色彩丰富的图片尺寸较大
    webp格式:文件较小,支持有损和无损压缩,支持动画、透明;浏览器兼容性不好;适用于支持webp格式的app和webview

5、拆分页面的原则

精确到1像素;
先上下,后左右,从外向里
先整体,后局部,再到细节

圆角属性&兼容问题&csshack

20200226

1、边框圆角border-radius属性

 border-radius: 20px; /*元素四周都有20px的圆角*/
 border-radius: 10px 30px;/*左上角和右下角各有10像素,右上角和左下角各有30像素的圆角*/
 border-radius: 10px 20px 30px;/*左上角有10像素,右上角和左下角各有20像素,右下角30像素的圆角*/
 border-radius: 10px 20px 30px 50px;/*左上角10像素,右上角20像素,右下角30像素,左下角50像素的圆角*/
 border-top-left-radius: 30px; /*左上角的圆角设置*/
 border-top-right-radius: 30px;/*右上角的圆角设置*/
 border-bottom-right-radius: 30px;/*右下角的圆角设置*/
 border-bottom-left-radius: 30px;/*左下角的圆角设置*/

2、兼容问题

IE8兼容问题:
1)IE8下图片边框问题:
    解决方案:img{ border:none; }

2)IE8中背景复合属性写法问题
    background: url(images/pic2.jpg) no-repeat 0 0;

3)IE低版本浏览器的透明度设置问题
    opacity: 0.5;
    filter: Alpha(opacity=50);
    background: rgba(0,0,255,.5);
4)指定鼠标指针形状为手型, 并兼容所有浏览器
    cursor: pointer;/*鼠标指针为手型*/
    cursor: crosshair;/*鼠标指针为十字形*/
    cursor: text;/*鼠标指针为文本的I型*/
    cursor: wait;/*程序正忙*/
    cursor: move;/*对象是可移动的*/
    cursor: help;/*可用的帮助信息*/
    cursor: default;/*默认光标*/
    cursor: auto;/*默认*/	


IE低版本浏览器兼容问题:
5)在IE6及更早版本的浏览器中定义小高问题
    font-size: 0;
    line-height: 0;

6)IE6及更早版本浏览器中浮动时产生的双边距问题
    父元素加overflow: hidden;
    子元素
            float: left;
            margin-left: 20px;

            display: inline;

7)IE7中子元素相对定位,父元素overflow:hidden|auto失效的问题
    父元素overflow: hidden; position: relative;
    子元素position: relative;
8)IE7及更早版本的浏览器中,块级元素转行块元素,不在一行显示问题
    display: inline-block;
    *display: inline;
    *zoom: 1;
9)IE7及更早版本的浏览器中,在li中出现2个或两个以上的子元素有浮动,li之间会产生空白间隙问题
    vertical-align: top|middle|bottom;

3、css Hack

1)条件级Hack
    if条件:是否、大于(gt)、大于等于(gte)、小于(lt)、小于等于(lte)、非指定版本(!)
2)属性级Hack
    _: 选择IE及以下版本
    *:IE6、7
    \9: 选择IE6+
    \0: 选择IE8+、opera15
3)选择级Hack
    *html IE6及更早版本浏览器
    *+html IE7
Hack有风险,使用需谨慎!


 <!--[if lt IE 9]>
        <script src="js/html5shiv.min.js"></script>
 <![endif]-->

 

html5新增属性

20200227

1、HTML5的新特性

1)在网页上绘制图形的canvas元素
2)多媒体相关video和audio元素
3)对本地离线存储的更好支持
    本地存储:提供了两种在客户端存储数据的新方法
        localStorage 没有时间限制的数据存储
        sessionStorage 针对session的数据存储
    离线应用:用户可以在应用离线的时候查看网站信息
4)新增的语义化的标签和表单控件

2、HTML5中新增的语义化标签

新增的结构元素:

1)header标签:网页的头部区域或文档中某个内容区块的头部,双标签
    一种具有引导和导航作用的结构元素,通常可以包含整个页面或一个内容区域的标题、搜索、相关logo图片等
2)footer标签:网页的底部区域或文档中某个内容区块的底部,双标签
    通常可以包含:网页中的版权信息、相关阅读链接、文档的作者、使用条款等
3)nav标签:网页的导航区域,双标签
    通常可以包含:网页中主要的导航链接组、传统的导航条、侧边栏导航、页内导航、翻页操作等
4)article标签:网页中独立的完整的内容,可以包含header标签,双标签
    通常可以包含:一篇博文、论坛的帖子、报刊中的文章、一段用户评论或独立的插件
5)section标签:网页中内容的章节,双标签
    通常可以包含页面中内容的分区,文章中章节
6)aside标签:侧边栏,表示当前网页或文章的附属信息,双标签
    通常可以包含:与主要内容相关的引用、侧边栏、广告、链接组等
7)hgroup标签:标题组,双标签
    通常包含多个标题
8)address标签:联系信息,双标签,文字自带斜体效果
    通常包含:文档的作者或文档的编辑者名称、电子邮箱、地址、电话号码等


新增其他标签:

1)figure标签:自带间距
    语法:<figure>
            被主体内容引用的,相对独立的内容块,可以包含:图片、图表、代码块等
            <figcaption>定义figure中的标题</figcaption>
        </figure>
    注意:在一个figure标签中只允许放一个figcaption标签
2)mark标签:定义带有标记的文本,目的吸引用户。默认自带背景颜色(黄色)和文字颜色(黑色),双标签
3)time标签:日期时间标签,定义公历时间,双标签
    <time>2020年2月27日</time>
    <time pubdate="pubdate" datetime="2020-2-27"></time>
        pubdate属性:当前内容的发布时间
    注意:datetime属性定义日期时间,如果没有该属性,必须在元素内规定日期和时间
4)progress标签:进度条
    <progress></progress>
    <progress max="100" value="50"></progress>
    max属性:最大值
    value属性:初始值
5)canvas标签:图形容器,如果绘制形状必须使用JavaScript来绘制

3、HTML5兼容

最新版本的Chrome、Firefox、Safari、Opera支持部分HTML5特性。IE9支持部分HTML5特性
HTML5新标签在IE低版本中有兼容问题:
1)使用JavaScript新增元素的方式解决:
<script>
    var ele = document.createElement("header"); //创建一个header元素,赋给ele变量
    var oBox = document.getElementById("box"); //通过id名称获取元素,赋给oBox变量
    oBox.appendChild(ele); //将新建元素追加到父元素中
</script>
<style>
    header{
        display: block;
    }
</style>
2)使用谷歌提供的html5shiv.js解决兼容问题
<!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
<![endif]-->

4、新增多媒体标签

1)音频标签
    audio 标签
    <audio src="音频文件的路径">您的浏览器不支持audio元素播放音频。</audio>
    IE8及更早版本的浏览器中不支持audio元素
    HTML5中支持的音频格式:
        ogg   支持的浏览器Chrome、Firefox、Opera10+
        MP3   支持的浏览器Chrome、Firefox、Opera10+、IE9+、Safari5+
        wav   支持的浏览器Chrome、Firefox、opera、Safari
    常用属性:
        src属性:音频文件的URL地址
        controls属性:播放控件
        loop属性:重复播放
        muted属性:静音播放
        autoplay:音频加载完毕后自动播放。
        preload:1)auto 预加载音频视频。2)metadata 只预加载音频视频元数据。  有autoplay时此属性无效。

    js控制媒体
        play()播放
        pause()暂停
        load()重新加载

    source标签:可以链接不同格式的音频文件。浏览器使用第一个可以识别的格式
    <audio controls>
        <source src="videoAudio/biubiubiu.ogg">
        <source src="videoAudio/hanmai.mp3">
        <source src="videoAudio/nada.wav">
        您的浏览器不支持audio元素播放音频。    
    </audio>
 2)视频标签
    video标签
    <video src="视频文件的路径">您的浏览器不支持video元素播放视频。</video>  
    IE8及更早版本的浏览器中不支持video元素
    HTML5中支持的视频格式:
        ogg 支持的浏览器Chrome、Firefox、Opera
        MEPG4 支持的浏览器Chrome、Firefox、Safari、IE9+
        WebM 支持的浏览器Chrome、Firefox、Opera
    常用属性:
        src属性:视频文件的路径
        controls属性:播放控件
        loop属性:重复播放
        muted属性:静音播放

        width属性、height属性 设置视频播放器的宽度和高度,单位像素
        poster属性:预览图片
    source标签:可以链接不同格式的视频文件。浏览器使用第一个可以识别的格式
    <video controls>
        <source src="videoAudio/butterfly.ogg">
        <source src="videoAudio/movie.mp4">
        <source src="videoAudio/PPAP.webm">
        您的浏览器不支持video元素播放视频。
    </video>

5、新增的表单元素和属性

新增表单标签--input类型
    input、button、select-option、textarea
1)url类型:包含访问协议的URL地址的输入域,在提交表单时,会自动验证URL域的内容
2)email类型:包含e-mail地址的输入域,在提交表单时,会自动验证e-mail地址

3)search类型:用于检索关键字的输入域,多用于手机客户端
4)tel类型:用于输入电话号码的输入域,为移动端网页开发服务,在PC端网页中不生效,在移动端页面中点击tel类型的输入域时,跳出虚拟电话键盘(0-9、*、#)

5)number类型:用于包含数值的输入域
    <input type="number" max="10" min="0" step="2" value="0">
    max属性:最大值    min属性:最小值   step属性:合法的数字间隔,默认值为1
    注意:当用户输入非法的数值时,会弹出相应提示信息,并阻止表单提交
6)range类型:生成一个数字滑动条
    <input type="range" max="10" min="0" step="2" value="0">
注意:
    range类型和number类型功能基本一致,
    区别:外观样式不同、默认值不同。
    range 类型的min属性默认值为0,max属性默认值为100

7)color类型:生成一个颜色选择器,值为十六进制色值(六位十六进制数)

8)date类型:日期选择器,包含年、月、日
9)datetime类型:输入日期时间(UTC时间)——手动
    UTC+8  东8区
    UTC-10  西10区
10)datetime-local类型:日期和时间选择器,包含年、月、日、时、分(无时区)
11)month类型:月选择器,包含年、月
12)time类型:时间选择器,包含时、分
13)week类型:周选择器,包含年、周(全年的第几周)

14)datalist类型:选项列表,与input元素配合使用
    使用input元素的list属性和datalist的id属性关联
    <input list="listCon">
    <datalist id="listCon">
        <option value="北京">北京</option>
        <option value="重庆">重庆</option>
        <option value="深圳">深圳</option>
        <option value="上海">上海</option>
        <option value="天津">天津</option>
    </datalist>

表单属性:
1)min、max、step属性
    输入域中所允许的最小值、最大值、步长
    用于包含数字的input类型,如input的number、range类型
2)placeholder属性
    为输入域设置提示信息
3)list属性
    通过input元素和datalist元素实现可选的下拉列表;使用input元素的list属性和datalist的id属性关联

4)autocomplete属性:是否启用自动完成功能
    autocomplete = "off" 元素不采用自动完成功能
    autocomplete = "on 元素启动自动完成功能
5)autofocus属性:自动获取焦点

6)form属性:定义表单元素所属的表单区域
7)required属性:提交表单时,表单元素不能为空,如果设置value值,该属性失效
8)pattern属性:对用户输入内容做验证(正则表达则)
9)multiple属性:选择多个值
    用于上传域和email类型的输入域

css3新增属性

20200228

1、css3

选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面

2、css2和css3

css2: 性能和访问相对较差;偏向于表现;部分效果需要使用图片实现;无兼容
css3: 性能和效果都能得到兼顾;实现动画效果;在css2中需要使用图片实现的可以在Css3中使用代码实现;部分属性需要兼容处理

3、渐进增强和优雅降级

渐进增强:针对低版本浏览器进行页面建构,保证最基本功能的实现,然后再针对高级的浏览器进行效果设置、交互的实现,达到更好的用户体验
优雅降级:一开始构建完美的用户体验,然后再针对低版本的浏览器进行兼容

4、浏览器私有前缀——兼容性前缀

浏览器          内核     css兼容性前缀
Chrome|Safari   webkit   -webkit-
firefox         gecko    -moz-
Opera           presto   -o-
IE              trident  -ms-
书写顺序:先写带有私有前缀的css3属性,再写标准的css3属性

Autoprefixer插件,为css3属性自动生成兼容性前缀:在css文件中按下F1,执行“Autoprefixer run”

5、选择器

1)属性选择器
css2中的属性选择器:
    element[attr]{ } 指定了属性名,但没有指定属性值得element元素
    element[attr=value]{ } 指定了属性名,并且指定了属性值为value的element元素
    element[attr~=value]{ } 指定了属性名,并且属性值可以为词列表中的包含指定属性值value的element元素
css3中的属性选择器:
    element[attr^=value]{ } 指定了属性名,并且属性值以value开头的element元素
    element[attr$=value]{ } 指定了属性名,并且属性值以value结尾的element元素
    element[attr*=value]{ } 指定了属性名,并且属性值中包含value的element元素
2)结构性伪类选择器
    :root{ } 匹配根元素

    element:first-child{ } 选择一组相同元素中的第一个元素
    element:last-child{ } 选择一组相同元素中的最后一个元素
    element:nth-child(n){ } 选择一组相同元素中的第n个元素,n可以是数值、关键词、表达式
        偶数:even  或  2n
        奇数:odd  或   2n+1
    element:nth-last-child(n){ } 选择一组相同元素中的倒数第n个元素,n可以是数值、关键词、表达式

    element:nth-of-type(n){ } 一组元素中选择特定类型的元素,n可以是数值、关键词、表达式
    element:nth-last-of-type(n){ } 一组元素中选择特定类型的元素,但是需要从最后一个开始计算
3)状态伪类选择器
    element:checked{ } 选择页面中处于选中状态的element元素
    element:disabled{ } 选择页面中处于禁用状态的element元素
    element:enabled{ } 选择页面中处于可用状态的element元素

6、border-radius属性,圆角

border-top-left-radius: 左上角圆角设置
border-radius: 100px;
border-radius: 50%;

7、css3背景属性

1)多背景
    background-image: url(图片的路径), url(图片的路径);
    多个背景图片之间用逗号隔开。背景图显示越靠前,书写顺序越靠前
2)background-size属性:背景图尺寸设置
    background-size: 数值;
        background-size: 100px;/*等比例缩放*/
        background-size: 100px 100px; /*根据尺寸缩放*/
        background-size: 100% 100%;/*以元素的百分比来设置背景图片的宽、高*/
    background-size: cover; 覆盖,等比例缩放到铺满整个盒子,但是背景图可能无法完整显示在盒子中
    background-size: contain; 包含,等比例缩放到图片完整显示在盒子中,但是背景图可能无法铺满整个盒子
3)background-origin属性:背景图片的定位区域
    background-origin: content-box; 背景图片相对于内容区域定位
    background-origin: padding-box; 背景图片相对于内填充区域定位
    background-origin: border-box; 背景图片相对于边框区域定位
4)background-clip属性:背景颜色的绘制区域
    background-clip: content-box; 背景被裁剪到内容区域,仅在内容区显示
    background-clip: padding-box; 背景被裁剪到内填充区域,在内容区、内填充区域显示
    background-clip: border-box; 背景被裁剪到边框区域,在内容区、内填充区、边框区域显示

8、css3渐变属性

1)线性渐变 linear-gradient
    background-image: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
        方向:ndeg(n为数值)、left|right|top|bottom|left top|left bottom|right top|right bottom
    重复线性渐变:
        background-image: repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);
2)径向渐变 radial-gradient
    background-image: radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);
        中心点的位置:x y| left|right|center|top|bottom|left top|left center|left bottom ...
    background-image: -webkit-repeating-radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);
    background-image: repeating-radial-gradient(中心点的位置, 渐变形状, 颜色1 范围1, 颜色2 范围2,...);

用户界面&多栏布局&过渡&2D&3D

20200302

1、用户界面

1)resize属性:用户是否可以对元素进项调整
    resize: none; 不允许用户调整元素尺寸
    resize: both; 用户可以调整元素的宽度和高度
    resize: horizontal;只允许用户调整元素的宽度
    resize: vertical; 只允许用户调整元素的高度
    注意:如果要使resize属性生效,必须与overflow属性配合使用,overflow的属性值可以是auto|hidden|scroll
2)box-sizing属性:允许以特定的方式定义匹配某个区域的特定元素
    box-sizing: content-box; 默认值,在width属性和height属性之外增加padding属性和border属性
    box-sizing: border-box; 内容的宽度和高度的得到,通过width属性和height属性减去padding属性值,减去border属性值

2、多列布局——多栏布局

1)column-count属性:元素被分隔的列数
    column-count: n; 元素内容被分隔成n列
    column-count: auto; 由其他属性决定列数
2)column-width属性:列的宽度
    column-width: npx; 每一列的宽度
    column-width: auto; 由其他属性确定列宽
3)column-gap属性:列与列之间的间隔
    column-gap: npx; 两列之间的间隔
    column-gap: normal; 两列之间的间隔为常规间隔,W3C建议值为1em
4)column-rule属性:列边框--列与列之间的分隔线
    column-rule: column-rule-width  column-rule-style  column-rule-color;
        column-rule-width属性:分割线的宽度
        column-rule-style属性:分割线的线型(solid|double|dotted|dashed)
        column-rule-color属性:分割线的颜色(关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a))
5)column-span属性:跨列合并
    column-span: all; 横跨所有列合并

3、transition属性:过渡属性

transition: transition-property transition-duration transition-timing-function transition-delay;
transition: css样式(属性名称) 动画的执行时间(单位秒|毫秒) 速度类型 动画的延迟时间(单位秒|毫秒);
    css样式: all表示所有属性
    动画的执行时间:默认0
    速度类型:
        ease 默认值,平滑过渡
        linear 匀速
        ease-in 加速
        ease-out 减速
        ease-in-out 先加速后减速
注意:必须要设置transition-duration属性动画的执行时间,否则动画的执行时间为0,不会产生过渡效果
transition: width 2s, background 10s;

4、css3变形——transform属性

2D变形:
    1)平移
    transform: translate(x,y);  元素从当前位置移动到给定的x轴和y轴的坐标位置
    transform: translateX(x); 沿着x轴的方向移动
    transform: translateY(y); 沿着y轴的方向移动
    注意:水平向右值为正,垂直向下值为正值
    transform: translate(50px);沿着x轴方向移动
    2)旋转
    transform: rotate(ndeg); 
    角度为正值,元素沿着顺时针方向旋转n度;角度为负值,沿着逆时针方向旋转
    3)缩放
    transform: scale(x,y); 元素沿着x轴和y轴做缩放
    transform: scaleX(x); 沿着x轴方向缩放
    transform: scaleY(y); 沿着y轴方向缩放
    x和y的取值:0-1缩小,1表示正常大小,1以上表示放大,负值时,先翻转后缩放
    transform: scale(0.5); x轴和y轴等比例缩放
    4)倾斜
    transform: skew(x,y); 元素沿着水平方向和垂直方向倾斜,单位deg
    transform: skewX(x); 沿着x轴方向倾斜
    transform: skewY(y); 沿着y轴方向倾斜
    transform: skew(30deg);沿着x轴方向倾斜
    注意:transform: rotate(360deg) scale(3);元素既要旋转又要缩放

transform-origin属性:元素基点位置的调整,必须与transform属性配合使用


3D变形必备属性:
    1)transform-style属性:
        transform-style: preserve-3d; 创建3D空间
    2)perspective属性:透视属性,近大远小,单位像素
    注意:以上两个属性均需要写在父元素中
    3D空间的轴线:x轴(右为正)、y轴(下为正)、z轴(向外为正)
3D变形效果:
    1)平移
    transform: translateZ(z); 沿着z轴平移
    transform: translate3d(x,y,z); 沿着x轴、y轴、z轴移动
    2)旋转
    transform: rotateX(xdeg); 沿着x轴方向旋转
    transform: rotateY(ydeg); 沿着y轴方向旋转
    transform: rotateZ(zdeg); 沿着z轴方向旋转
    transform: rotate3d(x,y,z,angle); 沿着x轴、y轴、z轴旋转
    3)缩放:
    transform: scaleZ(); 沿着z轴缩放
    transform: scale3d(x,y,z); 沿着x轴、y轴、z轴缩放

3种居中方法&帧动画&弹性盒子

20200303

1、盒子的绝对居中——水平、垂直居中

1)margin负间距实现带有width属性和height属性的绝对定位元素的居中
2)margin: auto;实现带有width属性和height属性的绝对定位元素的居中
3)transform: translate();实现绝对定位元素的居中
    .box{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

2、帧动画

1)定义关键帧
    @keyframes 动画名称(英文){
        0%{  }  动画的开始
        50%{ }
        100%{ } 动画的结束
    }
    @keyframes 动画名称(英文){
        from{ } 动画的开始
        to{ } 动画的结束
    }

2)引用关键帧
    animation: animation-name animation-duration [animation-timing-funciton] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode];
    animation: 动画名称 动画的执行时间(s|ms) 动画的类型(linear|ease|ease-in|ease-out|ease-in-out) 延迟时间 播放次数(默认为1次,infinite无限循环播放) 动画的运动方向(alternate正向反向轮流播放|reverse反向播放|normal正向播放|alternate-reverse反向正向轮流播放) 动画结束之后显示的状态(forwards动画结束时的状态|both动画结束或开始时的状态|backwards动画开始时的状态)
3)animate.css动画库
    在动画库中预设了抖动shake、闪烁flash、弹跳bounce、翻转flip、旋转rotateIn|rotateOut、淡入淡出fadeIn|fadeOut
    使用步骤:
        1)引入文件:<link rel="stylesheet" href="css/animate.css">
        2)使用:<div class="animated bounce">内容</div>
            animated类名是基本类名,必须添加;第二个类名为实现指定动画的样式名

3、弹性盒子--flex

1)弹性盒子——css3中新增的布局方式。是一种当屏幕大小、设备类型不同的时候,都能够确保元素拥有恰当的布局方式
    弹性性盒模型的内容包括:弹性容器、弹性子元素(项目)
    引入弹性盒布局的目的:用一种较为有效的方式对容器中的子元素进行排列、对齐、分配空白空间,即使弹性子元素的尺寸发生动态变化,弹性盒布局也能正常工作
2)设置弹性盒子:
    display: flex; 将元素设置为弹性盒容器
    display: inline-flex; 将元素设置为弹性盒容器
    注意:设置为flex布局之后,子元素的float、clear、vertical-align属性都会失效
3)基本概念:
    容器
    项目
    主轴:默认水平方向,向右   
        主轴的起点
        主轴的终点
    交叉轴:默认垂直方向,向下
        交叉轴的起点
        交叉轴的终点
4)容器属性——添加弹性容器上
    flex-direction属性:设置主轴的方向
        flex-direction: row; /*默认值,设置主轴方向为水平方向,起点在左侧*/
        flex-direction: row-reverse; /*设置主轴方向为水平方向,起点在右侧*/
        flex-direction: column; /*设置主轴方向为垂直方向,起点在上方*/
        flex-direction: column-reverse; /*设置主轴方向为垂直方向,起点在下方*/
    justify-content属性:设置弹性子元素在主轴上的对齐方式
        justify-content: flex-start; /*默认值,子元素位于弹性盒的开头*/
        justify-content: flex-end; /*子元素位于弹性盒的结尾*/
        justify-content: center; /*子元素位于弹性盒的中间*/
        justify-content: space-around; /*子元素之前、之后、之间都有空白空间*/
        justify-content: space-between; /*子元素和子元素之间有空白空间*/
    align-items属性:设置弹性子元素在交叉轴上的对齐方式
        align-items: stretch; /*默认值,如果子元素没有高度或高度为auto时,将占满整个容器的高*/
        align-items: flex-start; /*子元素在交叉轴的起点对齐*/
        align-items: flex-end; /*子元素在交叉轴的终点对齐*/
        align-items: center; /*子元素在交叉轴的中点对齐*/
        align-items: baseline; /*子元素在第一行文字的基线对齐*/
    flex-wrap属性:设置弹性子元素在一根轴线上排不下的换行方式
        flex-wrap: nowrap; /*默认值,不换行*/
        flex-wrap: wrap; /*换行,第一行显示在上方*/
        flex-wrap: wrap-reverse; /*换行,第一行显示在下方*/
    align-content属性:设置多根轴线的对齐方式,如果只有一根轴线,属性失效
        align-content: stretch; /*默认值,轴线占满整个交叉轴*/
        align-content: flex-start; /*与交叉轴的起点对齐*/
        align-content: flex-end; /*与交叉轴的终点对齐*/
        align-content: center; /*与交叉轴的中点对齐*/
        align-content: space-around; /*每根轴线之上、之下、之间都有留白*/
        align-content: space-between; /*每根轴线之间都有留白*/
5)项目属性——添加在子元素上
    order属性:调整子元素的排列次序
        order: 数值; 数值不加单位,默认值为0,数值越大,排列越靠后
    flex-grow属性:调整子元素的放大比例
        flex-grow: 数值; 数值不加单位,默认值为0,表示不放大
    flex-shrink属性:调整子元素的缩小比例
        flex-shrink: 数值; 数值不加单位,默认值为1,表示当空间不足时,等比例缩小;值为0表示当空间不足时,不缩小
    align-self属性:调整弹性容器中被选中的子元素的对齐方式
        align-self: auto; /*默认值,继承了父容器的align-items属性,如果没有父元素值为stretch*/
        align-self: stretch; /*占满整个容器的高度*/
        align-self: flex-start; /*交叉轴起点对齐*/
        align-self: flex-end; /*交叉轴终点对齐*/
        align-self: center; /*交叉轴中点对齐*/
        align-self: baseline; /*子元素的第一行文字的基线对齐*/

4、calc()函数:动态计算长度值的函数,css3新增

语法:calc(数学表达式)
支持+、-、*、/运算,先算括号里面的
注意:运算符前后添加空格
兼容性IE9+

less&移动端布局方案

20200304

1、css预处理--less

1)什么是预处理?
    定义了一种新的语言
    基本思想:用一门专门的编程语言,为css增加一些编程的特性,将css作为目标生成文件,然后开发者只需要使用这种语言进行编码工作即可
2)less:拥有一套自定义的语法和一个解析器,将程序员编写的样式规则,通过解析器编译成对应的css文件,才能被浏览器识别
    编译的方法:命令行编译、编译器编译、在线编译、第三方编译工具等
    好处:结构清晰,便于扩展,可以屏蔽浏览器中私有语法的差异,可以实现多重继承,完全兼容css代码
3)编写less文件
   新建less文件:*.less  
4)less的基本语法
注释:
    标准css注释: /* 注释内容 */  会保留到编译后的文件中
    单行注释://注释内容    只保留到less源文件中,编译后会被省略
导入样式: @import  可以导入css文件,导入less文件
    @import "*.css";
    @import url(*.css);
    @import url("*.css");
    注意:分号是必不可少的,文件的后缀名也是必不可少的
    @import和link的区别
变量:
    定义变量:@变量名: 值;
    使用:
        作为属性值使用——.box{ background: @变量名; }
        作为属性名称使用——
            <div class="box left"></div>
            @le: left;
            .box{ border-@{le}: 5px solid #000; }
        作为选择器名称使用——
            .@{le}{ height: 20px; }

    SyntaxError语法错误
混入:将一种或一系列的属性从一个规则集引入到另一个规则集
    混入类名:
        定义通用属性:.bw{ width: 100px; } 在解析后的css文件中可以看到
                     .bw(){ width: 100px; } 在解析后的css文件中看不到
        调用定义好的属性:.wrap{ .bw; }
    混入参数:
        定义:.boRa(@radius){ border-radius: @radius; }
        调用:.box{ .boRa(20px); }
        注意:混入参数没有设置默认,调用时必须传入参数
        定义:.boRa(@radius:20px){ border-radius: @radius; }
        调用:.box{ .boRa;}
             .box{ .boRa(30px);}
        注意:混入参数并且设置了默认值,调用的时候如果不写参数,使用默认值作为显示的值
        
        使用@arguments来引用所有传入的参数:
        .boSha(@bx,@by,@bb,@bc){ box-shadow: @arguments;}
        .bo(@bwi:10px,@bs:solid,@bcol:#0f0){ border: @arguments; }
        .box{ 
            .boSha(10px,10px,20px,#000);
            .bo;
            .bo(5px);
            .bo(5px,dotted);
            .bo(5px,dashed,#000);
        }
嵌套:模仿HTML结构
    选择器嵌套
    &表示引用父元素
继承:extend伪类实现样式的继承
    .ftStyle{ font-style: italic; }
    .box{
        h3{
            font-size: 50px;
            &:extend(.ftStyle);
        }
    }
    .box{
        h3:extend(.ftStyle){
            font-size: 50px;
        }
    }

运算:任何数值、颜色、变量都可以运算
    1)变量
    2)数值
    3)颜色色值:先将颜色色值转换成rgb模式,进行计算,然后再将rgb模式转回十六进制色值并返回
        rgb模式的取值范围0-255,如果计算时超过这个区间,使用超过后的接近的范围值呈现

2、移动端浏览器

UC浏览器、QQ浏览器、百度手机浏览器、360浏览器、Chrome浏览器、搜狗手机浏览器、猎豹浏览器等等浏览器内核为webkit

3、viewport设置--虚拟窗口

Apple为了解决移动端屏幕分辨率大小问题提出
移动端视口:布局视口、视觉视口、理想视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
自定义虚拟窗口,指定虚拟窗口的宽度为设备宽,初始缩放比为1倍,同时不允许用户手动缩放。
    content:
        width--虚拟窗口的宽度,device-width设备宽度
        initial-scale--初始缩放比例
        maximum-scale--最大缩放比
        minimum-scale--最小缩放比
        user-scalable--是否允许用户手动缩放
            user-scalable=no 不允许用户手动缩放
            user-scalable=yes 允许用户手动缩放,默认值

4、常见移动端布局方案

1)流式布局——宽度自适应适配
    垂直方向高度固定,水平方向使用百分比实现,并且使用弹性布局、浮动、定位等技术综合使用创建可扩展的流式布局
    优先:可以很好解决自适应需求
    缺点:实际效果可能会不协调,设计存在局限性

2)rem布局
    rem——相对于根元素的font-size属性值的单位,css3新增单位
    未经调整的浏览器的默认字号为16像素,1rem = 16px
    rem布局的实现:
        设置页面的viewport;
        动态计算并设置html的font-size值;
        按照PC端布局方式正常布局,将px单位换算成rem单位

3)vw适配
    vw——viewport's width css3规范中视口单位
    vh——viewport's height
    vw和vh都是将屏幕分成100份,1vw等于屏幕宽度的1%
    iphone5   320  1vw-- 3.2   多少个vw是100像素   100px * 1vw/3.2 = 31.25
    iphone6   375  1vw--3.75                      100px * 1vw/3.75 = 26.6666
    vw布局:750px宽度   100vw = 750px   1vw = 7.5px
    兼容:IE9+  IOS6.1+   Android4.4+
        在PC端使用时要注意滚动条,移动端滚动条不占位
    vw+rem——750px
        1vw = 7.5px   1px = 0.133333vw
        假设1rem = 100px,  100px =  13.333vw
        html{
            font-size: 13.333vw;
        }

4)flexible.js + rem布局    (已经废弃)
    解决的HTML5页面终端适配
    实现原理:设备划分成10份,确定好html标签的font-size属性值
    750px,html{ font-size: 75px; },页面中元素的rem值 = 元素的px值/75
使用方法:
    1)在head标签中添加插件
        方法一:直接将插件下载到本地,通过script标签对链接;
        方法二:通过script标签对,加载阿里CDN文件:
            <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    2)将视觉稿中的px转换成rem 

5)响应式布局
 一个网站能适配多个终端,实现不同屏幕分辨率的终端上都能呈现出较好的显示效果,而且不需要为每个终端定制一个特定版本。
    响应式布局的组成:弹性盒布局、图片、css media query的使用等等
    响应式布局的原理:通过媒体查询检测不同的设备屏幕尺寸,适当调整标签显示布局,在每种设备屏幕宽度下呈现出不同的页面效果

6)Grid网格布局
    flex布局——轴线,可以看成一维布局
1、基本介绍
    Grid网格布局——二维布局
    可以将容器分成“行”、“列”,产生单元格
2、基本概念
    容器container——使用网格布局的区域
    项目item——容器内使用网格定位的子元素

    行row——容器中水平区域
    列column——容器中垂直区域

    单元格cell——行和列交叉区域,m行n列会产生的单元格数为m*n

    网格线grid line——划分网格的线,m行有m+1根水平网格线

媒体查询&移动端尺寸计算

20200305

1、媒体查询

1)什么是媒体查询
    可以根据设备显示器特性为它设置css样式
    媒体查询可以检测的内容:viewport的宽度和高度、设备的宽度和高度、设备的方向、分辨率
2)引入方式
    在样式表中引入——在style标签对中引入、在外部样式表中引入
    @media mediaType  and  (media feature){
        选择器{ 属性: 属性值; }
    }
    mediaType设备类型:
        all 适用于所有多媒体类型设备
        print 适用于打印机或打印预览
        screen 电脑屏幕、平板电脑、智能手机等
        speech 屏幕阅读器等
    media feature媒体特性表达式:
        width 浏览器宽度  height浏览器的高度
        max-width最大宽度   min-width最小宽度
        device-width设备宽度   device-height设备高度   max-device-width最大设备宽
        orientation 设备方向	orientation:landscape|portrait 横屏|竖屏	
        aspect-ratio: 1/2;可见区宽度和高度的比率
        device-aspect-ratio: 1/1; 输出设备的屏幕可见区宽度和高度的比率
    使用link标签引入:
        <link rel="stylesheet" media="mediaType  and  (media feature)and  (media feature)" href="*.css">

移动端样式重置&兼容&像素

20200306

1、移动端样式重置

1)禁止用户选中文字,安卓无效
    -webkit-user-select: none;
2)禁止长按弹出系统菜单。
    -webkit-touch-callout none;
3)去除android下a/button/input标签被点击时产生的边框&去除ios下a标签被点击时产生的半透明灰色背景。
    -webkit-tap-highlight color: rgba(0,0,0,0);
4)切换横竖屏或者用户自己通过浏览器设置的话,可以改变字体的大小(需要给body下的所有元素)。-webkit-text- size-adjust: 100%;
5)按钮在ios下都是圆角。
    -webkit-appearance. none;
    border-radius: 0;
6)修改placeholder的样 式。
    input:-webkit-input-placeholder{ color:#000; }
    input:focus:. webkit-input-placeholder{color:#f00; }

2、移动端特殊处理

1)超小字体处理一- -transform: scale()
2)动画定义3D启用硬件加速一开启GPU硬件加速模式从CPU--GPU
    -webkit-transform: translate3d(0,0,0);
    transform: translate(0,0,0);
3)圆角bug :部分Android手机圆角失效
    background-clip: padding-box;
4)Input 的placeholder会出现文本位置偏上的情况
在input输入文本垂直居中的情况下,给placeholder设置padding-top,不设置行高

3、像素的三种分类

1)设备像素——物理像素
    是设备固有的属性
    早起只有物理像素,在不缩放的情况下1px表示1个物理像素;
    iPhone6/7/8的物理像素为750*1334
    设备分辨率——显示器的宽度和高度分别是多少个物理像素
2)设备独立像素——独立像素、逻辑像素
    是操作系统定义的像素单位
    iPhone6/7/8的独立像素为375*667,正好是物理像素的一半
    逻辑分辨率:使用屏幕的宽度*高度来表示

    设备像素比DPR——不同型号手机物理像素和独立像素的关系:
        设备像素比 = 物理像素/独立像素
3)css像素
    width: 100px;  在放大200%,宽度100个css像素
        原本的元素宽度为100个独立像素,当缩放200%之后元素的宽度变为200个独立像素
    css像素和独立像素的关系:缩放比例是css像素的边长/独立像素的边长
        在缩放比例为100的情况下,一个css像素为一个独立像素
    
    设备像素比——css像素和物理像素的关系

4、Retina显示屏:视网膜屏

 1像素边框问题:
    border-width: thin;//thin细边框、medium中等、thick粗

5、属性

outline属性:轮廓,不占位
         outline: none; 去掉轮廓线
         outline: 轮廓宽度  轮廓线型 轮廓颜色;

         outline-offset属性:对轮廓进行偏移

letter-spacing属性:字间距

word-spacing属性:词间距

响应式布局方案

20200310

1、什么是响应式布局

 一个网站能适配多个终端,实现不同屏幕分辨率的终端上都能呈现出较好的显示效果,而且不需要为每个终端定制一个特定版本。
    响应式布局的组成:弹性盒布局、图片、css media query的使用等等
    响应式布局的原理:通过媒体查询检测不同的设备屏幕尺寸,适当调整标签显示布局,在每种设备屏幕宽度下呈现出不同的页面效果

2、技术要点 

    1)meta标签的设置
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
         
        IE8及更早版本的浏览器中不支持媒体查询,需要使用media-queries.js或respond.js增加IE对媒体查询的支持:
        <!--[if lt IE 9]>
            <script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js"></script>
        <![endif]-->
 
        <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
            调用Chrome浏览器或者是IE高版本浏览器
         
        <meta name="HandheldFriendly" content="true">
            兼容不支持viewport的设备
    2)使用媒体查询适配对应样式
        常用屏幕尺寸查询:
         超小屏幕下   手机    <768px
         小屏幕       平板    >= 768px
         中等屏幕     桌面    >= 992px
         大屏幕       桌面    >=1200px
        移动端优先:超小型设备    手机   768px以下
            @media screen and (min-width: 768px){ 平板电脑 }
            @media screen and (min-width: 992px){ 台式电脑 }
            @media screen and (min-width: 1200px){ 大台式电脑 }
        大屏幕优先:大台式电脑   1200px以上
            @media screen and (max-width: 1200px){ 台式电脑 }
            @media screen and (max-width: 992px){ 平板电脑 }
            @media screen and (max-width: 768px){ 手机 }
    3)响应式字体设置
        rem单位相对于html的font-size值做调整
        em单位相对于父元素的font-size值做调整
    4)百分比布局:
        宽度不固定,可以使用百分比;内外间距(左右方向)也可以使用百分比
        在实现的过程中需要布局容器:
            手机  <768px   布局容器的宽度100%
            平板  >=768px    设置宽度为750px
            桌面  >=992px     设置宽度970px
            大屏   >=1200px    设置宽度1170px
        浮动、定位、弹性盒子
        响应式内容:
            img标签:前景图,可以通过max-width属性控制图片的大小,height: auto; 
            响应式背景图片: background-size属性调整背景图的尺寸

3、响应式优缺点

    优点:一站适配所有终端;减少工作量;节省时间;每个设备都能得到较好的设计
    缺点:会加载更多的样式和脚本资源;设计难于精确控制;老版本的浏览器中兼容不好

网格布局方案

20200311

1、Grid网格布局

    flex布局——轴线,可以看成一维布局
1)基本介绍
    Grid网格布局——二维布局
    可以将容器分成“行”、“列”,产生单元格
2)基本概念
    容器container——使用网格布局的区域
    项目item——容器内使用网格定位的子元素

    行row——容器中水平区域
    列column——容器中垂直区域

    单元格cell——行和列交叉区域,m行n列会产生的单元格数为m*n

    网格线grid line——划分网格的线,m行有m+1根水平网格线

2、相关属性

容器属性——写在父元素上
1)display属性:
    display: grid; 容器采用网格布局
2)grid-template-rows属性、grid-template-columns属性 ——对容器的水平方向和垂直方向划分
    属性值: 像素|百分比|auto|repeat()|fr|minmax()|网格线名称
        repeat(),有两个参数,第一个参数表示重复的次数,第二个参数表示重复的值
        minmax(),有两个参数,分别表示最大值和最小值
		grid-template-rows: 100px 100px 100px;
        grid-template-columns: 100px 25% 100px;
		grid-template-columns: 100px auto 100px;
		grid-template-rows: repeat(3, 30%);
		grid-template-rows: 1fr 2fr 1fr;/*3个值的和必须大于等于1,否则会有空白空间*/
		grid-template-rows: repeat(2,1fr) minmax(100px,300px);
		grid-template-rows: 1fr 1fr minmax(100px,200px);
		grid-template-rows: [r1] 100px [r2] auto [r3] 100px; /*网格名称*/
        grid-template-columns: [c1] 100px [c2] auto [c3] 100px;
		
		
3)grid-row-gap属性、grid-column-gap属性、grid-gap属性  ——定义网格中的网格间隙
    定义网格中的网格间隙
    简写:grid-gap: grid-row-gap   grid-column-gap;
		grid-row-gap: 10px; 行间距
		grid-column-gap: 20px; 列间距
		
		grid-gap: 10px 20px;
	
4)grid-auto-flow属性:  ——排列顺序
    grid-auto-flow: row; 默认值,先行后列
    grid-auto-flow: column; 先列后行
	
	
5)justify-items属性、align-items属性、place-items属性——内容分布
    justify-items属性:水平呈现方式
    align-items属性:垂直呈现方式
        属性值:start|end|center|stretch
				开始|结束|中间|默认
    简写:place-items: align-items justify-items;
			place-items: start end;
		
6)justify-content属性、align-content属性、place-content属性 --整体分布
    justify-content属性:水平分布方式
    align-content属性:垂直分布方式
        属性值:start|end|center|space-between|space-around|space-evenly;
				开始|结束|中间|元素间留白|元素之前之间之后留白|元素间隔相等
	简写:place-content: justify-content align-content;	
		
7)grid-template-areas属性:定义区域
    应用在子项目的属性:grid-area属性,规定项目所在区域
	    grid-template-areas: "box1 box1 box1"
							 "box2 box2 box3"
							 "box2 box2 box3";
		划分三个区域box1、box2、box3
		分配三个区域:
		.wrap div:nth-child(1){
            grid-area: box1;
        }
        .wrap div:nth-child(2){
            grid-area: box2;
        }
        .wrap div:nth-child(3){
            grid-area: box3;
        }
	
项目属性:
1)grid-column-start属性、grid-column-end属性、grid-row-start属性、grid-row-end属性-项目的位置
    grid-column-start属性:水平填充,左边框所在的垂直网格线
    grid-row-start属性:垂直方向填充,上边框所在的水平网格线
	grid-column-end属性:右边框所在的垂直网格线
    grid-row-end属性:下边框所在的水平网格线
	简写:
    grid-column: grid-column-start / grid-column-end; 
    grid-row:grid-row-start / grid-row-end;
	
	grid-column-start: 2; 第二根垂直轴线开始
	grid-row-end: 3;	第三根水平轴线结束
	注:单位是第几条轴线,左-上,起始和结束可以决定项目的大小

2)justify-self属性、align-self属性、place-self属性
    justify-self属性:水平方向的对齐方式
    align-self属性:垂直方向对齐方式
        属性值:start|end|center|stretch
				开始|结束|中间|默认

 

 

 

 

©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页