day53 html收尾
2024-08-27 18:07:07
一、解决浮动带来的影响
块级标签内的浮动如果该块级标签本身没有大小,浮动造成的结果就是父标签塌陷
Q:什么是父标签塌陷?
A:块级标签本身只有width(页面宽度),默认height为0,块级标签的高度是根据标签内的标签的大小决定的,如下图
外层边框表示一个div,这个标签本身没有高度,它的高度是被它所包含的标签撑起来的。这个时候我们把里面两个标签设置浮动,如下图
两个方块由于设置了浮动,它们本身已经不占div的空间了,只是显示在这上面,div内部没有支撑,所以塌陷了。
解决这个问题有三个方法:
方式一、父标签设定高度
给父标签设置一个能容纳浮在上面标签的大小的高度即可
方式二、利用clear属性
在父标签内部最后加一个div,只给他设置一个属性clear:left
这个属性表示,这个标签的左边不能有任何浮动元素,它会把父标签扩展到能容纳浮动标签的大小。
方式三、提前写好解决的css代码(最好的方式)
.clearfix:after{ # 标签:after表示在这个标签后面加
content:''; # 加的内容
display:block; # 把这个标签设置成块级标签(块级才有宽度)
clear:both; #左右两边都不能有浮动元素
}
# 给父标签继承这个类即可
二、溢出属性
当文字内容超过我们标签大小时,会造成溢出效果,如下图
解决方法有两种
方案一、隐藏溢出部分
设置标签的overflow:hidden
方案二、设置成滚动条形式
设置标签的overflow:scroll/auto
三、定位
- 静态
- 所有的标签默认都是静态的(static),无法改变位置
- 相对定位(了解)
- 相对于标签原来的位置做移动(relative)
- 绝对定位(常用)
- 相对于已经定位过的父标签做参照移动,如果没有父标签默认参照body(absolute)
- 固定定位(常用)
- 相对于浏览器窗口固定在某个位置(fixed)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#d1{
height: 100px;
width: 100px;
background-color: red;
position:relative;
top: 50px;
left: 50px;
}
#outer{
border: 1px black solid;
height: 50px;
width: 50px;
position: relative;
}
#d2{
height: 100px;
width: 100px;
background-color: lightcoral;
position:absolute;
top: 50px;
left: 50px;
}
#d4{
position: fixed;
width: 50px;
height: 50px;
border: 1px blue solid;
bottom: 10px;
right: 10px;
}
</style>
<body>
<!--<div id="d1">相对定位</div>-->
<div id="outer">
<div id="d2">绝对定位</div>
</div>
<div style="height: 1000px;background-color: lightcoral"></div>
<div></div>
<div id="d4">go!</div>
</body>
</html>
四、验证浮动和定位是否脱离文档流
判断是否脱离文档流就看原来的空间能不能被其他标签占用
- 脱离
- 浮动、绝对定位、固定定位
- 不脱离
- 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
height: 50px;
width: 50px;
float: left;
background-color: blue;
}
#d2{
height: 50px;
width: 59px;
/*float: left;*/
background-color: black;
}
#d3{
height: 50px;
width: 50px;
background-color: blue;
position: fixed;
/*position: absolute;*/
/*position: fixed;*/
top: 50px;
left: 50px;
}
#d4{
height: 50px;
width: 50px;
background-color: black;
}
</style>
</head>
<body>
<!--<div id="d1"></div>-->
<!--<div id="d2"></div>-->
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
五、z-index模态框
就是根据不同的z-index值表示所处的层级,越高越优先,默认为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#cover {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 99;
}
#login{
position: fixed;
left: 390px;
top:180px;
z-index: 100;
border: 1px solid palegoldenrod;
background-color: #ffffee;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div style="background-color: red">
<p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>
<p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>
<p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>
<p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>
<p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>
<p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>
<p>dasasdasdasdadasdasasdasdasdasdddddddddddddddddddd</p>
</div>
<div id="cover"></div>
<div id="login">
<p>
姓名:<input type="text">
</p>
密码:<input type="text">
</div>
</body>
</html>
六、透明度opacity
可以修改颜色的透明度也可以修改字体的透明度,取值范围0~100%
注意在标签中使用透明的是整个标签
七、js简介
js是一款可以编写后端和前端的编程语言
ECMAScript和JavaScript的关系:前者是后者的规格,后者是前者的一种实现。
JS版本:主要还是用的5.1和6.0
js的特点
- JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
- JavaScript 很容易学习
js的注释
// 单行注释
/*
多行注释
多行注释
多行注释
*/
js学习流程
- 变量
- 数据类型
- 流程控制
- 函数
- 对象
- 内置方法/模块
变量
/* js中 首次定义一个变量名的时候需要关键字声明
1 var
var name='hz'
2 let(js6推出的新语法)
let name='hz'
js6才能使用,之前不行
*/
// var与let的区别
n = 10
for n in range(5):
print(n)
print(n)
// var 5 let 10
//var在for循环里定义会影响全局,let只在局部生效
常量
// js中用const关键字定义常量
const pi = 3.14
最新文章
- 【LeetCode OJ】Symmetric Tree
- SSH框架配置释义
- 学习(主题或切入点)checklist1
- whois配置
- openstack安装、卸载与启动
- C#操作config文件
- 備份Sqlite DB到XML文件:
- C#字符串string的常用使用方法
- HDU 5224 Tom and paper(最小周长)
- Chinese_PRC_CI_AS and SQL_Latin1_General_CP1_CI_AS类型错误
- react中对于context的理解
- python day1 之三级菜单的正确姿势
- 网络赛 I题 Max answer 单调栈+线段树
- sscanf的字符串格式化用法
- JAVA常用的异常处理情况
- float double 如何存储计算2 (这个写的也不错)
- StreamSets学习系列之StreamSets的Create New Pipeline(图文详解)
- hdu3038 How many answers are wrong【并查集】
- tf.transpose函数解析
- Python print ";hello world"; SyntaxError: invalid syntax