HTML5与CSS3知识点总结（21-30）

21 图片边框

（复合属性，使用图片作为元素边框）

border-image-source: url();/*设置图片路径*/
border-image-slice: 30%;/*边框图像顶部，右侧，底部，左侧向内偏移量*/
border-image-width: 40px;/*设置边框宽度*/
border-image-outset: 0;/*设置边框图像区域超出边框量*/
border-image-repeat: repeat;/*设置图片平铺方式（stretch，拉伸填充）*/
border-image:url() 30%/40px repeat;/*简写*/

22 列表

<ul >/*无序列表，可以内嵌多个<li>标签*/
      <li> </li>/*列表项*/
      <li> </li>
</ul>

<ol>/*有序列表可以内嵌多个<li>标签，强调排列顺序*/
      <li> </li>
      <li> </li>
</ol>
    

<dl>/*定义列表*/
        <dt>名词1</dt>
        <dd>描述信息1</dd>
        <dd>描述信息2</dd>/*一对<dt></dt>可以对应多个<dd></dd>*/

        <dt>名词2</dt>
        <dd>描述信息1</dd>
        <dd>描述信息2</dd>
</dl>/*三个标签之间不允许出现其他标签，<dl>标签必须与<dt>标签相邻*/

23 链接

23.1 创建超链接

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
/*href用于指定目标的url地址，target取值有_self（原窗口打开）和_blank（新窗口打开）*/

23.2 锚点链接

先使用<a>标签应用href属性（href="#id",id名不可重复）创建文本；然后使用相应id名标注跳转目标的位置

23.3 链接伪类控制超链接

超链接标签a的伪类	描述
a:link{}	超链接默认样式
a:visited{}	超链接被访问过后的样式
a:hover{}	鼠标指针经过，悬停时超链接的样式
a:active{}	鼠标单击不放时超链接的样式
例 a:hover{color:red;text-decoration:underline;}	鼠标悬停时显示为红色，下划线

注意：使用时，按列表顺序书写

24 表格

<table>/*定义一个表格的开始与结束*/
    <tr>/*定义表格中的一行*/
        <td></td>/*定义表格中的单元格*/
        <td></td>
    </tr>/*一对<tr>中包含几对<td>，就表示该行有多少列*/
</table>/*在<table>中包含几对<tr>，就表示该表格有几行*/

table标签的属性（对table使用border-collapse:collapse；可以进行单元格的边框合并）

属性	描述	常用属性值或单位
border	设置表格的边框（默认border="0"为无边框）	像素（px）
cellspacing	设置单元格与单元格之间的间距	像素（默认为2像素）
cellpadding	设置单元格内容与单元格边缘之间的间距	像素（默认为1像素）
width	设置表格的宽度	像素
height	设置表格的高度	像素
align	设置表格在网页中的水平对齐方式	left，center，right
bgcolor	设置表格的背景颜色	#颜色号
background	设置表格的背景图像	url地址

tr标签的属性（tr标签没有width属性）

属性	描述	常用属性值或单位
height	设置行高度	像素
align	设置一行内容的水平对齐方式	left,center,right
valign	设置一行内容的垂直对齐方式	top,middle,bottom
bgcolor	设置行背景颜色	#颜色号
background	设置行背景图像	url地址

td标签的属性

属性	描述	常用属性值或单位
colspan	设置单元格横跨的列数	正整数
rowspan	设置单元格竖跨的行数	正整数

<td rowspan="2"></td>/*设置单元格横跨2行，同时注释或者删除被横跨的单元格*/

25 表单

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

常用表单控件

| 表单控件 | 描述                               |
| -------- | ---------------------------------- |
|  <input/>   | 表单输入控件（可定义多种表单项）   |
|  <textarea></textarea> | 定义多行文本框                     |
|  <select></select>     | 定义一个下拉列表（必须包含列表项） |

action属性：用于指定接收并处理表单数据的服务器程序的url地址

method属性:取值为get或post（get保密性差，有数据量限制；post保密性好，无数据量限制）

name属性：表单控件中具有name属性的元素会将用户填写的内容提交给服务器

25.1 input控件（包括知识点15）

属性	属性值	描述
type	text	单行文本输入框
type	password	密码输入框
type	radio	单选按钮
type	cheakbox	复选框
type	button	普通按钮
type	submit	提交按钮
type	reset	重置按钮
type	image	图像形式的提交按钮
type	hidden	隐藏域

type	file	文件域
size	正整数	input控件在页面中的显示宽度
readonly	readonly	该控件内容为只读（不能编译修改）
checked	checked	定义选择控件默认被选中值
maxiength	正整数	控件允许输入的最多字符数

placeholder属性：指定文本框的占位符，当用户还没有输入值的时候，向用户显示默认的描述性说明或提示信息，为用户填写表单提供提示和额外指导。适用于以下类型的<input>标签:text,search,url,tel,email,password。

注意：在定义单选按钮时，必须为同一组中的选项指定相同的name值；

普通按钮常配合js脚本语言使用；

提交按钮，可以对其使用value属性，改变提交按钮上的默认文本；

重置按钮，可以对其使用value属性，改变提交按钮上的默认文本；

图像形式的提交按钮与普通按钮功能基本相同，外观更美观，必须为其定义src属性指定图像的url地址；

隐藏域对用户是不可见的，通常用于后台的程序。

<label for="name">姓名：</label>
    <input type="text" maxlength="6" id="name" /><br/>
    性别：
    <input type="radio" name="sex" id="man" /><label for="man">男</label>
    <input type="radio" name="sex" id="woman" /><label for="woman">女</label>
/*<input />控件联合<label>标签使用，可以扩大控件的选择范围*/

25.2 textarea控件

创建多行文本输入框

<textarea cols="每行中的字符数" rows="显示的行数">文本内容</textarea>
/*<textarea>标签还有可选属性，readonly="readonly",该控件内容为只读*/

注意：各浏览器对cols和rows属性理解不同，所以常用css的width和height属性来定义其文本框高度和宽度

25.3 select控件

<select>/*添加下拉菜单*/
    <option>选项1</option>/*下拉菜单中的具体选项*/
    <option>选项2</option>
    <option>选项n</option>
</select>

可以为select和option标签定义属性

标签名	常用属性	描述
select	size	指定下拉菜单的可见选项数
select	multiple	定义multiple="multiple"时，下拉菜单具有多选项选择的功能
option	selected	定义selected="selected"时，当前项即为默认选中项

<select>
   <optgroup label="组名1">
       <option>选项1</option>
       <option>选项2</option>
       <option>选项n</option>
    </optgroup>
    <optgroup label="组名2">
       <option>选项1</option>
       <option>选项2</option>
       <option>选项n</option>
    </optgroup>
</select>

注：使用css，可以轻松实现对表单控件的样式控制，需要注意：

由于form是块元素，重置游览器的默认样式时，需要清除其内边距和外边距；

input控件默认有边框效果，当使用input标签定义各种按钮时，通常需要清除其边框；

通常情况下需要对文本框和密码框设置内边距，使其内容不会紧贴输入框。

26 float 浮动

属性值	描述
left	标签向左浮动
right	标签向右浮动
none	标签不浮动（默认值）

浮动元素不再占用原文档流中的位置，会对页面中其他标签的排版产生影响。可使用clear属性清除浮动：

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

clear属性不能清除子标签浮动对父标签的影响，有三种清除浮动的方法：

• 使用空标签清除浮动，一般不建议使用

• 使用overflow属性清除浮动

  overflow:hidden;/*在使用该样式清除浮动时，一定要将该样式写在被影响的标签中*/
  

• 使用after伪对象清除浮动

27 overflow属性

除了可以清除浮动，还可以用于规定溢出内容的显示状态

常用属性值有4个：

属性值	描述
visible	内容不会被修剪，会呈现在标签框之外
hidden	溢出内容会被修剪，并且被修剪的内容是不可看见的
auto	在需要时产生滚动条，即自适应所要显示的内容
scroll	溢出内容会被修剪，且浏览器会始终显示滚动条

“overflow:scroll;” 无论标签是否溢出，标签框中的水平和竖直方向的滚动条都始终存在。

28 定位属性 position属性

用于定义标签的定位模式

position的常用属性值有4个，分别表示不同的定位模式

值	描述
static	静态定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父标签进行定位
fixed	固定定位，相对于浏览器窗口进行定位

定位模式（position）仅用于定义标签以哪种方式定位，边偏移属性可以精确定义定位标签的位置

边偏移属性	描述
top	顶端偏移量，定义标签相对于其父标签上边线的距离
bottom	底部偏移量，定义标签相对于其父标签下边线的距离
left	左侧偏移量，定义标签相对于其父标签左边线的距离
right	右侧偏移量，定义标签相对于其父标签右边线的距离

• 任何标签在默认情况下都会以静态定位来确定自己的位置，在静态定位状态下，无法通过边偏移量属性来改变标签的位置。

• 设置相对定位后，对其进行边偏移，标签会相对于其默认位置进行偏移，在原文档流中的位置（默认位置）仍然保留。

• 绝对定位是将标签基于最近的已经定位（绝对、固定或相对定位）的父标签进行定位，若所有父标签都没有定位，设置绝对定位的标签会依据body根标签（也可以看作浏览器窗口）进行定位。绝对定位会脱离标准文档流的控制，同时不再占据标准文档流中的空间。

  将父标签设置为相对定位，但不对其设置偏移量，然后再对子标签应用绝对定位，并通过边偏移属性对其进行精确定位。这样父标签既不会失去其空间，同时还能保证子标签基于父标签准确定位。

  如果仅为标签设置绝对定位，不设置边偏移，则标签的位置不变，但该标签不在占用标签文档流的位置，会与上移的后续标签重叠。

• 固定定位是绝对定位的一种特殊形式，以浏览器窗口作为参照物来定义网页标签，该标签将脱离标准文档流的控制，始终基于浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，窗口的大小如何变化，该标签始终会显示在浏览器窗口的固定位置。

z-index 层叠等级属性（该属性仅对定位元素有效）

当多个元素同时设置定位是，定位元素之间可能会发生重叠，z-index 可以调整重叠定位元素的堆叠顺序，其取值可为正、负整数和0，默认属性值为0，取值越大，定位元素在层叠元素中越居上。

29 网页中常用命名

相关模块	命名	相关模块	命名	相关模块	命名
头部	header	内容	content	下载	download
导航栏	nav	侧栏	sidebar	菜单	menu
焦点图	banner	页面主体	main	搜索	search
栏目	column	新闻	news	版权	copyright
尾部	footer	文章列表	list	提示信息	msg
标志	logo	热点	hot	标签页	tab
小技巧	tips	服务	service	注册	regsiter
加入	joinus	状态	status	指南	guild
栏目标题	title	合作伙伴	partner	投票	vote

css文件	命名	css文件	命名	css文件	命名
主要样式	master	基本样式	base	打印	print
模块样式	module	版面样式	layout	文字	font
主题	themes	专栏	columns	表单	forms

30 BFC——块级格式化上下文

概念：直译为 块级格式化上下文 ，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元 素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。 简单理解为：将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。

实现BFC属性的方法：

1. 浮动元素，float 除 none 以外的值
2. 定位元素，position的值不是static或者relative。
3. display 为 inline-block 、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inlinegrid
4. overflow 除了 visible 以外的值（hidden，auto，scroll）
5. 根元素`<html>` 就是一个 BFC

BFC的作用：

1、避免外边距重叠（防止margin塌陷）

2、用于清除浮动

3、阻止元素被浮动元素覆盖