HTML和CSS进阶

2023-09-06 阅读 18 评论 0

摘要：列表标签 <ul><li>列表标题一</li><li>列表标题二</li><li>列表标题三</li><li><a href="#">列表标题一</a></li><li><a href="#">列表标题二</a></li>&

列表标签

<ul><li>列表标题一</li><li>列表标题二</li><li>列表标题三</li><li><a href="#">列表标题一</a></li><li><a href="#">列表标题二</a></li><li><a href="#">列表标题三</a></li>
</ul>

html表单

<form> 定义整体的表单区域 action属性定义表单提交到的地址

<label>为表单元素定义文字标注

<input> 定义通用表单元素

type属性
- type=“text” 定义单行文本输入框
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- type=“checkbox” 定义复选框
- type=“file” 定义上传文件
- type=“submit” 定义提交按钮
- type=“reset” 定义重置按钮
- type=“button” 定义一个普通按钮
value属性定义表单元素的值

<textarea> 多行文本输入框

<select>定义下拉表单元素

<option> 定义下拉表单选项元素

表格元素及相关样式

1、<table>标签：声明一个表格

2、<tr>标签：定义表格中的一行

3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

表格相关样式属性

border-collapse 设置表格的边线合并，如：border-collapse:collapse;

css显示特性

display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、inline 元素以行内元素显示
3、block 元素以块元素显示

css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的。(常用)
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。(不管内容是否超出都后以滚动条的方式显示)
4、auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。(常用)

定位

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位(重点)。
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。(基本不用)

定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级