HTML
标签
<h1~h6> 标题
<p> 段落
<img scr="文件路径" alt="错误时显示信息"> 图片
<a href="跳转地址或#"> 超链接
<ul> 无序列表
<ol> 有序列表
<li> 列表项
<div> 块元素
<span> 行元素
<form action=""> 表单
<label for="关联项 指向id">
<input type="text" placeholder="背景文字"> 文本框
<input type="radio"> 单选框
<input type="checkbox"> 多选框
<select> 下拉框
<option value=“”> 下拉框选项
<textarea name="" id="" cols="长" rows="宽"> 文本域
<input type="submit"> 提交表单按钮
<button> 按钮
<strong> 加粗
<i> 斜体
cellspacing 单元格间距(Cell spacing)
cellpadding 单元格边距(Cell padding)
<table border="1" cellspacing="0" cellpadding="10"> 表格
<tr> 表格行
<th> 表格表头
<td> 表格列
补充
行级元素
<a> <span> <i> <strong> <img> <input>
属性:
1.多个元素占一行 无法设置宽高
2.不能嵌套块级元素 只能嵌套行级元素
块级元素
<div> <p> <ul> <li> <ol> <h1~h6> <table>
属性:
1.一个元素占一行 可以设置宽高
2.块级元素可以嵌套行级元素、块级元素和行级块元素
3.<p>和<h1~h6>标签特殊,不能嵌套块级元素。
CSS
HTML中引入CSS
第一种方法
·<style>
第二种方法
·引入css文件 <link rel="stylesheet" href="文件路径">
第三种方法
·内联引入css <a style="内容">
选择器
id选择器 #div1 （唯一的）
类选择器 伪类选择器 .aa{}
标签(元素)选择器 li{}
伪元素选择器 ::after{}
后代选择器 #ul1 li{} 选取所有想要的后代
子代选择器 #ul1 > li{} 就能选择下一代，也就是儿子辈的
相邻的兄弟 #title1 + ul{}
群组选择器#ul1,.aa{
color:#f00;
}
###选择器优先级
!important 最高
style 内联样式优先级最高 1000
# id id选择器 100
. class 类选择器 伪类选择器 10
div 元素选择器 伪元素选择器 1
优先级相同 写在后边的会覆盖 写在前边的
id 永远比class优先级高 即使class10级嵌套,也没用
样式
背景
/* 背景颜色 */
background-color: red;
/* 背景图片 通过url()引入图片地址 */
background-image: url(../images/bbb.jpg);
/* 背景图片重复 repeat 和 no-repeat两个值 */
background-repeat: no-repeat;
/* 背景图片位置 第一个值水平方向（正值右移） 第二个值垂直方向（正值下移） */
background-position: -150px -100px;
/* 合并写法 */
background: red url(../images/bbb.jpg) no-repeat -150px -100px;
文本
/* 首行缩进 */
text-indent: 20px;
/* 文本水平对齐方式 left center right */
text-align: center;
height:100px;
/* 单行文本垂直居中的方式 line-height = height */
line-height: 100px;
/* 文本装饰
none 去掉下划线
underline 下划线
overline 上划线
line-through 贯穿线
*/
text-decoration: none;
字体和列表
/* 字体大小 */
font-size:20px;
/* 字体 */
/* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;
/* bold=700 */
/* 字体粗细 */
font-weight: 900; 字体加粗(bold为700px 值在100~900之间)
/* 字体样式 italic 斜体 */
font-style: italic;
列表
/* 去掉列表. */
list-style: none;
/* 鼠标滑过手状 */
cursor: pointer;
盒模型
标准盒模型 宽度 = width + padding + border
怪异盒模型 （ie6及ie6以下的浏览器 不写DOCTYPE 表现成怪异 ）
宽度 = width
内边距为padding
外边距为margin
box-sizing
border-box 怪异盒模型
content-box 标准盒模型
浮动
浮动的元素 会脱离文档流 空间释放
塌陷：子元素浮动 会导致父元素 没有高度
解决方法：
1. 父元素 overflow:hidden;
2. 父元素添加高度
3. 父元素添加伪元素
.parent::after{
content:'';
/* 讲after设置成块级元素 */
display: block;
/* 清除浮动 left（左浮动） right（右浮动） both（左右都可以 ） */
clear:both;
}
4. 起一个标签名 然后clear
定位
relative相对定位
1 相对于自己初始位置
2 定位以后空间不释放
absolute绝对定位
1. 相对于最近已定位的祖先元素 如果没有最近已定位的祖先元素 相对于body
2. 定位后空间释放
3. 动画中无初始值动不起来
4. top right bottom left 相对于已定位祖先元素的距离
fixed 固定定位
1. 相对于浏览器的可视区
2. 定位后空间释放
3. 定位后宽度 内容撑的
static 静态的 默认值
sticky 粘性定位 吸顶效果
行级元素块级元素显示
display:
block 块级元素 自己占一行 可以设置宽高
inline 行级元素 多个占一行 不可以设置宽高
inline-block 多个占一行 可以设置宽高
none 隐藏
/* 块级元素水平居中 */
margin:0 auto;
/* 行级元素设置水平居中 在父元素设置 */
text-align: center;
动画
变形
rotate 旋转 正值顺时针
translateX X轴 translateY Y轴 位移
scale 缩放
transform: rotate(30deg);
transform: scale(0.5);
transform: translateX(100px);
过度 属性 过度时间 运动方式
transition: transform 2s linear ;
linear：线性过渡。
ease：平滑过渡。
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
transition 需要触发条件
animation 直接可以动画 复杂动画
外边距合并
父子元素中外边距合并为两者中较大值
解决方法
1.父元素添加 overflow: hidden;
2.为父元素添加边框
3.为父元素或子元素添加浮动
4.为父元素或子元素添加定位
补充
单行文本溢出小点点
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行文本垂直居中
1.定位
2.弹性盒模型
3.父元素display:table
子元素display:table-cell;
vertical-align:middle
实现三角箭头
<style>
div{
width: 0px;
height: 0px;
border: 100px solid transparent;/*transparent 透明色*/
border-top-color: red;
}
</style>
**
宽为0 高为0时 border上边框设置颜色其余为透明正好为三角形
**
other
1.行级块元素居中与文字居中相同
2.溢出隐藏必须设置高（height）s
