html和css简单复习

HTML:标签语言

常用的标签:

1. 标题标签h1-h6
2. 段落标签p/div/ul>li/ol>li/a
3. 表单标签form/input
4. 自定义标签

Css:决定样式,重叠样式

• 标签的大小
  1. 外边距margin
  2. 内边距padding
  3. 边框border
  4. 宽width
  5. 高height

• 盒子模型大小(box-sizing)
  1.border-box:设定的width和height涵盖padding和border
  2.content-box:默认

• 元素背景
  1.background:颜色/背景图片
  2.background-color:背景颜色
  3.background-image:背景图片
  4.background-size:背景图的尺寸
  5.background-position:背景图片的位子
  6.background-repeat:背景图是否重复

• 字体
  1.文字字体:font-family
  2.文字尺寸:font-size
  3.文字粗细:font-weight
  4.文字颜色:color
  5:文字排版:text-align
  6:文字行高:line-height
  7.文字阴影:text-shadow

• 布局
  1.浮动(float)布局:向左向右浮动,缺点(父元素高度塌陷,伪元素清除浮动clear: both)
  2.弹性布局:弹性容器,弹性子元素,主轴,侧轴,主轴分布,侧轴分布,剩余空间,子元素顺序,弹性换行.

• 动画
  1.过渡动画:transition:过渡属性 ,过渡动画时间,过渡延迟时间,过渡变化速度
  2.动画:anmation:动画的名称 动画的时间 动画的延迟时间 动画的速度 动画的方向 动画的次数

• 响应式
  1.视窗的设定:viewport
  2.设定移动端的设备它的分辨率

为它默认的系统分辨率(最佳的分辨率)

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

3.设定移动端设备的分辨率为固定设计稿的分辨率(当物理分辨率小于设计稿的分辨率时会失真)

<meta name="viewport" content="width=375,user-scalable=no" />