html基础知识整合


文章目录

  • **html基础知识整合**
  • 【web的组成】
  • 【HTML5基本语法】
  • 常规标签（普通标签、双标签）
  • 【文章标签】
  • 【修饰标签】
  • 【特殊字符】
  • 【HTML注释】
  • 【列表】
  • 无序列表：
  • 自定义列表：
  • 【插入图片】
  • 标题Alt与title的区别：
  • 【常用的布局标签】
  • 【表格】
  • 【表单】
  • 【智能表单】
  • Input表单的type新属性值
  • 新增的表单属性:
  • get和post的区别：
  • 【下拉菜单】
  • 【多行文本域】
  • 【 HTML视频插入】
  • 【HTML5新增标签】
  • 【新增结构性标签】
  • 【web引用标签】
  • 【插入flash】
  • 语法：
  • 将flash背景设置为透明:
  • 滚动字幕的设置：
  • css部分
  • 【css基本语法】
  • 【css的三种样式表】
  • 内部样式表：
  • 内联样式表：
  • 外部样式表：
  • link和import导入外部样式的区别：
  • css样式重置
  • 命名方法（语义化命名，结构化命名）
  • 【css的选择器】
  • 标签选择器：HTML的标签
  • 类选择器：class选择器
  • ID选择器：
  • 通配符：*
  • 群组选择器（集合选择器）
  • 包含选择器(后代选择器)
  • 子选择器
  • 伪类选择器：
  • 关系选择器（层次关系选择器）：
  • 动态伪类选择器：
  • 目标伪类选择器：
  • UI元素状态伪类选择器:
  • 结构伪类选择器：
  • 属性选择器：
  • 伪元素选择器：
  • 选择时注意：
  • 什么时候会产生优先级：
  • 【选择器的权重】
  • 【颜色设置】
  • 文字颜色：color
  • 【文字设置】
  • 文字大小：font-size
  • 文字字体设置：font-family
  • 文字是否加粗：font-weight
  • 文字是否倾斜：font-style
  • 文字颜色设置：color
  • 行高（行间距）line-height
  • 文字的综合设置
  • 【文本设置】
  • 文本修饰：text-decoration
  • 首行缩进：text-indent (可以设置负值)
  • 英文字母大小写text-transform（默认效果none）
  • 水平对齐方式：text-align
  • 文本阴影：text-shadow（css3.0）
  • 【边框设置】
  • Border:粗细 线型 颜色（无顺序要求）
  • 【用图片做边框】
  • 【背景设置】
  • 背景颜色background-color
  • 背景图片平铺方式background-repeat
  • 背景图片的位置background-position
  • 背景图片固定background-attachment
  • 【列表设置】
  • 列表符号list-style-type
  • 用图片做列表符号list-style-image
  • 列表符号的位置list-style-position
  • 去掉列表符号list-style-type
  • 【网页中支持的图片格式】
  • 【float属性】
  • 【清除浮动】
  • 【盒子模型】
  • 【padding】内填充、内补丁、内补白
  • 【margin】外填充、外补丁、外补白
  • margin能不能影响盒子的实际大小？
  • 【盒子实际宽高算法】
  • 【margin-top不能正常显示解决办法】
  • 【怪异盒模型】
  • 溢出属性overflow/overflow-x/overflow-y
  • 空白空间属性white-space
  • 显示省略号text-overflow
  • 单行文本溢出显示省略号的必要条件
  • 【元素类型】
  • 【元素类型的转换属性】
  • 【置换元素和非置换元素】
  • 【定位】
  • 【定位的层叠顺序属性z-index】
  • 【相对定位和绝对定位的区别】
  • 【水平垂直居中】
  • 【锚点】
  • 【透明】
  • 【图片整合、雪碧图、精灵图】
  • css做一个三角形
  • 【宽高自适应】
  • 【宽度自适应】
  • 【高度自适应】
  • 【最小高度兼容写法】
  • 【高度塌陷】
  • 【visibility：hidden与display：none的区别】
  • 【伪对象选择符】
  • 【元素宽高自适应窗口宽高】
  • 【兼容】
  • 为什么会出现浏览器兼容问题？
  • HACK解决方式（1-7）
  • 1、网页中插入图片会出现哪些问题：向下撑大三像素
  • 2、双边距问题（ie6）
  • 3、百分百问题（ie6）
  • 4、鼠标指针
  • 5、表单行高不一致
  • 6、按钮大小不一致
  • 7、透明
  • 过滤器解决方式：
  • 【五大浏览器内核】
  • 【表单的补充】
  • 数据列分组
  • 【css的统筹】
  • 【BFC】
  • BFC的布局规则
  • 【布局方式】
  • 自适应两栏布局
  • 防止margin重叠
  • 【css新增属性】
  • 【服务器端字体】
  • 【优雅降级和渐进增强】
  • 【浏览器兼容前缀】
  • 【弹性盒】
  • 如何定义弹性盒：
  • 弹性子元素在父元素中的显示排列方式：flex-direction
  • 弹性子元素在父元素中主轴的对齐方式flex-direction
  • 弹性子元素在父元素中侧轴的对齐方式align-items
  • flex-wrap
  • align-content
  • 【水平垂直居中】
  • 【媒体查询】


【web的组成】

结构（HTML、XHTML、xml） 表现（css） 行为（js）
【代码调试】
浏览器中的f12
【HTML5的基本结构】

<!doctype html>声明文档类型
<html>跟标签
<head> 头部
<title>网页标题</title>
<meta charset=”utf-8”>编码格式
</head>
<body>主体内容</body>
</html>

【HTML5基本语法】

常规标签（普通标签、双标签）

<标签 属性=”” 属性=”” ></标签>
空标签（单标签）
<标签 属性=”” 属性=”” />
尖括号里的第一个单词叫做：标签、标记、元素
属性与标签或者属性之间有空格隔开，
属性值与属性用等号连接，属性值必须写在引号里边
属性可有多个不分先后顺序
单标签必须有结束的反斜杠（XHTML）

【文章标签】

标题：h1-h6 默认是黑色字体加粗效果，h1最大 h6最小
段落标签：p 段与段之间默认空一行

【修饰标签】

加粗 b strong
倾斜 i em
下划线 u
删除线 del
上角标sup
下角标sub

【特殊字符】

空格： 
版权图标：©
大于号：>
小于号：<
向下小三角：∨
强制换行 br（单标签）
水平线hr（单标签）

【HTML注释】

<!--HTML注释-->

【列表】

有序列表：

<ol type=”” start=””>
<li></li>
</ol>

列表符号的类型type
列表符号从哪里开始start

无序列表：

<ul type=””>
<li></li>
</ul>

自定义列表：

<dl>
<dt></dt>
<dd></dd>
</dl>

【插入图片】

<img src=”图片路径” border=”边框” width=”宽度” height=”高度” alt=”替换文本” title=”提示信息”>

路径：同一文件下直接写文件名+拓展名
目标文件所在文件夹与当前文件在同一目录下写目标文件夹名称/目标文件名+拓展名
当前文件所在文件夹与目标文件在同一目录下 …/目标文件名+拓展名

标题Alt与title的区别：

相同的：都有利于SEO（搜索引擎的优化）
不同的：alt是当图片出现错误时显示的文字信息
Title是当鼠标放在图片上时显示的提示信息

【超链接】

<a href=”路径” target=””>显示效果</a>

超链接的打开方式target：值_self 默认值在当前页面打开
_blank在新的窗口打开

<a href=”#” target=””>空连接</a>
<a href=”http://www.baidu.com” target=””>具体网址</a>

【常用的布局标签】

Div 外围结构
Span 设置某个节点

【表格】

<table border="1" width="300" height="500" cellspacing="0" cellpadding="10" align="center">
	<caption>表格标题</caption>
    <tr>
    	<th>列标题</th>
        <th>列标题</th>
        <th>列标题</th>
    </tr>
	<tr>	
    	<td colspan="2">1</td>
    
        <td rowspan="3">3</td>
    </tr>
    <tr>	
    	<td>4</td>
        <td>5</td> 
    </tr>
    <tr>	
    	<td>7</td>
        <td>8</td>       
    </tr>
    <tr align="center" valign="top">
    	<td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
    	<td align="center">1</td>
        <td valign="bottom">2</td>
        <td>3</td>
    </tr>
</table>

表格标题caption
表格列标题把td换成th 文字默认水平垂直居中加粗

单元格与单元格的间距cellspacing
内容和边界之间的距离cellpadding
列合并colspan 同一行的不同列 与谁合并将谁删除
行合并rowspan 同一列的不同行 与谁合并将谁删除

水平对齐方式align：值left center right
如果align给table写，指整个表格的水平对齐方式
Align给tr写，指这一行内容的水平对齐方式
Algin给td写，指这一个单元格内容的水平对齐方式

垂直对齐方式：valign：值top middle bottom
Valign不能给table写
Valign给tr写，指这一行内容的垂直对齐方式
valign给td写，指这一个单元格内容的垂直对齐方式

【表单】

表单的作用：收集用户信息
表单域：form

表单域form（如果没有form不影响显示效果，但是影响提交按钮）

Form里边可以设置：
name 表单的名称
method 表单的提交方式方法（值 get 、post）
Get：从服务器上获取
Post：向服务器上传 安全性高

Action:表单的提交路径
Target：表单提交时的打开方式

表单控件（表单元素）：input
文本框text
密码框password
单选按钮radio（名称name一定要有一组保持一致）
复选框checkbox
按钮button
提交按钮submit
重置按钮reset

【智能表单】

Input表单的type新属性值

值

含义

Type=“email”

限制用户输入必须为Email类型

Type=“url”

限制用户输入必须为URL类型

Type=“date”

限制用户输入必须为日期类型

Type=“time”

限制用户输入必须为时间类型

Type=“month”

限制用户输入必须为月类型

Type=“week”

限制用户输入必须为周类型

Type=“number”

限制用户输入必须为数字类型

Type=“range”

产生一个滑动条的表单

Type=“search”

产生一个搜索意义的表单 配合results="n"属性 C

Type=“color”

生成一个颜色选择表单

新增的表单属性:

属性

值

说明

Required

required

表单拥有该属性表示其内容不能为空，必填

placeholder

提示文本

表单的提示信息，存在默认值将不显示

Autofocus

autofocus

自动聚焦属性，页面加载完成自动聚焦到指定表单

Pattern

正则表达式

输入的内容必须匹配到指定正则 pattern="\d{3}"

autocomplete

历史记录

pattern="\d{3}"输入的是数字不能超过3个
novalidate:不进行验证直接提交
Autocomplete="on"自动补全列表

<input type="search" name="move" list="search" >
<datalist id="search" >
	<option>黑老师的由来</op䈈on>
	<option>宝宝要坚强</op䈈on>
	<option>佳佳婕婕不得不说的故事</option>
</datalist>

output的使用

<form οninput="res.value=no1.value*no2.value">
	<input type="text" name="no1">
	<input type="text" name="no2">
	<output name="res"></output>
</form>

get和post的区别：


1 get是从服务器上获取数据，post是向服务器传送数据。

2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。

5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

建议： 1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式； 2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

【下拉菜单】

<select>
<option>选项</option>
</select>

【多行文本域】

<textarea></textarea>


表单元素的属性： 禁用disabled 默认选中checked 下拉菜单的默认选中selected 长度size 最大输入字符数maxlength 多行文本域 输入字符数cols 输入多少行出现滚动条rows

【 HTML视频插入】

1、 视频的插入（两种方式）

<video src="movie.ogg"></video>
<video >
<source src="movie.ogg" type="video/ogg" ></source>
</video>(type必加属性)

2、 Width height设置视频的宽高

<video src="movie.ogg" width="600" height="400"></video>

3、 Autoplay 视频就绪自动播放

<video src="movie.ogg" autoplay="autoplay"></video>

4、 Controls 向用户显示播放控件

<video src="movie.ogg" controls="controls" ></video>

Controls在谷歌快进不兼容,火狐兼容
5、 Poster 加载等待的画面图片

<video src="movie.ogg" controls="controls" poster="../img/img1.jpg">

6、 Loop 播放完是否继续播放该视频，循环播放 

<video controls="controls" loop="loop" >
<source src="movie.ogg" type="video/ogg" ></source>
</video>

【HTML5新增标签】

【新增结构性标签】

（有意义的div）ie8不支持需要添加兼容的js代码

Header 顶部
Nav  导航
Section 内容区域
Main  内容区域
Footer 底部
Aside 侧边栏
Article 文章
Hgroup 标题组
Figure	》figcaption 媒体组

【web引用标签】

Mark 默认选中
Details 详细信息
Ruby rp rt 注释标签

【插入flash】

语法：

视频支持的格式：mp4，webm，ogg
音频支持的格式：mp3，mp4，ogg

<object w
idth=“value” height="value">
<param name=“wmode” value="transparent" /> //设置flash背景透明
<param name="movie" value="flash路径及全称" />
（其他浏览器识别）
<embed width="value" height="value" src="flash路径及全称"
wmode="transparent">
</embed> （ie浏览器识别）
</object>

flash源文件格式.fla, 导出影片为.swf, 创建播放器格式为.exe.

将flash背景设置为透明:

其他浏览器：
<param name=“wmode” value="transparent" />
IE浏览器：
给<embed>标记添加属性：wmode="transparent"

滚动字幕的设置：

<marquee>内容</marquee>
说明：
behavior（行为）="scroll(滚动)/alternate（晃动）
direction（方向）="up(从下向上)/down（从上向下）/left（从右向
左）/right（从左向右）“
scrollamount（滚动速度）="value"
height="value(上下滚动范围)"
width=""(左右滚动范围

css部分

【css基本语法】

Css的语法由两部分组成：选择器和声明，其中声明又包括属性和属性值

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

选择器表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素.
属性和属性值用冒号连接，分号结束，属性可以有多个，不分先后顺序，如果是最后一个属性值，分号可以省略（不建议省略）

【css的三种样式表】

内部样式表：

放在head与head直接用style包裹

<style>
Css语法
</style>

内联样式表：

<div style="Color: red;border: 1px dashed black" >内联样式表</div>

外部样式表：

<link href="目标文件路径" rel="stylesheet" type="text/css" />

说明：
写在head与head之间。
rel：用于定义文档关联，表示关联样式表；
type：定义文档类型；
(2)导入写法import

<style type="text/css">
@import url("目标文件的路径及文件名全称");
</style>

说明：@和import之间没有空格 url和小括号之间也没有空格；括号内部加引
号，必须结尾以分号结束；

link和import导入外部样式的区别：


差别1：老祖宗的差别： link属于XHTML标签，而@import完全是CSS提供的一种方式。

link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属 性等，@import就只能加载CSS

差别2：加载顺序的差别： 当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。 所以有时候浏览@import加载CSS的页面时开始会没有样式。

差别3： 兼容性的差别： @import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别： 当使用javascript控制dom去改变样式的时候,只能使用link标签，因为@import不是dom可以控制的.

4、css样式表的优先级：
内联样式表的优先级别最高
内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。

css样式重置

  • 1）新浪为例：
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0;padding:0; }
fieldset, img { border:none; }
img{display: block;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; }
body { color:#333; padding:5px 0; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA;
background:#fff;/* overflow-y:scroll;*/ overflow-x:hidden;}
a { color:#666; text-decoration:none; }
a:visited { color:#666; }
a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }
  • 2）、腾讯
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;}
a{color:#172c45;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
.ind{text-indent:2em}
.ind10{text-indent:10px;}
.noborder{border:0;}
  • 3）、搜狐
body{font-family:"\5B8B\4F53","Arial Narrow",HELVETICA;text-align:center;margin:0
auto;padding:0;background:#FFF;font-size:12px;color:#333;}
body > div{text-align:center;margin-right:auto;margin-left:auto;}
div,form,ul,ol,li,span,p{margin:0;padding:0;border:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
ul,ol,li{list-style:none}
table,td,input{font-size:12px;padding:0} /* 默认链接颜色 */
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}

命名方法（语义化命名，结构化命名）

ID:结构化 header footer
class: .border0 . red .font12 .clear
2、CSS命名规则

  • 1）建议使用小写字母
  • 2）以英文字母开头，后面可以连接数字、字母、下划线、连字符和特殊字符，建议尽量使用英文字母，适当使用
    下划线和连接线；
  • 3）词必达意，名称要反映用途和相关信息，同时也要简短。

【css的选择器】

标签选择器：HTML的标签

类型选择符是根据html语言中的标记来直接定义
语法：标签名称 {属性：属性值；}
实例： div { width: 30px}
所有的页面元素都可以作为选择符;
用法：
（1）如果想改变某个元素的默认样式时，可以使用标记选择符；
（2）当统一文档某个元素的显示效果时，可以使用标记选择符；

类选择器：class选择器

类选择器使用必须要通过引用才能生效
语法：.class名称{属性：属性值;}
用法：class选择符更适合定义一类样式；
(1)当我们使用类选择符时，应先为每个元素定义一个类名，
(2)类选择符的语法格式：
如：

<div class="top"></div>
.top{属性:属性值;}

起名规则：不能用汉字、数字开头，最好不要使用HTML的关键字（HTML的标签）
一个标签可以引用多个class名称中间用空格隔开

ID选择器：

语法： <div id=“id名”></div>
例如： #id名{属性：属性值;}

说明：
（1）可以给每个元素使用id选择符，但id是元素的唯一标识符，不可出现重复的id名；

如：<div id="top"></div>

（2）id选择符的语法格式是“#”加上自定义的id名

如：#box{width:300px; height:300px;}

(3) 起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
如：head标记
(4)一个id名称只能在文档中出现一次，因为id是唯一的
(5) 最大的用处：创建网页的外围结构。

通配符：*

语法：*{属性：属性值;}

说明：
通配选择符的写法是“*”，其含义就是所有元素；表示该样式适用所有网页元素；
用法：常用来重置样式。

群组选择器（集合选择器）

语法：选择器1，……，选择器5 {属性：属性值;}

说明：当有多个选择器应用相同的样式时，可以将每个选择器用“，”分隔的方式，合并为一组。

实例：.div, #div, p{width:100px;}

包含选择器(后代选择器)

语法：选择器1 选择器2{属性：属性值;}
说明：选择器1和选择器2用空格隔开，含义就是选择器1中包含的所有选择器2
实例： div ul li { height:200px; }

子选择器

子选择器
语法：选择符1>选择符2{属性：属性值;}
作用：只对选择符1下的子元素选择符2起作用;

子选择器与后代选择器的区别
①写法不一样：后代选择器的标识为：空格 如：ul li{width:150px;} 【ul和li之间用空格隔开】子选择器的标识为：>
如：ul>li{width:150px;}【ul和li之间用>隔开】
②功能不一样：后代选择器是选择ul包围的 所有元素中的 所有li元素，包括子元素、孙元素、曾孙元素等等等。子选择
器仅仅选择ul包围的 子元素中的 li元素，不包括孙元素、曾孙元素等等等。
③兼容性不一样：后代选择器是所有浏览器都兼容的，都可使用。子选择器在IE6、IE7、IE8中则是不被支持的选择

伪类选择器：

a:link {color: #FF0000;} /* 未访问的链接 */
a:visited {color: #00FF00;} /* 已访问的链接 */
a:hover {color: #FF00FF;} /* 鼠标移动到链接上 */
a:active {color: #0000FF;} /* 选定的链接 */

关系选择器（层次关系选择器）：

后代选择器 空格
子代选择器 大于号
相邻兄弟选中 加号 （向下找相邻的第一个兄弟）
通用选择权 波浪线 （向下找所有的这类兄弟）

动态伪类选择器：

:link
:hover
:visited
:active
:focus

目标伪类选择器：

:target (指超链接锚点所指id所在元素)

UI元素状态伪类选择器:

:checked :enabled :disabled

结构伪类选择器：

:first-child :last-child 整个结构中的第一个和最好一个
:first-of-type :last-of-type 这个类型的第一个和最后一个
:nth-child(n) 这个结构中的第几个 可写2n或者even偶数 奇数2n+1或2n-1 或者odd
:nth-of-type(n) 这个类型的第几个
:nth-last-child(n) 整个结构中倒数第几个
:nth-last-of-type(n) 这个类型的倒数第几个
:only-child 整个结构中只有这一个标签其他任何标签都不存在
:only-of-type 这个类型只存在一个的时候
:empty当元素内容为空时的设置

属性选择器：

值

含义

input[value]{background: #ff0;}

含有指定属性

input[value=“abc”]{background: #00f;}

含有指定属性值

input[value^=“abc”]{background: #0f0;}

属性值起始位置存在的元素

input[value$=“abc”]{background: #0ff;}

属性值结束位置存在的元素

input[value*=“abc”]{background: #f0f;}

属性值任意位置存在的元素

伪元素选择器：

:first-line
:first-letter
:before
:after

选择时注意：

按照以上顺序编写都可正常显示样式，否则有些状态不能正常显示

什么时候会产生优先级：

当对同一个元素设置不同的样式表每个样式表都有相同的属性时内联样式表的优先级最高，内部和外部与书写顺序有关，谁在后边谁生效

【选择器的权重】

当给一个元素同时设置多个选择器时，每个选择器都有相同的属性
继承的权重是最小的0000
标签选择器的权重是0001
Class选择器的权重是0010
ID选择器的权重是0100
内联样式表的权重是1000
后代选择器的权重是包含之和

如果属性值后边有空格+!important则其变成正无穷大

【颜色设置】

文字颜色：color

值： 可以是直接写颜色的英文单词 color:red;
六个十六进制数（常用方式在ps里查找） color:#ff0000 如果两两相同可以缩写成三个值 color:#f00;
三原色设置颜色 color:rgb(255,0,0)
三原色加透明度 color:rgba(255,0,0,0.5) a透明度取值0-1 （css3.0 低版本浏览器不支持）

【文字设置】

文字大小：font-size

网页中常用文字大小是偶数12、14、16、18、
单位px（常用） pt（打印单位） rem（移动端用的单位） em
默认情况下1em=16px=1rem（网页默认文字大小是16px） 9pt=12px
如果由psd源文件可以使用快捷键t点击文字在最上边的菜单栏即可查看文字大小，没有源文件用选框工具去测量

文字字体设置：font-family

如果是汉字字体需要添加引号font-family:”楷体”;
如果是由一个英文单词组成的字体不需要添加引号font-family:Verdana;
如果是由一组英文单词组成的字体需要添加引号font-family:“Times New Roman”;
可以为一个标签同时设置多个字体，用逗号隔开，浏览器会优先解析第一个字体，如果第一个字体不存在那么向后解析第二个，第二个不存在继续向后解析第三个…如果设置的所有字体都不存在，将按照系统默认字体去解析。

文字是否加粗：font-weight

值 加粗bold 更粗bolder 不加粗normal
100-500不加粗 600-900加粗

文字是否倾斜：font-style

值 倾斜italic /oblique 不倾斜normal
将小写字母变成小型的大写字母font-variant
值 小写字母变成小型的大写字母small-caps 默认normal

文字颜色设置：color

值： 可以是直接写颜色的英文单词 color:red;
六个十六进制数（常用方式在ps里查找） color:#ff0000 如果两两相同可以缩写成三个值 color:#f00;
三原色设置颜色 color:rgb(255,0,0)
三原色加透明度 color:rgba(255,0,0,0.5) a透明度取值0-1 （css3.0 低版本浏览器不支持）

行高（行间距）line-height

值：可以直接写数字代表的是倍数（文字大小的倍数）line-height:2;
可以是具体的像素值 line-height:24px;
如果单行文字垂直方向居中显示可以设置line-height与元素的height的值是一样的

文字的综合设置

font:font-variant font-weight font-style font-size/line-height font-family;(文字大小及字体一定在最后)
例：font:normal italic bold 30px/60px “楷体”;


一般工作中同时设置的是下面这个，这三者同时存在缺一不可 Font:font-size/line-height font-family;

【文本设置】

文本修饰：text-decoration

值 下划线underline 上划线overline 中划线（删除线）line-through
没有线none -> 应用于超链接最多，因为超链接默认带下划线
三条线都存在;text-decoration:underline line-through overline

首行缩进：text-indent (可以设置负值)

值： 取决于文字大小，如果文字大小16px 那么两个字是32px（如果设置负值则前两个字往前走两个字的长度）
字符间距：letter-spacing（可以设置负值）（字与字之间的距离，默认设置是0）
词间距：word-spacing（可以设置负值）（在编辑的时候中间写个空格，编译器才认为这个是一个词，如果不带空格那不生效）

英文字母大小写text-transform（默认效果none）

值：首字母大写capitalize
全部大写uppercase
全部小写 lowercase

水平对齐方式：text-align

值：左left 中center 右right
两端对齐justify（针对英文单词好用）
垂直对齐方式：vertical-align（只针对图片生效）
值：上top 中middle 下bottom 基线baseline

文本阴影：text-shadow（css3.0）

值：水平偏移 垂直偏移 模糊半径 阴影颜色
可以为一个元素设置多个阴影中间用逗号隔开

【边框设置】

Border:粗细 线型 颜色（无顺序要求）

可以单独设置某一个方向border-top/right/left/bottom
线型：实线solid 虚线dashed 点状线dotted 双实线double 没有线none
边框属性border是border-width、border-style、border-color的缩写
用边框制作三角形 transparent透明
Div{
Width:0;
Border:20px solid transparent;
Border-left-color:#f00;
}

【用图片做边框】

Border-image:图片路径 裁切位置/边框宽度 重复方式
图片做背景图片边框：

border-image : url( img/border1.png) 27 27 27 27/27px;
等于下面这几个属性
border-image-source: url( img / border1.png);
border-image-slice: 27;/*图片的裁切位置*/
border-image-width: 27px;
border-image-repeat: stretch;

【背景设置】


背景设置background:颜色 图片 平铺方式 位置 背景图片固定（不分顺序）


背景颜色background-color

背景图片background-image:url(路径) 默认水平垂直平铺直到铺满

背景图片平铺方式background-repeat

background-repeat:repeat\ no-repeat\repeat-x\repeat-y

背景图片的位置background-position

background-position：值1 值2（先左右 上下）(可设置负值)
可以是具体的方向值：left、center、right top、center bottom，如果上下左右都处于居中的位置那么可以写成background-position:center;
可以写具体的数值，正值是向右向下 负值向左向上。如果是图片整合会用到负值，那么就可以写成background-position:-图片所占视觉宽度 0；（图片左右整合的情况下）;background-position:0 -图片所占视觉宽度 ；(图片上下整合的情况下)

背景图片固定background-attachment

background-attachment:scroll(默认值不固定)、fixed（固定）

背景颜色和背景图片可以同时存在

【列表设置】

列表符号list-style-type

list-style-type:none无 disc 实心圆

用图片做列表符号list-style-image

list-style-image:url(路径);

列表符号的位置list-style-position

list-style-position:inside(里边) outside(默认值外边)

去掉列表符号list-style-type

list-style-type:none;或者list-style:none;

【网页中支持的图片格式】

网页中的图片有两种方式加载：插入图片、背景图片
背景图片上可以写字，插入的图片不可以
Jpg:有损压缩格式，不支持透明和动画
Png:有损压缩格式，支持透明不支持动画
Gif:有损压缩格式，支持透明和动画

【float属性】

Float: left/right/none(默认值)
效果：
可以将自上而下排列的元素变成自左向右在一排显示，浮动的元素后边一个紧跟着前边一个显示（向右浮动时可能会造成反向），如果父元素的宽度不够，那么浮动的子元素会自动换行显示，元素一旦float就会脱离正常的文档流，但是会占据自身的空间，造成文字环绕效果

【清除浮动】

Clear：left、right、both
清除上面浮动对自身的影响，一般情况下想让某一个模块换行显示就可以直接 clear:both;

【盒子模型】

IOS显示GIF图过快_表单


IOS显示GIF图过快_IOS显示GIF图过快_02

盒模型的组成：margin border padding 内容（content）

【padding】内填充、内补丁、内补白

一个值：上下左右 padding:10px;
两个值：上下 左右 padding:10px 20px;
三个值：上 左右 下 padding:10px 20px 30px;
四个值：上 右 下 左 padding:10px 20px 30px 40px;
可以设置具体某一个方向padding-left/right/top/bottom:10px;
Padding会影响盒子的实际大小，padding区域可以出现背景颜色和背景图片，padding不可以设置负值

【margin】外填充、外补丁、外补白

一个值：上下左右 margin:10px;
两个值：上下 左右 margin:10px 20px;
三个值：上 左右 下 margin:10px 20px 30px;
四个值：上 右 下 左 margin:10px 20px 30px 40px;
可以设置具体某一个方向margin-left/right/top/bottom:10px;
margin区域不可以出现背景颜色和背景图片，margin可以设置负值

margin能不能影响盒子的实际大小？

如果单独一个盒子时margin不会影响盒子的实际大小，
如果一个大盒子里边摆放多个小盒子，此时小盒子有margin会影响盒子的摆放（此时会影响盒子的实际大小）

【盒子实际宽高算法】

宽=(margin-left)+(border-left)+(padding-left)+width+(padding-right)+(border-right)+(margin-right)
高=(margin-top)+(border-top)+(padding-top)+height+(padding-bottom)+(border-bottom)+(margin-bottom)

【margin-top不能正常显示解决办法】

1、给父元素添加padding，padding会影响盒子的实际大小
2、给父元素添加border，border会影响盒子的实际大小
3、给父元素添加float，float会脱离正常文档流，导致margin：0 auto不生效
4、给父元素添加overflow:hidden; overflow会将溢出的内容裁切
5、给自身写float，float会脱离正常文档流
上下margin会发生重叠(上下盒子都不设置float的情况下，上margin-bottom，下margin-top 这样设置的话，只有值大的那个生效)，取较大值，如果两个都有float属性那么上下margin是两者之和，上边flaot，下边清除float，那么两者之间的距离是float元素的值
左右margin两者之和
能用padding不用margin（上下）

【怪异盒模型】

如果没有会发生什么
IE（ie8以下）浏览器会触发怪异盒模型：怪异盒模型如何解析宽高：
实际width、height（给定的宽高）=border+padding+内容都计算在内
标准盒模型实际宽高计算方式：border+padding+width、height（给定宽高）
怪异盒模型与标准盒模型转换属性box-sizing：
值border-box 为怪异盒模型
Content-box为标准盒模型 （默认值）

溢出属性overflow/overflow-x/overflow-y

值 visible：默认值，内容超出会溢出
Hidden：溢出裁切，超出内容不可见
Scorll：以滚动条形式显示超出内容，超出内容可见
Auto：超出显示滚动条，不超出不显示
Inherit：从父元素中继承overflow属性值

空白空间属性white-space

值 pre:将所有的空格以及回车换行都解析出来，文字遇到边界不会换行，遇到br会换行
Pre-line:将回车换行的空格解析出来，内容中间以及缩进的空格不解析，遇到边界内容会换行显示
Pre-wrap:将所有的空格以及回车换行都解析出来，文字遇到边界会换行
Nowrap:强制在一排显示，将所有空格以及回车换行都忽略，内容不会换行显示，遇到br会换行

显示省略号text-overflow

Clip:裁切
Ellipsis：省略号

单行文本溢出显示省略号的必要条件

有一定的宽度：width:value;
强制在一排显示：white-space:nowrap;
溢出裁切： overflow:hidden;
显示省略号：text-overflow:ellipsis;

【元素类型】

块状元素 内联元素
Div是块状元素典型的代表
Span是内联元素典型的代表

块状元素与内联元素的区别：
块状元素可以设置宽度和高度，内联元素不可以，内联元素的宽高就是其内容。
块状元素自上而下独占一行，内联元素自左向右在一排显示，直到遇到边界换行
块状元素与内联元素都遵循盒模型设置（border、padding、margin）但是内联元素的某些属性不能正常显示
块状元素一般作为其他内联元素的盒子使用。


常见的块状元素：div h1-h6 p ul ol li dl dt dd table tr form hr
常见的内联元素：a span b strong i em u br img input textarea select option

【元素类型的转换属性】

属性：display
值：block：变成块状元素（显示） 如果给元素添加float属性，相当于给元素添加display:block
Inline:变成内联元素
Inline-block:行内块 可以设置宽度和高度，支持vertical-align
None:隐藏

大多数块状元素的display属性值是block,li的display属性值是list-item
大多数内联元素的display属性值是inline，img、input、select、textarea的display属性值是inline-block

【置换元素和非置换元素】

置换元素：通过属性值决定其显示效果的元素,比如img input select textarea
等，他们标签内部的内容通常不会直接显示到浏览器中，而很多标签比如h p div 等，他们的内容都会直接显示到浏览器中，而这些大多数元素都是非置换元素，具体看另一篇文章关于置换元素和非置换元素详解

【定位】

属性position
值 static：默认值 静态的
Relative：相对定位，相对于自身原来位置的偏移，不会脱离正常的文档流，不占据空间（不影响其他元素的空间）
Absolute：绝对定位，会脱离正常文档流，不占据空间（不影响其他元素的空间），根据离其最近的有定位的父元素进行定位，如果父元素都不存在定位，那么根据浏览器窗口去定位。
Fixed:固定定位，无论窗口是否出现滚动条，用于处在给定位置保持不动
Sticky:粘性定位 做吸顶效果时top一定要为0
如果元素设置定位属性后，宽度没有设置，那么此时宽度时内容的宽度。如果想宽度是百分百那么需要手动添加

【定位的层叠顺序属性z-index】

如果元素设置定位后会叠加在一起，谁在后边谁在上边显示。
属性：Z-index:显示顺序
必须与定位属性连用才能生效。值越大越在上边显示，越小越在下边，默认值是auto，值可以无穷大也可以无穷小，但是必须是整数.

【相对定位和绝对定位的区别】

相对定位不会脱离正常文档流，绝对会脱离，参照物不一样：相对定位的参照物是自身原来的位置，绝对定位参照离其最近的有定位的父元素进行定位，如果父元素都不存在定位，那么根据浏览器窗口去定位 如果子元素想根据父元素去定位，那么父元素一定要有定位，且值不能为static，如果父元素存在margin:0 auto; 那么父元素的定位属性值最好用relative **父相子绝**

【水平垂直居中】

div{
	width: 200px;
	height: 100px; 
	background: #f00; 
	position: absolute/fixed;
	left: 50%; 
	top: 50%;  
	margin-top:-50px; 
	margin-left: -100px;
	}
div{
	width: 200px; 
	height: 100px; 
	background: #f00; 
	position: absolute/fixed;
	left: 0; 
	top: 0; 
	right: 0; 
	bottom: 0;  
	margin: auto;}

【锚点】

超链接应用的一种
想跳转到哪，给对应的位置添加id选择器
定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
命名锚点链接的应用：在同一页面内的不同位置进行跳转。
制作锚标记：
1)给元素定义命名锚记名
语法：<标记 id=“命名锚记名称”> </标记>
2)连接命名锚记
语法：

【透明】

Rgba(css3出现，低版本浏览器不支持) 内容不会透明
Opacity值0-1 内容会透明
Filter：alpha(opacity=”值0-100”) 兼容ie 内容会透明

【图片整合、雪碧图、精灵图】

图片盒子的优势（好处）：减少向服务器的请求次数，减小图片体积，提高页面加载速度，减少网络带宽占有，提高用户体验度。


**图片整合的原理**：利用背景图片的可移动性，核心属性是background-position **图片整合的注意事项**：只有作为背景图出现的图片才能使用图片整合技术，不是所有的图片都需要整合（一般是有规律的小图标），整合图片的体积不要过大最好不超过100k，图片整合时要留有空白，整合图片时注意整合的方向问题（横向使用那么最好横向整合） 1）什么是精灵图(雪碧图) 精灵图是对Sprites的翻译，它利用CSS背景图像可移动性，对网页用途进行的资源整合效果； 2）精灵图特征：可以节省文件大小，将有规律性的网页图标整合在一张大图上，减少服务器请求次数 ![精灵图使用原因]() #### 【滑动门】 滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果 特性：具有传统导航的效果同时具有高效的扩展性 ## 【圆角】 Border-radius: 最多可以设置8个值。如果想做成圆形将值写成大于等于宽高的一半，或者写50% border-radius：数值 ； border-radius：左上角 右上角 右下角 左下角 border-radius：左上角右下角 右上角 左下角 （对角线） border-radius：5px （四个角一样的弧度设置

css做一个三角形
.triangle{
   width: 0px;
   height: 0px;
   border-top: 200px solid #00a497;
   border-bottom: 200px solid #cc7eb1;
   border-left: 200px solid #165e83;
   border-right: 200px solid #c85179;
}

IOS显示GIF图过快_IOS显示GIF图过快_03

【宽高自适应】

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
（1）宽度自适应
元素宽度设置为100%。（块元素宽度默认为100%）
（2）高度自适应
元素的高度自适应： 设置如： div {height : auto;}
元素高宽最大、最小值设置
min-height（最小高度）
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)
注：IE6及以下版本不识别该组属性。

【宽度自适应】

1、如果不写宽度默认是（块状元素默认是浏览器的宽，内联元素默认是内容的宽度） 默认换行显示
2、设置宽度为auto（块状元素默认是浏览器的宽，内联元素默认是内容的宽度） 默认换行显示
3、设置min-width
宽度自适应可以写一个min-width，如果小于最小的宽度那么浏览器将以滚动条的形式去显示，如果大于最小的宽度浏览器默认会占一整行
Max-width元素的宽度多大可以达到的值，可以无限缩小但是不能放大

【高度自适应】

1、如果不写高度默认是内容撑开
2、设置高度为auto 也是有内容撑开
3、设置min-height 会随内容的增多而变大
12的显示效果一样，如果里边没有任何内容，那么元素就没有高度，第3种如果没有内容，那么元素的高度应该是min-height的值
Max-height：元素如果没有内容那么高度就为零，如果有内容那么高度最大会是max-height的值，内容比较多会超出（溢出）

【最小高度兼容写法】

1、min-height:value； _height:value;(下划线写法ie6识别)
2、Min-height:value; height:auto !important; height:value;
第二种方式相对来说是最好的：第一种利用的是ie6识别下划线的写法，其他浏览器不识别，如果一旦ie6不识别此属性那么此方法将不可用

【高度塌陷】

产生原因：子元素float，父元素高度自适应
解决方法：
1、给父元素添加overflow:hidden;
优点：简单易记
缺点：如果父元素中有内容溢出会被裁切
2、给浮动的元素后边添加一个空div 设置：clear:both;height:0;overflow:hidden;
优点：如果父元素中有内容溢出不会被裁切
缺点：不利于SEO（SEO喜欢结构清晰的页面，结构越简单越好，能用一个标签解决不用两个标签）
3、万能清除法父元素:after{content:””; display:block; clear:both; height:0; overflow:hidden; visibility:hidden;}
优点：有利于SEO，溢出不会裁切
缺点：复杂不易记
4、父元素设置高度

【visibility：hidden与display：none的区别】

都可以实现隐藏：visibility是内容隐藏，但是位置会保留，display彻底隐藏位置也不存在

【伪对象选择符】

:after{content:””;} 元素内容的后边添加content里边的内容 :before{content:””;}元素内容的前边添加content里边的内容 :first-line第一行 :first-letter第一个字符 ::selection 当鼠标选中文字时的效果（默认蓝底白字）但是不能更改文字大小

【元素宽高自适应窗口宽高】

将HTML,body{height:100%;}
元素本身{width:100%; height:100%;}

【兼容】

为什么会出现浏览器兼容问题？

由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各
种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置
的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去
克服的。

HACK解决方式（1-7）

1、网页中插入图片会出现哪些问题：向下撑大三像素

将结束标签例如与img在同一排显示（只有ie6支持）
将图片变成块状display:block/
vertical-align:top/middle/bottom
给图片写float
给父元素设置font-size:0;
如果图片是通过超链接加载的那么在ie浏览器中会出现边框：将图片的边框设置border:0/none

2、双边距问题（ie6）

当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界加
倍显示。

给float的元素添加display:inline;

3、百分百问题（ie6）

描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致
50%加50%大于100%的情况。（也会受系统影响）

给浮动到右边的添加clear:right

4、鼠标指针

Cursor:pointer(鼠标变成小手型)

5、表单行高不一致

Input写float属性

6、按钮大小不一致

1、给按钮单独设置高度
2、用其他标签代替按钮
3、给按钮外部嵌套一个其他标签
4、用背景图片代替

7、透明

Opacity:value
Filter:alpha(opacity=value)

过滤器解决方式：

下划线写法例如：_height(ie6支持)
星号写法例如：*height(ie6,ie7支持)
关键字过滤 !important
反斜杠9 例如：height：100px\9;

【五大浏览器内核】

Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的。
Gecko(壁虎)：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行。
Webkit : 代表作品Safari、Chrome ， 是一个开源项目。
Presto : 代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。
Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

【表单的补充】

表单的组成：表单域form 表单控件input 提示信息label
表单字段集：fieldset
表单字段集标题：legend 放在fieldset里的第一个位置
提示信息label （提高用户体验）

表单字段集用法，例如：
<form>
	<fieldset disabled="disabled">
		<legend>健康情况</legend>
		身高: <input type="text" /><br />
		体重: <input type="text" /><br />
	</fieldset>
</form>
<label>用户名：<input type="text" /></label><br>
<label for="use">电子邮箱：</label>
<input type="text" id="use" />

文件域：

<input type="file" multiple>

Multiple:实现选中多个文件

图片域：<input type="image" src="pic.jpg" width="100" title="提示信息">

表格按数据行分组：表头thead 表体tbody 表尾tfoot

rules="groups/rows/cols/all/none" 添加组分隔线
说明：
rows:位于行之间的线条
cols:位于列之间的线条
all：位于行和列之间的线条
none:没有线条
groups:位于行组和列组之间的线条
  • 1、Css里合并相邻单元格的间距border-spacing 相当于HTML里cellspacing 必须写在table上
  • 2、合并相邻单元格的边框border-collapse: collapse; 必须写在table里
  • 3、Empty-cells:当单元格没内容时隐藏hide或显示
数据列分组
(1) <colgroup span="分组列数"></colgroup>
(2) <col span=" " />
说明：
1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
3）可以通过给table添加rules="groups"属性来给分组列添加组的分割线。
注意：虽然col和colgroup具有相同的功能，但是，我们只能使用colgroup元素来设置表格内容部分分割线（rules）应该处于的位置，而col没有这个功能。

【css的统筹】

1、CSS文档统筹

  • 1）整站里相同的CSS样式提取到一个样式表里，各个页面调用相同的样式文件即可。
  • 2）网站较大的情况下一般会把网站的头部，尾部单独分离出来，包括样式文件。
    1、 根据页面类型分离文件
    2、 根据功能模块分离文件
    3、 根据标签类型分离文件
    4、 根据设备类型分离文件
    5、 根据代码规模综合分离文件
    2、网页自身优化（如何让网站被搜索引擎搜索到）
  • 1）页面主题优化
    实事求是的写下自己网站的名字，网站的名字要合理，最好包含网站的主要内容。
  • 2）页面头部优化
    页面头部指的是代码中部分，具体一点就是中的“Description（描述）”和“Keywords（关键字）”
    两部分：
    A、“描述”部分应该用近乎描述的语言写下一段介绍你网站的文字，在这其中，你应该适当的对你网站的特色内容加以重复以求突出；
    B、“关键字”部分应该列出你认为合适的，能突出网站内容的关键字就可以了，关键字不要设置太多，可设置10—8个，搜索引擎只会浏览靠前的几个关键字。
<meta name="keywords" content="" />向搜索引擎说明你的网页的关键词；
<meta name="description" content=""/>告诉搜索引擎你的站点的主要内容；
<meta name="generator" content="">用以说明生成工具（如Microsoft FrontPage 4.0）等；
<meta name="author" content="你的姓名">告诉搜索引擎你的站点的制作的作者；
  • 3）超链接优化
    搜索引擎为何可以能够索引全世界的网站，是因为各个搜索引擎程序中都有一个会自动“爬行”于互联网上的智能机器人程序，这个机器人就是顺着网站之间的链接游览世界的，那么我们就应该为它创造一个良好的爬行通道——合理的设置链接。 怎样的链接才是合理的呢？
    A、采用纯文本链接，少用，最好是别用Flash动画设置链接，因为搜索引擎无法识别Flash上的文字.许多公司、个人都喜欢酷酷的Flash动画，网站的入口也做成Flash片断，搜索引擎很难光顾这样的网站。而且个别设计者非常马虎，把网站的入口链接放在了Flash上，有时因为网络繁忙、缺少Flash插件而导致用户根本就看不到网站的内容，
    B、按规范书写超链接，这个title属性，它既可以起到提示访客的作用，也可以让搜索引擎知道它要去哪里.
    C、最好别使用图片热点链接，理由和第一点差不多。
  • 4）图片优化(alt属性，title属性)
    图片优化并不是修改图片的大小、颜色，而是你应该为每个标签加上alt属性，alt属性的作用是当图片无法显示时以文字作为替代显示出来，而对于SEO来说，它可以令搜索引擎有机会索引你网站上的图片，对于一些确实
    没什么意义的图片，最好也不要省略alt，而应该留空，即 alt=""。
  • 5）为网站制作一个“网站地图”
    什么是网站地图？说白了就是一个页面，在这个页面上呢，列出了你网站中各个栏目的入口地址，例如：http://sitemap.163.com，站点地图的作用很大，首先，对于一个栏目众多的网站，它可以帮助访客最快速度找到所需的内容；二则，可以给搜索引擎提供一份自己网站的“鸟瞰图”，方便搜索机器人依次索引整个网站。
  • 6）PageRank（pr值,友情链接）
    PR值是Google提出的一个重要参数，它标明了某个网站的重要程度，那么pr值是如何确定的呢？
    目前普通的解释为：假如有ABC三个网站，彼此互作友情链接，那么当一个访客通过A上的友情链接来到B时，Google就认为A为B投了“一票”，同理，如果有人从C访问B，那么B又得一票，如果全世界的网站上都有B的友情链接，B就是世界上最重要的网站了！那么如何提高我们自己的pr值，方法为交换链接！应该找一些和自己网站内容相近，且较为优秀的网站，但不
    要疯狂的交换链接，如果你的首页上一下子多了几百个友情链接，Google不但不会提升你的pr，有可能认为你作弊，从而把该网站从自己的数据库中删除.
  • 7）静态页面与动态页面
    目前所有的SEO都认为，Google一类的搜索引擎会尽量避免索引带有参数动态页面，而喜欢索引普通的静态页面，这一点并未得到Google等搜索引擎的明确回答，但从效果来看是这样。毕竟动态页面的变数太大，举个例子，你发了一个帖子，可能在论坛某板块的第1页上，可随着跟贴的增加你的发言可能就被挤到第10页上了， 因此，制作网站的时候，最好避免使用动态页面，或者改良技术，让动态页面自动生成对应的静态页面，既能便于搜索引擎收录，也可以降低网站服务器、数据库负担，一举两得，不过这也不是绝对的，网站流量决定一切，即便是一个全部采用动态页面的网站，但因为很受欢迎访客不断，那么它还是会被搜索引擎青睐，还是会出现在搜索结果的前列。而且，随着技术的进步，搜索引擎也会改进，搜索动态页面将来必定会更加容易。
  • 8）避免大“体积”的页面
    有经验标明，搜索引擎不喜欢索引大体积的页面，即一个页面代码部分的体积不要太大，控制在100kb内为佳.最重要的一点！合理的代码结构搜索引擎喜欢格式清晰，结构分明的页面，理论上XML是最合乎搜索引擎，当然，这太极端了，不过如果采用XHTML+CSS技术将页面数据同表现分离，即避免大量嵌套表格和其它冗余的代码还是能够完美实现这一要求的。

【BFC】

详情点击这里 BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block­level box（块）参与， 它规定了内部的Block­level Box如何布局，并且与这个区域外部毫不相干。

BFC的布局规则

  • 1）内部的Box会在垂直方向，一个接一个地放置。
  • 2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 3）每个元素的margin box的左边， 与包含块border box的左边相接触
  • 4）BFC的区域不会与float box重叠。
  • 5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
  • 6）计算BFC的高度时，浮动元素也参与计算
  • 3、哪些元素或属性能触发BFC

    根元素；
    float属性不为none；
    position为absolute或fixed；
    display为inline­block, table­cell, table­caption, flex, inline­flex；
    overflow不为visible；

【布局方式】

双飞翼布局、圣杯布局

自适应两栏布局

.aside{width:100px; height:150px; float:left; background:#f66;}
.main{height:200px; background:#fcc;}
</style>
<body>
<div class=”aside”></div>
<div class=”main”></div>
</body>
给main添加overflow: hidden;


```

给div添加overflow：hidden

防止margin重叠

<style>
P{width:100px; height:100px; background:#f00; margin:100px;}
</style>
<body>
<p></p>
<p></p>
</body>

给第二个p添加一个盒子并添加overflow:hidden

【css新增属性】

属性

含义

值

Backgound-clip:

背景显示的范围

bordr-box padding-box content-box

Bacground-origin：

背景绘制起点

bordr-box padding-box content-box

Background-size:

背景图片的尺寸

值cover 等比例缩放图片直到有一个方向不能再进行缩放为止，背景图不一定全部显示在元素区域，元素的所有区域都会出现背景图；值Contain:等比例缩放，背景图片可以完全显示在元素区域，但是并不一定是能够填满整个元素区域；注：可以为一个标签设置多张背景图片用逗号隔开，谁写在前边谁在上边显示（注意顺序问题）

【服务器端字体】

字体图标库

@font-face{
	font-family:zi;
	src:url(ESTRE.TTF);
}
p{font-family: zi;}

引用css样式表

<span class="iconfont icon-koubeilogo"></span>
<span class="iconfont"></span>

【优雅降级和渐进增强】

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

【浏览器兼容前缀】

-ms-IE浏览器 -moz-火狐 -o-欧朋 -webkit-谷歌 苹果浏览器

【弹性盒】

如何定义弹性盒：

display:flex;

弹性子元素在父元素中的显示排列方式：flex-direction

flex-direction: row(自左向右排列 默认值)
column(自上向下排列)  
row-reverse（自左向右排列翻转）
Column-reverse（自上而下排列翻转）

弹性子元素在父元素中主轴的对齐方式flex-direction

主轴取决于排列方式如果是自左向右排列，那么水平方向是主轴
如果自上而下排序，那么垂直方向是主轴

flex-direction：flex-start()
 						Center（居中）
						Flex-end
						Space-around（中间是两端的倍数）
						Space-between（两端对齐空间分配到中间）

弹性子元素在父元素中侧轴的对齐方式align-items

侧轴取决于排列方式如果是自左向右排列，那么垂直方向是侧轴 如果自上而下排序，那么水平方向是侧轴

align-items： flex-start
 			  Center
			  Flex-end

flex-wrap

如果弹性子元素的宽度超出一排显示的范围时是否允许弹性子元素换行显示

flex-wrap：wrap(允许换行) 
		   nowrap(不允许换行 默认值)
		   wrap-reverse（翻转）

align-content

如果弹性子元素存在换行显示，用align-content设置换行显示后的行的对齐方式（与align-items比较像，但是他不是设置弹性子元素的对齐，而是设置各行的对齐）

align-content:Flex-start
			  Center
              Flex-end
              Space-between
              Space-around

7、弹性子元素在父元素中所占份数flex（将父元素平分）
8、分配剩余空间flex-grow
9、设置弹性子元素的宽度flex-basis相当于width
10、设置弹性子元素的伸缩比例flex-shrink:1(可以缩放) /0(不可以缩放)
11、Flex是flex-basis flex-grow flex-shrink的缩写 默认值0 1 auto
12、Order弹性子元素的显示顺序值越小越靠前显示（可以设置负值）
13、某一个弹性子元素的对齐方式align-self：flex-start、center、flex-end

【水平垂直居中】

固定宽高居中：

定位四个方向清零margin：auto;top:0%;left:0%:bottom:0;right:0:

定位 top：50%; left:50%; margin-top:-高一半; margin-left:-宽一半

弹性盒display:flex; justify-content:center; align-items:center

不固定宽高居中：

定位四个方向清零margin：auto;top:0%;left:0%:bottom:0;right:0:

加一个空标签 display:inline-block; vertical-align:middle; height:100%

弹性盒display:flex; justify-content:center; align-items:center

【媒体查询】

媒体查询为了适应不同的屏幕尺寸，时网页显示效果更佳人性化。可以去更改网页的排版，为不同的尺寸设置对于的css属性及值.
如何获取移动端屏幕尺寸：

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

mediatype媒体类型
§ all全部
§ screen用于电脑屏幕，平板电脑，智能手机等。
§ print用于打印机和打印预览
o and|not媒体条件 and关键字
o 媒体功能
§ min-width最小宽度
§ min-height最小高度
§ max-width最大宽度
§ max-height最大高度
§ orientation：portrait竖屏状态
§ orientation：landscape横屏状态下
o link写法
o
o 扩展，实际工作中媒体查询经常操作的属性

@media all and (orientation:portrait) {
body{background:#ff0;}
}
@media all and (orientation:landscape) {
body{background: #00f;}
}

§ display：block；display：none
§ float：none
§ width：100%
§ text-align:center

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

【css注释】

/*css注释*/