html&css基础知识（2022.6.5更新）

1. 文档类型声明标签

主要对html界面的运行的属性进行配置，便于浏览器进行对应的操作。比如设置html版本，便于浏览器使用哪种解析器，设置html使用的字符集，用于对html的字符进行对应显示，设置html显示内容的语言，便于浏览器使用插件进行对应的翻译。

1.1 <!DOCTYPE>标签

标识该界面使用哪种html版本来显示网页。该标签不属于HTMl标签，只有html标签内部的标签才是。

html5版本的示例如下：

<!DOCTYPE html>

表示当前页面采用的是html5版本来显示网页。

1.2 html标签

lang

声明网页显示内容使用哪一种语言。
使用英语的示例如下,声明之后浏览器在载入该页面的过程中，就会发现该页面显示的内容是英语，就会唤醒浏览器中对应的语言翻译插件，为用户提供语言翻译服务。

lang="en"

1.3 meta标签

charset

用来规定html文档应该使用哪种字符编码。一般使用utf-8，该字符集基本包含了全世界所有国家需要用来的字符。不同字符集的网页可能导致乱码。

2. Html常用标签

2.1 标题标签

<h1>-<h6>

2.2 段落标签

<p></p>

2.3 换行标签

<br/>

单标签，表示另起一行。

2.4 文本格式化标签

文字效果	标签
粗体	<strong> or <b>
倾斜	<em> or <i>
删除线	<del> or <s>
下划线	<ins> or <u>

2.5 图像标签

<img />

属性	含义	备注
src	图像路径	必须设置
alt	替换文本	图片再不能显示情况下的替换文本
title	提示文本	提示文本。鼠标放在图像上显示的提示信息
width	宽度
height	高度

注意：在图片的大小设置中，若只设置宽度或称高度，则图像将基于恒定值对图像进行同比例扩大和缩小；若同时设置宽度和高度，则图像为适应设定的大小，将会执行拉伸或者压缩。

2.6 超链接标签

<a href="跳转目标" target="目标窗口的弹出方式"></a>

属性	含义
href	用于指定连接目标的url地址（必须属性）
target	用于指定链接页面的打开方式，其中_self为默认值，表示在当前窗口打开，_blank为在新窗口中打开

主要作用：

用户外部链接，跳转到特定网页地址（主要用于广告）
内部链接，网站内部页面之间的相互链接
空链接，测试使用
下载链接：地址连接的是文件 .exe或者zip等压缩包形式
网页元素链接

特殊链接格式：锚点链接，用于在单个页面内部执行跳转，定位到页面中的某个位置。

在连接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第2集介绍</h3>

3. 表格标签

3.1 表格的基本用法

<table>
    <tr>
        <th>···</th>
    </tr>
    <tr>
        <td>单元格中的文字</td>
        ···
    </tr>
</table>

tr----表行

td----单元格

th----表头

使用表头单元格，里面的文字将会居中和加粗。

对于表格的属性设置常使用css来设置

为进一步对表格的结构来进行规范，<thead>和<tbody>可以在表格的表头和表体中进行声明。

3.2 表格合并

合并单元格方式：

跨行合并：rowspan="合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

4. 列表标签

4.1 无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

注意点：

无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不允许的
<li></li>可以包含任何元素

4.2 有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

注意点：

无序列表的各个列表项之间是有序的，前面会有一个编号
<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不允许的
<li></li>可以包含任何元素

4.3 自定义列表

<dl>
    <dt>列表项1</dt>
    <dd>列表项2</dd>
    <dd>列表项3</dd>
</dl>

注意点：

无序列表的各个列表项之间是有序的，前面会有一个编号
<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不允许的
<li></li>可以包含任何元素

5. 表单标签

5.1 表单域

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

常用属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或者post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

5.2 表单标签

5.2.1 <input>标签

常用属性

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段的字符的最大长度

name和value是每个表单元素都有的属性值，主要给后台人员使用
name表单元素的名字，要求单选按钮和复选框要有相同的name值
checked属性主要正对单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素
对于radio和checkbox标签，需要使用name属性标明同一选定域

5.2.2 label标签

<label>标签为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器回自动将光标转到或者对应的表单元素上，用来增加用户体验
语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

核心：<label>标签的for属性应当与相关元素的id属性相同

5.2.3 <select>标签

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以收用<select>标签空间定义下拉列表
语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</select>

注意：

<select>中至少包含一对<option>
在<option>中定义selected="selected"时，当前项即默认选中项

6. css

css最大价值：由html专注去做结构呈现，样式交给css,即结构与css相分离
css做了两件事：

找到对应的标签，即选择器
设置这些标签的样式

6.1 css三大特性

6.1.1 层叠性

相同选择器设置形同的样式，此时一个样式就会覆盖另一个冲突的样式。
原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

6.1.2 继承性

子标签会继承父标签中的某些样式，如文本颜色和字号，但是优先级最低

6.1.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠行
选择器不同，则根据选择器权重执行

不同选择器权重如下：

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=""	1,0,0,0
!important	无穷大

优先级注意点：

权重是由4组数字组成，但是不会有进位
可以理解伪类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
等级判断从左向右，如果某一位数值相同，则判断下一位数值
继承的权重永远是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

6.2 权重叠加

复合选择器会有权重叠加的问题

7. 选择器

7.1 基础选择器

基础选择器是由单个选择器组成

7.1.1 标签选择器

将某一类标签设为选择器，对页面中某一大类设置样式

7.1.2 类选择器

语法：

.类名{
    属性1：属性值1；
    ···
}

结构需要使用class属性来调用类

7.1.3 id选择器

语法：

#id名{
    属性1：属性值1
    ···
}

注意：每个Id声明和调用只能在每个html文档当中出现一次。

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

类选择器好比人的名字，一个人可以由有多个名字，同时一个名字也可以被多个人使用
id选择器好比人的身份证号码，全国是唯一的，不得重复
id选择器和类选择器最大的不同在于使用次数上
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和javascript搭配使用

7.1.4 通配符选择器

在css中，通配符选择器使用"*"定义，他表示选取页面中所有元素
语法：

*{
    属性1：属性值1；
    ···
}

7.2 复合选择器

7.2.1 后代选择器

可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代
语法：

元素1 元素2{
    属性1:属性值1
}

7.2.2 子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
语法：

元素1>元素2{
    属性1:属性值1
}

上述语法表示选择元素里面的所有直接后代(子元素)元素2

7.2.3 并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
语法：

元素1，元素2{
    属性1：属性值1；
}

7.2.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n各元素
伪类选择器书写的最大特点是用冒号（：）表示，比如：hover,fist-child

链接伪类

对于链接标签a,常使用如下伪类。

选择器	含义
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下未谈起的链接）

注意事项：

为了确保链接伪类生效，请按照LVHA的顺序声明：link,visited,hover,active

8.字体属性

语法：

选择器{
    //字体格式
    font-family:"Microsoft Yahei";
    //字体大小 默认为16px
    font-size:20px
    //字体粗细 默认：normal=400
    font-weight:lighter/normal/bold/bolder   100/200/.../900 
    //字体风格
    font-style:normal/italic

    //复合写法：将上面四种属性合成一句话
    font:font-style font-weight font-size/line-height font-family

    //字体颜色
    color:颜色

    //文本对齐
    text-align:center/left/right

    //文本装饰
    text-decoration:none(默认)/underline(下划线)/overline(上划线)/line-through(删除线)

    //文本缩进
    text-indent: XXpx/2em（em是一个相对单位，表示一个文字的相对大小）

    //行间距
    line-height:XXpx（也可以不写单位，如1.5，表示当前文字大小的1.5倍）
}

注意：

使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，并且各属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则不起作用

9.显示模式

元素显示某事就是元素（标签）以什么方式进行显示，html元素一般分为块元素和行内元素两种类型

9.1 块元素

常见块级元素<h1>-<h6>,<p>,<div>,<ul>,<o;>,<li>
块级元素特点：

比较霸道，自己独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是父级宽度的100%
是一个容器及盒子，里面可以放行内或者块级元素

注意：

文字类的元素内不能使用块级元素
<p>标签主要存放文字，因此<p>里面不能放块级元素，特别不能放置<div>

9.2 行内元素

常见行内元素有<a>，<strong>,<em>,<i>,<del>,<u>,<span>
行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
高、宽设置无效
默认宽度就是她本身内容的宽度
行内元素只能容纳文本或其他行内元素

9.3 行内块元素

在行内元素中有几个特殊的标签<img>,<input>,<td>，同时具备块元素和行内元素的特点
行内块元素特点:

和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个（行内元素特点）
默认宽度就是本身内容的宽度（行内元素特点）
高度，行高，外边距以及内边距都可以控制（块级元素特点）

元素模式转换语法：

display:block/inline/inline-block

10.背景设置

语法：

    选择器{
        
        // 背景颜色（默认：透明（transparent））
        background-color:颜色值;
        
        // 背景图片
        // 添加背景图片之后，默认是y，x轴平铺
        background-image:none/url()
        
        //背景平铺
        background-repeat:repeat(defalut)/no-repeat/repeat-x/repeat-y

        // 背景位置
        background-position:x,y/top/center/bottom/left/center/right

        // 背景固定
        background-attachment:scroll/fixed

        // 合并写法（没有特殊的顺序）
        background:red url() no-repeat fixed center top
    }

注意:

页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色
在背景位置设置中，若是方位名词，可以只设置一个，另外一个默认居中

11. 盒子模型

就是把Html页面中的布局元素看作是一个矩形的盒子，也就是一个承装内容的容器

11.1 边框

语法：

选择器{
    // 边框粗细
    border-width:XXpx;
    // 边框样式
    border-style:solid（实线）/dotted(点线)/dashed(虚线)
    // 边框颜色
    border-color:

    // 边框的复用写法(没有顺序)
    border:1px solid,red

    // 可以对边框进行拆分
    border-top:
    border-bottom:
    border-left:
    border-right：

    // 表格边框
    border-collapse:collaspse(表示相邻边框合并在一起)
}

注意：

边框会改变在原有盒子的大小（撑大整体的盒子）

11.2 内边距

padding 设置内边距，即边框与内容之间的距离
语法

选择器{

    padding-top:
    padding-bottom:
    padding-left:
    padding-right：

    
    // 复合写法
    padding: Xpx Xpx Xpx Xpx

}

在padding的复合写法中，不是数值个数将会导致不同的效果

值得个数	表达意思
padding:5px	1个值，代表上下左右都是5像素内边距
padding:5px 10px	2个值，代表上下内边距是5像素，左右内边距是10像素
padding:5px 10px 20px	3个值，代表上内边距是5像素，左右内边距是10像素,下是20像素
padding:5px 10px 20px 30px	4个值，代表上右下左分别是5，10，20，30像素（顺时针）

注意：

内容和边框有个距离，增加了内边距
padding影响了盒子实际大小：会撑大盒子

11.3 外边距

语法

选择器{

    margin-top:
    margin-bottom:
    margin-left:
    margin-right：
}

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须制定了宽度
盒子左右的外边距都设置为auto；
行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

11.4 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时，父元素会塌陷较大的外边距值
解决方法：
1. 可以为父元素定义上边框
2. 可以为父元素定义内边距
3. 可以为父元素添加overflow:hidden

11.5 盒子模型

css3中可以通过box-sizing来指定盒模型，有2个值：即可指定content-box,border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况：

box-sizing:content-box 盒子大小为width+padding+border(默认)
box-sizing:border-box 盒子大小为width

如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子

12. 边框

12.1 圆角边框

语法：

border-radius:length(半径大小)/20%(百分比);

注意：

参数可以为数值或百分比
如果是正方形，想要设置一个圆，把数值修改为高度或者宽度的一般即可，或者直接写50%
如果是矩形，设置为高度的高度的一半就可以做圆角边框
该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角

13. 阴影

13.1 盒子阴影

语法：

box-shadow:h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置
v-shadow	必需，垂直阴影的位置
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色
inset	可选，将外部阴影改为内部阴影

13.2 文字阴影

语法：

text-shadow:h-shadow v-shadow blur color ;

值	描述
h-shadow	必需，水平阴影的位置
v-shadow	必需，垂直阴影的位置
blur	可选，模糊距离
color	可选，阴影颜色

14. 浮动

14.1 传统网页布局的三种模式

14.1.1 标准流

所谓标准流：就是标签按照规定好默认方式进行排列
1. 块级元素独占一行，从上向下顺序排列
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

14.1.2 浮动流

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

float苏醒用于创建浮动框，将其移动到仪表，直到左边缘或右边缘触及包含快或者另一个浮动框的边缘
语法：

选择器{
    float:属性值
}

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

14.2 浮动特性

脱离标准普通流，移动到指定位置（俗称脱标）
浮动的盒子不再保留原先的位置
如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对其排列
浮动元素会具有行内块的特点（只要设置了浮动，就是行内块）
注意：浮动的元素是相互贴靠在一起的（不会有间隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

浮动布局的注意点

浮动和标准流的父盒子搭配（先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置）
一个元素浮动了，理论上其余的兄弟元素也要浮动（浮动的盒子一会影响浮动盒子后面的标准流，不会影响前面的标准流）

问题：所有的父盒子都必须有高度吗？解决方式：清除浮动

理想中的状态，让子盒子撑开父亲，有多少孩子，我父盒子就有多高

14.3 清除浮动

由于父级盒子很多情况下，不方便给高度，但是滋贺子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会更具浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
语法：

选择器{
    clear:属性值;
}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

14.3.1 清除浮动的方法

额外标签法也成为隔墙法
会在浮动元素末尾添加一个空的标签。新添加的元素必须是块级元素
父级添加overflow属性
可以给父级添加overflow属性，将其属性值设置为hidden,auto或者scroll
父级添加after伪元素
语法：

.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    *zoom:1;
}

父级添加双伪元素
语法：

.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}

15. 定位

提问：盒子之间能够重叠或者滚动吗？
当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
所以：

浮动可以让多个块级元素一行没有间隙的排列显示，经常用于横向排列盒子
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
定位：将盒子定在某一位置，所以定位也是在拜访盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。片偏移则决定了该元素的最终位置

15.1 定位模式

通过css中的position属性来设置，其值含义如下：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

15.1.1 静态定位

静态定位是元素的默认定位方式，无定位的意思
语法：

选择器{
    position:static;
}

15.1.2 相对定位

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的
语法：

选择器{
    position:relative;
}

注意：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
原来在标准流中的位置继续占有，后面的盒子仍然以标准流的方式对待他（不脱标，继续保留原来位置）

相对定位并没有脱标，它最典型的应用是给绝对定位当爹的

15.1.3 绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的
语法：

选择器{
    position:absolute;
}

注意：

如果主线元素或者祖先元素没有定位，则以浏览器为准定位
如果父元素有定位（相对，绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原先的位置（脱标）

15.1.4 固定定位

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
语法：

选择器{
    position:fixed;
}

注意：

以浏览器的可视窗口作参照点移动元素
1. 跟父元素没有关系
2. 不随滚动条滚动
固定定位不再占有原先的位置

15.1.5 粘性定位

粘性定位可以被认为是相对定位和固定定位的混合
语法：

选择器{
    position:sticky;
    top:10px;
}

注意：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加top,bottom,left,right才有效

15.2 边偏移

边偏移就是定位的盒子移动到最终位置,有top,bottom,left,right

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对其父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left:80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

问题：子绝父相

绝对定位和相对定位到底有什么使用场景呢？
为什么说相对定位给绝对定位当爹的呢？

子绝父相：子级是绝对定位的话，父级要用相对定位

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

15.3 定位叠放次序

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序
语法：

选择器{
    z-index:1;
}

注意：

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
若属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子采用z-index属性

15.4 定位扩展

15.4.1 绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中
步骤：

水平居中
1. left:50% 让盒子的左侧移动到父级元素的水平中心位置
2. margin-left:-100px 让盒子向左移动自身宽度的一半
垂直居中
1. top:50% 让盒子的上侧移动到父级元素的垂直中心位置
2. margin-top:-100px 让盒子向上移动自身高度的一半

15.4.2 定位的特殊性

绝对定位和固定定位也和浮动类似

行内元素添加绝对或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

15.4.3 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题

15.4.4 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住她下面标准流和盒子，但是不会压住下面标准流盒子的文字;但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素

16. 切图

图层切图
最简单的切图方式:右击图层-->快速导出为PNG
切片切图
利用切片工具手动划出
文件菜单-->导出-->存储为web设备所用格式-->选择我们要的图片格式-->存储
PS插件切图
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工“导出为web所用格式”以及使用切片工具进行挨个其如图的繁琐流程

17. CSS属性书写顺序

建议遵循以下顺序

布局定位属性：display,position,float,clear,visibility,overflow
自身属性：width,height,margin,padding,border,background
文本属性：color,font,text-decoration,text-align,vertical-align,white-space,break-word
其他属性：content,cursor,border-radius,box-shadow.text-shadow,background:line-gradient

对于整个页面的书写原则：先有结构，后由样式

导航栏注意点：在实际开发中，我们不会直接用连接a,而是使用li包含连接（li>a）的做法实现
好处：

li>a语义更加清晰，一看就是有条理的列表型内容
如果直接用a,搜索引擎容易辨别为有对其关键字嫌疑（故意对其关键字容易被搜索引擎降权，从而影响网站排名）

18. 元素的显示和隐藏

本质：让一个元素在页面中隐藏或者显示出来

18.1 display属性

用于一个元素应该如何显示
display:none; 隐藏元素
display:block; 除了转化为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置

18.2 visibility

visibility:hidden 元素隐藏
visibility:visible 元素可见
visibility 隐藏元素之后，继续占有原来的位置

18.3 overflow

指定了如果内容溢出一个元素的框（超过指定高度及宽度）时，会发生什么

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超过的部分隐藏掉
scroll	不管超出内容与否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，都不想让超出的部分隐藏（hidden）
注意：如果有定位的盒子，慎用overflow属性

19. 精灵图技术

原因：一个网页往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这江大大降低页面地加载速度
因此，为了有效减少服务器接收和发送请求的次数，提高页面地加载速度，出现了CSS精灵技术
核心原理:将网页中一些小的背景图像整合到一张大图里面，这样服务器只需要一次请求就可以了
使用精灵图核心：

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图中
这个大图片也称为sprites 精灵图或者雪碧图
移动背景图片位置，此时可以使用background-position
移动地距离就是这个目标图片地x和y坐标。注意网页中的坐标有所不同

20. 字体图标

优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实还是文字，可以随机的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化
总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标
如果遇到一些结构和样式复杂一点的小图片，就用精灵图

使用步骤：

在https://icomoon.io/app/#/select中选择想要的图标，并下载
将下载的文件解压，并将其中的font文件夹放到根目录，将其中的.css文件中的字体声明复制到前端css文件中，完成字体声明
打开解压文件中的.html文件，复制其中的字体标识符，放到前端对应位置
在使用过程中，在对应选择器中font-family设置为字体声明，即可使用

21. CSS用户界面样式

21.1 鼠标样式 curosr

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

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

21.2 轮廓线 outline

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

input{
    outline:none;
}

21.3 防止拖拽文本域 resize

实际开发中，我们文本域右下角是不可以拖拽的

21.4 vertical-align

经常用于设置图片或者表单（行内块元素）和文字垂直对齐

官方解释：用于设置一个元素的垂直对齐方式，凡是他只针对于行内元素或者行内块元素有效


vertical-align: baseline | top | middle | bottom;

属性	效果
baseline(默认)	元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低元素的顶端对齐

21.5 溢出文字用省略号标识

单行文本省略号显示

    // 1.先强制一行内显示文本
    white-space:nowrap;
    // 2.超出部分隐藏
    overflow:hidden;
    // 3.文字用省略号替代超出部分
    text-overflow:ellipsis;

多行文本省略号显示

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

22. HTML5新特性

IE9+以上

22.1 html5新增语义化标签

    <header>:头部标签
    <nav>:导航标签
    <article>:内容标签
    <section>：侧边栏标签
    <footer>：尾部标签

22.2 新增的多媒体标签

22.2.1 video

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加mutued来解决自动播放问题）
controls	controls	向用户显示播放控件
width	ps	设置播放器宽度
height	ps	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto(预加载视频)/none(不应加载视频)	规定是否预加载视频（如果有了autoplay,就忽略该属性）
src	url	视频url地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

22.2.2 audio

常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则循环播放
src	url	播放音频URL

注意：谷歌浏览器把音频和视频的自动播放禁止了

22.2.3 新增input属性

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

22.2.4 新增的表单属性

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

23. css3的新特性

23.1 新增选择器

23.1.1 属性选择器

属性选择器可以根据元素特定属性来选择元素。

选择符	简介
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元素

23.1.2 结构伪类选择器

结构伪类选择器主要更具文档结构来选择元素，常用于更具父级选择器里面的子元素

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

注意：

对于结构伪类选择器，其主要用法如下
```
 
 ul li:first-child{
     background-color:pink;
 }
```
从CSS的权重来讲，其权值属于一个标签+一个类选择器
对于结构伪类选择器E:nth-child(n)，可以选择某个父元素的一个或者多个特定的子元素
1. n可以是数字，关键字和公式
2. n如果是数字，就是选择第n个元素，里面数字从1开始
3. n可以是关键字，even表示偶数，odd表示奇数
4. n可以是公式，常见的公司如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）
公式取值

2n 偶数

2n+1 奇数

5n 5,10,15...

n+5 从第5个开始（包括第5个）到最后

-n+5 前5个（包括第5个）
nth-child与nth-of-type区别：
1. nth-child对父元素里面所有孩子排序选择（序号是固定的），先找到第n个还是，然后看是否与E匹配
2. nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子

公式	取值
2n	偶数
2n+1	奇数
5n	5,10,15...
n+5	从第5个开始（包括第5个）到最后
-n+5	前5个（包括第5个）

23.1.3 伪元素选择器

伪类选择器可以帮助我们利用css创建新标签元素，而不需要html标签，从而简化html结构

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树种是找不到的，所以我们称为伪元素
语法：element::before{}
before和after必须有content属性
before在父元素内容的前面创建元素，after在父元素的内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

24. css过渡

语法：

    transition:要过渡的属性 花费时间 运动曲线 何时开始;

属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有属性都变化过渡，写一个all就可以
花费时间：单位是秒（必须写单位）比如0.5s
运动曲线：默认是ease(可省略)
何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s
过渡时css3中具有颠覆性的特征之一，我们可以在不使用flash动画或Javascript的情况下，当元素从一种样式变化为另一种样式时为元素添加效果
过渡动画：是从一个状态渐渐的过渡到另外一个状态

经常和:hover搭配使用

25. 其他特性

25.1 filter:

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

    filter:函数();
    示例：
    filter:blur(5px);//blur模糊处理 数值越大越模糊

25.2 calc

calc()函数可以让你在声明CSS属性值时执行一些计算

    width:calc(100%-80px);

括号里面可以用加减乘除（+，-，*，/）

26. 网站实际开发规则

26.1 LOGO SEO优化

logo里面受限放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可
为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不显示出来
1. 方法1：text-indent 移到盒子外边（text-indent:-9999px）,然后overhidden:hidden，淘宝的做法
2. 方法2：直接给font-size：0,就看不到文字了，京东的做法
最后给一个title属性，这样鼠标放到logo上就可以看到提示文字了

本文作者：weliars

本文链接：https://www.cnblogs.com/weliars/p/16343967.html