html文件结构
<!DOCTYPE html> html版本生命语句
html 根标签 lang="en"设置语言
head 头部标签 在头部标签内内对页面进行设置
meta
charset="UTF-8" 设置中文编码格式
title 设置网页标题
link 引入css文件（外联样式）
style 写css样式（内联样式）
body 内容标签
所有的页面结构标签都 写在body中
行标签和块标签
块标签
独占一行
可以设置宽高
不设置高度时 高度由内容撑开
不设置宽度时 宽度继承父元素宽度
可以嵌套行标签和块标签
p标签不能嵌套块标签
常用块标签
div ul li ol p h1~h6
行标签
在父盒子宽度允许的情况下 在一行之间排列
父盒子宽度不够的情况下 会换行
不能设置宽高
宽高由内容撑开
不可以嵌套块标签
常见行标签
span a img
css书写方式
行间样式
直接在标签内部的 style 属性中写css样式
内联样式
在head 的结束标签上 写一个style标签
在style 标签中 写css样式
外联样式
新建一个.css文件
在.css文件中 写css样式
在head中 title下面使用 link标签 引入.css文件
css选择器;
.class选择器 类选择器
按照标签的class名进行筛选
class名 可以重复
多个标签可以使用一个class名
一个标签也可以使用多个class名
id选择器
按照标签的id进行筛选
id不能重复 具有唯一性！
标签名 标签选择器
直接用标签名进行筛选
*通配符选择器
直接选择所有标签
空格 后代选择器
标签1 标签2
标签2必须是 标签1的后代元素
直属的子集选择器
标签1>标签2
标签2必须是标签1直属 的子元素
群组选择器
标签1，标签2
给标签1和标签2 同时设置css
选择器的优先级
！important>行间样式>id>class>标签>*
当优先级想同的情况下
谁选择器写的最详细谁生效
选择器也想同 谁在下面谁生效
盒模型
margin
外边距 负责两个元素之间的间距
元素之间
上下间距 谁大取谁
左右间距 相加取和
margin 不会影响元素的大小
border
边框大小会影响元素大小
padding 内边距
负责内容到 容器边框的距离
padding会影响元素大小能把盒子撑开
内容区域
a标签和img标签
img 用来插入图片
src 设置图片路径（可以是本地路径也可以是网络路径）
alt设置图片加载失败时文字提示信息
width/height 自带宽高属性 可以设置宽高 不用来px单位
a 链接
用来设置跳转链接 可以跳转新的页面
在herf属性中 直接 设置新页面的路径或网址
锚点链接
在href 属性中设置要跳转的标签的id
target
target:"_blank"
设置网页在新建标签页打开
四个伪类
link 匹配所有未点击过的链接
visited 匹配所有点击过的链接
hover 鼠标悬停
active 正在点击（鼠标按下还没有松开）
伪元素
::before
在内容前 插入文本
::after
在内容后 插入文本
注意！！！！
伪元素必须有content:"";
伪元素具有行元素的特性
伪元素可以正常设置css样式
常用css属性
width/height
设置元素宽高，值可以是具体像素单位，也可以是百分比
设置最大宽高
max-width/max-height
设置最小宽高
min-width/min-height
background 设置背景
background-color 背景色
background-image 背景图片
background-repeat 背景图片是否重复
参数 no-repeat
background-size 背景图片大小
第一个参数 设置宽
第二个参数 设置高
background-position 设置背景图片位置
第一个参数 设置x
第二个参数 设置y
background-position-x 设置背景图片x轴位置
background-position-y 设置背景图片y轴位置
margin/padding 设置外边距/内边距
一个参数时：同时设置四条边
两个参数时：第一个设置上下 第二个设置左右
三个参数时：第一个设置上 第二个设置左右 第三个设置下
四个参数时：第一个设置上 第二个设置右 第三个设置下 第四个设置左
文字设置
font-size 字体大小
font-weight 粗细 取值100~1000 或者bold
font-family 设置字体
font-style 字体样式 斜体 ：italic
line-height 行高
color 文字颜色
text-transform 文字大小写
capitalize 首字母大小写
uppercase 全部字母大写
lowercase 全部字母小写
text-decoration 修饰线
underline 下划线
overline 上划线
line-through 删除线
text-indont 首行缩进 值em rem px
display
none：隐藏盒子 盒子直接消失
block 将元素转为块元素
inline 将元素转为行元素
inline-block 将元素转为行间块元素
border
参数有大小（px）颜色 样式
solid 实线
dashed 虚线
dotted 点状线
double 双实线
border-radius 设置边框圆角
参数可以是具体的像素单位 也可以是百分比
50% 园
也可以分开设置4个角
左上 右上 右下 左下
排列方式
水平排列
内容区域
text-align
参数：center居中left左对齐right右对齐
自身居中
margin 0 auto;
只有 块元素 和行间块元素可以使用
垂直排列
vertical-align 基准线
top 上对齐
bottom 下对齐
middle 居中对齐
sub 上标
super 下标
baseline 默认值
float 浮动
none 没有浮动
left 左浮动
right 右浮动
浮动会造成高度塌陷 所以需要给父容器清除浮动造成的高度塌陷
给父容器设置固定的高
给父容器设置overflow：hidden;
overflow:hidden作用
超出隐藏，清除浮动
在父元素的末尾 加入一个块标签
在块标签上设置clear:both;
给父元素设置伪类::after
在after设置display:block;clear：botj
