html 文件

+  <DOCTYPE html> htmla版本声明语句
+  根标签   lang="en" 设置语言

• head 头部标签 在头部标签中对页面进行设置
  • meat
    • 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 名

• id 选择器

  • 按照标签的 id 进行筛选
  • id 不能重复 具有唯一性

• 标签名 标签选择器
  • 直接用标签进行筛选
• • 通配符选择器
  • 直接选择所有的标签

• 空格 后代选择器
  • 标签 1 标签 2
    • 标签 2 必须是 标签 1 的后代元素

• 直属的子集选择器

  • 标签 1>标签 2
    • 标签 2 必须是 标签 1 直属的元素

• ， 群组选择器
  • 标签 1，标签 2
    • 给标签 1 和标签 2 同时设置 css 样式

选择器优先级

• ！import> 行间样式>id > class >标签 > *

• 当优先级相同的情况下
  • 谁选择器最详细 谁生效
  • 选择器相同谁在下面谁生效

盒模型

• margin

  • 外边距 负责两个元素之间的间距
  • 元素之间
    • 上下间距 谁大取谁
    • 左右间距 相加取和
  • margin 不会影响元素之间的大小

• border

  • 边框
  • 边框大小 会影响元素大小

• padding

  • 内边距 负责内容到容器边框的距离
  • padding 会影响元素的大小 能把盒子撑开

• 内容区域

img 和 a 标签

• img 用来插入图片
  • src 设置图片路径 （可以是本地路径也可以是网络路径）
  • alt 设置图片加载失败时 文字的提示信息
  • width/height 自带宽高属性 可以设置宽高 不用带 px 单位
  • a 链接
    • 用来设置跳转链接 可以跳转新的页面
    • href 属性中直接设置新页面的路径和网址
  • 瞄点链接
    • 在 href 属性中设置要跳转的标签 id
  • target
    • target: "_blank"
    • 设置 网页的新建标签页打开

• 四个伪类
  • :link 匹配所有点击过的链接
  • ：visited 匹配所有已经点击过的链接
  • ：hover 鼠标悬停
  • ：active 正在点击（鼠标按下还没有松开）

伪元素

+ :: before
   + 在内容前插入文本
+ :: after
   + 在内容后 插文本
+ 注意！！！
  + 伪元素必须有 content："";
  + 伪元素有行元素的特性
  + 伪元素以设置css样式

采用的 css 属性

• weight/height
  • 设置元素宽高
  • 值可以是 具体像素 也可以是 百分比
  • 设置最大高度
    • max-width/ max-height
  • 设置 最小宽高
    • min-width/min-height
• background 设置背景
  • background-color 背景色
  • background-image 背景图片
  • background-repeat 背景图片是否排重复
    • no-repeat 不重复
  • backfround-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-indent 首行缩进 一般设置为 2rem

• display
  • none 隐藏盒子 盒子直接消失
  • block 将元素转为块元素
  • inline 将元素转为行元素
  • inline-block 将元素转为行间块元素

• border
  • 参数有 大小（px） 颜色 样式
  • 样式
    • solid 实现
    • dashed 虚线
    • dotted 点状虚线
    • double 双实线
      border-radius 设置边框圆角
    • 参数可以是具体 像素单位 也可以是百分比
    • 50% 圆
    • 也可以分开设置四个角
      • 坐上 右上 右下 左下

排列方式

• 水平排列
  • 内容区域
  • text-align
    • center 居中
    • left
    • light
  • 自身居中
    • margin：0 auto；
      • 只有 块元素 和 行间块元素可以使用
  • 垂直排列
    • verticla-align 基准线
      • top 上对齐
      • bottoom 下对齐
      • middle 居中对齐
      • sub 上标
      • super 下标
      • baseline 默认值

float 浮动

• none 无浮动
• left 左浮动
• right 右浮动

• 浮动会造成 高度塌陷 所以需要给 父容器 清除浮动 造成的高度塌陷
  • 给父容器设置固定的高
  • 给父容器 设置 overflow:hiden
    • overflow:hiden;
      • 超出隐藏
      • 清除浮动
  • 给父元素的末尾 加入一个块标签
    • 在块标签上设置 clear：both
  • 给父元素设置伪类 ::after
    • 在 ::after 上设置
      • display：block；
      • clear: both;