HTML
1. HTML常用标签
2. 块级元素与行级元素
| 块内元素 | 行内元素 | |
|---|---|---|
| 区别 | 霸占一行，不能与其他任何元素并列。能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。 | 与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度 |
| 标签 | div , h系列 , li , dt , dd, p、form、table | span , a , b , i , u , em |
| 转化 | 使用display：inline;可以将块级元素转化为行内元素 | 用display：block；将行内元素(比如span)转行成块级元素 |
行内块元素：
3. 表单标签
文本域、密码字段、单选按钮、复选框、提交按钮
CSS
1.1 CSS选择器
| 元素选择器 | 如：p{} |
|---|---|
| 类选择器 | 如：.xx{} |
| ID选择器 | 如：#xx{} |
| 关联选择器 | 如：p a{} |
| 子元素选择器 | 如：p>a{} |
| 相邻兄弟选择器 | 如：p+a{},匹配的是紧邻p元素后面的a元素 |
| 组合选择器 | 如：p,a{} |
| 元素选择器 | 如：img[alt],匹配包含alt属性的img元素 |
| 伪类选择器 | 如：a:hover{}，可以给链接添加特殊效果,一般情况下使用:开头，伪类是不存在的类，表示元素的状态 |
| 通配符选择器 | 如：*{} |
| 伪元素选择器 | 如：p::after，在每个 元素之后插入内容，结合content使用。伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要html标签，从而简化HTML结构，创建的元素属于行内元素 |
2.1 CSS引入方式
行内样式表
<p style="font-size: 20px; font-family:cursive;">文字</p>
内部样式表
<style>...</style>
外部样式表
<link rel="stylesheet" href="style.css">
3.1 三大特性
- 层叠性：就近原则
- 继承性：子标签会继承父标签的某些样式
- 优先级：选择性相同，则执行重叠性，不同按照选择器的优先级
4.1 盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
不同部分的说明：
-
Margin(外边距) - 清除边框外的区域，外边距是透明的。
-
Border(边框) - 围绕在内边距和内容外的边框。
写法：
// 像素（粗细）、线型、颜色 border: 2px solid red; -
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
写法：
// 上右下左 padding: 10px 5px 10px 5px; // 如果只有两个，代表上下、左右 padding: 10px 5px; -
Content(内容) - 盒子的内容，显示文本和图像。
5.1 浮动与定位
在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。
CSS中float属性，默认为none。将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。
浮动元素高度塌陷问题
在浮动布局中，父元素的高度默认是被子元素撑开的，在子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。
解决办法：
-
给父元素添加声明，overflow:hidden; 缺点：回隐藏溢出的元素；
-
使用clear属性清除浮动
-
使用after伪类元素
在CSS中有一个position属性，用来进行定位操作。position属性可以设置为4个属性值之一：
- static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局；
- relative：相对定位，参照自己原来的位置，不脱标，位置会保留。可以进行top,left,right,bottom进行位移
- absolute：绝对定位，参考父类元素的位置，如果没有祖先元素或祖先元素没有定位，则以浏览器为准定位。如果祖先有定位，则以最近的祖先元素为参考点，不再占有原来的位置，脱标。
- fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器的滚动条时，依然保持对象位置不变。
元素的显示与隐藏：display属性设置为none，脱离文档流；visibility设置为hidden，不脱流；overflow指定了内容超出了元素指定的元素高度和宽度时会发生什么
6.1 动画
动画使元素逐渐从一种样式变为另一种样式。可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。
