前端三
盒子模型
所有的标签都可以看成是一个快递盒
1.两个快递盒之间的距离 标签之间的距离 外边距(margin)
2.快递盒的厚度 标签的边框 边框(border)
3.盒子内物体距离盒子内壁 内部文本与边框的距离 内边距(padding)
4.物体自身的大小 标签内部的内容 内容(content)
需要掌握的操作
margin-top: 20px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 100px;
body标签自带8px的外边距
margin:0; 简写形式 作用于上下左右
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px; 上 左右 下
margin: 10px 20px 30px 40px; 上 右 下 左
margin还可以让内部标签居中展示
margin:100px auto 仅限于水平方向
padding使用方式与margin一致
浮动布局
float:left\right 页面布局必不可少的操作
浮动会造成父标签塌陷 这是一个不好的现象 因为会引起歧义
解决浮动造成的父标签塌陷
.clearfix:after {
content: '';
display: block;
clear: both;
}
提前写好上述的css操作 遇到标签塌陷就给标签加clearfix类值即可
"""浏览器针对文本是优先展示的(浮动的元素如果遮挡会想办法展示)"""
溢出属性
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
div {
height: 50px;
width: 50px;
border: 5px solid gold;
border-radius: 50%;
overflow: hidden;
}
div img {
max-width: 100%;
}
定位
static(静态)
所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一
relative(相对定位)
相对于标签原来的位置做定位
absolute(绝对定位)
基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)
相对于浏览器窗口做定位
z-index
浏览器界面其实是一个三维坐标系 z轴指向用户
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover {
background: rgba(127, 127, 127, 0.4);
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 99
}
.modal {
height: 200px;
width: 400px;
background: white;
z-index: 100;
position: fixed;
left: 40%;
top: 40%;
margin-top: -40px
}
label {
color: red
}
input {
color: red;
opacity: 0.5
}
span {
margin-left: 110px;
margin-top: 10px
}
</style>
</head>
<body>
<div></div>
<div class="cover"></div>
<div class="modal">
<form action="">
<p><label for="d9">username:<input id=d9 type="text" name="username"></label></p>
<p><label for="d8">password<input id=d8 type="password" name="password"></label></p>
<span><input type="submit" value="登陆"></span>
</form>
</div>
</body>
</html>
JavaScript简介
1.跟java没有关系 蹭热度
2.JavaScript与ECMAScript区别
3.版本迭代
4.JavaScript是一门编程语言(NodeJS)
5.html页面两种引入js的方式
6.两种注释语法
//
/**/
7.建议的结束符号是分号
JS变量与常量
"""
支持编写js代码的地方
1.pycharm
2.浏览器
"""
在JS中声明变量和常量都需要使用关键字
var:全局有效
let:如果在局部名称空间中使用 那么仅在局部名称空间有效
const:定义常量
JS也是动态类型:变量名绑定的数据值类型不固定
var name = 'jason'
name = 123
name = [11, 22, 33, 44]
JS数据类型之数值类型
"""
在js中查看数据类型可以使用 typeof
"""
在js中整型浮点型统称为数值类型number
parseInt() 转整数
parseFloat() 转小数
NaN:Not A Number 不是一个数字
JS数据类型之字符串类型
字符串string
var name = 'jason'
var name = "jason"
var name = `jason` 模板字符串
let age = 18
展位符 ${}
username = `my name is ${name} age is ${age}`
/*username= f' my name is {name} age is {age}' python语法*/
浙公网安备 33010602011771号