html文件结构
+ <!DOCTYPE html> html版本声明语句
+ html 根标签 lang="en" 设置语言
+ head 头部标签 在头部标签内对页面进行设置
+meta
=charset="UTF-8"设置中文编码格式
+ title 设置网页标题
+ link 引入css文件(外联样式)
+ style 写css样式(内联样式)
+body 内容标签
+ 所有的 页面结构标签都写在body中
行标签和块标签
+ 块标签
+ 独占一行
+ 可以设置宽高
+ 不设置高度时 高度由内容撑开
+ 不设置宽度时 宽度继承父元素宽度
+ 可以嵌套行标签和块标签
+ 注意 p标签 不能嵌套块标签
+ 常见块标签
+ div ul ol li 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 会影响元素大小 能把盒子撑开
+ 内容区域
img和a标签
+ img 用来插入图片
+src 设置图片路径(可以是本地路径也可以是网络路径)
+alt 设置图片失败时 文字提示信息
+width/height 自带宽高属性 可以设置宽高 不用带px单位
+ a 链接
+ 用来设置跳转链接 可以跳转新的页面
+ 在href属性中直接设置新页面的路径或网址
+ 锚点链接
+ 在 href 属性中设置要跳转的标签的id
+ 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 全部字母小写
+ text-decoration 修饰线
+ underline 下划线
+ overline 上划线
+ line-through 删除线
+ text-indent 首行缩进 一般设置为 2rem
+display
+ none 隐藏盒子 盒子直接消失
+ block 将元素转为块元素
+ inline 将元素转为行元素
+ inline-bolock 将元素转为行间块元素
+ border
+ 参数有 大小(px) 颜色 样式
+ 样式
+ solid 实线
+ dashed 虚线
+ dotted 点状虚线
+ double 双实线
+ border-radius 设置边框圆角
+ 参数可以是具体的 像素单位 也可以是百分比
+ 50% 圆
+ 也可以分开设置四个角
+ 左上 右上 右下 下
排列方式
+ 水平排列
+ 内容区域
+ text-align
+ center 居中
+ left
+ right
+ 自身居中
+ margin: 0 auto
+ 只有 块元素 和 行间 块元素可以使用
+ 垂直排列
+ vertical-align 基准线
+ top 上对齐
+ bottom 下对齐
+ middle 居中对齐
+ sub 上标
+ super 下标
+ baseline 默认值
float 浮动
+ none 无浮动
+ left 左浮动
+ right 右浮动
+ 浮动会造成 高度塌陷 所以需要给父容器清除浮动造成的高度塌陷
+ 给父容器设置固定的高
+ 给父容器设置overflow: hidden;
+ overflow: hidden;
+ 超出隐藏
+ 清除浮动
+ 在父元素的末尾 加入一个块标签
+ 在块标签上设置 chear:both;
+ 给父元素设置伪类::after
+ 在 ::after上设置
+ display:block
+ clear:both
