标签：定位 浏览器 python 标签 100px 学习 var Day52 margin
Day 52
今日内容概要
- CSS属性
- 盒子模型
- 浮动布局
- overflow溢出属性
- 定位属性
- z-index层叠顺序
- opacity透明效果
- 手搭页面练习
- JavaScript
- 简介
- JS变量与常量
- JS数据类型—数值类型
- JS数据类型—字符串类型
今日内容详细
一.CSS属性
1.盒子模型
| 把标签比作盒子 |
解释 |
属性 |
| 两个盒子之间的距离 |
标签之间的距离 |
外边距(margin) |
| 盒子内物体距离盒子内壁 |
内部文本与边框的距离 |
内边距(padding) |
| 盒子的厚度 |
标签的边框 |
边框(border) |
| 物体自身的大小 |
标签内部的内容 |
内容(content) |
需要掌握的操作
margin-top: 20px; 和上边标签距离20px
margin-bottom: 100px; 和下边标签距离100px
margin-left: 100px; 和左边标签距离100px
margin-right: 100px; 和右边标签距离100px
#body标签自带8px的外边距
简写：
margin:0; 外边距上下左右都为0
margin: 10px 20px; 上下10 左右20
margin: 10px 20px 30px; 上10 左右20 下30
margin: 10px 20px 30px 40px; 上10 右20 下30 左40
margin还可以让内部标签居中展示
margin:0 auto 上下0,左右居中
margin:100px auto 上100px 左右居中
padding使用方式与margin一致
2.浮动布局
float:left\right 浮动朝左\右
页面布局必不可少的操作
浮动会造成父标签塌陷 这是一个不好的现象 因为会引起歧义
解决浮动造成的父标签塌陷：
1.提前写一个clearfix样式
.clearfix:after {
content: '';
display: block;
clear: both;
}
2.遇到标签塌陷就给标签最后加clearfix类值即可
<div class="c3 clearfix"></div>
"""浏览器针对文本是优先展示(浮动的元素如果遮挡会想办法展示)"""
3.overflow溢出属性
| 值 |
作用 |
| visible |
默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden |
内容会被修剪，并且其余内容是不可见的。 |
| scroll |
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto |
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit |
规定应该从父元素继承 overflow 属性的值。 |
1.制作圆形边框头像
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 200px; /*标签高宽200px*/
width: 200px;
border: 5px solid red; /*5px 线性 红色边框*/
border-radius: 50%; /*边框变成圆形*/
overflow: hidden; /*溢出属性—超出范围不显示*/
}
div img{
max-width:100%; /*与上面溢出固定搭配：无论边框多大,图片都是百分百显示*/
}
</style>
</head>
<body>
<div>
<img src="图片地址" alt="">
</div>
</body>
4.定位属性
static(静态)
所有的标签'默认都不能直接用left、top等值修改位置' 必须要切换成下面三种之一
relative(相对定位)
相对于标签原来的位置做定位
absolute(绝对定位)
基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)
相对于浏览器窗口做定位
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color: red;
height: 100px;
width: 100px;
position: relative; /*相对定位:相对于标签原位置做定位*/
left: 100px; /*距离左边标签100px*/
}
#d2{
background-color: blue;
height: 200px;
width: 500px;
position: absolute; /*绝对定位:基于已经定位过的父标签做定位*/
left: 100px; /*距离左边标签100px*/
top: 100px; /*距离上边标签100px*/
}
#d3{
height: 100px;
width: 100px;
border: 5px solid red; /*给标签加边框5px 线性 红色*/
position: fixed; /*固定定位:相对于浏览器窗口做定位*/
right: 100px; /*距离右边标签100px(由于是固定定位,所以是距离浏览器右侧)*/
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<div id="d3"></div>
</body>
/*绝对定位中 不管d1移动到什么位置,d2永远跟着d1一起移动*/
/*固定定位中 不管浏览器拉多宽,d3永远随着浏览器的宽度改变距离右侧100px位置*/
5.z-index 层叠顺序
浏览器界面其实是一个三维坐标系 z轴指向用户
z-index其实就是设置对象的层叠顺序
z-index: 99; #0以上都可以
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cover{
background-color: rgba(127,127,127,0.6);
position: fixed; /*固定定位*/
left: 0; /*距离浏览器上下左右都是0*/
right: 0;
top: 0;
bottom: 0;
z-index: 99; /*层叠顺序为99*/
}
.modal{
height: 200px;
width: 500px;
background-color: white;
position: fixed; /*固定定位*/
z-index: 999;
left: 50%; /*距离浏览器左边50%*/
top: 50%; /*距离浏览器上边50%**/
margin-left: -250px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>最下面</div>
<div class="cover"></div> /*中间层一般用cover*/
<div class="modal"> /*顶层一般用modal*/
<form action="">
<p>name:<input type="text"></p>
<p>pwd:<input type="text"></p>
</form>
</div>
</body>
6.opacity 透明效果
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
用于三层界面的样式
手搭页面练习
1.先分析页面结构
然后使用div和span构建出基本骨架
2.给标签起id和class便于后续查找并修改样式
id与class的命名也要做到见名知意
3.正儿八经的写不同的语言应该存储不同的文件
html文件、css文件、js文件
三.JavaScript
1.JavaScript简介
1.跟java没有关系 只是蹭热度 名字相似而已
2.JavaScript与ECMAScript区别
JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。但是商标问题，把这种语言称为ECMAScript，还有一个原因是保持这门语言的中立性和开发性，后面有将这门语言改为JavaScript。
3.版本迭代
现在用的最多的是第六版,老项目是第五版
4.JavaScript是一门编程语言(NodeJS)
脚本语言
一种轻量级的编程语言
可插入HTML页面的编程代码
插入HTML页面后，可由所有的现代浏览器执行
5.html页面两种引入js的方式
①Script标签内写代码
<script>
在这里写你的JS代码
</script>
②引入额外的JS文件
<script src="myscript.js"></script>
6.两种注释语法
//单行注释
/*多行注释*/
7.建议的结束符号是分号(也可以不写,建议写上)
2.JS变量与常量
"""
支持编写js代码的地方
1.pycharm
2.浏览器
右键>>检查>>Console/控制台（编写JS代码的地方）
注：换行用Shift+Enter
"""
在JS中声明变量和常量都需要使用关键字
var:全局有效
var s1='hello'
let:在局部名称空间中使用，仅在局部名称空间有效(定义更精确)
let s2='张三'
const:定义常量（定义后如果要修改常量的值会报错）
const pi = 3.14
注：变量名区分大小写
命名推荐使用驼峰式
3.JS数据类型—动态类型
1.拥有动态类型
var x; // 此时x是undefined(未定义)
var x = 1; // 此时x是数字
var x = "Alex" // 此时x是字符串
变量名可以绑定的数据类型是不固定的
4.JS数据类型—数值类型number
#在js中查看数据类型可以使用 typeof
typeof n typeof a
1.数值number
//不区分整型和浮点型，就只有一种数字类型
var a = 12.34;
var b = 20;
2.NaN
用typeof NaN 时结果也是number
NaN:表示不是一个数字（Not a Number）
2.数据类型转换parseInt
parseInt("123") //结果返回123
parseInt("123.921") //结果返回123
parseFloat("123") //结果返回123
parseFloat("123.1") //结果返回123.1
parseInt("ABC") //结果返回NaN
5.JS数据类型—字符串类型string
定义字符串的方式
var name = 'hello' 单引号
var name = "world" 双引号
模板字符串：支持格式化输出
var name = 'zz'
var age = 18
var s1 = `我名字是${name},年龄是${age}`
| 内置方法 |
说明 |
| .length |
返回长度 |
| .trim() |
移除空白 |
| .trimLeft() |
移除左边的空白 |
| .trimRight() |
移除右边的空白 |
| .charAt(n) |
返回第n个字符 |
| .concat(value, ...) |
拼接 |
| .indexOf(substring, start) |
子序列位置 |
| .substring(from, to) |
根据索引获取子序列 |
| .slice(start, end) |
切片 |
| .toLowerCase() |
小写 |
| .toUpperCase() |
大写 |
| .split(delimiter, limit) |
分割 |
内置方法中：
涉及到拼接时推荐使用+号
var a = "Hello"
var b = "world;
1. var c = a + b;//得到Helloworld
2. console.log(a,c);//得到Hello world
作业
1.整理今日及博客
2.练习简易博客界面
3.去github网站上搜博客园样式项目 查看前端相关代码编写
4.预习明日内容 js篇
标签：定位,
浏览器,
python,
标签,
100px,
学习,
var,
Day52,
margin
From： https://www.cnblogs.com/Oreoxx/p/16622711.html