学习资料：

尚硅谷前端HTML5视频_HTML & CSS 核心基础教程（103集实战教学，从入门到精通）

一、定位

1 定位

• 定位指的是将指定的的元素摆放到页面的任意为位置，通过定位可以任意地摆放元素

• 通过position属性来设置元素的定位

• 值：

  • static：默认值，元素没有开启定位
  • relative：开启元素的相对定位
  • absolute：开启元素的绝对定位
  • fixed：开启元素的固定定位（也是绝对定位的一种）

• 当开启了元素的定位（position的值为非static）使，可通过left、right、top、bottom四个属性来设置元素的偏移量

• 开启后，不设置偏移量时，元素不会发生变化

2 相对定位

• relative：相对定位

• 性质：

  • 相对定位元素不会脱离文档流
  • 相对定位会使元素提高一个层级
  • 通常使用两个属性就可以对一个元素进行定位：left/top等
  • 相对定位不会改变元素的性质，块还是块、内联还是内联

3 绝对定位

• absolute：绝对定位

• 性质：

  • 绝对定位使元素脱离文档流
  • 开启绝对定位以后，元素的位置不会发生变化
  • 绝对定位是相对于离他最近的开启定位的祖先元素定位的，如果所有的祖先元素都没有开启定位，则绝对定位是相对于浏览器窗口定位的。
  • 一般情况下，开启子元素的绝对定位，都会开启父元素的相对定位
  • 绝对定位会使元素提高一个层级
  • 绝对定位会改变元素性质，内联元素变成块元素，块元素的宽度和高度默认都被内容撑开

4 固定定位

• fixed：固定定位
• 固定定位也是一种绝对定位，大部分特点与决定定位相同
• 不同点：
  • 固定定位永远都会相对于浏览器窗口定位
  • 固定定位会使元素固定在浏览器的特定位置，不会随浏览器滚动条的滚动而滚动

二、元素的层级

• 如果元素的层级是一样的，则在结构上位于下面的会盖住上面的

• 通过z-index属性可以用来设置元素的层级

• z-index:1/2/3/4

• 对于没有开启定位的元素不能使用z-index属性

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

三、元素透明度

• opacity

• 值：

  • 0-1的值
  • 0完全透明
  • 1完全不透明

• opacity属性在IE8及以下浏览器中不支持

  • 需要使用如下属性代替
  • filter：alpha(opacity=50)
    • 需要一个0-100的值
    • 0完全透明
    • 100完全不透明

四、背景

1 背景颜色

• background-color

2 背景图片

• background-image

• background-image: url(相对路径)

  • 如果背景图片大于元素，默认显示图片左上角部分
  • 如果背景图片小于元素，则重复平铺使占满网页
  • 可同时设置背景颜色和背景图片，背景颜色设置为背景图片的底色
    • 一般设置背景图片时，同时设置背景颜色
  • background-repeat
    • 用于设置背景图片重复方式
    • 值：
      • repeat：默认重复
      • no-repeat：不重复，有多大显示多大
      • repeat-x，背景图片水平重复
      • repeat-y，背景图片竖直重复

• 背景图片定位

  • background-position
  • 值：
    • top、right、left、bottom、center其中两个
      • 如果只给一个值，则第二个值默认为center
    • 也可以直接指定两个偏移量
      • 第一个值为水平偏移量
      • 第二个值为垂直偏移量
      • 也可以为负值，溢出部分则不显示

• 背景固定

  • background-attachment
  • 设置背景图片是否固定或随页面滚动而滚动
  • 值：
    • scroll：默认值，背景图片随页面滚动
    • fixed：背景固定在某一位置
    • 当设置为fixed时，则背景图片的定位永远相对于浏览器的窗口
  • 不随窗口滚动的图片一般设置给body元素

3 简写属性

• background: #fff url() bottom center

4 雪碧图

当给链接背景分别设置link、hover、active等伪类的背景图片时，由于这些图片不会一起加载到网页的缓存中，而是在需要时才加载因此，在链接状态的首次切换时，浏览器需要加载对应的背景图片。而加载需要一定的时间，在这段时间内链接会发生闪烁，因为此时没有图片去显示。因此造成用户体验不佳。

• 解决办法

  将这些图片放入到同一张图片中，把对应的特定状态的背景图片使用background-position属性移入到链接框即可。这种技术叫做图片整合技术（CSS-sprite），图片称为雪碧图。

  将多个图片整合为一个图片，总的大小会减少。

五、表格

1 普通表格

• 使用table标签创建表格

• 在table标签中使用tr来表示表格的一行，有几行就有几个tr

• 在tr里面使用tb创建单元格，有几个tb就有几个单元格

  • colspan：横向合并单元格
  • rowspan：纵向合并单元格

• 边框：border:1px solid black;

• 边框之间的距离：border-spacing:0px

• 边框合并：border-collapse:collapse;

  • 设置合并后，边框距离设置则失效

• 表头：th标签，效果：加粗居中

• 隔行变色：tr:nth-child-even{background-color:}

• 移入变色：tr:hover{background-color:}

2 长表格

有一些情况下表格是非常长的，这时候需要将表格分为三个部分：表头、表格主题、表格底部

分别为三个标签：thead、tbody、tfoot，tr需要写在这些标签的里面

thead的内容永远在表格头部，tfoot的内容永远在表格底部，与其标签的位置无关

3 解决父子元素垂直外边距重叠 -- table隔离法

• 当给子元素设置垂直外边距时，子元素的外边距会传递给相邻的父元素

• 解决办法：

  • 使用空的table标签可以隔离父子元素的外边距，阻止外边距重叠

  .clearfix:before{
  content="";
  dispaly:table;}
  

  • 还记得之前还有一个解决父元素高度塌陷的类似的办法吗？

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

  • 由于table也属于块元素，因此block可以用table代替，而添加clear:both对解决相邻父子元素外边距重叠也没有影响，因此以上代码可以合并为：

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

  • 此时具有class值为clearfix的元素就可以同时解决父子元素塌陷和相邻父子元素垂直外边距重叠的问题了

六、表单

1 表单

• 网页中的表单是用来向服务器提交信息的，我们最常用到的表单就是baidu的搜索框、注册、登录等

• 使用form标签创建表单

• action属性：

  • form标签必须指定action属性，该属性指向的是一个服务器地址，当我们提交表单时将会提交到对应的地址

• 添加表单项：

  使用input来创建一个文本框，它的type属性是text

  • 添加文本表单项：

    • 用户名<input type="text" />

  • 添加提交按钮：

    • 将表单提交给服务器
    • <input type="submit" />

  • 如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性，表示提交内容的名字

    用户名<input type="text" name="username" />

用户填写的信息会附在URL地址的后面以查询字符串的形式发送给服务器

• 格式：URL?查询字符串&URL?查询字符串URL?查询字符串
• 可通过value属性修改按钮的默认文字

2 密码框

用户名<input type="password" />，输入时会自动隐藏

3 单选按钮

• 使用input来创建一个单选项，它的type属性使用radio
• 单选按钮通过name属性进行分组，name属性相同是一组按钮
• 像这种需要用户选择但是不需要用户直接填写内容的表单项还必须指定value属性，这样被选中的表单项的value属性值会最终提交给服务器

性别<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

4 多选框

• 使用input创建一个多选框，它的type属性使用checkBox

5 下拉列表

• 使用selected创建一个多选框，一个可选性使用一对option标签

• 下拉列表的name属性需要指定给select，而value需要指定给option

• 默认选中：selected=selected

• 当为select添加multiple=multiple时，则下来列表会变成一个多选的下拉列表

• 对选项分组：

  • optgroup
  • 同一个optgroup为一组，lable属性表示组名

• 默认勾选

  • 如果希望在单选按钮或者多选按钮中指定默认勾选项，则可以在希望选中的项中添加checked=checked属性

6 多行文本框

• 即文本域：<textarea>标签

• 关闭文本域调整：resize=none

7 重置按钮

• <input type="reset" />

8 单纯按钮

<input type="button" value="点我也没用" />，没有任何功能。

除了使用input，也可以使用button创建按钮

9 lable标签

为表单添加lable标签：表单名用lable标签包起来，并添加for属性，该属性的值为指定一个表单项的id值，其作用是，当用户点击表单名时，也会使光标进入输入栏，而不只是点击输入栏才使光标移入。

10 表单分组

• fieldset标签，将要分组的表单项写到此标签内，指定子标签legend的内容来指定组名

11添加提示文字（水印）

在文本框和文本域中可以通过placeholder属性来指定提示文字（水印）

七 框架集

框架集和内联框架的作用相似，都是用于在一个页面中引入其他的外部页面

• 框架集可以同时引入多个页面，而内联框架只能引入一个
• 在html5中，推荐使用框架集，而不使用内联框架

使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中。

•   <frameset>
        <frame></frame>
    </frameset>
  

• frame子标签用来指定要引入的页面，引入几个页面就写几个frame子标签

• 多个页面的摆放方式

  • 为frameset设置属性rows或cols，指定多个页面一行一行地排列或一行一行地排列
  • 值为若干个百分比，引入几个页面就写几个百分比，表示每个页面占整个页面的比例

• frameset里也可以嵌套frameset