前端基础css篇-变化吧

二叶草

1214
文章

0
评论

2020年2月8日15:18:16IT专区评论阅读模式

一、web标准

web标准是网页制作的标准，它不是一个标准，而是由一系列标准组成。

web标准包含了三个方面：结构（html）,表现(css),行为(javascript或js)

注：a）W3C—万维网联盟，制定了结构和表现的标准

b) ECMA—欧洲电脑厂商联合会，制定了行为标准

二、html相关概念

1.html—超文本标记语言

2.xhtml—可扩展的超文本标记语言

3.html5—html的第五次重大修改

注：html和xhtml的区别

xhtml相对于html4.0并没有增加新的标签，只是语法要求更加严格，例如标签名称小写，标签必须闭合

三、DW常用快捷键

1.新建文件 ctrl+n

2.保存文件 ctrl+s

3.预览网页 F12

4.打开文件 ctrl+o

5.打开首选参数面板 ctrl+u

6.撤销 ctrl+z

7.恢复 ctrl+y

8.查找和替换 ctrl+f

9.显示或隐藏文件面板 F8

四、html基本结构

1.文档声明

作用：告知浏览器网页使用哪种html或xhtml规范

h5的文档声明： <!doctype html> 或 <!DOCTYPE HTML> 或 <!DOCTYPE html>

2.网页根标签（根元素）：<html>…</html>

所有网页的内容及标签都要放置在html标签之间

3.html中的内容分为两大部分：head部分和body部分

a)head部分：主要用来设置字符编码，网页标题，关键词，描述，引入一些外部css文件，js文件等

b)body部分：所有要在网页中呈现的内容和放置内容的标签都要放在body部分

注：常用字符编码格式为utf-8,还有gbk,gb2312

五、html基本语法

1.常规标记

语法： <标记属性=”属性值” 属性=”属性值”></标记>

eg: <h3 class=”tit” id=”box”>前端开发</h3>

注：a）标记名称要小写

b) 属性和属性值用等号连接，属性值要加双引号

c)属性和标记之间要加空格，多个属性之间用空格隔开

d) 所有标点符号都必须是英文状态下的

2.空标记

语法： <标记属性=”属性值” 属性=”属性值”/>

eg: <img src=”1.jpg” title=”图片”/>

六、html常用标记

1.网页内容标题

语法： <hx>标题内容</hx> (x为1-6)

eg: <h3>前端开发</h3>

注：h1-h6都有加粗效果，字体逐渐减小

2.段落文本

语法： <p>段落文本内容</p>

3.换行

语法：<br/>

4.空格（html转义字符）

5.加粗文本

语法： <strong>加粗文本内容</strong>

<b>加粗文本内容</b>

6.倾斜文本

语法：<em>倾斜文本内容</em>

<i>倾斜文本内容</i>

7.水平分隔线

语法： <hr/>

8.上标和下标

语法：上标： <sup>上标</sup>

下标：<sub>下标</sub>

※9.无序列表

语法： <ul>

…

</ul>

10.有序列表

语法：<ol type=”a|A|I|i” start=”2″>

…

</ol>

扩展：type用来设置序号的类型

start用来设置索引值

11.自定义列表

语法： <dl>

…

</dl>

—————————————————

相对路径的三种写法：

a）当当前文件和目标文件在同一目录下，写法如下：目标文件名+扩展名

b）当当前文件和目标文件所在文件夹在同一目录下，写法如下：目标文件所在文件夹名/目标文件名+扩展名

c）当当前文件所在文件夹和目标文件所在文件夹在同一目录下，写法如下：

../目标文件所在文件夹名/目标文件名+扩展名

注: ../代表返回到上一级目录

—————————————————

※12.图片

语法： <img src=”图片路径” title=”提示信息” alt=”替换信息” width=”数值” height=”数值”/>

eg: <img src=”img/1.jpg” title=”前端开发” alt=”加载失败” width=”100″ height=”100″/>

注：alt和title的区别

alt是当图片由于某些原因无法正常加载时显示的替换信息

title是当鼠标悬停在图片上时显示的提示信息

※13.超链接

语法： <a href=”链接地址” target=”_blank” title=”***”>链接文本或图片</a>

eg: <a href=”http://www.baidu.com” target=”_blank”>百度一下</a>

<a href=”#”>新闻</a> 空链接

注：target=”_blank” 链接地址在新窗口打开

扩展：href和src的区别：

a）href表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a

b）src是source的缩写，src指向的内容会嵌入到文档中当前标签所在的位置。常用的有img，script

14.表格

作用：显示数据

语法：<table border=”1″ cellspacing=”0″ cellpadding=”0″>

…

</tr>

…

</tr>

…

</table>

注：表格相关html标签

1）table 用来定义一个表格

2）tr 定义表格的行

3）td 定义表格的列

4）th 定义表格的表头(自动加粗居中)

5）caption 定义表格的标题

6）thead 定义表格的页眉

7）tbody 定义表格的主体

8）tfoot 定义表格的页脚

注：表格相关html属性

a) border 设置表格的边框

b) cellspacing 设置单元格之间的间距

c) cellpadding 设置内容和单元格之间的空隙

d) width 定义单元格的宽度和表格的宽度

e) height 定义单元格的高度或表格的高度

f) align 设置单元格内容的水平对齐方式 align=”left|center|right”

g) colspan 合并列（加在td上）

h) rowspan 合并行（加在td上）

表单

一、表单

作用：用来搜集用户信息

语法： <form method=”get|post” action=”服务器端文件”>…</form>

注：所有的表单控件都要放置在form标签之间

1.文本框

语法： <input type=”text” value=”***”/>

2.密码框

语法：<input type=”password”/>

3.提交按钮

语法： <input type=”submit” value=”登录”/>

注：通过设置value属性改变按钮的默认文字内容

提交按钮和要提交的表单内容必须放在一个form标签中，才能提交

4.重置按钮

语法：<input type=”reset”/>

注：重置按钮必须放在form中才具备重置功能

5.单选按钮

语法：<input type=”radio” name=”a” checked=”checked”/>

注：a)一组中的单选按钮添加一致的name属性值，才能达到多选其一的效果

b)设置checked=”checked”,在页面加载完成后添加默认选中项

c)当属性和属性值相同时，可以省略属性值

6.复选按钮

语法： <input type=”checkbox” checked/>

注：checked属性的设置同单选按钮

7.下拉列表

语法：<select>

…

</select>

注：设置selected属性改变默认选中项

8.文本域

语法：<textarea cols=”字符宽度” rows=”行数”></textarea>

扩展：禁止用户随意拖拽改变文本域的大小，设置如下：

textarea{resize:none;}

9.普通按钮

语法： <input type=”button” value=”***”/>

注：普通按钮不具备提交功能，一般结合js的onclick事件使用

普通按钮上的默认文字内容为空，需要通过value属性进行设置

注：disabled=”disabled” 设置表单控件为禁用状态

◆ get和post的区别

1）get主要用来获取数据，post主要用来向服务器发送数据

2）get发送数据时，信息会显示在url地址栏中，post直接通过服务器发送，用户看不到这个过程

3) get可以传送的数据量较小，一般不能大于2kb，post可以传送的数据量较大，理论上没有限制

4) get安全性较低，post安全性较高

二、div

作用：无语义标签，主要用来布局和划分板块

语法： <div>…</div>

三、span

语法： <span>…</span>

作用：

a)标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

b)span标签提供了一种将文本的一部分或者文档的一部分独立出来的方式

四、iframe框架

语法：<iframe src=”1.html表单.html” width=”800″ frameborder=”0″ scrolling=”auto”></iframe>

注：scrolling=”no” 隐藏或去掉iframe的滚动条

作用：创建包含另外一个文档的内联框架

五、html注释

语法： <!–注释内容–>

css基础

一、css概念及特点

css—层叠样式表

特点：实现了结构与表现相分离

作用：定义html元素如何在网页中显示

二、css基础语法

css由选择器和声明两大部分组成，声明又是由属性和属性值组成。即：

选择器{属性:属性值;}

eg: h1{color:red;}

注：a）声明要放在花括号中,每条声明结束要加分号

b) 属性和属性值用冒号连接

c) 建议一条声明占一行

三、样式表的创建

1.内联样式（行间样式，行内样式）

语法：<标记 style=”属性:属性值;”></标记>

eg: <h1 style=”color:red;”>前端开发</h1>

2.内部样式（嵌入式样式）

语法：<style type=”text/css”>

选择器{属性:属性值;}

</style>

eg: <style type=”text/css”>

h1{color:red;}

</style>

注：style标签一般放在head部分

3.外部样式表

a）使用link标签引入

首先创建一个后缀名为.css的文件

然后通过link标签引入，语法如下：

注：rel是用来建立外部文件和本文件之间的关系

link标签一般放在head部分

b)使用@import引入css文件

语法： @import “css文件路径”;

★ link和@import引入外部样式的区别 ★

1）link属于html标签，除了可以引入css文件以外，还可以引入其他文件，@import属于css范畴，只能引入css文件（老祖宗的区别）

2）link引入的css文件和页面同时加载，@import引入的css文件在页面加载完成后载入（加载顺序不同）

3）link引入css文件无兼容性问题，所有浏览器都支持，@import低版本浏览器不支持（浏览器支持不同）

4）link是html标签，支持js改变dom，@import不支持（是否支持js改变dom）

四、样式表的优先级

样式表的优先级

采取就近原则，即离被设置的元素越近，优先级越高

当css属性值中出现!important的时候，它的优先级最高即：

!important>内联>内部>外部

五、css注释

语法： /*注释内容*/

六、css选择器

1.id选择器

语法：<标记 id=”id名”></标记>

#id名{属性:属性值;}

eg: <h1 id=”edu”>前端开发</h1>

#edu{color:red;}

注：a）id选择器优先级最高，id名是唯一的，不能出现同名的id

b) id名命名要语义化，常见命名方法：

I.驼峰命名法 id=”mainLoginContent”

II.下划线连接命名法 id=”main_login_con”

2.类选择器(class选择器)

语法：<标记 class=”类名”></标记>

.类名{属性:属性值;}

eg: <h1 class=”tit”>前端开发</h1>

.tit{color:red;}

注：可以给具有相同样式的元素添加相同的class名

注：类名词列表用法：

当一个元素即具有与其他元素相同的样式，又有某一个样式不同时，需要用到类名词列表的方式

3.后代选择器（包含选择器）

语法：选择符1 选择符2{属性:属性值;}

eg: .box a{color:red;}

注：选择符1和选择符2必须满足是包含与被包含的关系，才能使用后代选择器

css核心属性

一、字体类属性

1.字体类型

语法：font-family:字体1,字体2,字体3;

eg: body{font-family:”Microsoft YaHei”,Arial;}

或 body{font-family:”微软雅黑”,Arial;}

注：a）font-family设置多个字体时，用逗号分隔

b）中文字体要加双引号，英文字体由多个单词组成也要加双引号

c）浏览器会优先识别字体1,如果找不到识别字体2，如果所列出的字体都无法识别，显示浏览器默认字体

d）特殊字体一律用图片

2.字体大小

语法：font-size:数值+单位;

eg: p{font-size:12px;}

注：a)字体大小一般设置偶数不设置奇数

b)浏览器默认字体大小为16px

c)字体大小单位有px,em,rem,pt等

注：font-size:16px; 等价于 font-size:medium;

3.字体加粗

语法：font-weight:normal(常规字体)|bold(加粗字体)|bolder(加粗字体)|100-900;

eg: h3{font-weight:normal;}

注：100-500为常规字体，600-900为加粗字体

4.字体倾斜

语法：font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);

5.字体是否大小写

语法：font-variant:normal(常规字体)|small-caps(小型大写字母字体);

注：主要针对英文起作用

6.font复合写法

语法：font:style weight size family;

eg：font:12px/1.5 “微软雅黑”;

上述代码是指字体大小为12px，行高为字体大小的1.5倍，字体类型为微软雅黑

注：在font的复合写法中，size和family不可互换位置，也不可以和其他简写属性互换位置

7.字体颜色

语法：color:颜色值;

注：颜色值的三种写法：

a）十六进制写法

color:#000; 黑色 color:#fff; 白色

b) rgb写法

color:rgb(0,0,0); 黑色 color:rgb(255,255,255); 白色

c) 颜色单词

color:black; color:white; color:red;

二、文本类属性

1.文本水平对齐方式

语法：text-align:left(左对齐)|center(居中对齐)|right(右对齐)|justify(两端对齐);

注：a）当需要让容器中的文本或图片等其他元素水平居中时，给父容器添加text-align:center;

b）justify两端对齐主要针对英文

2.行高

语法：line-height:数值+单位;

eg: line-height:32px;

注：a）当单行文本的行高等于容器高时，可以实现单行文本在定高容器中垂直居中

b) line-height不允许设置负值

c) line-height的属性值只写数值不加单位时，代表行高为字体大小的多少倍

3.文本修饰

语法：text-decoration:none(没有修饰)|underline(下划线)|line-through(删除线)|overline(上划线);

eg: a{text-decoration:none;}

a:hover{text-decoration:underline;}

CSS盒模型

一、css盒模型的概念及组成

css盒模型的概念—css盒模型是css的基石，主要用来设置元素间的相互关系，每个html元素都有自己的盒模型。

css盒模型的组成—由content(主体),padding(补白，填充)，border(边框)，margin(外边距)组成。

1.content

语法：width:数值+单位;

height:数值+单位;

注：width和height的属性值必须加单位

2.padding(content和border之间的区域)

a）设置一个值

padding:20px; 上，下，左，右均为20px

b）设置两个值

padding:20px 5px; 上下为20px，左右为5px

c）设置三个值

padding:20px 5px 10px;上为20px，左右为5px，下为10px

d）设置四个值

padding:20px 5px 10px 0px;

顺时针顺序依次为：上20px，右5px，下10px,左0px

e) 还可以单独设置某一个方向的padding值

eg: padding-left:20px; （left还可以更改为top，right，bottom）

注：

I.如果元素设置了宽高，设置padding后，要在原来宽高的基础上减去设置的padding值，保证总宽高不变

II.padding不允许设置负值

III.背景可以延伸到padding区域

IV.当需要调整子元素在父元素中的位置关系时，可以通过给父元素设置padding来实现

容器溢出

一、容器溢出

语法：overflow:visible|hidden|scroll|auto|inherit;

visible 默认值，内容不会被裁剪，显示在容器之外

hidden 内容会被裁剪，隐藏不可见

scroll 溢出部分的内容以滚动条的形式查看，如果没有溢出，显示默认的滚动条

auto 容器溢出时显示滚动条

inherit 规定从父元素继承overflow属性值

还可以单独设置某一个方向的溢出：

overflow-x:hidden|scroll|auto;

overflow-y:hidden|scroll|auto;

二、文本溢出

语法：text-overflow:clip(不显示省略号)|ellipsis(显示省略号);

三、单行文本省略号的设置

四个条件缺一不可：

（a）设置固定的宽度 width:value;

（b）设置文本强制在一行显示 white-space:nowrap;

（c）设置容器溢出隐藏 overflow:hidden;

（d）设置文本溢出显示省略号 text-overflow:ellipsis;

注：I.此方法只适用于单行文本省略号的设置，如果是多行文本显示省略号可以使用js或由后端来处理

II.上述四个属性必须给文本所在最近的父元素设置

元素类型及转换

一、html元素类型

html元素分为三大类：块元素，内联元素，可变元素

注：也可将html元素分为这样三类：块元素，内联元素，内联块状元素

1.块元素

常见块元素：div,p,ul,ol,li,dl,dt,dd,form,table,tr,td,hr,h1,h2,h3,h4,h5,h6,fieldset

块状元素特点：

a) 块状元素以块的形式显示为一个矩形区域

b) 块状元素默认情况下，独占一行，自上而下排列

c) 块状元素可以定义自己的宽度和高度，以及盒模型中的任意属性（如margin，padding，border）

d) 块状元素可以作为一个容器容纳其他的块元素和内联元素

2.内联元素

常见内联元素：a,span,strong,b,i,em,br,img,input,select,textarea

内联元素特点：

a) 内联元素没有自己的形状，也显示为一个矩形区域

b) 内联元素在一行逐个进行显示

c) 内联元素不能定义宽度和高度，以及与高度相关的一些属性（margin-top,margin-bottom,padding-top,padding-bottom,line-height）

d) 内联元素不能嵌套块元素

常见内联块状元素：img,input,select,textarea

内联块状元素特点：

a) 即具有内联元素特点，在一行逐个进行显示

b) 又具有块状元素特点，可以定义宽度和高度，以及盒模型中的任意属性

注：vertical-align属性只针对内联块状元素有效

3.可变元素

根据上下文关系决定元素类型，可变范围块元素和内联元素

注：常用html元素默认有margin，padding的如下：

body 默认margin

h1-h6 默认margin

p 默认margin

ul 默认margin和padding

ol 默认margin和padding

dl 默认margin

dd 默认margin

td 默认padding

input 默认padding

textarea 默认padding

fieldset 默认padding和margin

二、元素类型转换

语法：display:block|inline|inline-block|none|list-item;

a)block 将元素转换为块元素，是大部分块元素的默认display属性值

b)inline 将元素转换为内联元素，是内联元素的默认display属性值

c)inline-block 将元素转换为内联块状元素，是内联块状元素的默认display属性值（如img,input）

d)none 将元素隐藏不可见

e)list-item 将元素转换为列表类型，是li的默认display属性值

—————————————————

扩展：图片默认有空隙：

方案一：给img添加display:block;

方案二：给img添加float属性

—————————————————

注：当给元素设置了float后就相当于转换成block

三、置换元素和非置换元素

1.置换元素

浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：根据img标签的src属性决定在网页中显示什么样的图片

根据input标签的type属性决定在网页中显示什么类型的input控件

2.非置换元素

除了置换元素，大部分html元素都是非置换元素，其内容直接显示在浏览器中

（缺内容）

定位及锚点设置

一、常见的三种布局模型

1.流动模型（Flow）

元素没有设置css样式的布局，块元素自上而下排列，内联元素在一行逐个进行显示

2.浮动模型（Float）

使用float属性进行网页布局，可以让块元素脱离文档流在一行显示，可以让内联元素设置宽高并且在一行显示

3.层模型（Layer）

使用position定位属性进行布局

二、定位布局

语法：position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位);

1.绝对定位

语法：position:absolute;

要成为绝对定位元素的参照物，必须满足以下两个条件：

a)参照物和绝对定位元素必须是包含与被包含关系

b)参照物必须具有定位属性

如果找不到满足以上两个条件的父包含块，那么绝对定位的参照物是浏览器窗口

注：元素的定位位置通过left,right,top,bottom属性来进行设置

2.相对定位

语法：position:relative;

参照物：元素偏移前的位置

★相对定位和绝对定位的区别

a）参照物不同

绝对定位的参照物是离元素最近的具有定位属性的父包含块，相对定位的参照物是元素偏移前的位置

b) 是否会脱离文档流

绝对定位会脱离文档流，位置会被其他元素占据，相对定位不会脱离文档流，原来的位置保留

3.固定定位

语法：position:fixed;

参照物：浏览器窗口或屏幕窗口

注：当给元素设置了固定定位后，元素会脱离正常的文档流，位置会被其他元素占据

三、透明度设置

语法:opacity:数值; （取值范围0-1,0为完全透明，1为完全不透明）

注：IE8及以下版本的IE浏览器不支持opacity属性，兼容写法如下：

filter:alpha(opacity=数值); （取值范围0-100）

四、定位元素层叠属性

语法：z-index:auto|number;

number 无单位的整数值，也可以设置负值

注：没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；

五、锚点链接

语法：

a）命名锚记：

<标记 id=”锚记名”></标记>

b）连接锚记名

eg: <h1 id=”one”>第一章 html基础</h1>

—————————————————

扩展一：如何在网页中插入flash

语法：<object width=”1000″ height=”500″>

</object>

扩展二：设置滚动字幕效果

语法：

滚动内容…

</marquee>

注：scrollamount用来设置滚动的速度，值越大速度越快

宽高自适应

一、宽度自适应

语法：width:100%;

注：给元素设置宽度100%将会继承父元素的宽度

块状元素默认宽度为100%

注：宽度自适应主要应用在通栏效果中

二、高度自适应

语法：height:auto; 或不设置高度

注：容器的高度由里面内容来决定

三、最大，最小高度，最大，最小宽度

1.最小高度

语法：min-height:数值+单位;

注：IE6不识别min-height属性，兼容写法如下：

a）min-height:100px; _height:100px;

b）min-height:100px; height:auto!important; height:100px;

2.最大高度

语法：max-height:数值+单位;

3.最小宽度

语法：min-width:数值+单位;

注：块状元素设置min-width属性时，需要将元素转换为内联块状元素

4.最大宽度

语法：max-width:数值+单位;

注：以上四组属性IE6及以下版本浏览器都不识别

四、高度塌陷问题

描述：父元素高度自适应，子元素float后，导致父元素高度为0称为高度塌陷问题

a）给父元素一个固定的高度

父元素{height:value;}

缺点：给父元素固定的高度违背了高度自适应的原则，不建议使用

b) 给父元素添加overflow:hidden;

优点：简单

缺点：当子元素存在定位时，定位在父元素框之外的部分将会被隐藏掉

c) 在浮动的子元素末尾添加一个空div，并设置如下样式：

.clear{clear:both;height:0;overflow:hidden;}

优点：兼容性好，所有浏览器都支持

缺点：在网页中添加若干个无意义的div，容易造成代码冗余

d）万能清除浮动法

父元素:after{content:”;

display:block;

clear:both;

height:0;

overflow:hidden;

visibility:hidden;}

优点：解决了代码冗余的问题，是官方推荐的解决高度塌陷问题的方法

五、伪元素

1. 元素:before

语法：.box:before{

content:”hello”;

font-size:30px;

color:red;

…

}

注：:before是在元素里面所有内容之前添加一个伪元素

2. 元素:after

语法：.box:after{

content:”world”;

font-size:30px;

color:green;

}

注： :after是在元素里面所有内容之后添加一个伪元素

注：I.无论伪元素内容是否为空，都必须添加content属性

II.伪元素是一个内联元素

六、元素隐藏不可见的两种方式

1.display:none;

元素隐藏不可见，位置不保留（看不见，摸不着）

2.visibility:hidden;

元素隐藏不可见，位置保留(看不见，摸得着)

七、窗口高度自适应

首先设置：

html,body{height:100%;}

然后给元素设置：

元素{height:100%;}

注：窗口高度自适应主要应用于内容不满一屏或者没有内容body和html高度为0的情况

八、水平居中

1.如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center;来实现的。

2.满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

注：当元素设置了float，绝对定位，固定定位，左右margin为auto将会失效

3.不定宽块状元素水平居中

方案一：给子元素设置display:inline-block;给父元素设置text-align:center;

方案二：给父元素设置display:table; margin:0 auto;

注：display:table; 将元素转换为表格形式

九、元素水平垂直都居中问题

1.定宽高元素在屏幕窗口水平垂直都居中，方法如下：

元素{

width:value;

height:value;

position:fixed;

left:50%;

top:50%;

margin-left:-width/2;

margin-top:-height/2;

}

2.不定宽高元素在屏幕窗口水平垂直都居中，方法如下：

元素{

position:fixed;

left:0;

top:0;

bottom:0;

right:0;

margin:auto;

}

3.不定宽高的子元素在父元素中水平垂直都居中，方法如下：

a）父元素{

position:relative;

}

子元素{

position:absolute;

left:0;

top:0;

bottom:0;

right:0;

margin:auto;

}

b）父元素{

display:table-cell;

text-align:center;

vertical-align:middle;

}

注：display:table-cell;将元素转换为表格单元格形式

十、圆角效果

语法：border-radius:数值+单位;

注：border-radius:50%; (圆)

注：border-radius是css3新增的属性，低版本IE浏览器不支持，需要使用背景图片的方式来实现

常见兼容性问题

一、常见兼容性问题

1.双倍浮动bug

描述：块元素float后，又设置了横向的margin，在IE6下显示的margin比设置的margin值要大

解决方案：给浮动的块元素添加display:inline;

2.表单元素行高不一致

解决方案：

方案一：给表单元素添加vertical-align:middle;

方案二：给表单元素添加float属性

扩展：如何去掉表单元素的外边框，方法如下：

input{outline:none;}

3.在IE6不能识别较小高度的容器（一般为10px）

解决方案：

a）给容器添加overflow:hidden;

b）给容器添加font-size:0; (如果容器高度为0时使用第一种解决方案)

4.超链接中的图片在IE浏览器中有默认的边框

解决方案：给img标签添加border:0; 或 border:none;

5.min-height属性IE6不识别

解决方案：

a）min-height:100px; _height:100px;

b）min-height:100px; height:auto!important; height:100px;

6.图片默认有空隙

解决方案：

a）给img设置display:block;

b）给img设置float属性

7.百分比bug

描述：父元素宽度100%，子元素宽度50%，在IE6下，50%+50%大于100%

解决方案：给右边左浮动的子元素添加clear:right;

8.低版本IE浏览器不识别opacity属性

解决方案：filter:alpha(opacity=数值);

9.鼠标指针bug

描述：cursor:hand;只有低版本的IE浏览器支持，其他浏览器都不支持

解决方案：cursor:pointer; 所有浏览器都支持，将鼠标指针改为手型

10.上下margin重叠问题

描述：当给上下两个元素同时设置margin值时，只能识别其中较大的那个值、

解决方案：

a)margin-top和margin-bottom只设置其中一个值

b)给其中一个设置margin属性的元素外层再嵌套一个盒子，并设置overflow:hidden;

11.假传圣旨问题

描述：给子元素设置margin-top应用在了父元素上

解决方案：

1）把给子元素设置的margin-top改为给父元素设置padding-top

2）给父元素设置overflow:hidden;

3）给父元素设置float属性

4）给父元素设置border-top:1px solid transparent;

注：transparent为透明

12.按钮默认大小不一

解决方案：按照设计稿上按钮的样式设定宽高，或者使用背景图

二、css hack(过滤器)

1.下划线属性过滤器

语法：选择器{_属性:属性值;}

eg: .box{_background:red;}

注：只有IE6可以识别带有下划线的css属性，其他浏览器都不识别

2.!important关键字过滤器

语法：选择器{属性:属性值!important;}

eg: .box{background:yellow!important;background:blue;}

注：!important关键词过滤器除IE6以外的其他浏览器都识别

添加!important关键词的css属性要放在标准css属性之前

3.*属性过滤器

语法：选择器{*属性:属性值;}

eg: .box{*background:pink;}

注：*属性过滤器只有IE6,IE7识别

4.9

语法：选择器{属性:属性值9;}

eg: .box{background:orange9;}

注：9是IE6,7,8,9都识别

语法：选择器{属性:属性值;}

eg: .box{background:black;}

注：是IE8及以上版本浏览器识别

三、五大浏览器内核

1.IE 内核：Trident

2.Mozilla Firefox(火狐) 内核：Gecko

3.Safari,Chrome 内核：Webkit

4.Opera(欧朋) 内核：Presto

5.由Google,Opera,software联合开发的浏览器排版引擎内核：Blink

—————————————————

图片整合

一、图片整合的概念

图片整合是指将多张背景图片整合到一张背景图中，通过background-position属性实现图片的定位技术。

二、图片整合的优势

将多张图整合到一张图中，减少了对服务器的请求次数，加快了页面的加载速度，减小了图片体积，从而达到了网站性能的优化。

注：图片整合技术也称为滑动门技术，雪碧图，精灵图

表单，表格高级

一、表单高级

表单的组成：表单域，表单控件，提示信息

1.表单域

2.表单控件

文本框： <input type=”text”/>

密码框： <input type=”password”/>

提交按钮： <input type=”submit” value=”login”/>

重置按钮： <input type=”reset”/>

单选按钮： <input type=”radio” name=”a”/>

复选按钮：<input type=”checkbox” checked/>

下拉菜单： <select><option>a</option>…</select>

文本域： <textarea></textarea>

3.提示信息

放置在表单控件前后的文字内容叫做提示信息，我们经常将提示信息放置在一个label标签中，语法如下：

a）点击文字选中单选按钮或复选按钮

注：设置id属性值和for属性值一致产生关联即可达到点击文字选中按钮的效果

b）通过给label标签设置样式达到一定的效果

注：label是一个内联元素

4.表单字段集及表单字段集标题

语法： <fieldset>

表单控件…

</fieldset>

注：将form表单中的内容进行分组，并添加一个标题，在form中可以嵌套多个fieldset

5.上传文件

语法： <input type=”file”/>

6.隐藏字段

语法： <input type=”hidden”/>

注：主要用于后端处理数据

7.图像域

语法： <input type=”image” width=”数值” height=”数值” src=”图片路径”/>

注：用在提交按钮位置的图像，使得这幅图像具有按钮的功能

二、表格高级

1.合并相邻单元格边框(给table加)

语法：border-collapse:collapse(合并相邻单元格边框)|separate(边框分开);

2.定义表格标题的位置(给table加)

语法：caption-side:top|bottom|left|right;

注：left和right只有火狐支持

3.设置单元格间距(给table加)

语法：border-spacing:数值+单位;

注：当设置了border-collapse:collapse;后，border-spacing将会失效

4.设置无内容单元格隐藏(给table加)

语法：empty-cells:show(显示)|hide(隐藏);

5.表格布局算法(给table加)

语法：table-layout:auto|fixed(单元格宽度固定，不随内容多少发生变化);

三、表格重要html属性

1.合并列

colspan=”数值”

2.合并行

rowspan=”数值”

3.单元格内容水平对齐方式

align=”left|center|right”

4.单元格内容垂直对齐方式

valign=”top|middle|bottom”

5.分隔线

rules=”rows|cols|all|groups|none”

rows 行分隔线

cols 列分隔线

all 行分隔线和列分隔线

groups 组分隔线

none 没有分隔线

注：表格行分组：<thead></thead> <tbody></tbody> <tfoot></tfoot>

表格列分组：<colgroup span=”数值”></colgroup>

注：span用来设置几列为一组，默认一列为一组

四、css样式重置

作用：CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准

五、seo优化

seo—搜索引擎优化

◆ 站内优化

1.页面主题优化

给网站添加一个有意义的标题

2.页面头部优化

给网站添加关键词，描述

3.超链接优化

a）尽量少用或者不用flash设置超链接，seo无法识别flash中的超链接文字

b) 给a标签添加title属性，可以起到提示访客的作用

c) 尽量避免使用图片热点链接

4.图片优化

给img标签添加title，alt属性

5.网站地图

给网站添加网站地图或网站导航，方便浏览者快速找到有浏览的网页信息

6.给网站添加友情链接

7.seo认为静态页面比动态页面更有利于搜索引擎优化

8.避免”大体积”的页面，代码结构要合理

◆ 站外优化

1.百度推广

2.流量分析

3.网站品牌建设

h5新标签

一、h5新增结构性标签

1.header 定义网页的头部

2.footer 定义网页的底部

3.section 定义网页的某一个区域

4.nav 定义网页的导航部分

5.aside 定义网页的侧边栏

6.article 定义网页的一篇文章

7.hgroup 对网页中的标题进行组合

8.figure 对网页中的元素进行组合

9.figcaption 给figure组合添加一个标题

10.dialog 定义一个对话框

二、h5新增其他标签

1.定义带有记号的文本

语法： <ma rk>定义带有记号的文本</mark>

2.定义已知范围内的标量，测量

语法： <meter value=”10″ min=”1″ max=”100″></meter>

3.定义任务的进度或进程

语法： <progress value=”10″ min=”1″ max=”100″></progress>

三、音频

语法： <audio controls autoplay loop>

…

Your browser does not support the element

</audio>

注：音频相关html属性

a）src 引入音频文件路径

b) controls 显示音频控制条

c) autoplay 设置自动播放

d) loop 设置循环播放

注：audio支持的音频格式：mp3,ogg,wav

四、视频

语法：<video controls width=”数值” height=”数值” autoplay controls poster=”图片路径”>

…

Your browser does not support the element

</video>

注：视频相关html属性

a）src 引入音频文件路径

b) controls 显示音频控制条

c) autoplay 设置自动播放

d) loop 设置循环播放

e) width 定义视频区域的宽度

f) height 定义视频区域的高度

g) poster 在视频播放前或快进快退时显示的一张图片

注：video支持的视频格式：mp4(mpeg4),ogg,webm

五、h5新增type属性值

1.type=”email”

限制用户输入为email类型（必须含有@符，@符前后内容不能为空）

2.type=”url”

限制用户输入为url类型（必须含有http://,并且后面内容不能为空）

3.type=”number”

限制用户输入为number类型

eg: <input type=”number” min=”1″ max=”100″ value=”1″ step=”2″/>

注：min 设置最小值 max 设置最大值 step 设置每次递增递减的值

4.type=”range”

产生一个滑动条的表单

eg: <input type=”range” value=”1″ min=”0″ max=”100″/>

5.type=”color”

产生一个选择颜色的面板

6.type=”date”

产生一个选择日期的面板

7.type=”time”

产生一个选择时间的面板

8.type=”month”

产生一个选择年月的面板

9.type=”search”

产生一个具有搜索意义的表单

六、h5新增表单属性

1.required 必填项，限制用户输入不能为空

eg: <input type=”text” required/>

2.placeholder=”默认提示信息内容” 给表单控件添加默认提示信息

eg: <input type=”text” placeholder=”请输入用户名”/>

3.autofocus 页面加载完成后自动聚焦到某个input框

eg: <input type=”text” autofocus/>

4.pattern=”正则表达式” 按照设置的规则输入内容

eg: <input type=”text” pattern=”^[a-zA-Z0-9]{6,16}$”/>

5.list 指定一个datalist，作为下拉提示单

eg: <input type=”search” list=”data”/>

…

</datalist>

注：type为search的input框的list属性值必须和datalist标签的id名一致才能实现搜索的功能

七.取消h5的表单验证

语法： <form novalidate></form>

sublime常用快捷键

<!– sublime常用快捷键 –>

<!– 1.快速生成html基本模板 –>

<!– !+tab键 –>

<!– 2.添加或删除注释 –>

<!– ctrl+? –>

<!– <ul class=”uls”>

<li><a href=”#”>今天是2018年七月九号</a><span>2018-07-09</span></li>

</ul> –>

<!– 3.快速生成标记内容

标记.class名>子标记名称*个数

ul.uls>li*6>a+span –>

css3选择器

一、基本选择器

1.通配符

*{margin:0; padding:0;}

2.元素选择符（标签选择器）

h1{color:red;}

3.class选择器（类选择器）

.box{background:blue;}

4.id选择器

#wraper{color:black;}

5.群组选择器

ol,ul{list-style:none;}

二、层次选择器（关系选择器）

1.E F (后代选择器或包含选择器)

匹配E元素下所有子元素F

eg: .box a{color:red;}

匹配.box下所有子元素a

2.E>F (子代选择器)

匹配E元素下第一级子元素F

eg: .box>a{color:red;}

匹配.box下第一级子元素a

3.E+F 相邻兄弟选择器

匹配E元素后面紧邻的那个F元素(有且仅有一个)

eg: .box+h1{color:blue;}

匹配.box后面紧邻的那一个h1

4.E~F 通用兄弟选择器

匹配E元素后面所有的F元素(有可能匹配到多个)

eg: .box~h1{color:blue;}

匹配.box后面所有的h1元素

三、动态伪类选择器

1.E:link 没有被访问过的状态

2.E:visited 访问过后的状态

3.E:hover 滑过时的状态

4.E:active 鼠标按下时的状态

5.E:focus 光标聚焦到input框时的状态

四、结构性伪类选择器

1. :first-child 匹配每个父元素下第一个子元素

eg: .box a:first-child{color:red;}

匹配.box下第一个子元素a(此时，a必须是.box下的第一个子元素)

eg: .box :first-child{color:red;}

匹配.box下每个父元素下的第一个子元素

注：:first-child 《=》 :nth-child(1)

都是匹配父元素下的第一个子元素

2. :last-child 匹配每个父元素下最后一个子元素

eg: .box a:last-child{color:blue;}

匹配.box下最后一个子元素a(此时，a必须是.box下最后一个子元素)

eg: .box :last-child{color:blue;}

匹配.box下每个父元素下的最后一个子元素

注：:last-child 《=》 :nth-last-child(1)

都是匹配父元素下的最后一个子元素

3. :nth-child(n) 匹配父元素下的第n个子元素

eg: .box :nth-child(3){color:red;}

匹配.box下每个父元素下的第三个子元素

4. :nth-child(2n) 匹配父元素下的第偶数个子元素

eg: .tab tr:nth-child(2n){background:red;}

匹配.tab下第偶数个tr

注：:nth-child(2n) 《=》 :nth-child(even)

5. :nth-child(2n+1) 匹配父元素下第奇数个子元素

eg: .tab tr:nth-child(2n+1){background:blue;}

匹配.tab下第奇数个tr

注：:nth-child(2n+1) 《=》 :nth-child(odd)

6. :nth-last-child(n) 匹配父元素下倒着数第n个子元素

eg: .tab tr:nth-last-child(3){color:red;}

匹配.tab下倒数第三个子元素tr

——————————————————-

7. :first-of-type 匹配父元素下指定类型的第一个子元素

eg: .uls li:first-of-type{background:pink;}

匹配.uls下li这种类型的第一个子元素

注：:first-of-type 《=》 :nth-of-type(1)

都是匹配父元素下指定类型的第一个子元素

8. :last-of-type 匹配父元素下指定类型的最后一个子元素

eg: .uls li:last-of-type{background:yellow;}

匹配.uls下li这种类型的最后一个子元素

注：:last-of-type 《=》 nth-last-of-type(1)

都是匹配父元素下指定类型的最后一个子元素

9. :nth-of-type(n) 匹配父元素下指定类型的第n个子元素

eg: .uls li:nth-of-type(3){background:blue;}

匹配.uls下li这种类型的第3个子元素

10. :nth-last-of-type(n) 匹配父元素下指定类型的倒数第n个子元素

eg: .uls li:nth-last-of-type(3){background:orange;}

匹配.uls下li这种类型的倒数第三个子元素

——————————————————-

11. :only-child 匹配父元素下唯一一个子元素

12. :only-of-type 匹配父元素下指定类型的唯一一个子元素

13. :empty 匹配内容为空的元素(空格，回车换行都不能有)

14. :root 匹配根元素html

四、UI状态伪类选择器（主要针对form表单元素）

1. E:checked 匹配选中状态的单选或复选按钮

eg: input:checked+label{color:red;}

匹配选中状态的input控件后面紧邻的那个label标签

2. E:enabled 匹配启用状态的表单元素

eg: input:enabled{border:1px solid red;}

3. E:disabled 匹配禁用状态的表单元素

eg: input:disabled{background:gray;}

五、目标伪类选择器

语法：E:target 匹配锚点链接连接到的那个元素

eg: p:target{display:block;}

当锚点链接连接到p标签，应用display:block;

六、属性选择器

1. E[attr] 匹配含有attr属性的E元素

eg: a[title]{text-decoration:none;}

匹配含有title属性的a标签

2. E[attr=value] 匹配含有attr属性并且值为value的E元素

eg: a[title=前端]{color:black;}

匹配含有title属性并且值为前端的a标签

3. E[attr^=value] 匹配含有attr属性并且值以value开头的E元素

eg: a[href^=http]{font-size:12px;}

匹配含有href属性并且属性值以http开头的a标签

4. E[attr$=value] 匹配含有attr属性并且值以value结尾的E元素

eg: a[href$=com]{color:blue;}

匹配含有href属性并且属性值以com结尾的a标签

5. E[attr~=value] 匹配含有attr属性并且属性值列表中含有value这个词的E元素

eg: a[title~=培训]{color:red;}

匹配含有title属性，并且属性值列表中含有培训这个词的a标签

6. E[attr*=value] 匹配含有attr属性并且属性值列表中含有value这个字的E元素

eg: a[title*=培训]{color:yellow;}

匹配含有title属性，并且属性值列表中含有培训两个字的a标签

7. E[attr|=value] 匹配含有attr属性，并且值以value-开头或值为value的E元素

eg: a[class|=link]{color:blue;}

匹配含有class属性并且值以link-开头或值为link的a标签

七、否定伪类选择器

语法：E:not(F) 匹配不满足条件F的E元素

eg: li:not([class=lis]){color:red;}

匹配不满足条件class=lis的li元素

八、语言伪类选择器

语法：E:lang(val) 匹配指定了lang属性，并且值为val的E元素

九、伪元素

1. E:before 在E元素所有内容之前添加一个伪元素

eg: .box:before{

content:”hello”;

font-size:32px;

…

}

2. E:after 在E元素所有内容之后添加一个伪元素

eg: .box:after{

content:””;

display:block;

clear:both;

height:0;

overflow:hidden;

visibility:hidden;

}

注：:after常用于清除浮动

伪元素是一个内联元素

不管内容是否为空，都不能省略content

3. :first-line 匹配段落文本中的第一行

4. :first-letter 匹配段落文本中的第一个字符

5. ::selection 改变选中文字的效果

注：针对火狐内核的兼容写法如下：

p::-moz-selection{color:red;}

十、渐进增强和优雅降级

1.渐进增强

一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

eg: .box{ /*渐进增强写法*/

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

transition: all .5s;

}

2.优雅降级

一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

eg: .box{ /*优雅降级写法*/

transition: all .5s;

-webkit-transition: all .5s;

-moz-transition: all .5s;

-o-transition: all .5s;

}

注：css3属性针对不同内核的兼容写法：

对webkit内核 -webkit-

针对火狐内核 -moz-

针对opera内核 -o-

针对IE内核 -ms-

扩展：如何使用border实现三角的效果，方法如下：

元素{

width:0;

height:0;

border:3px solid transparent;

border-top-color:blue; /*top还可以根据需要更改为bottom,right,left*/

}

css3圆角，阴影

一、圆角

语法：border-radius:数值+单位;

1.设置一个值

border-radius:20px; 四个方向圆角都为20px

2.设置两个值

border-radius:50px 10px; 左上，右下为50px,右上，左下为10px

3.设置三个值

border-radius:50px 0px 10px; 左上为50px,右上和左下为0,右下为10px

4.设置四个值

border-radius:0px 10px 30px 60px; 顺时针方向依次为左上0，右上10，右下30，左下60

5.用/设置圆角

border-radius:50px/100px;

第一组值代表水平半径为50px,/后的第二组值代表垂直半径为100px

6.还可以单独设置某一个方向的圆角

border-top-left-radius:10px;

注：border-top-left-radius:20px 50px; 水平半径为20px,垂直半径为50px

7.设置为圆

border-radius:50%;

二、多色彩边框

语法：.box{-moz-border-top-colors:black red yellow;}

注：只有低版本的火狐浏览器支持

三、图像边框

1.设置图像边框的路径

语法：border-image-source:url(图片路径);

2.设置图像边框的裁剪位置

语法：border-image-slice:数值;

注：a)设置数值专指像素

b) 如何需要中间部分显示出来，需要添加fill

eg: border-image-slice:27 fill;

3.设置图像边框的平铺属性

语法：border-image-repeat:stretch|repeat|round;

a)stretch 默认值，图像被拉伸

b)repeat 图片默认平铺，当碰到边界时则会被截断

c)round 图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

eg: border-image-repeat:round stretch;

代表水平方向铺满，垂直方向拉伸

四、文本阴影

语法：text-shadow:水平偏移量垂直偏移量模糊度颜色值;

eg: text-shadow:5px 5px 3px black,8px 8px 5px #999;

注：a) 多组阴影的值用逗号分隔

b) 水平偏移量向右为正，向左为负，垂直偏移量向下为正，向上为负

c) 模糊度最小值为0，不允许设置负值

扩展：文字描边，语法如下：

-webkit-text-stroke:3px blue;

五、盒阴影

语法：box-shadow:水平偏移量垂直偏移量模糊度扩展半径颜色值;

eg: box-shadow:5px 5px 10px #333,8px 8px 12px #666;

注：盒阴影默认为外阴影，如果需要设置内阴影，写法如下：

eg: box-shadow:inset 3px 3px 5px #333,inset 5px 5px 8px #666;

注：当设置了扩展半径后，一般水平和垂直偏移量设置为0

eg: box-shadow:0px 0px 5px 10px red;

box-shadow:inset 0px 0px 5px 10px red;

css3弹性布局

一、分栏布局

1.设置栏数

语法：column-count:数值;

2.设置每栏的宽度

语法：column-width:数值+单位;

注：column-count和column-width设置其中一个属性即可

3.设置栏间距

语法：column-gap:数值+单位;

4.设置栏分隔线

语法：column-rule:宽度 solid|dashed|dotted 颜色;

eg: column-rule:3px dashed blue;

5.设置是否跨栏显示

语法：column-span:all(跨栏显示)|none(不跨栏显示);

注：该属性给需要跨栏显示的元素添加

二、弹性布局

语法：display:flex;

说明：

a) 当给元素设置了display:flex;该元素就成为了弹性盒

b) 当给父元素设置弹性盒后，子元素的float,clear,vertical-align将会失效

c) 我们把设置了display:flex;属性的元素叫做flex容器，把里面的子元素叫做flex项目

d) 当给元素设置了弹性盒以后，随之会产生两根轴线：主轴和交叉轴

◆ Flex容器属性

1.改变主轴的方向

语法：flex-direction:row|row-reverse|column|column-reverse;

row 默认值，主轴在水平方向，起点在左端

row-reverse 主轴在水平方向，起点在右端

column 主轴在垂直方向，起点在上沿

column-reverse 主轴在垂直方向，起点在下沿

2.设置flex项目是单行显示还是多行显示

语法：flex-wrap:nowrap|wrap|wrap-reverse;

nowrap 默认值，不换行

wrap 换行

wrap-reverse 与wrap相似，但是行的顺序是倒过来的

3.flex-direction和flex-wrap的简写方式

语法：flex-flow:row nowrap;

4.设置主轴对齐方式

语法：justify-content:flex-start|flex-end|center|space-between|space-around;

flex-start 类似于左浮动

flex-end 类似于右浮动

center flex项目居中对齐

space-between flex项目两端对齐，中间间隔相等

space-around flex项目两侧间隔相等

5.设置交叉轴对齐方式

语法：align-items:flex-start|flex-end|center|baseline|stretch;

flex-start 对齐交叉轴的起点

flex-end 对齐交叉轴的终点

center 以交叉轴为参考，居中对齐

baseline flex项目第一行文字基线对齐

stretch flex项目没有设置高度或者为auto，将占满整个父元素的高度

———————————————–

★ 如何使用flex布局实现不定宽高的元素在屏幕窗口水平垂直都居中，方法如下：

html,body{height:100%;}

body{display:flex;justify-content:center;align-items:center;}

★ 如何使用flex布局实现不定宽高的子元素在父元素中水平垂直都居中，方法如下：

父元素{display:flex;justify-content:center;align-items:center;}

———————————————–

6.设置多根轴线对齐方式(如果只有一根轴线，该属性不起作用)

flex-start 对齐交叉轴的起点

flex-end 对齐交叉轴的终点

center 以交叉轴为参考，居中对齐

space-between 轴线两端对齐，中间间隔相等

space-around 轴线间两侧间隔相等

stretch flex项目没有设置高度或者高度为auto，将占满整个父元素的高度

◆ Flex项目属性

1.改变flex项目排列顺序

语法：order:0|数值;

注：默认值为0,值越小越靠前

2.设置某个flex项目不同于其他flex项目的交叉轴对齐方式

语法：align-self:flex-start|flex-end|center|baseline|stretch;

注：属性值的使用方法同align-items属性

3.设置flex项目的放大比例

语法：flex-grow:0|数值;

注：flex-grow默认值为0即使存在剩余空间也不放大

4.设置flex项目的缩小比例

语法：flex-shrink:1|数值;

注：flex-shrink默认值为1,当flex容器剩余空间不足时，flex项目等比例缩小

注：flex-shrink:0; 即使flex容器空间不足，flex项目也不缩小

5.设置flex项目占据主轴的空间

语法：flex-basis:数值+单位;

注：flex-basis默认值为auto

6.flex-grow,flex-shrink,flex-basis的简写方式

语法：flex:0 1 auto; (默认值)

注：flex:1; 完整写法：flex:1 1 0%;

主要应用在两个方面：

a) 等比例分配空间

b) 将剩余空间分配给某个元素

三、响应式布局

概念—写一套css样式可以应用在多个终端设备

优点：可以同时适配多个终端，灵活性更强

缺点：工作量增加，会造成代码冗余，加载时间加长

原理：媒体查询

四、媒体查询

1.外联式媒体查询

语法：

注：当屏幕窗口大于等于960px时，引用blue.css文件

当屏幕窗口小于等于960px时，引用red.css文件

2.内嵌式媒体查询

语法：

@media screen and (min-width:320px) and (max-width:960px){

body{

background:red;

}

注：当屏幕窗口大于等于320px,小于等于960px时，body背景色为红色

标准盒模型和怪异盒模型

一、标准盒模型和怪异盒模型

标准盒模型是由content,padding,border,margin四部分组成

怪异盒模型是由content,margin组成

标准盒模型的总宽度=width+左右padding+左右border+左右margin

标准盒模型的总高度=height+上下padding+上下border+上下margin

怪异盒模型的总宽度=width+左右margin

怪异盒模型的总高度=height+上下margin

注：当网页没有添加文档声明时，就会触发某些浏览器(如IE6)的怪异模式

二、box-sizing常用属性值有哪些及其含义？

1.box-sizing:border-box;

将标准盒模型转换为怪异盒模型，总宽高不包括padding和border

2.box-sizing:content-box;

将怪异盒模型转换为标准盒模型，总宽高包含padding和border

———————————————–

扩展：如何自定义字体

语法： @font-face{

font-family:字体名称;

src:url(字体文件路径);

}

body{

font-family:字体名称;

}

css3移动端布局

一、移动端相关概念

1.屏幕尺寸

屏幕尺寸是指屏幕对角线的长度，单位为英寸，1英寸=2.54厘米

2.屏幕分辨率

屏幕分辨率是指横纵方向上的像素点数，单位为px，1个像素点=1px

(这里的1px是指物理设备上的一个像素点)

常见移动端设备屏幕分辨率：

iphone6,6s,7,8 1334*750

iponee6plus,7plus,8plus 1920*1080

注：移动端设备一般为纵向像素*横向像素

3.ppi

屏幕每英寸可以显示的像素点数，即屏幕像素密度，单位为ppi

计算公式：

4.dpr

dpr是devicePixelRatio的简写，指物理像素与逻辑像素的比值

物理像素：屏幕分辨率

逻辑像素：写在css文件中的像素值，即要显示在设备上的像素值

常见设备dpr值：

iphone6,7,8 dpr=2

iphone6plus,7plus,8plus dpr=3

5.移动端meta设置

注：让视图窗口的宽度等于设备的宽度

快捷键：meta:vp+tab键

二、常见移动端布局方案

1.百分比布局(流式布局)

特点：文字流式，控件弹性，图片等比例缩放

顶部和底部的bar不管分辨率怎么变，高度和位置都不变

案例：拉勾网

注：适用于内容较少比较简单的移动端页面

2.等比例缩放布局(rem布局)

特点：使用rem为主要单位进行页面布局，很好的实现了在不同设备上页面等比例缩放

案例：网易

注：适用于页面内容较多较复杂的移动端页面

3.混合布局

特点：混合布局是指将多种布局方式(如flex布局，圣杯布局，百分比布局等)融合在一起实现移动端的屏幕适配的方法

案例：淘宝网

三、移动端相关单位

1.px

像素，相对于屏幕分辨率而言

2.em

相对于父元素字体大小放大或缩小多少倍

1em = 16px

3.rem

相对于根元素字体大小放大或缩小多少倍

4.vw

vw是viewport width的缩写，即视图窗口的宽度

1vw = 视窗宽度的1%

vh是指视图窗口的高度

vmin是vw和vh中较小值

vmax是vw和vh中较大值

css3基础变形

一、css3基础变形

语法：transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);

1.旋转(rotate)

a) rotateX(180deg) 沿x轴翻转等价于 rotate3d(1,0,0,180deg)

b) rotateY(180deg) 沿y轴翻转等价于 rotate3d(0,1,0,180deg)

c) rotateZ(180deg) 沿z轴翻转等价于 rotate3d(0,0,1,180deg)

d) rotate(60deg) 不指定轴时，是2d空间的旋转，正值为顺时针，负值为逆时针

注：rotate旋转的单位是deg

2.缩放(scale)

a) scaleX(1.5) 沿x轴缩放，默认值为1，不放大不缩小，大于1为放大，小于1为缩小

b) scaleY(1.5) 沿y轴缩放

c) scale(1.5) 沿x轴和y轴同时缩放

d) scale(-1.5) 先翻转后缩放

3.倾斜(skew)

a) skewX(30deg) 沿x轴倾斜

b) skewY(-30deg) 沿y轴倾斜

c) skew(30deg) 不指定轴时，默认沿x轴倾斜

d) skew(30deg,30deg) x轴和y轴同时倾斜

skewX(30deg) skewY(30deg) x轴和y轴同时倾斜

注：两种写法倾斜效果不同

skew倾斜单位为deg

4.位移(translate)

a) translateX(100px) 沿x轴位移，向右为正，向左为负

b) translateY(-100px) 沿y轴位移，向下为正，向上为负

c) translateZ(100px) 沿z轴位移，向前为正，向后为负

d) translate(100px) 不指定轴时，默认沿x轴位移

e) translate(100px,100px) x轴和y轴同时位移

translateX(100px) translateY(100px)x轴和y轴同时位移

◆ 使用变形实现不定宽高元素在屏幕窗口水平垂直都居中，方法如下：

元素{

position:fixed;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

◆ 使用变形实现不定宽高的子元素在父元素中水平垂直都居中，方法如下：

父元素{

position:relative;

}

子元素{

position:absolute;

left:50%;

top:50%;

transform:translateX(-50%) translateY(-50%);

}

二、变形综合

当多种变形方式综合在一起时，顺序不同，效果有可能不同，例如：

eg1: transform:rotate(360deg) scale(1.5);

transform:scale(1.5) rotate(360deg);

顺序不同，效果相同

eg2: transform:translateX(300px) rotate(360deg);

transform:rotate(360deg) translateX(300px);

顺序不同，效果不同

三、改变变形元素中心点位置

语法：transform-origin:left|center|right top|center|bottom;

四、设置元素的变形类型

语法：transform-style:flat(默认值)|preserve-3d;

flat 默认值，2d空间的变形

preserve-3d 3d空间的变形

五、透视，井深

语法：perspective:数值+单位;

eg: 父元素{perspective:1500px;}

eg: 子元素{transform:perspective(800px) rotateY(60deg);}

注：perspective主要用来设置元素3d效果的强度

transition过渡动画

一、transition过渡动画

语法：transition:过渡属性过渡时间过渡方式过渡延迟时间;

eg: transition:all 1s;

1.transition-property(过渡属性)

取值：

none 没有属性发生过渡

all 所有发生变化的属性都添加过渡动画

ident 指定发生过渡的属性列表

eg: transition:transform 1s,background 2s,border-radius 3s;

2.transition-duration(过渡时间)

取值：

0 不执行过渡，直接看到结果

time 指定过渡时间，单位为s

3.transition-delay(过渡延迟时间)

取值：

0 不延迟，直接执行过渡动画

正值按照设定的时间延迟执行过渡动画

负值设定时间前的动画将会被截断

4.transition-timing-function(过渡方式)

取值：

ease 默认值

linear 匀速运动

ease-in 加速运动

ease-out 减速运动

ease-in-out 慢-快-慢

二、animation动画

☆ 动画关键帧

语法：@keyframes 动画名称{

0%{

属性:属性值;

}

50%{

属性:属性值;

}

…

100%{

属性:属性值;

}

@keyframes 动画名称{

from{

属性:属性值;

}

50%{

属性:属性值;

}

…

to{

属性:属性值;

}

———————————————–

语法：animation:动画名称动画执行时间动画延迟执行时间动画播放次数动画播放状态;

1.animation-name(动画名称)

eg: animation:box_ani 1s;

注：此处的动画名称要和@keyframes中的动画名称一致

2.animation-duration(动画执行一次所需时间)

取值：

0 动画不执行

time 正数，单位为s或者ms

3.animation-delay(动画延迟执行时间)

取值：

0 不延迟，动画立即执行

正数按照设定的时间延迟执行动画

负数设定时间前的动画将会被截断

4.animation-iteration-count(动画播放次数)

取值：

number 自定义动画执行次数，设置值可为0或正整数

infinite 无限循环播放

5.animation-play-state(设置对象动画的状态)

取值：

running 默认值，运动

paused 动画暂停

6.animation-timing-function(对象动画过渡类型)

取值：

ease

linear 匀速运动

ease-in

ease-out

ease-in-out

step-start 马上转跳到动画结束状态，或者转跳到下一帧，中间没有过渡

step-end 保持动画开始时的状态，直到动画结束时，马上转跳到动画结束状态

steps(n,start|end) n代表动画分几步完成

7. animation-direction(设置对象动画运动的方向)

取值：

normal 默认值，正常方向运动

reverse 与normal运动方向始终相反

alternate 正反方向交替运动，奇数次正方向，偶数次反方向

alternate-reverse 奇数次反方向，偶数次正方向

8.animation-fill-mode (设置对象动画时间之外的状态)

取值：

none 默认值，不设置时间之外的状态

forwards 保持动画结束时的状态

backwards 保持动画开始时的状态

both 动画遵循forwards和backwards两个规则

扩展：

隐藏翻转元素的背面，语法如下：backface-visibility:hidden;

css3背景，渐变，蒙版

一、背景切割

语法：background-clip:border-box|padding-box|content-box;

作用：设置背景在哪个区域可见

border-box 默认值.背景在边框已经边框以内的区域可见

padding-box 背景在padding区域和content区域可见

content-box 背景在content区域可见

二、背景原点

语法：background-origin:border-box|padding-box|content-box;

作用：设置背景图原点的定位区域

padding-box 默认值，背景原点从padding区域开始

border-box 背景原点从border区域开始

content-box 背景原点从content区域开始

三、背景切割&背景原点

可以将背景切割和背景原点结合使用

eg: background-clip:content-box;

background-origin:border-box;

背景原点从border区域开始，背景在content区域可见

四、背景尺寸

语法：background-size:数值|100%|cover|contain;

1.length

该数值用来设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，如果省略第二个值，为auto,等比例缩放

eg: background-size:100px 200px; (背景图有可能发生变形)

background-size:100px; (背景图有可能超出容器,不会发生变形)

2.百分比

以容器的百分比来设置背景图的宽度和高度

eg: background-size:100% 100%;(背景图不会超出容器，但是背景图有可能发生变形)

background-size:100%;(背景图有可能超出容器，但是背景图不会发生变形)

3.cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像有可能超出容器，背景图不会发生变形

eg: background-size:cover;

4.contain

把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域。背景图像始终被包含在容器内,背景图不会发生变形

五、rgba模式

语法：background:rgba(r,g,b,a); a代表透明度，取值范围0~1

eg: background:rgba(0,0,0,.4);

注：rgba模式和opacity的区别：

a) 给容器添加opacity,容器中的文字和图片也会跟随透明

b) rgba模式只是给容器的背景添加一定的透明度，容器中的文本和图片不会跟随透明

———————————————–

扩展：hsla模式

语法：background:hsla(h,s,l,a);

h 色调，取值范围0~360

s 饱和度，取值范围0%~100%

l 亮度，取值范围0%~100%

a 透明度，取值范围0~1

———————————————-

六、线性渐变

语法：background:linear-gradient(渐变方向,颜色起始位置,颜色起始位置);

eg: background:linear-gradient(to right,red 0%,yellow 30%,blue 50%);

注：重复的线性渐变写法如下：

background:repeating-linear-gradient(to right,red 0%,yellow 15%,blue 25%);

注：设置重复的线性渐变，必须指定渐变的位置

七、径向渐变

语法：background:-webkit-radial-gradient(渐变中心点位置,渐变形状渐变半径长度,颜色起始位置,颜色起始位置);

eg: background:-webkit-radial-gradient(left top,circle closest-side,red 0%,yellow 10%);

注：重复的径向渐变写法：

background:-webkit-repeating-radial-gradient(center,red 0%,yellow 10%);

注：设置重复的径向渐变，必须指定渐变的位置

———————————————–

扩展一蒙版

语法：-webkit-mask-image:url(图片路径)|使用渐变作为蒙版图片; -webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;

-webkit-mask-position:center;

扩展二背景在文字区域可见

语法：-webkit-background-clip:text;

注：设置此属性需要将文字颜色设置为透明，即 color:transparent;

扩展三：倒影

语法：-webkit-box-reflect:left|right|above(上)|below(下) 偏移量倒影渐变;

———————————————–

八、BFC

1.概念

BFC——block formatting context (块级格式化上下文)

2.如何触发BFC

a) 设置了float除none以外的值(left,right)

b) 设置了overflow除visible以外的值(hidden,scroll,auto)

c) 设置了display属性(table-cell,inline-block,flex)

d) 设置position属性(absolute,fixed)

3.BFC的作用

a) 解决上下margin重叠问题

给设置margin的元素外边再嵌套一个父元素，并设置overflow:hidden;这样就给里面的元素创建了一个块级格式化上下文

b) 常用来清除浮动，解决高度塌陷问题

给父元素设置overflow:hidden;就给里面浮动的子元素创建了一个块级格式化上下文，闭合了浮动

c) 用于实现多栏布局

与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式

本文来源于：前端基础css篇-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

赞助本站
微信扫一扫

加入Q群
QQ扫一扫

前端基础css篇

自动化运维工具 salt 安装以及使用

运维工程师之间的鄙视链，你在哪一环？

开发运维配置繁杂，是时候给应用架构做减法了

云时代，运维工程师如何成长？

Kafka实战—常见运维操作

运维工程师必备技能：网络排错

【拒绝背锅】运维故障处理指南

发表评论