HTML&CSS基础

[TOC]

相对路径

相对路径就是相对于当前HTML页面所在的位置

<img src="abc/cba/2.gif"/>

上述代码中src属性配置的是图片的格式，使用相对路径。如果当前页面所在的文件夹里有abc文件夹，将进入abc文件夹，同时进入abc里的cba文件夹找到2.gif。==可以使用../来返回上一级目录，返回几级目录就写几个../==

图片格式

JPEG(JPG), GIF, PNG都是图片格式

• JPEG格式：支持颜色比较多，图片可以压缩，但是不支持透明，一般使用JPEG保存照片等颜色丰富的图片
• GIF格式：支持颜色少，只支持简单的透明（直线型透明），支持动态图，一般使用图片颜色单一或者动态图。
• PNG格式：支持颜色多，支持复杂透明，一般用于显示颜色复杂的透明图片

==图片使用原则：==

• 效果不一致，使用效果好的
• 效果一致，使用小的

meta标签

代表网页元数据，给搜索引擎看的，搜索引擎在检索页面时，会同时检索页面中的关键字和描述。

• 使用meta标签设置网页关键字

<meta name="keywords" content="HTML5" />

HTML5是关键字，也就是说content里面是关键字，name的值是对content的描述。content里可以使用多个关键字，如content=“HTML5，Java，Python”

• 使用meta标签指定网页的描述

<meta name="decription" content="666666博文"/>

666666博文是描述

• 使用meta标签用来做请求重定向

<meta http-equiv="refresh" content="5; url=http://www.baidu.com"/>

http-equiv是http协议，然后content里面5表示秒数，等待的时间；url表示目标路径，整个表示5秒以后去到http://www.baidu.com这个地址。

内联框架

iframe可以引入一个外部的页面，属性src只想一个外部页面的路径，但在实际开发中不会使用，因为搜索引擎不会检索框架内容

<iframe src="demo2.html"></iframe>

超链接-a标签

可以从一个页面跳转到另一个页面

属性：

• href：表示另一个页面的链接URL，可以使用绝对路径和相对路径
  • href=”mailto:邮件地址”:自动打开电脑中默认的邮件客户端
• target：规定在何处打开文档
  • _blank：在另一个新建窗口打开新的页面。
  • _self（默认值）：在当前窗口打开新页面，覆盖原来的页面

==在设置超链接时，如果暂时没有链接，可以使用JavaScripts:;占位，或者#占位，但前者更好，因为后者会回到页面顶部==

发送邮件的超链接，点击链接后可以自动打开电脑中默认的邮件

内联和块元素

块元素主要用来做页面的布局，而内联元素主要用来选中文本设置样式，一般情况使用块元素包含内联元素，而不会使用内联元素包含块元素

• 块元素(block element)

  • address - 地址
  • blockquote - 块引用
  • center - 举中对齐块
  • dir - 目录列表
  • div - 常用块级容易，也是css layout的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1 - 大标题
  • h2 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
  • noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
  • ol - 排序表单
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表

• 内联元素(inline element)

  • a - 锚点
  • abbr - 缩写
  • acronym - 首字
  • b - 粗体(不推荐)
  • bdo - bidi override
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码(在引用源码的时候需要)
  • dfn - 定义字段
  • em - 强调
  • font - 字体设定(不推荐)
  • i - 斜体
  • img - 图片
  • input - 输入框
  • kbd - 定义键盘文本
  • label - 表格标签
  • q - 短引用
  • s - 中划线(不推荐)
  • samp - 定义范例计算机代码
  • select - 项目选择
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量
  • small - 小字体文本
  • span - 常用内联容器，定义文本内区块

==a标签可以包含任意元素，但不包含自身==

==p标签不可以包含其他的块元素==

元素之间的关系

• 父元素：直接包含子元素的元素
• 子元素：直接被父元素包含的元素
• 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
• 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
• 兄弟元素：拥有相同父元素的元素叫兄弟元素

伪元素

表示元素中的一个特殊的位置

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

表示子元素的伪类

• first-child：选择第一个子标签
• last-child：选择最后一个子标签
• nth-child：选择指定位置的子标签

• first-of-type：选择相同类型的第一个子元素
• last-of-type：选择相同类型的最后一个子元素
• nth-of-type：选择相同类型的任意一个子元素

==注意==：前三个选择依据是在所有子元素中排列选择，而后三个是在当前类型的子元素中排列选择

选择器

• 元素选择器
  • 作用：通过元素选择器可以选中页面中所有指定元素
  • 语法：标签名{}
• id选择器
  • 作用：通过元素的id属性值选中唯一的一个元素
  • 语法：#id属性值{}

• 类选择器

  • 作用：通过元素的class属性值选中一组元素
  • 语法：.class属性值{}
  • ==注意==：可以同时为一个元素设置多个class属性值，多个值之间用空格隔开

    <!-- 如下div有两个class属性值 -->
    <div class="class_1 class_2"></div>

• 选择器分组

  • 作用：通过选择器分组可以同时选中多个选择器对应的元素
  • 语法：选择器1，选择器2，选择器N{}
• 通配选择器
  • 作用：用来选中页面中所有元素
  • 语法：*{}
• 复合选择器
  • 作用：可以选中同时满足多个选择器的元素
  • 语法：选择器1选择器2选择器N{}
  • ==注意==：与选择器分组相类似，但不同的是，多个选择器之间没有分隔符号。对于id选择器，不建议使用复合选择器

• 后代元素选择器

  • 作用：选中指定元素的后代元素
  • 语法：祖先元素 后代元素{}

    选择div里的span元素
    div span{}

• 子元素选择器

  • 作用：选中指定父元素的指定子元素
  • 语法：父元素>子元素 {}
  • 注意：IE6及以下浏览器不支持子元素浏览器
• 伪类选择器
  • 说明：伪类是专门用来表示元素的一种特殊的状态，如a:link, a:visited, a:hover, a:active
  • 作用：选中指定元素的伪类
  • 类型：
    • ==注意==：开发中，请按照:link，:visited，:hover，:active的顺序。
    • :link：表示普通的链接（没访问过的链接）
    • :visited：表示访问过的链接
      • 原理：浏览器通过历史记录来判断一个链接是否被访问过
      • ==注意==：由于涉及用户隐私问题，visited伪类只能设置字体颜色（color）
    • :hover：表示鼠标移入状态。可以为其他元素（如p标签）设置
      • ==注意==：IE6中，不支持对超链接以外的元素设置:hover
    • :active：表示超链接被点击的状态。可以为其他元素（如p标签）设置
      • ==注意==：IE6中，不支持对超链接以外的元素设置:active
    • :focus：获取焦点
    • ::selection：选中的元素（即鼠标选中的元素）
      • ==注意==：在火狐中，使用::-moz-selection（moz表示mozala基金会）
• 伪元素选择器
  • 类型：
    • :first-letter：首字母
    • :first-line：首行
    • :before：指定元素前，指的是开始标签到第一个字之间，一般:before都需要结合content这个样式一起使用，通过content可以向before和after位置添加一些内容
    • :after：指定元素后，指的是最后一个字都结束标签之间，基本操作如:before
• 子元素选择器
  • 类型：
    • :first-child：选中第一个子元素，可以在前面加上元素，指定选择第一个指定子元素，如p:first-child{}表示如果第一个子元素是p标签，则选中，其父类默认是任何元素，即任何元素下的第一个子元素p标签。若想指定其中一个父类，则使用父元素 > 子元素:first-child{}，如div>p{}
    • :last-child：选中最后一个元素
    • :nth-child：选中任意一个元素，可使用:nth-child(n)表示任意一个，如p:nth-child(2)表示选中第二个p子元素，也可以传一个even（偶数），即:nth-child(even)表示选中偶数个子元素，同理也可以传一个odd（奇数），即:nth-child(odd)表示选中奇数个子元素
    • :first-of-type：
    • :last-of-type：
    • :nth-of-type：
• 兄弟元素选择器
  • +：
    • 作用：可以选中一个元素后紧挨着的指定的兄弟元素
    • 语法：前一个元素 + 后一个元素{}，如span + p表示选择span后边紧挨着的第一个p兄弟元素
  • ~：
    • 作用：选中后边所有兄弟元素
    • 语法：前一个 ~ 后边所有，如span ~ p表示选择span标签后面的所有p兄弟元素
• 否定伪类选择器
  • :not(选择器){}
    • 作用：可以从已选中元素中剔除某些指定元素
    • 语法：:not(选择器)，如p:not(#p1){}表示选中所有p元素，除了id值为p1的元素。
• 属性选择器
  • 作用：可以根据元素中的属性或者属性值来选取指定元素
  • 语法：
    • [属性名]：选取含有指定属性的元素
    • [属性名=“属性值”]：选取不仅含有指定属性，还必须含有指定属性值的元素
    • [属性名^=”属性值”]：选取属性值以指定内容开头的元素
    • [属性名$=”属性值”]：选取属性值以指定内容结尾的元素
    • [属性名*=“属性名”]：

选择器优先级：

当使用不同选择器，选中同一个元素时，并且设置相同的样式时，这时样式之间产生了冲突，最终采用哪个选择器，决定于选择器优先级（权重），优先级高的优先显示

规则：

• 可以在样式的最后，添加一个！important，优先级最高 ==（开发中尽量避免）==
• 内联样式，优先级：1000
• id选择器，优先级：100
• 类和伪类，优先级：10
• 元素选择器，优先级：1
• 通配*，优先级：0
• 继承样式，没有优先级

当选择器中包含有多个选择器时，需要将多个选择器的优先级（权重）相加然后再比较。但是==注意==：选择器优先级计算不会超过他的最大数量级，如类选择器优先级为10，数量级为十位，即使有十个相同的类选择器，其最多只能加到99个，不会加到100

如果选择器优先级一样，则按顺序执行，即取最后面一个选择器执行

==组合选择器优先级是单独计算的==

样式继承

在css中，祖先元素上的样式，也会被他的后代元素所继承，因此利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将自动继承这些样式

==注意==：不是所有的样式都会被后代元素继承，如背景相关样式，边框相关的样式，定位相关的样式都不会被继承。但是默认的背景颜色是透明的，即如果父元素使用背景颜色，那么后代元素不是继承了背景颜色，而是父元素的背景颜色透过来了

盒子模型

none表示什么都没有

• 内容区（content）
  • width：使用width设置内容区的宽度
  • height：使用height设置内容区的高度
• 内边距（padding）
  • ==注意==：设置内边距，内容区的背景会延伸到内边距
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
• 边框（border）
  • border-width：边框宽度，可分别指定上，右，下，左顺序的边框宽度；若只有三个值，则上，左右，下；若只有连个值，则上下，左右
  • border-color：边框颜色
  • border-style：边框样式
  • border：（style）（width）（color）
  • ==注意==：当只写style时，并不是说不用写width和color属性，相反这三个是一个边框所必须的，之所以有时只需要写style就能出来一个边框，是因为大部分浏览器中，对边框的宽度和颜色都有默认值
• 外边距（margin）
  • 指的是盒子与盒子之间的距离，不会影响可见框大小，而会影响盒子位置，因此可以通过外边距可以调整位置。
  • ==注意==：盒子原本是靠左上位置摆放，所以当设置上和左的margin时，会导致位置发生变化，而设置下和右外边距时，挤兑其他盒子，可以设置负值
  • auto值：只设置给水平方向的，如果只指定左margin或者右margin值为auto，那么将右或者左设置为最大，如果左，右同时设置auto，则会将两边距设置为相同的值，就可以使元素自动在父元素中居中，

外边距重叠：在网页中垂直方向的相邻外边距会发生外边距重叠

所谓的外边距重叠指的是

• 兄弟元素之间的相邻外边距会取最大值而不是取两者之和
• 父子元素之间的垂直外边距相邻，则子元素的外边距会设置给父元素

解决方法：

• 使其不相邻：
  • 设置一个字母或者别的，将其隔离
  • 设置父元素一个border，或者padding
• 使其不垂直：
  • 设置一个padding+height

==当元素宽度值为auto时，此时指定内边距不会影响可见框大小==

内联元素的盒子模型

==注意==：

• 内联元素设置width，height没有用；
• 内联元素可以设置水平方向的内边距；
• 内联元素可以设置垂直方向的内边距，但不会影响页面布局，即对其他元素不产生影响。
• 内联元素可以设置边框，但不会影响页面布局，水平方向的边框会挤兑其他元素，但是垂直方向不会；
• 内联元素支持水平方向的外边距，并且当水平方向的相邻外边距不会发生重叠，而是进行求和，即两个水平方向的边距会相加
• 内联元素不支持垂直方向的外边距

总结如下：

	支持	不支持
width		Y
height		Y
padding-top	Y
padding-right	Y
padding-bottom	Y
padding-left	Y
border	Y
margin-top		Y
margin-right	Y
margin-bottom		Y
margin-left	Y

浏览器默认样式

浏览器为了在页面没有样式时，也可以有个更好地显示效果，所以为很多元素设置了一些默认的margin和padding，而他的这些默认样式正常情况下不需要使用，因此我们需要在编写样式之前需要将我们浏览器默认的margin和padding统统去掉。

display和visibility

inline-block可以使一个元素既有inline的特点，又有block的特点

• display：通过display样式可以修改元素的类型，如将一个内联元素变为块元素

  • 可选值：
    • inline：可以将一个元素作为内联元素显示
    • block：可以将一个元素设置为块元素显示
    • inline-block：可以将一个元素设置为行内块元素
    • none：对一个元素不显示，并且元素不会在页面中继续占有位置

• visibility：规定元素是否可见

  • 可选值：
    • visable（默认值）：元素可见
    • hidden：元素不可见，但是位置依然保持，即虽然没了，但还是占着位置。

overflow

子元素默认存在于父元素的内容区，理论上呢子元素最大可以等于父元素的大小，但如果子元素大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，成为溢出内容，可以通过overflow解决溢出内容

• overflow ：规定当内容溢出元素框时发生的事情
  • 可选值：
    • visable（默认值）：元素不会对溢出内容进行处理；
    • hidden：溢出的内容会被隐藏，不会显示
    • scroll：使用滚动条处理溢出内容，会为父元素添加滚动条，通过拖动滚动条查看完整内容，**该属性不论内容是否溢出，都会添加水平和垂直的滚动条。
    • auto：根据需求自动添加滚动条
      • 需要水平时就添加水平
      • 需要垂直就添加垂直
      • 都不需要都不加

文档流

文档即HTML页面，每个页面即一个文档，

文档流处在网页最底层，表示一个页面的位置，我们创建的元素默认都处在文档流中

元素在文档流中特点

• 块元素
  • 块元素在文档流中独占一行，并且自上向下排列
  • 块元素在文档流中默认宽度是父元素的100%，而宽度值是auto
  • 块元素在文档流中高度默认被内容区撑开，即有多少内容，高度就有多少
• 内联元素
  • 内联元素在文档流中只占自身大小，并且从左向右排列
  • 内联元素在文档流中默认宽度和默认高度都被内容撑开

浮动

写在浮动之前

• 若想让垂直排列的块元素横向排列，可使用display:inline-bloc> k进行转换，这样就会在横向排列，此时若出现两个块元素之间有空> 格，则将两个块元素之间的换行或者空格去掉，让其在HTML中紧挨> 着，因为由于已经转换为inline-block，则空格或者换行就被解析> 为一个文字显示。

如果希望块元素在页面中水平排列，可以是块元素脱离文档流。可以使用float使元素浮动，从而脱离文档流。（可比喻气球，水泡）。当脱离文档流时，会发生覆盖，别的元素会顶替其原来的位置

当一个元素设置浮动以后

• 元素会立即脱离文档流，脱离文档流以后，下边的元素会立即向上移动
• 元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素边框或者其他的浮动元素
• 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
• 当一行不足以容纳多个浮动元素时，浮动元素会自动换行
• 浮动元素不会超过页面结构上边的兄弟元素，最多一边对齐。
• 浮动元素不会盖住文字，文字会自动环绕在浮动元素周围
• 当块元素脱离文档流之后，其高度和宽度都被内容撑开
• 当内联元素脱离文档流之后，会变成块元素，同时其高度和宽度也被内容撑开

float

• 可选值：
  • none（默认）：元素默认在文档流排列
  • left：元素立即脱离文档流，立即向左侧浮动
  • right：元素立即脱离文档流，立即向右侧浮动

简单布局

• 固定布局：在页面中摆放盒子
• 自适应布局：根据终端屏幕不同，网页自动调整大小

高度坍塌问题

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。此时当子元素浮动后，子元素完全脱离文档流，此时子元素无法撑开父元素的高度，导致父元素高度坍塌。

• 高度坍塌带来的问题：
  • 父元素下的所有元素都会向上移动，这样将会导致页面布局混乱

==在开发中尽量避免高度坍塌==

根据W3C标准，在页面中元素都有一个隐含的属性：Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认情况下关闭。
当开启BFC时，将有如下特性：

1. 父元素的外边距不会和子元素重叠
2. 开启BFC的元素不会被浮动元素所覆盖
3. 开启BFC的元素可以包含浮动的子元素

==注意：在IE6及以下浏览器不支持BFC，但是却有另一个隐含属性：hasLayout，其与BFC类似，所以在IE6中可以通过开启hasLayout：直接将元素的zoom设置为1即可。（zoom表示放大的意思，后边跟一个数值，表示放大几倍==

• 解决方案：

  1. 为父元素设置高度（height）（不推荐）
     • 原因：可以为父元素设置高度，但是一旦父元素高度写死，父元素将不再自适应子元素高度，而当子元素高度变化时，将再次产生高度坍塌
  2. 开启BFC隐藏属性：
     • 开启方式（间接）：
       • 设置元素浮动 （不推荐）
         • 原因：使用这种方式，虽然可以撑开父元素，但是会导致父元素宽度丢失。而且使用这种方式也会导致父元素下元素向上移动。
       • 设置绝对定位 （不推荐）
       • 设置元素为inline-block （不推荐）
         • 原因：使用这种方式，虽然可以撑开父元素，但是会导致父元素宽度丢失。却不会使下面元素向上移动
       • 将元素的overflow设置为一个非visible的值 （推荐）
         • 原因：使用这种方式，副作用相对以上几种方式较小，但仍存在副作用
  3. 可以直接在高度塌陷的父元素最后，加上一个空白的div，由于这个div并没有浮动，可以撑开父元素高度，并且使用clear属性，基本没有副作用。（即空白div + clear）（推荐）
     • 影响：使用这种方式虽然会解决问题，但添加了多余的div结构

  4. 可以使用伪类：after，指定元素的后面 （强烈推荐）

     .box1:after{
         content:"";
         display:block;
         clear:both
     }

     使用如上代码，将彻底解决高度坍塌问题，并且几乎没有任何副作用（但在IE6中不支持after伪类，所以在iE6不支持，在IE6还是要设置hasLayout，设置zoom：1）

导航栏

在IE6中设置宽度，默认开启hasLayout

• 去掉ul中li的黑点

  • 设置list-style： none；

• 要想a标签铺满整个li标签，可以这样设置

  1. display：block （将a标签变为块元素）
  2. width：100%（设置a标签的宽度占用父元素的100%）
• 解决高度坍塌：
  • overflow：hidden（可开启BFC，详情见上述）

清除浮动

希望清除掉其他元素浮动对当前元素的影响，使用clear

clear：规定元素哪一侧不允许浮动

• 可选值：
  • left：该元素左侧不允许浮动
  • right：该元素右侧不允许浮动
  • none：该元素允许被浮动影响
  • both：该元素左右都不允许有浮动出现（清楚对其影响最大的元素的浮动）
  • inherit：继承父元素的clear属性

清除元素之后，元素会回到浮动之前的位置

看视频中的杂碎知识

• 如果浮动元素上面有块元素的话，则浮动元素将会在块元素下面起作用，而不会与块元素平起平坐。

  • 解决：在代码里将块元素与浮动元素换一下位置就好

• 让文字垂直居中

  • 解决：让行高与高度一致。即line-height = height

• 在显示设置宽度时，padding会影响可见框大小，将往外面挤；如果没有显示设置情况下指定padding，宽度会自动设置，往框里面挤

  • 自己见解：因为在设置宽度的情况下，内容区宽度已经定好了，而再设置padding，则就是在已经设置好的宽度的基础上，往外拓展，所以出现往外面挤；而没有设置width情况下设置padding，此时width默认值是auto，也就是遵循父元素的width。设置padding，则只会对父元素下的子元素起作用，因此会在一个盒子里往里面挤

• 在设置字体的简写属性font时，如果没有设置大小，粗细，斜体，小写大写字母时，其会采用默认值，如果要是采用默认值，则在此之前设置的属性将被覆盖。

• 在设置font是，如font：14px/36px。中14px是字体大小，而36px是行高

• 在IE6中设置浮动时，如果前一个元素是内联元素或者块元素时，那么浮动元素将会往下挤

  • 解决：让浮动元素在最上面

定位

定位就是指讲指定元素摆放到页面的任意位置，通过position设置元素的定位。

• 可选值:
  • static：没有定位
  • relative：相对定位
  • fixed：绝对定位（固定定位）
  • absolute：绝对定位

当开启了定位属性，可以设置left right top bottom四个偏移量。

• left：元素相对于其定位位置（根据具体情况而定的定位位置）左侧偏移量
• right：元素相对于其定位位置（根据具体情况而定的定位位置）右侧偏移量
• top：元素相对于其定位位置（根据具体情况而定的定位位置）上侧偏移量
• bottom：元素相对于其定位位置（根据具体情况而定的定位位置）下侧偏移量

相对定位

position：relative，相对于元素在文档流中原来的位置进行定位

1. 当开启相对定位，而不设置偏移量时，元素不会发生任何变化
2. 相对定位就是相对于元素在文档流中原来的位置进行定位
3. 相对定位的元素不会脱离文档流，即原来的位置还保留着
4. 相对定位会使元素提升一个层级，即比普通元素层级高，会盖住文档流里面的元素
5. 相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素。（跟第三条一样）

绝对定位

position：absolute，相对于离他最近的开启了定位的祖先元素进行定位的。

1. 开启绝对定位使元素脱离文档流，即原来的位置不会保留，其下面元素会顶上
2. 当开启绝对定位，而不设置偏移量时，元素不会发生任何变化
3. 绝对定位是相对于离他最近的开启了定位（不管是什么定位）的祖先元素进行定位的。如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口定位。（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
4. 绝对定位会使元素提升一个层级
5. 绝对定位会改变元素的性质
   • 内联元素变成块元素，
   • 其宽度和高度默认都被内容撑开

固定定位

position：fixed，固定定位是一种特殊的绝对定位，其大部分特点与绝对定位相同

与绝对定位不同：

• 固定定位永远相对于相对于浏览器窗口定位
• 固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动。
• 在IE6不支持固定定位。

元素层级

开启了定位的元素，其层级都会提高，而当层级一样时，则会按照代码结构上的前后顺序，由后面的盖住前面的。

通过z-index可以设置元素的层级

可以为z-index指定一个正整数作为值，该值作为当前元素的层级，层级越高，越优先显示。对于没有开启定位的元素不能使用z-index

父元素的层级再高，也不会盖住子元素

透明度

opacity可以用来设置元素背景的透明，需要0-1之间的值。0表示完全透明，1表示完全不透明。

opacity在IE8及以下的浏览器中不支持

• 解决方法：
  • 使用filter属性（IE独有）
    • filter：alpha（opacity=50）：其中opacity需要一个0-100之间的值。

背景

背景图片

• background-image：url（）；

  • 如果背景图片大于元素宽高，默认会显示图片的左上角
  • 如果背景图片和元素宽高一样大，则会将背景图片全部显示
  • 如果背景图片小于元素宽高，则会默认将背景图片重复平铺以充 满元素
  • 可以同时为元素指定背景颜色和背景图片，这种情况下背景颜色 将会作为背景图片的底色。一般情况下设置背景图片都会同时指 定一个背景颜色

• background-repeat

  • 可选值：
    • repeat：水平和垂直都不重复
    • repeat-x：水平方向重复
    • repeat-y：垂直方向重复
    • no-repeat：不重复

• background-positioin

  • 0% 0%（默认值）
  • top left
  • top right
  • top center
  • center left
  • center right
  • center center
  • bottom left
  • bottom right
  • bottom center
  • x% y%
  • xpos ypos（单位是像素或其他css单位，即10px 10px）
  • 如果只写一个值，那么另一值则为50%(center)

• background-attachment

  • 说明：设置背景图像是否固定或随页面的其余部分滚动
  • 可选值：
    • scroll：默认值，背景图片随着窗口滚动
    • fixed：背景图片会固定在某一位置，不随页面滚动
    • inherit：
  • ==注意==：当背景图片的background-attachment设置为fixed时，背景图片的定位（background-position）永远相对于浏览器的窗口，即在窗口的相对位置
  • ==注意==：不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素，因为其他元素滚动时，会隐藏这个不随窗口滚动的背景图片。

• background简写属性：

  • 通过background属性可以简化属性，比如背景颜色，背景图片，背景位置，背景是否固定等。
  • 如果不设置相关值，则会保持

表格

table表示表格（块元素），tr表示一行，td表示一个单元格。

table和td边框之间有个默认距离，可以通过border-spacing设置。

• border-spacing：表示table和td之间的距离。如border-spacing：1px。
• border-collapse：可以用来设置边框合并
  • 可选值：
    • collapse：合并
    • inherit：继承
  • ==注意==：如果设置border-collapse，那么border-spacing自动失效。

th标签表示表头中的内容，其用法和td一样。

---

有一些情况下表格非常长，这时需要将表格分成三部分，表头，表主体，表格底部

• 表头：thead
  • 永远显示在表格的最上面
• 表格主体：tbody
  • 永远显示在表格中间
  • 如果页面中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr放在tbody里。
• 表格底部：tfoot
  • 永远显示在表格底部

==上面提到子元素和父元素相邻的垂直外边距（margin-top，margin-bottom）会发生重叠，子元素的外边距会传递给父元素，此时，使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。同时可以使用CSS伪类：before设置display：table进行相同的设置。==

总结一下

• 解决父子元素的垂直外边距重叠问题

  • 使用：before伪类，设置display：table

    .box:before {
        display:table;
        content: "";
    }

• 解决父元素高度坍塌问题

  • 使用：after伪类，设置display：block，同时设置clear：both

    .box:after {
        display:block;
        clear: both;
        content: "";
    }

最终解决方案，同时使用：after和：before，因为垂直外边距重叠问题中可以使用clear：both，而父元素坍塌问题中display也可以设置为table，所以同时使用没问题

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

select

在select中可以使用optgroup对选项进行分组，同一个optgroup里是一组，在optgroup指定label指定组名。

<select>
    <optgroup label="...">
        <option></option>
    </optgroup>
</select>

label标签

label标签里有个for属性，值是其要对应的其他元素的name属性。表示此label和那个元素时一组的。

<label for="user">用户名</label>
<input name="user"/>

fieldset标签

在表单中可以使用fieldset来为表单进行分组，可以将表单的同一项放到同一组里

legend标签

在fieldset里可以使用legend子标签，来指定组名

<fieldset>
    <legend>用户信息</legend>
</fieldset>

框架集frameset

使用frameset来创建一个框架集，可以引入多个页面

<frameset></frameset>

==注意== frameset和body不能出现在同一页面中

• 属性
  • rows：指定框架集中所有框架，一行一行地排列，如rows：50%，50%：表示分两行，上面占一半，下面占一半
  • cols：指定框架集中所有框架，一列一列地排列，即有几列写几个数字，如cols：30%，40%，30%：表示三列，每列百分比已指定
  • ==注意==：可以使用*表示任意。

==对于frameset中，rows和cols必须指定一个==

其存在问题

1. frameset和iframe一样，里面的内容不会被搜索引擎检索
2. 使用框架集则意味着页面中不能有自己的内容，只能引入其他页面，而每当单独加载一个页面时，浏览器都要重新发送一次请求，引入几个页面就需要发送几次请求。用户体验比较差
3. 如果非得用，建议使用frameset，不要使用iframe。

frame标签

在frameset中使用frame子标签来指定要引入的页面

• frame是自结束标签

<frameset rows="50%, 50%">
    <frame src="01.html"/>
    <frame src="02.html"/>
</frameset>

临时问题

IE6中对图片格式png24支持度不高，如果使用png24的图片，则会导致透明效果无法正常显示。

• 解决：
  • 可以使用png8代替png24，但是使用png8代替png24以后，图片清晰度有所下降（但不明显）
  • 使用JavaScript解决问题。需要向页面中引入外部JavaScript文件，然后再写简单js代码。（DD-belatedPNG_0.0.8a.js）

    Dd_belatedPNG.fix('div, img')//里面传的是图片所在的元素

条件hack

有一些特殊的代码我们只需要在特殊的浏览器中执行，而在其他浏览器不执行，这时就可以使用css hack解决该问题。

CSS Hack：一段特殊代码，只在某些浏览器中识别，而其他浏览器不识别，可以通过这种方式为某些浏览器指定特定代码

• 条件hack：
  • 只对IE浏览器（IE10以下）有效，其他浏览器都会将其识别为注释
  • 可以指定特定的值，如：if IE 6
  • 也可以指定大于或者等于或者小于特定值，
    • if lt IE 8：表示IE8以下（不包括IE8）
    • if gt IE 8：表示IE8以上（不包括IE8）
    • if lte IE 8：表示IE8及IE8以下（包括IE8）
    • if gte IE 8：表示IE8及IE8以下（包括IE8）

<!--[if IE]>
    <p>为了你的健康，请远离IE</p>
<![endif]-->

属性级Hack

在属性上添加Hack

语法：selector{?property:value?;}

取值：

• _：表示IE6及以下。
• *：表示IE7及以下
• \9：选择IE6+（写属性的后面）
• \0：选择IE8+及Opera15以下的浏览器（写属性后面）