块元素有div p ul ol dl等标签
行内 span a em i b等标签
行内块 img input textarea等标签
表单
action提交地址
method提交方式
html超文本标记语言
css层叠样式表
设置css样式
1.行内
<div style="color: red;"></div>
2.外部引入
<link rel="stylesheet" type="text/css" href="css文件地址"/>
3.设置类名，id等XX选择器
<div class="cla" id="ids"></div>
.cla {}
#ids {}
background-color背景颜色
background-image:url(图片地址)背景图片
background-repeat:no-repeat背景图片是否平铺
background-attachment:fixed背景图像是否固定或者随着页面的其余部分滚动。
background-position背景的位置
background:#ffffff url('img_tree.png') no-repeat right top简写形式
颜色 图片路径 是否平铺 背景位置
注：设置背景要么单独设置，要么简写形式设置
文本对齐方式
text-align:center,left,right
当text-align设置为"justify"，
每一行被展开为宽度相等，左，右外边距是对齐
text-decoration: none;取消a标签默认下划线
overline设置上划线
line-through设置删除线
underline设置下划线
<a href="" style="text-decoration: line-through;">我是a标签</a><div style="text-decoration: line-through;">
我是div
</div>text-transform:uppercase转大写
lowercase转小写
<div style="text-transform: uppercase;">
Hello Word Jack
</div>text-indent: 10px;设置首行缩进
<div style="text-indent: 10px;">
你好你好你好你好
</div>font-size字体大小
font-style斜体
font-family字体样式
font-weight粗细
<div style="font-weight: bold;">
我是div
</div>a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
list-style:none取消列表默认样式
list-style: circle;列表的空心圆
square列表的正方形
upper-roman列表罗马数字
lower-alpha列表字母
decimal数字
<!-- 无序列表 -->
<ul style="list-style: none;">
<li>第一个</li>
<li>第一个</li>
<li>第一个</li>
</ul><!-- 有序列表 -->
<ol>
<li>第二个</li>
<li>第二个</li>
<li>第二个</li>
</ol><!-- 自定义列表 -->
<dl>
<li>第三个</li>
<li>第三个</li>
<li>第三个</li>
</dl>table表格
border边框
cellspacing 合并外边框
cellpadding合并内容到边框的距离
<tr>行
<th>标题，列，会加粗
<td>列合并单元格
rowspan合并行
colspan合并列
<table style="text-align: center;" border="1" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>男</td>
</tr>
</table>盒子模型
box-sizing: border-box;转成IE盒子模型
box-sizing: content-box;转成标准盒子模型
1.标准盒子模型
<div style="width: 200px;height: 200px;
border: 5px solid red;
padding: 10px;">
12313213
</div>
<div style="width: 200px;height: 200px;
border: 5px solid pink;
">
12313213
</div>2.IE盒子模型|怪异盒子模型
<div style="width: 200px;height: 200px;
border: 5px solid orange;
box-sizing: content-box;
padding: 10px;
">
12313213
</div>边框
border-color 修改边框颜色
border-top-color
border-right-color
border-bottom-color
border-left-color
border-width修改边框宽度
border-style修改边框线条样式
·none:没有边框,即忽略所有边框的宽度(默认值)
·solid:边框为单实线
·dashed:边框为虚线
·dotted:边框为点线
·double:边框为双实线
border-top修改边框某一边
<div style="width: 100px;height: 100px;
border: 5px solid red;
border-top: 10px dashed orange">
</div><!-- 轮廓 -->
<div style="width: 100px;height: 100px;
border: 5px solid red;
outline:10px dashed #000">
</div>margin:上 右 下 左;
margin:上 右左 下;
margin:上下 右左;
padding
<div style="width: 100px;height: 100px;
border: 5px solid red;
margin: 10px 50px 100px;">
</div>.box1,.box2,.box3 {
width: 100px;
height: 100px;
border: 1px solid red;
}
.boss {
background-color: pink;
}
<!-- 分组,嵌套 -->
<div class="box1 boss"></div>
<div class="box2"></div>
<div class="box3 boss"></div><div style="width: 100px;height: 100px;
border: 5px solid red;
min-height: 200px;
max-width: 500px;
line-height: 50px;">
我是div我是div我是div我是div我是div我是div我是div我是div
</div>display
display: none;隐藏，不占位置
visibility: hidden;隐藏，占位置
opacity: 0;透明度,0为隐藏，1显示
浏览器5大兼容性
-khtml-苹果浏览器
-webkit-opacity兼容谷歌浏览器
-o-opacity兼容Opera浏览器
-moz-opacity兼容火狐浏览器
-ms-兼容IE，普通样式属性
opacity在IE下值为0-100，下面的40指的是百分之40
{
opacity:0.4;
filter:alpha(opacity=40);
}transparent无色
<div style="width: 100px;height: 100px;
border: 5px solid red;
border: 5px solid transparent;"
>
</div>static默认值
relative相对定位，脱离文档流
fixed固定定位
absolute绝对定位,如果父级没有相对定位，
那么他的父级就是浏览器，脱离文档流,
如果父级没有相对或绝对定位会一直往上一级找，直到浏览器
找到父级有相对或绝对定位，根据父级定位
sticky粘性定位
<div style="position: relative;">
<div style="width: 100px;height: 100px;
border: 1px solid red;
margin: 100px;
top: 50px;left: 100px;
position: relative;">
1
<div style="width: 30px;height: 30px;
border: 1px solid red;
position: absolute;
top: 0;
left: 0;">
2
</div>
</div>
</div><!-- 固定定位 -->
<div style="width: 50px;height: 50px;
border: 1px solid orange;
border-radius: 50%;
position: fixed;
right: 0;
bottom: 50px;
text-align: center;
line-height: 50px;
font-size: 30px;
font-weight: 700;">↑</div><!-- overflow -->
overflow: hidden;溢出隐藏
visible默认值
scroll添加滚动条
auto只有内容超出会出现滚动条
overflow-x: hidden;隐藏横向滚动条
overflow-y: hidden;隐藏纵向滚动条
<div style="width: 50px;
height: 50px;border: 1px solid red;
overflow-y: hidden;">
我是div我是div我是div我是div
</div><div class="clearfix">
<div style="width: 100px;height: 100px;
background-color: #FF0000;float: left;">1</div>
<div style="width: 100px;height: 100px;
background-color: #FF0000;float: right;">2</div>
</div>
<p style="width: 300px;height: 300px;
background-color: deeppink;">我是一个p标签</p>水平居中
margin: 0 auto;
<!-- 垂直居中 -->
<div style="width: 500px;height: 500px;
border: 1px solid red;position: relative;">
<div class="box1" style="position: absolute;
top: 50%;left: 50%;
margin: -50px 0 0 -50px;"></div>
</div><!-- 浮动可以实现居中 -->
<div style="
width: 100px;height: 100px;
border: 1px solid red;float: left;
margin: 50% 0 0 50%;"></div>以上全是课上做的笔记