前端基础知识点

你的名字 2024-04-01 13:03 90阅读 0赞

## 1.行、块、行内块元素 ##

#### 1.1 元素 ####

<table> 
 <thead> 
  <tr> 
   <th align="center">行内元素</th> 
   <th align="center"></th> 
   <th align="center"></th> 
   <th align="center"></th> 
   <th align="center"></th> 
   <th align="center"></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">a</td> 
   <td align="center">br</td> 
   <td align="center">em</td> 
   <td align="center">i</td> 
   <td align="center">img</td> 
   <td align="center">input</td> 
  </tr> 
  <tr> 
   <td align="center">label</td> 
   <td align="center">select</td> 
   <td align="center">select</td> 
   <td align="center">strong</td> 
   <td align="center">textarea</td> 
   <td align="center">sub</td> 
  </tr> 
  <tr> 
   <td align="center">sup</td> 
   <td align="center">pre</td> 
   <td align="center">table</td> 
   <td align="center">tbody</td> 
   <td align="center">td</td> 
   <td align="center">tfoot</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="center">块元素</th> 
   <th align="center"></th> 
   <th align="center"></th> 
   <th align="center"></th> 
   <th align="center"></th> 
   <th align="center"></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">div</td> 
   <td align="center">from</td> 
   <td align="center">h1</td> 
   <td align="center">h2</td> 
   <td align="center">h3</td> 
   <td align="center">h4</td> 
  </tr> 
  <tr> 
   <td align="center">h5</td> 
   <td align="center">h6</td> 
   <td align="center">hr</td> 
   <td align="center">ul</td> 
   <td align="center">li</td> 
   <td align="center">ol</td> 
  </tr> 
  <tr> 
   <td align="center">p</td> 
   <td align="center">pre</td> 
   <td align="center">table</td> 
   <td align="center">tbody</td> 
   <td align="center">td</td> 
   <td align="center">thead</td> 
  </tr> 
  <tr> 
   <td align="center">tfoot</td> 
   <td align="center">th</td> 
   <td align="center">tr</td> 
   <td align="center">dt</td> 
   <td align="center">dd</td> 
   <td align="center">dl</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="center">行内块元素</th> 
   <th align="center"></th> 
   <th align="center"></th> 
   <th align="center"></th> 
   <th align="center"></th> 
   <th align="center"></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">img</td> 
   <td align="center">input</td> 
   <td align="center">td</td> 
   <td align="center">button</td> 
   <td align="center">audio</td> 
   <td align="center">video</td> 
  </tr> 
 </tbody> 
</table>

#### 1.2 区别 ####

<table> 
 <thead> 
  <tr> 
   <th align="center">元素模式</th> 
   <th align="center">元素排列</th> 
   <th align="center">设置样式</th> 
   <th align="center">默认宽度</th> 
   <th align="center">包含</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">行内元素</td> 
   <td align="center">一行上水平排列</td> 
   <td align="center">宽高无效,内外边距左右有效上下无效,line-height有效</td> 
   <td align="center">它本身内容的宽度</td> 
   <td align="center">容纳文本或者其他行内元素</td> 
  </tr> 
  <tr> 
   <td align="center">块元素</td> 
   <td align="center">独占一行</td> 
   <td align="center">高度、宽度、内外边距均有效</td> 
   <td align="center">父容器的100%</td> 
   <td align="center">包含行内元素和块级元素</td> 
  </tr> 
  <tr> 
   <td align="center">行内块元素</td> 
   <td align="center">同时具有块元素和行内元素的特点</td> 
   <td align="center">宽高内外边距均有效</td> 
   <td align="center">它本身内容的宽度</td> 
   <td align="center"></td> 
  </tr> 
 </tbody> 
</table>

#### 1.3 转换 ####

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th align="center">转块级元素</th> 
   <th align="center">转行内元素</th> 
   <th align="center">转行内块元素</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">display</td> 
   <td align="center">block</td> 
   <td align="center">inline</td> 
   <td align="center">inline-block</td> 
  </tr> 
 </tbody> 
</table>

## 2.position属性 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">position</th> 
   <th align="center"></th> 
   <th align="center">定位</th> 
   <th align="center">文档流</th> 
   <th align="center">偏移量</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">static</td> 
   <td align="center">默认</td> 
   <td align="center">无定位</td> 
   <td align="center">默认</td> 
   <td align="center">忽略</td> 
  </tr> 
  <tr> 
   <td align="left">relative</td> 
   <td align="center">相对定位</td> 
   <td align="center">相对于原本位置定位</td> 
   <td align="center">不脱离</td> 
   <td align="center">均可设置</td> 
  </tr> 
  <tr> 
   <td align="left">absolute</td> 
   <td align="center">绝对定位</td> 
   <td align="center">1)相对于已设置position的祖先元素定位。<br>2)无设置position的祖先元素,相对于body定位</td> 
   <td align="center">脱离</td> 
   <td align="center">均可设置</td> 
  </tr> 
  <tr> 
   <td align="left">fixed</td> 
   <td align="center">固定定位</td> 
   <td align="center">相对于浏览器窗口左上角进行定位</td> 
   <td align="center">脱离</td> 
   <td align="center">均可设置</td> 
  </tr> 
  <tr> 
   <td align="left">sticky</td> 
   <td align="center">粘性定位</td> 
   <td align="center">相对于浏览器进行定位,相当于relative+fixed,先相对后固定</td> 
   <td align="center"></td> 
   <td align="center">均可设置</td> 
  </tr> 
 </tbody> 
</table>

#### 问题 ####

*  `网站结构`三个层次:HTML结构层(标签结构)、CSS样式层(对标签结构的修饰)、JS的行为交互层(动态行为)
 *  `高度塌陷的产生` 是因为子元素浮动,到之后后面的元素上去补位置,之后产生的高度的降低;所以影响的是后面的补位置的元素;
 *  `CSS组成` 有两个部分:选择器和样式声明,样式声明中包含对应的属性和属性值。\[例\]-p\{属性:属性值\}
 *  `CSS基本语法`两个部分组成:选择器和\{\},样式规则是由属性和属性值组成的。
 *  `盒子模型`由四个部分组成的,内容(宽度高度),内边距,边框,和外边距。
 *  `margin:0 auto;`让元素实现在浏览器中的水平居中,同时还能实现子元素位于父元素中的水平居中位置。