HTML&CSS 汇总
1. 标签
1)标题标签: h1-h6 <h1>标题</h1>
2)段落标签: <p>段落</p>
3)加粗标签: <strong></strong> <b></b>
4)倾斜标签: <em></em> <i></i>
5)下划线: <ins></ins> <u></u>
6)删除线: <del></del> <s></s>
7)通用容器: <div></div> 块级元素 <span></span> 行级元素
8)换行: <br />
9)水平线: <hr />
10)空格:
11)小于: <
12)大于: >
13)超链接: <a></a> # href 目标地址 # target: _blank点击时新打开一个页面,_self点击时当前页打开
14)图片标签: <img src="" /> # src 路径 # title 标题 # alt 图片出错的提示 # width 宽 # height 高
15)列表标签
ul配li
<ul>
<li>列表标题一</li>
<li>列表标题二</li>
<li>列表标题三</li>
</ul>
列表的样式设置
去掉小圆点: list-style:none
去掉默认的内间距和外间距: margin:0px; padding:0px;
列表中的让每一项之间产生间距: line-height
16)表格标签: table
行: tr 列: th 表头的列: td
表格边框合并:
border-collapse:collapse
17)整体容器: form标签
action属性 定义表单数据提交地址
method属性 定义表单提交的方式,一般有“get”方式和“post”方式
18)form标签中的标签
<label>标签 为表单元素定义文字标注
for属性,帮助输入框获取焦点
for中的值是input标签的id值
<input>标签 定义通用的表单元素
type属性
type="text" 定义单行文本输入框
css样式的outline:none可以取出默认的高亮框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
value属性
定义表单元素的值
name属性
定义表单元素的名称,此名称是提交数据时的键名
placeholder属性
设置input输入框的默认提示文字
id属性
<textarea>标签 定义多行文本输入框
<select>标签 定义下拉表单元素
<option>标签 与<select>标签配合,定义下拉表单元素中的选项
2. CSS属性
布局相关
width 设置元素(标签)的宽度,如:width:100px;
height 设置元素(标签)的高度,如:height:200px;
background 设置元素背景色或者背景图片,如:background:gold; 设置元素背景色为金色
border 设置元素四周的边框,如:border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
padding 设置元素包含的内容和元素边框的距离,也叫内边距
margin 设置元素和外界的距离,也叫外边距
float 设置元素浮动,浮动可以让块元素排列在一行,浮动分为左浮动:float:left; 右浮动:float:right;
文本常用相关
color 设置文字的颜色,如: color:red;
font-size 设置文字的大小,如:font-size:12px;
font-family 设置文字的字体,如:font-family:'微软雅黑';为了避免中文字不兼容,一般写成:font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
3. 定位
1)居中
文字居中
垂直居中
line-height和height一样
水平居中
text-align为center
块级元素自己居中
水平居中
margin:0 auto
垂直居中
定位+margin
通用的居中办法
1、子绝对父相对
2、子left50% top50%
3、transform:translate(-50%,-50%)
2)元素显示特性
display
控制元素显示与隐藏
none block inline inline-block
将行内元素和块级元素进行转换
block inline
行级元素设置width和height一般情况下是产生不了效果的
inline-block
3)溢出
overflow
visible 溢出的部分显示,这是默认值
hidden 溢出的部分隐藏
scroll 显示滚动条
auto 溢出时出现滚动条
4)定位
文档流:是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。定位可以将元素脱离文档流
position
relative 相对定位,元素原来的位置继续占据空间,参照自身原来的位置
absolute 绝对定位,元素原来的位置不占空间,参照的是外层如果有定位属性的那个元素
fixed 固定定位,元素原来的位置不占空间,参照的是浏览器的四个角
结合left、right、top、bottom属性一起使用
元素脱离了文档流就会出现元素相互重叠的情况