前端第二次培训-
一.css盒模型
1.盒子属性：
-
margin: 盒子边缘距
margin:25px 50px 75px 100px; // 顺序：上 右 下 左 margin:25px 50px 75px; // 顺序：上 (左右) 下 margin:25px 50px; // 顺序：上下 左右 margin:25px; // 顺序：所有方向 -
border：边框
border-style: 边框样式（dotted/dashed/solid/doble/groove/ridge/inset/outset）
border-width: 边框宽度（1px）
border-width: 边框颜色（red）
border-radius: 圆角（10px）
简写：
border: 5px solid red;分开设置：
border-style:dotted solid double dashed; // 顺序：上 右 下 左 border-style:dotted solid double; // 顺序：上 (左右) 下 border-style:dotted solid; // 顺序：上下 左右 border-style:dotted; // 顺序：所有方向 -
padding：边框与内容之间的距离
padding:25px 50px 75px 100px; // 顺序：上 右 下 左 padding:25px 50px 75px; // 顺序：上 (左右) 下 padding:25px 50px; // 顺序：上下 左右 padding:25px; // 顺序：所有方向 -
content：内容(默认100%)
2.块级元素与内联元素
-
块级元素：独占一行
-
内联元素（行内元素）:高、宽无效，靠文本与图像来支撑结构
-
行内块元素：和相邻的行内块元素排在同一行，可以控制行高、外边距、内边距
-
display: 标签显示模式转换
//块转行内：
display: inline;
//行内转块：
display: block;
//块级元素/行内元素转为行内块级元素：
display: inline-block;3.float浮动
float: left; //左浮动
float: right; //右浮动
float: none; //无浮动给块级元素均设置左（右）浮动也可实现从左（右）到右（左）行内排列
4.弹性盒子
弹性容器+弹性子元素
display:flex/inline-flex
-
主轴对齐
justify-content: space-between两侧无缝中间均分
justify-content: space-around两侧缝隙为中间缝隙的二分之一
justify-content: space-evenly空隙一样大
justify-content: center水平居中
-
侧轴对齐
align-items：flex-start紧贴上边缘
align-items：flex-end紧贴下边缘
align-items：center居中，溢出距离相同
align-items：stretch
二. js
1.变量与赋值
弱定义：let var，建议使用var
const用于声明常量
2.object对象
- 创建对象：
var person = {
firstname: "John",
age: "20";
}- 对象+.运算符+属性名称可以调用对象属性：
person.firstname
person.age- 数组、函数等赋值时赋的是地址
3.函数
- 函数声明：
function f1(){
//执行语句
}
- 通过点击按钮实现函数调用：
<html>
<button onclick="f1()">弹窗<button>
</html>
<script>
function f1(){
windows.alert('hello');
}
</script>4.循环语句
- while循环
while(条件){
执行语句
}- do-while循环
do{
执行语句
}while(条件);- for循环
for(int i=0;i<=10;i++){
执行语句
}5.分支语句
if(条件1){
执行语句
}else if(条件2){
执行语句
}else{
执行语句
}6.API
js已经写好的函数
windows.alert('')//弹出警告窗
console.log('')//在控制台打印信息
document.write('')//在页面输出7.获取数据
- input标签
<form name="form1">
<input type="text" id="myinput" name="myinput">
</form>- 获取数据的方法：
1）formname.inputname.value
b=form1.myinput.value;2）document.getElementById(inputid).value
num=document.getElementById(myinput).value8.Dom树(文档对象模型)
每个元素只能有一个父元素，但可以有多个子元素
- 作用：对文档中的属性、标签、内容等进行访增删改
<div class="div">
这是一个div元素
</div>
<p id="p">
这是一个p元素
</p>- 访问：
var p = document.getElementById('p');
var div1 = document.getElementByClass('div');
var div2 = document.getElementByTagName('div');- 增加：
var a = document.createElement('a')//新建一个a元素
document.body.append(a)- 删除：
document.body.removeChild(div)-
修改
innerHTML
div.innerHTML = '修改div的文本内容'
document.getElementById('div').innerHTML = a;三.作业
思路：
1）首先系统生成一个一到一百之间的随机数；
2）js获取输入框的数据；
3）使用if-else语句判断是大了小了还是正好，通过alert来告诉用户；
拓展：
1.页面：
按钮圆角：border-radius
按钮阴影：box-shadow
hover鼠标事件：鼠标经过时颜色加深
active鼠标事件：鼠标点击时有按下按钮的效果
2.评分：
1）使用二分法猜数时最多猜7次，我们把7次设置为及格线；
2）计算用户猜数的次数，可以根据用户点击提交按钮的次数来算；
3.交换角色
1）设置输入框让用户输入一个1-100之间的数字，并通过js获取；
2）设置三个按钮，供用户判断大了小了还是正好
3）根据用户的回应，计算机再次进行猜测，如果大了，high=mid-1，小了，low=mid+1，然后计算出新的猜测值mid=（high+low）/2
