前端复习----2018-12-15

Html

【css】

css引入方式：

• 内联式
• 嵌入式 （常用）
• 外链式 （常用）
  **

css选择器：

• 标签选择器：影响范围大，一般用来做通用设置，或用在层级选择器中。 权重（1）
• 类选择器（class=‘box’, .box{…}）：通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用。 权重（10）
• 层级选择器：主要应用在标签嵌套的结构中，多与上面两种选择器结合使用，减少命名，限制样式的作用范围。权重（需要计算）
• id选择器(id=‘test’, #test{…})：通过id名来选择元素，元素的id名称不能重复，一般给程序使用，所以不推荐使用id作为选择器。权重（100）
• 伪类选择器：常用的伪类选择器hover，表示鼠标悬浮在元素上时的状态。
• 内联选择器：写在标签内部的style属性。权重（1000）

css常用属性：

css盒子：

列表

1.无序列表（前面自带小黑点）

<ul>
	<li>内容</li>
	<li>内容</li>
	……
</ul>

2.有序列表（前面自带排序数字）

<ol></ol>

表单

表格

<table>
	<tr><td></td><tr>
	<tr><td></td><tr>
	……
</table>

表格常用属性

• colspan :单元格水平合并
• rowspan：单元格垂直合并
• border-collapse:collapse : 表格边线合并

css属性进阶

• 文本
  text-aline：center 文本居中
  text-indent: 24px 首行缩进
• 样式
  display:block 设置为块元素
  display:none 元素隐藏不占位置
• css元素溢出
  overflow:hidden 隐藏溢出内容；在父元素设置消除因子元素设置浮动所产生的父元素没有高度的问题。
  overflow:visible 内容不会被修剪，溢出的内容会呈现在框外。
  overflow:scroll 内容会被修剪，但是浏览器会显示滚动条来查看其它的内容
  overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

定位

posiltion：
1.absolute: 绝对定位-----对比父元素进行定位，且定位后自身原来位置的空间会回收
2.relative：相对定位------对比自身原来位置进行定位，且定位后自身原来位置的空间不会回收
3.fixed：固定定位------定位后页面滚动也不会影响位置
属性：
left
right
top
bottom
设置绝对居中

	left：0
	right：0
	top：0
	bottom：0
	margin：auto

设置左右居中

margin：auto

定位元素的层级：定位元素是浮动的正常的文档流之上的，可以使用z-index属性来设置元素的层级

JavaScript

定义

• 是运行在浏览器端的脚本语言
• 主要解决的是前端与用户之间的交互问题
• 嵌入页面的3种方式
  1.行内式<input type='button' name='btn' onclick="alert('弹出成功')">
  2.页面 script 标签引入
  3.外部引入 <script type="text/javascript" src="./name.js"></script>
  语法规范
  
  获取元素

var ys=document.getElementById('id标签名');
ys.onclick=function(){
	ys.innerHTML='HAHAH'
}