HTML:标签语言
常用的标签:
- 标题标签h1-h6
- 段落标签p/div/ul>li/ol>li/a
- 表单标签form/input
- 自定义标签
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" />