前端小白的html+css入门笔记

?和客户第一次见面要带模版去（5～8个表）?
1、主页面
2、列表页
（图+表/表/图/视频）

mata标签规定字符集
！！规定的字符集和编辑软件保存发类型要一致（utf-8/gbk）
Utf-8：包含所有语言，不包含加载速度。
Gbk：大量中文/要求速度
?整个网站必须同一编码
?文档保存时就要保存成utf-8格式，否则显示乱码。

title
引擎优化做得好—提升搜索排名。
（title里的文字会首先被搜索引擎抓取）
四.html的基本语法
1.标签之间换行和空格不敏感（空格多-占空间大）-（p-换行标签）
对标签之间的嵌套敏感（嵌套p标签自动换行）
?嵌套保证合理的换行和缩进-右键自动规范化
2.空白折叠现象
普通文本内：空格缩进换行会被折叠成一个空格显示在浏览器内。（ ；-特殊字符表示一个空格）
3.html标签
1）标签必须写在尖括号内

2）双标签必须成对出现

3）结束标签必须写关闭符号/
4）标签分类：
容器级：内部可放置嵌套任意类型标签。
文本级：不能放容器级标签。
4.标签属性（写在起始标签内部）
属性名k（key），属性值v（value），键值对写法。
1）标签之间 属性之间用空格隔开。
2）键值对格式：k=“v”。中间不能有空格。
3）属性值用双引号包裹。
4）标签属性值可以有一个或多个。间隔隔开 在引号内部。
五·html标签
1.h系列（headline）-容器级
h系列标签分了六个等级，表示一到六级标题。
语义：给文本添加一到六级标题语义。
级别·重要程度依次降低-一般h1标签权重最高-便于搜索引擎的
?一个页面只写一个h1标签-给logo
?六级标签单独书写，不存在嵌套关系。

2.p标签（paragraph）-文本级
给文本添加一个段落的语义。
?一个段落一个p标签。

3.img标签（image）
相当于一个特殊的文本
?单标签
img标签属性：
src：（source）表示图片的来源路径。?必须写
width/height：单位px（像素），可省略，等比例变化（同时设置可变形）
title：鼠标悬停时提示文本，属性值就是我们提示的具体文本。
alt：设置图像没有找到时的替换文本。（路径出错时）

4.路径
-查找相关文件的位置的方法。
1）相对路径：查找文件时，从html文件本身出发，找文件的位置。
同级查找：直接输入文件名（文件名+扩展名）
子集查找：/表示进入文件夹（/文件名+扩展名）
上级查找：。。/表示退回到上级文件夹，退出几次就书写几次。
?可综合使用 不可跨盘符进行查找

2）绝对路径（可跨盘符）
从盘符出发查找，http开头的也是绝对路径。
?常用：相对路径和http开头的绝对路径。

5.控制图片位置（居中/偏左/偏右）
放在

/

/

等可实现居中效果的标签内

二、a标签（anchor锚）-双标签
超级链接，可跳转到相应网站。
a的属性：
href（hypertext reference超文本引用）值为跳转链接的地址。?必须有
target:设置跳转后是否在新窗口打开。
在原来窗口打开：默认
在新窗口打开：添加属性值”_blank”

title属性：设置悬停文本

a的页面内锚点跳转：
添加锚点的方法：
1）对应位置的标签添加一个id属性，属性值就是id名（href书写#id名）
//xxxx
……

2）在需要添加锚点的位置加入一个a标签，不书写href属性，添加一个name属性命名与id一样。
?id名和name名必须为一。
a的跨页面锚点跳转：

使用图片作为超链接：



?a标签只能自己修改
?a有一个伪类，可设置鼠标移上时的效果

三、列表
将一些内容样式类似相近，相关的内容一起书写。
（无序列表、有序列表、定义列表）
1、无序列表
|

|
• …

|

1)无序列表是一组标签。ul和li这两个标签必须成对出现,嵌套关系。
ul：unordered list无序列表
li：list item列表项
（快捷键ul>li*3//(ul>li)*5)

2）li标签是容器级标签，可嵌套无序标签ul等标签。（ul标签只能放置li标签）
?清空ul的默认样式-list-style：none；

2.有序列表
|

|
1. …

|

ol：ordered list无序列表
li：list item列表项
1)ol和li必须同时出现，嵌套关系ol>li
2)ol只能嵌套li，li不能脱离ol/ul单独出现
3）ol默认有数字前缀，只能用css调整样式
?css样式：
清空默认样式：list-style：none；

3、定义列表
有三个标签参与 dl dt dd
1） dl：definition list 定义列表
dt：definition title定义标题
dd：definition description定义说明（解释前面最近的dt）
2）一组标签同时出现，有嵌套关系-dl里嵌套了dt和dd（dl>dt+dd)
3）一组dt可嵌套多个dd-表示多次说明/一组dt不加dd
4)dt/dd都是容器级标签
?列表的使用：实际情况

四、div和span-重要的布局标签
（div是块元素-自动换行/span是内联元素-不自动换行）
div+css布局
1、div是大范围（容器级） span是小跨度（文本级-p/a/图片）
Div：division。范围、区域、分割。用来布局。
div里会放置一些具有某些特殊功能、相似类型的标签-布局过程
span在p标签内：一般认为p>span>a

五、表格
1、表格基础
table>caption+(thead>tr>th)+(tbody>tr>td)
Table、tr、td

table：表格
tr：table rows行
td：table dock单元格/列
边框：border属性
表头：th标签（tr嵌套th）

2、合并单元格
单元格标签：td、th
有两个属性用来合并单元格：
rowspan：合并行单元格
colspan：合并列单元格
属性值：数字，表示合并几个单元格
方法：先将所有tr写完，对每一个tr内部的td来单独书写（参照上边线标定单元格顺序）
?特殊样式：head标签内部添加

3、表格分区（同一级标签）
标题：caption标签
表头：thead标签
主题：tbody标签

4、表格的属性
边框：设置table的属性border
表格的宽度：table的width属性
单元格的宽度：td的width属性-百分数为相对值/数字为绝对值（同一列的单元格宽度相等：由width取值大的决定。）
单元格水平对齐：td的align属性（right/left/center）
单元格垂直对齐：td的valign属性
背景色：tr/td的属性bgcolor
单元格间距：cellpadding
内容离边框的距离（空白填充）：cellspacing

5、表格注意事项
1）不要拖拽
2）宽度是靠撑起来的，不是算出来的
3）内部表格宽度用百分比，外部用像素
4）表格尽量不用属性设置，外部用css设置

六、表单
（表单就是网页上可以提供用户输入和选择的一些控件）
1、form（功能性标签-所有表单元素要写在form内）
功能：规定提交数据发送到哪里，发送的方法是哪种
method：提交数据的方法，属性值get，post
action：提交的位置

2、单行文本框
允许用户输入文本
input：输入
type属性：根据属性值不同，代表不同的表单元素-特殊的文本
text属性值表示文本框
value属性值时没输入之前的默认文本

3、密码框
type属性值为password

4、按钮
按钮有三种：普通、提交、重置。
（type属性值为：）
普通：button
提交：submit
重置：reset
value属性为按钮上的文字

5、单选框
type：radio属性
设置相同name属性控制分组，同一分组只有一个选择，单选文字写在标签后。

6、多选框
type：checkbox。可以在同一组内进行多选。
Checked:属性值设置为checked-默认选中多选框
设置相同name属性控制分组，同一分组只有一个选择，单选文字写在标签后。
单选和多选框绑定文字：点击相关内容也选择选框
?将文字内容写在一个label标签内部，让label标签的for属性值和input标签的id属性值一致。

7、文本域
标签：textarea。可输入多行文本，默认文本写在两个标签之间。
两个属性值：rows/cols 控制行和列

8、下拉菜单
一组标签，必须同时出现，有嵌套关系。
select：选择
option：选项
select>option*x
?实际上，一些下拉菜单是用无序列表做的。
二、html杂项
1、注释

2、字符实体
?w3school.cn（参考手册）
-特殊符号的代替字符：字符实体/转义字符
<：< less than

：> greater than
无换行空格：  nobreaking space
版权©️：© copyright

3、废弃标签
font标签：文字格式
b标签：加粗bold
u标签：下划线underline
i标签：倾斜italic
del标签：删除线delete
strong标签：加醋（有语义 有权重）
em标签：加强 倾斜（有语义）
br标签：换行breaking
hr标签：水平分割线horizontal rule

三、css的基础知识
?注释：/…./
1、css概念
css：cascading style sheets层叠式样式表
前端三层：
html 结构层，搭建网页的整体架构
css 样式层，装饰页面
JavaScript 行为层，页面交互效果
这三个标准都说由w3c组织维护

2、css作用
css两个重要概念：层叠式，样式。
样式：html标签在页面的显示效果-样式属性直接罗列
eq： background:xx;(背景色）
color：xx；（文字颜色）
font-size：xx；（文字大小）
font-weight：bold；（加粗效果）
css样式设置关键：选择器，样式表
css作用细化：
1）给文字添加样式
2）给盒子添加属性进行结构布局
3、css几个小属性

1）文本样式
字体、颜色、大小
大小：font-size（font为复合属性，里面的单一属性需要用font-单一属性名）
属性值，以像素px为单位（通常设置为双数）
颜色：color。（属性值有几种选择方案：十六进制、RGB、rgba、颜色名）
青色：cyan
浅蓝色：lightblue
天蓝色：skyblue
黄绿色：yellowgreen
白色的几种表示方法：#ffffff、rgb（255，255，255）、white
字体：font-family。中文字体和英文字体。
书写的时候英文字体在前，中文在后。
英文字体常用：Arial、Consolas。（首字母大写）
中文字体：默认字体为宋体、常用：宋体、微软雅黑。写字体标注好备选字体。eq：font-family：”Arial”,”楷书”,”宋体”;
?为了追求加载速度，讲中文字体名字写成英文表示法。
微软雅黑：Microsoft Yahei
宋体：SimSun
?css3样式：rgba（x，x，x，a）
a指透明度，取值0～1之间

2）盒子实体化基本属性
实体化：将盒子给宽、高、背景色、边框。
宽度：width。（px）
高度：height。（px）
背景色：background-color。属性值为颜色色值。
边框：border。复合属性,多个属性值之间用空格隔开:边框宽度、颜色、线的类型。
实线边框：solid

4、css的书写位置
-根据书写css属性位置不同，将我们的样式表分为三种：行内式、内嵌式、外链式。
行内式（不常写）：
css属性写在标签的style属性里，可以书写他所有的css样式。
属性之间用“；”分割。
内嵌式（简单样式）：
写在html文件里，head标签内有一对style双标签，css样式写在其内部。
style标签有一个type属性，属性值“text/css”表示内部写的是纯文本类型的css 样式代码。
外链式（常用）：
讲css单独写在另外一个.css文件里

5、css的注意事项
html的属性和属性值，键值对：k=“v”
css的属性和属性值，键值对：k：v；
多个属性之间必须用分号分割
内嵌式：所有样式必须写在一对大括号内
css样式，对空格、换行等不敏感。
提高代码可读性：每个属性合理换行缩进。
（将代码上传到网上时：删除空格提高加载速度-压缩代码-css在线压缩解压缩工具）

四、基础选择器
选择器：选择需要添加样式的标签元素的模式。

1、标签选择器（实际不会用来更改某一元素属性）
通过标签名直接选择相应的标签选择器-选择的是所有的对应标签
用途：利用所有标签所有进行初始样式的设置，默认样式的清除。
（eq：margin、padding设为0）

2.id选择器
通过标签的id属性值来选择相应的标签
选择器书写：#开头，后面紧跟id名。id页面唯一，id选择器只能选中一个元素
标签都有id属性，属性值遵循规则：
必须以字母开头，严格区分大小写，后面可以是数字/下划线/横线
一个页面不允许出现两个相同id名

#id选择器缺点：只能选中一个id名，相同样式只能多次书写
#标签选择器缺点：只能选中所有元素
id常用场景：不用来添加样式，留给js添加行为

3、类选择器
通过标签的class属性来选择这个标签
选择器写法：【.】开头，后面class属性值
class属性值可以不唯一。类选择器选中的是所有相同的class名元素
标签的class属性，命名规则与id属性相同(属性值/类名可有多个,用空格隔开)
#优点：可选择一部分标签，添加相同样式
?习惯使用原子类，里面只设置一个单一的css属性，某一个标签需要添加这个属性-直接添加类名

?类上样式，id上行为

4、通配符*（不常用
可以选择包括body在内的所有标签-可以用作简单案例里面清空默认样式
（实际工作中用默认样式的标签选择器）

五、高级选择器
基础选择器的延伸
三种：后代选择器、交集选择器、并集选择器

1、后代选择器（包含选择器）
通过标签之间的嵌套关系、层级关系，限定大体范围，在范围内具体查找相关元素。
后代选择器：根据嵌套关系，空格左侧是右侧的祖先元素。
空格两边只要是后代关系就可以，不必是父子关系
一般开始元素不用标签选择器
可以根据最终的嵌套关系确定最终元素（嵌套关系空格隔开）

2、交集选择器
既满足条件1也满足条件2
两种或以上种选择器同时存在一个标签上。
格式：[标签.类]
交集使用的基础选择器，可以是类选择器/标签和类的混写
?兼容问题：IE6不支持类的连续交集。

3、并集选择器
有很多元素可能有相同的css样式，通过并集选择器将这些标签写在一起，统一设置css样式。
所有选择器都可以作为并集的一项，选择器中间用逗号隔开。

用途：清空默认样式。

六、继承性和层叠性（层叠式的特性）
1、继承性（从控制台查看属性来源）
有一些属性给祖先元素设置了，后代元素会继承
css继承性：后代元素能够继承来自祖先元素的文字样式，不能继承盒子样式。
功能：可将整体文字样式写在最祖先元素body，后面标签自动继承。

2、层叠性
选择器权重问题：
id>类>标签>通配符
重复属性-谁高听谁-权重高的会覆盖掉权重低的
标签样式听谁的：
1）选择器都选中了元素
首先，比较权重大的样式层叠权重小的
计算权重的方法：数基础选择器的个数。依次比较：id个数➡️类的个数➡️标签个数
如果有并集，计算权重是单独拆开计算的
#如果权重一样，比较书写顺序，谁写在后面听谁的
2）如果没选中元素，样式靠继承
1⃣️：祖先元素距离目标元素距离不同。继承的样式，就近原则
2⃣️：距离相同，比较权重
3⃣️：距离、权重相同，后写覆盖先写
3）关键字➡️!important
给单一属性添加，会给这个属性的权重提升到最大
前提：不适用于就近原则

二、css属性
主要分类：
文本
盒模型
背景
浮动
定位

1、文本
color：字体颜色
色值：十六进制、RGB、rgba、颜色名。
实际工作中：设计提供色值，用工具吸取（firework工具/ColorCop工具）
font-family：字体
中文：微软雅黑、宋体
英文：Arial、Consola
font-size：字号
如果不设置，网页会有一个默认的字体大小。
谷歌浏览器：最小显示12px。
IE浏览器：可以随意设置
常用字号像素值：12/14/16/18/20
实际工作：字号大小听设计图的/没有设计图-只能测量
（fireworks软件，方便切图、量尺寸：不消除锯齿）
-文字实际大小和字号有差距-方法：写两个相同的文字，设置相同的字体和样式，尝试字号多少，能够完全重合字号就是对的。

line-height：行高：一行文字实际占有的高度
单位：像素或百分比

文字在自己的行高内垂直居中

测量行高方法：写两行文字，上下对齐，查看行高属性/量两行文字的底边高度
注意：行高属性在书写时，必须写在字号后面（font：14px/27px “宋体”）
-行高、字号、字体都是font字体的单独属性
特殊用途：要让单行文字在盒子里垂直居中-让行高等于盒子高

Font-weight:字体加粗
属性值：数字、单词
数字：100～700
两个单词：bold加粗（700）/normal正常（400）

font-style：字体样式
设置字体是否倾斜
取值：normal 正常；italic 斜体（找有斜体的字体替换）；oblique 斜体（正常文字倾斜）

2、文本
text-align：对齐
对齐方式：水平左对齐(left)、水平右对齐(center)、水平居中(right)

text-indent：文本缩进
设置的是文本首行缩进
单位：em、px、百分比（父级宽度百分比）

text-decoration：文本修饰
对于文本整体样式的修饰
四种常见样式：
正常/无修饰：none；
下划线：underline
中划线/删除线：line-through
上划线：overline
（除a标签内是默认下划线，默认属性值都是none）

三、盒模型（框模型）
1、概述
一个盒子包含五部分：宽度/高度/内边距 padding/边框 border/外边距 margin

2、宽高（width/height）
实际内容区域-能够书写的区域
实际占有区域：width+height+padding+border
（盒子有时候设置了宽高，如果增加内边距和边框，保持占有位置不变，需要对宽高进行内减）

3、内边距 padding（复合属性-单一属性是各个方向上的内边距）
位置在宽高和边框之间（上下左右都可以设置内边距）
单位：px。
单一属性：padding-top/right/bottom/left
（复合属性书写顺序：上开始顺时针 空格隔开-padding：…）
复合属性根据属性值个数不同，分了四种写法：
四值法：四向不同；
三值法：上、左右、下（左右边距相同）；
二值法：上下、左右；
单值法：四向边距相同；
常用：如果个别方向边距不同，其他方向相同-先用单值法设置总体，再用单一属性单独设置（层叠性：后面的覆盖前面的）
padding区域可以渲染效果（background-颜色），不能书写内容

4、边框border（复合属性）
1）按样式类型划分
分成：线的宽度、线的样式、线的颜色
宽度：border-width（四值法）/border-left-width（单值法）
颜色：border-color（四值法）/border-left-color（单值法）
线的样式：border-style（四值/单值法）
属性值分类：
solid 实线
dashed 虚线
dotted 点的虚线
double 双线
groove 边框凹陷
ridge 边框突出
inset 内容凹陷
outset 内容突出
?css2.1版本里，border区域也可以渲染，border是在背景上面的

2）根据方向进行分类
border-top/right/bottom/left：宽度 样式 颜色（三个样式必须都设置）
单一方向的单一线型：
border-top-style：dash；

?一个小案例：制作一个三角形?

表格边框合并：
border-collapse：collapse；
属性值：
默认值：separate，独立的。
合并：collapse。

5、外边距margin（复合属性）
外边距是盒子与盒子之间的距离。
（盒子左右排列-float：left；）
margin-top/right/bottom/left-四值法
可以让盒子进行水平居中：
属性值：auto；（保证盒子本身有宽度）

二、盒模型拓展（先写盒子属性，再写文字属性）
1、清空默认样式
比如：body、p、div、ul、li、ol、dl、dt、dd、h1等都有默认内外边距，需要清除。
a：有默认的字体样式，有下划线，字体颜色。这是一个设置初始样式。
?设计网页之前，要先清空默认样式。

2、height
1⃣️盒子高度一般不设置，用内部内容撑开，高度可以自适应内容高度而变化。
2⃣️溢出部分隐藏效果-overflow：hidden；
3⃣️高度自适应还可以书写成-height：auto；

3、宽度剩余
一般右边距根据内容不同，大小无法确定；
只设置左边距-padding-right：0；
类似：高度剩余；

4、margin
垂直方向上相邻元素都有外边距，而且外边距有相交的部分，相交部分会出现外边距重合现象，也叫作外边距塌陷。
（嵌套盒子也有合并塌陷效果）
实际工作中：两个同级盒子之间，不同时设置上下边距。

子盒子和父盒子之间的垂直距离：
1⃣️强行给父盒子加一个边框，强制限定父盒子的位置。
2⃣️不要用儿子的margin去踹父亲，距离用父盒子的padding撑开。
?永远不要用padding控制盒子内容离边框的距离-应该设置内容离边框的margin

5、居中
1⃣️文字居中：
水平方向文字居中-text-align：center；
垂直方向：
单行文本居中：行高等于盒子高-line-height：…px；
多行文本居中：高度自适应，用内边距（padding）上下相等撑开空白区域。

2⃣️盒子居中：子盒子在父盒子内部居中显示。
水平居中：自身添加宽度，用margin给两边挤出相同空白。
margin：0 auto；
垂直居中：不设置父盒子高度，设置父盒子的padding，高度自适应。

6、父子盒模型
子盒子的整体占位不能超过父盒子内容区域。
父盒子的内容区域宽度>=子盒子width+padding2+border2；
如果子盒子不设置宽度，会继承父盒子的宽度，自动向内减去padding、border宽度。

三、标准文档流。
常用的word文档就是一个标准文档流。内容必须从上往下、从左往右书写，有一个光标控制。
制作的html网页：就是一个标准文档流。

1、从微观上有特殊性质
a）html文本之间有空白折叠现象；
b）文本类型的元素都有一个特点：高矮不齐，底边对齐；
c）自动换行

2、块级元素和行内元素
标准文档流将html标签分成：块级标签、行内标签；
块级标签：所有容器级标签都是块级标签。p标签也是块级标签。
行内标签：除p以外所有文本级标签。

1⃣️块级标签：
块级元素会独占一行。同行不会出现其他同级标签。
可以设置宽高。
嵌套关系里，子盒子不设置宽高，会自动继承父亲内容的宽度100%
2⃣️行内标签：
内行标签不独占一行，可以与其他行内元素并排在一行。
行内元素不能设置宽高。其他padding、border、margin能正常设置。
行内元素不设置宽度，不会自动继承父亲的宽度，只能用内容撑开。
3⃣️行内块标签：
既可以设置宽高，还可以在一行排列。
有一个属性可以在块级元素和行内元素之间进行转换。
显示模式：display。标签在html网页里面以何种形式进行渲染。
属性值：块级block，行内inline，行内块inline-block。
块级转行内：
display：inline；（不常用）
行内转块：
display：block；（常用）
转行内块：
display：inline-block；
标准文档流制作网页有局限：很多布局效果不能完成。
解决办法：让元素脱离标准流，既可以设置宽高，又可以一行排列。
脱离标准流的方法：浮动、绝对定位、固定定位。

四、浮动
浮动：float。
作用：让元素以某一方向在一行并排排列。
浮动的特殊效果：元素脱离标准流。既可以设置宽高，又可以一行排列。
属性值：left、right；
左浮动(float：left;)-从第一个元素（书写顺序）开始，依次贴父元素的边。
?同一个盒子里子元素可以有不同方向的浮动。

二、浮动的性质

1、脱离标准流-设置宽高 排在一排

2、浮动的元素在一个父盒子里依次贴边
如果父盒子装不下所有盒子，后面的盒子会自动换行去贴上一个盒子的边
子盒子如果高矮不同，中间出现缝隙，后面的浮动元素不会钻空，该盒子的顶部会与后面的盒子的底边对齐
如果两个方向都有浮动的元素，下一元素会去找相同方向的浮动元素贴边

3、浮动没有margin塌陷（重叠）-垂直方向塌陷失效

4、浮动元素让出标准流位置
元素在标准文档流里有自己的书写位置，一个元素写完之后才能加载另外一个元素
元素浮动后，不是标准文档流，位置会让给后面的标准文档流里的标签元素
（类似于压盖效果-实际上用绝对定位制作压盖）
一般一个父盒子里全都浮动

5、浮动有字围效果
图片浮动，文字不浮动

三、清除浮动
1、浮动存在的问题
1⃣️浮动元素不能撑高父级
2⃣️浮动元素会影响后面的元素：
如果后面的浮动方向相同，会去贴上一个浮动最后一个元素的边

2、解决方法1-给父盒子加高度
给父级元素增加高度，内部浮动元素被限制了范围，不会影响后面的元素浮动
效果：解决父级高度的问题，解决浮动影响后面的浮动问题
问题：高度还是不能自适应

3、解决方法2-清除浮动属性clear
属性值：left、right、both
作用：clear整体表示清除自身收到的其他元素带来的浮动影响。
解决：浮动的互相影响。
问题：父盒子还是不能被子盒子撑高，margin如果小于中间浮动的子元素的高度，显示效果失效。

4、隔墙法（清除浮动）
-在互相影响的元素中间加一道墙，阻隔开两边的元素，墙上面添加一个clear属性。

1⃣️外墙法：（清除浮动、模拟间距）
在右浮动元素的父盒子之间隔一道墙。
（设置中间盒子的高度-模拟间距）
解决：浮动互相影响
问题：高度自适应，margin失效。
[ .cl{ ]
[ clear:both; ]
[ } ]
?设置原子类css，重复使用。

2⃣️内墙法：
将清除浮动的墙放在有浮动元素的父盒子内部的最后。只要有浮动，就在盒子内部加一堵墙。

解决：浮动互相影响，高度自适应，margin失效。
缺点：
1）html结构布局，很多地方需要进行浮动，页面结构复杂，会出现很多没意义的标签。
2）一盒子内标签要浮动就浮动，浮动后面的墙是一个标准流里的元素。

5、溢出隐藏 overflow：hidden
属性值：hidden 溢出隐藏；auto 溢出滚动（多出滚动条）；
延伸功能：能够清除盒子内部元素的浮动影响。
解决：浮动互相影响，高度自适应，margin失效。
优势：能解决所有问题，不会增加无用标签。
?实际工作中，就用overflow清除浮动。
如果遇到大的结构，会在结构之间加一堵外墙。-可加高度，不用设置margin/考虑margin塌陷

小技巧：制作矩形变色边框。
方法：用两个盒子制作，蓝色区域给父盒子设置，灰色区域给子盒子设置

6、制作tab栏/选项卡
没有被选中的主体部分被隐藏，选中部分显示
给所有元素加一个显示模式隐藏，给要显示的元素加一个显示模式块级。
display：none；隐藏元素
display：block；显示元素

二、超链接a的修饰
1、a的四个状态（伪类）-权重和类选择器一样
a：link-未访问前的状态
a：visited-访问后的显示状态
a：hovor-鼠标悬停的状态
a：active-鼠标点击不松手（激活）状态
.box-网页加载时会立即加载
a的状态-网页加载时不会立即加载，只有用户行为触发了这种状态，对应的样式才能被加载

2、a标签伪类书写顺序
a的四个伪类都有自己的权重，权重相同，根据书写顺序不同，有层叠效果
顺序：link，visited，hovor，active
爱恨准则：love hate

3、实际应用
a标签是一个行内标签，不能设置宽高
a标签的一部分文本属性不能继承父级。color、text-decoration，只能单独设置
a有四个状态：link和visited状态一般要求一样样式
实际工作中：文本的默认样式里，除了color和text-decoration，其他的文本样式可以靠继承，或者直接写在a选择器，a盒子内容也写在a标签内。默认样式给四个样式设置成一样的，谁发生变化，单独设置伪类。

三、background背景
background是一个复合属性

1、background-color背景色
渲染位置：border及以内
（简单的导航栏布局）

2、background-image 背景图
实际渲染位置：border以内
属性值：url（图片路径）-（相对路径/绝对路径）
url：uniform resource locator。统一资源定位。实际就是背景图片来源。
?背景图和背景色的压盖：image压盖color

3、background-repeat 背景重复
属性值：
repeat：默认值，整个背景区域重复
no-repeat：不重复
repeat-x：水平方向重复
repeat-y：垂直方向重复

repeat-x的妙用：制作一个渐变背景的导航栏。
给盒子添加一个背景图：水平方向1像素宽，垂直方向就是正常高度，让背景图水平重复铺开。

4、background-position 背景图位置
作用：规定我们插入的背景图在盒子里的位置。
属性值：像素表示法、单词表示法、百分比表示法。

1）像素表示法：
属性值有两个：
第一个属性值：背景图片左上角距离盒子左上角的水平偏移量
第二个属性值：背景图片左上角距离盒子左上角的垂直偏移量
位置的属性值分正负：正方向-向右向下移动（针对（0，0）点移动）

精灵图技术：很多元素都有背景图，需要有实际存在图片，就需要发送多个http请求下载图片。将很多小的背景图合成在一张图片上，谁用背景图加载都是一张图。

2）单词表示法：
水平方向：left，center，right；
垂直方向：top，center，bottom；

实际运用：
body大背景/制作通栏：水平居中，垂直居上

3）百分比表示法
先水平，后垂直（100%=盒子背景高度-背景图width）
?背景图水平平铺-width：100%；

5、background-attachment 背景附着
指的是背景是否随着页面滚动而滚动
属性值：
scroll 滚动
fixed 固定

6、background复合属性（五个属性可以互换位置）
1.来源 2.重复 3.位置（水平 垂直不能换位）4. 是否固定 5.背景色

四、背景实际应用

1、padding挤出背景图效果
方法：给盒子用padding-left留出空白区域，添加一个合适的背景图，不重复。

2、文字换图片
提高搜索引擎优化：搜索时都是搜索文字。
h1标签内部放的是logo图片。技巧：logo用背景图，内部放置简单关键字。

二、定位（辅助布局）
css布局属性：盒模型、浮动、定位；
辅助功能属性：文本、a、背景等美观页面；
定位：相对定位、绝对定位、固定定位。
脱离标准流：浮动、绝对定位、固定定位。

1、相对定位
定位：元素位置相对于某一个参考物进行的位置偏移。
相对定位：元素相对于自身进行位置偏移。
position：定位属性。
属性值：relative-相对的；
偏移数据量。由其他属性控制，方向属性，left、right、top、bottom。
偏移方向判断：属性为正-元素的偏移方向与属性方向是相反的（坐标轴）
垂直方向和水平方向各任选一属性，不能同方向同时选。

特点：显示位置是偏移后的位置，原位置还保留，不被其他元素占有。
相对位置不会让元素脱离标准流，标准流位置还是他自己的，有压盖效果。

特殊用途：
1）结构比较稳固，常用来做绝对定位的参考元素。
2）微调。

?常用：如导航栏点击扩大/微调

2、绝对定位
绝对定位的定位参考元素不固定，但不是本身。
属性值：absolute-绝对的
四个方向偏移量：left、right、top、bottom。

特点：与相对定位比较，元素绝对定位之后，脱离标准流。
绝对定位的元素根据选取偏移方向不同，参考点也不同。

1）参考元素为body时的定位参考点
有top参与的绝对定位，定位的参考点是页面（body）的左上角和右上角；
有bottom参与的绝对定位：参考点是页面（body）首屏的左下角和右下角。

2）祖先元素作为参考元素
如果祖先元素中有定位的元素，元素绝对定位的参考元素就是距离它最近的有定位（相对/绝对/固定）的祖先元素。

?子绝父相最常用：相对定位元素不脱离标准流，结构稳定，对于当参考物来说比较方便。

3）祖先元素参考的参考点
会忽视我们祖先元素的padding区域，以body内部的四个顶点作为参考点。
相应方向：与使用的定位偏移方向一致。

4）制作压盖效果
用绝对定位制作压盖效果。

5）绝对定位制作盒子居中
先移动父亲宽度的50%（如left：50%），再用margin往回拽自身宽度的一半（如margin-left：-50px）

?鼠标移上有小手状态：
cursor：pointer；

3、固定定位
参考浏览器窗口进行定位。
属性值：fixed。
始终保持针对浏览器窗口某个顶点位置相对不变。
有四个方向偏移量的值：left、right、top、bottom。

4、压盖顺序 z-index
默认压盖顺序：
1）有定位的元素压盖没有定位的元素
2）有定位的元素，不区分定位类型，只要html结构写在后面的压盖写在前面

自定义压盖顺序：
属性：z-index，压盖顺序
属性值：数字，没有任何单位，数值大的压盖数值小的。
1）只能给定位的元素加，其他的标准流的/浮动元素都没有z-index属性。
	默认的定位元素的z-index值是1.
2）属性值越大的压盖属性值小的。
3）属性值相同，看html结构书写顺序，后面压盖前面的。
4）父子盒模型里，如果父子都有定位，都有自定义z-index值，两对父子对比时，不管子元素的属性值多大，只要父亲z-index值小，都只能被压盖。

?小bug-a标签嵌套img标签->图片间有3px间距
解决方法：图片转块-display：block；

?圆角效果：css3：border-radius：50%/10px；

?定位应用1：banner图
只用背景图语义不够-用插入图；
较切合语义：盒子里放img；
图片居中：
1）margin：0 auto；（X-放大后依然不居中）
2）子绝父相-父盒子相对定位&&溢出隐藏，子盒子（图片）绝对定位

?导航边线制作：

1）a标签之间+“|”—页面加载可能会压缩空白（X）
2）a和span都浮动，margin：0 auto；

二、浏览器兼容

1、浏览器市场份额
谷歌 火狐 IE 苹果 欧朋

2、兼容性
兼容效果体现：html5新特性。
www.html5test.com 可以检测浏览器支持性：每个新特性1分，支持+1。
html制作要求：兼容到IE8即可。
IE6的兼容问题要了解，面试常见这些问题。

三、HACK

需要所有浏览器渲染效果一致，对于特殊html和css，根据浏览器不同，写不同的代码，显示一致的效果，这种技术叫HACK。
分类：html hack，css hack。

1、html的hack
位置：写在html代码块内

IE留了一个接口，规定版本的IE浏览器认识里面时html结构，其他浏览器认为是注释

xx….xx

lt：less than
lte：less than or equal
gt：greater than
gte：greater than or equal

实际应用：1)提示版本更新。

2)有些代码只在IE中加载。
2、css的hack
值的hack、选择器的hack
其他浏览器认为是位置属性名：unknown property name。

1）值的hack
/IE6/
hack符：-横线/_下划线

/*IE6、7*/
hack符：！ $ & * ( ) = % + @ , . /  ` [  ]  # ~ ? : < > |

/*IE8、9*/
hack符:\0/（写在属性值后面）
eq：.a{color:blue\0/;}

/*IE 6/7/8/9/10 */
hack符：在属性后面加/9；
eq：.a{color:blue\9;}

?实际工作：记住IE6的下划线，IE6/7一个！。

2）选择器hack
/* IE 6 and below */
*html .selector{}

/* IE 7 and below*/
.selector,{}

/* every but IE 6*/
html>body.selector{}
(IE6不支持>表示的子级选择器）

/* every but IE 6/7*/
html>/**/body .selector{}
head~/**/body.selector{}

实际：选择器hack不常用，通常用值hack

四、IE6 兼容问题

1、盒模型

1·1 DTD问题
如果页面没写文档DTD，页面盒子在加载时IE6加载模式异常。
正常：宽高确定后，添加内边距、border盒子整体外扩。
异常：宽高确定后，添加内边距、border盒子整体内减，实际书写内容区域变小。
解决方法：写DTD。

1·2 盒子高度不能低于字号

IE6不能让盒子高度低于默认字号。
其他浏览器都能设置盒子高度低于默认字号的盒子。
解决方法：给你要设置高度的盒子单独设置字号属性，属性值小于你要设置的盒子高度。（_font-size：x xp；）

1·3 图片边框问题

图片外如果包裹了a标签，IE6里比正常情况给图片多加了蓝色边框。
解决方法：给img都清除边框。
img{
	border:none;
}

2、浮动问题

2·1 一个浮动一个不浮动

高级浏览器：呈现压盖效果。
IE6：并排在浮动元素后面。
解决方法：不要用浮动制作压盖/同级元素全部浮动

2·2 三像素bug

如果一个元素浮动另一个不浮动，IE6中两并排元素之间多了3像素间距。
解决方法：同级元素全部浮动/给浮动的元素添加一个margin-right值为-3px的属性。

2·3 双倍margin问题

如果浮动的方向和margin边距方向相同，那么首个浮动的元素距离父盒子的边距是margin值的两倍。
解决方法：
	1）浮动的方向与margin方向相反，父盒子和第一个元素的间距用父盒子的padding挤出来。不要用儿子踹父亲。
	2）单独给IE6的第一个盒子设置一个margin值减半。

2·4 overflow：hidden 失效

IE6以前不能使用它来清除浮动的效果
布局：layout。
IE有两个加载机制：有布局、没有布局。
有布局：hasLayout，盒子在布局时，根据内部元素的内容来进行布局。
没有布局：盒子在布局时，盒模型数据是来源于父元素。
触发有布局机制-zoom放大属性。
属性值：数字，x表示按x倍放大。

一、图片和透明
1、图片
网页使用的三种图片：jpg、png、gif。
分辨率：72像素/英寸

1·1 JPG图片
特点：色彩丰富、可以压缩、品质可调整。
缺点：不能保存图层，不能做动图，不能保存背景透明、半透明效果。
用途：有实际意义的结构，用作插入图，背景不是透明的背景图，图片大小比较小。

2·1 png图片
特点：不可压缩，可保存图层。
缺点：文件太大。
?png不一定比jpg大-如果图片背景透明、色彩形状简单，png导出成没图层，文件较小
?png图片保留一份带图层的，往网上上传需将png图片「导出」。
用途：背景透明或半透明的图片，精灵图，图片像素较小色彩不复杂。

1·3 GIF图片
GIF图片无所谓压缩问题。色彩单一，色值有256种/128种/216种/64种/2种
特点：文件小，可以存动图，可以保存透明，不能保存半透明。
动图：通过添加时间轴帧动画，每一帧都有一张图片，连续按照一定的时间间隔播放，有一个动画效果。
背景透明：同一个图片，png比GIF文件要大。
用途：动图，完全透明的背景图片（解决pngIE6背景透明的兼容问题）

对比：

2、盒子透明
透明度属性opacity，属性值是0～1之间的小数。
透明效果：盒子及内部元素本身半透明。
IE8及以下浏览器不支持opacity属性。
IE有自己设置盒子透明的属性，滤镜属性filter。
-内部有多重滤镜属性，其中包括alpha通道透明。「filter:alpha(opacity=50);」
透明度数值：0～100之间的数值。
解决内容同时透明的问题：只让盒子透明，内容不透明-将文字单独拿出来放在别的盒子里，用定位定到半透明蒙板上。

3、图片透明
除IE6，其他浏览器都能正常加载背景透明或半透明的png图片。
解决IE6的png图片兼容问题：
1）如果只有透明没有半透明，可以用GIF图片格式代替。
2）给页面添加只有IE6认识的js代码，解决png背景透明问题。

?返回顶部：position：fixed；