| 行内元素 | |||||
|---|---|---|---|---|---|
| a | br | em | i | img | input |
| label | select | select | strong | textarea | sub |
| sup | pre | table | tbody | td | tfoot |
| 块元素 | |||||
|---|---|---|---|---|---|
| div | from | h1 | h2 | h3 | h4 |
| h5 | h6 | hr | ul | li | ol |
| p | pre | table | tbody | td | thead |
| tfoot | th | tr | dt | dd | dl |
| 行内块元素 | |||||
|---|---|---|---|---|---|
| img | input | td | button | audio | video |
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 行内元素 | 一行上水平排列 | 宽高无效,内外边距左右有效上下无效,line-height有效 | 它本身内容的宽度 | 容纳文本或者其他行内元素 |
| 块元素 | 独占一行 | 高度、宽度、内外边距均有效 | 父容器的100% | 包含行内元素和块级元素 |
| 行内块元素 | 同时具有块元素和行内元素的特点 | 宽高内外边距均有效 | 它本身内容的宽度 |
| 转块级元素 | 转行内元素 | 转行内块元素 | |
|---|---|---|---|
| display | block | inline | inline-block |
| position | 定位 | 文档流 | 偏移量 | |
|---|---|---|---|---|
| static | 默认 | 无定位 | 默认 | 忽略 |
| relative | 相对定位 | 相对于原本位置定位 | 不脱离 | 均可设置 |
| absolute | 绝对定位 | 1)相对于已设置position的祖先元素定位。 2)无设置position的祖先元素,相对于body定位 | 脱离 | 均可设置 |
| fixed | 固定定位 | 相对于浏览器窗口左上角进行定位 | 脱离 | 均可设置 |
| sticky | 粘性定位 | 相对于浏览器进行定位,相当于relative+fixed,先相对后固定 | 均可设置 |
网站结构三个层次:HTML结构层(标签结构)、CSS样式层(对标签结构的修饰)、JS的行为交互层(动态行为)
高度塌陷的产生 是因为子元素浮动,到之后后面的元素上去补位置,之后产生的高度的降低;所以影响的是后面的补位置的元素;
CSS组成 有两个部分:选择器和样式声明,样式声明中包含对应的属性和属性值。[例]-p{属性:属性值}
CSS基本语法两个部分组成:选择器和{},样式规则是由属性和属性值组成的。
盒子模型由四个部分组成的,内容(宽度高度),内边距,边框,和外边距。
margin:0 auto;让元素实现在浏览器中的水平居中,同时还能实现子元素位于父元素中的水平居中位置。