css快速入门(四)
浮动
浮动。什么是浮动？元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
用于设置元素是否浮动，absolute（绝对）定位的元素会忽略float属性
浮动之页面布局
| 属性值 | 描述 |
|---|---|
| none | 默认值，元素不浮动 |
| left | 元素左浮动 |
| right | 元素右浮动 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 100px;
height: 100px;
background-color: red;
/*display: inline-block; !*不推荐使用*!*/
/*float: left;*/
}
#d2 {
width: 100px;
height: 100px;
background-color: greenyellow;
/*display: inline-block; !*不推荐使用*!*/
/*float: right;*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
行内行外一行显示
/*display: inline-block; */ 不推荐使用
左右浮动
float: left;
float: right;
实际应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 20%;
height: 1000px;
background-color: red;
float: left;
}
#d2 {
width: 80%;
height: 1000px;
background-color: greenyellow;
float: right;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
浮动的负面影响
# 浮动带来的负面影响
"""
会造成父标签塌陷!!!
"""
解决浮动的负面影响
1.再写一个div撑场面(不可取)
2.关键词clear(可以使用)
3.通过解决策略(推荐使用):只要父标签塌陷了就使用
- 浮动可以使块级标签居于一行，以及可以实现文字环绕图片的效果等，因为浮动顾名思义，漂浮起来，并不是二维的画面了，对比浮动前是三维的画面；
- 浮动也有负面影响，会造成父标签的塌陷；
父标签塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塌陷</title>
<style>
body {
/*与边框对其*/
margin: 0;
}
#d1 {
/*上下左右一致边框 指定边框颜色*/
border: 3px solid black;
}
#d2 {
/*高度*/
height: 100px;
/*宽度*/
width: 100px;
/*背景颜色*/
background-color: red;
/*向左浮动*/
float: left;
}
#d3 {
/*高度*/
height: 100px;
/*宽度*/
width: 100px;
/*背景颜色*/
background-color: green;
/*向左浮动*/
float: left;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">A</div>
<div id="d3">B</div>
</div>
</body>
</html>
解决父标签塌陷的方法
- 写一个同比的块级标签后台撑场面（不可取）
#d4 {
/*高度*/
height: 100px;
}
- 使用clear属性清除浮动（可以使用）
#d4 {
/*该标签的左边(地面和空中)不能有浮动元素*/
clear: left;
- 通用解决策略（非常推荐）：
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
/*空的内容独占一行*/
content: '';
display: block;
/*左右两侧都不能有浮动*/
clear: both;
}
之后只要标签出现了塌陷的问题就给该塌陷的div标签加一个class=“clearfix”属性即可
ps：浏览器默认都是文本优先展示
浮动案例
<style>
.layout {
width: 120px;
height: 300px;
margin: 10px;
background-color: cadetblue;
float: left;
}
.content {
width: 340px;
height: 300px;
margin: 10px;
background-color: powderblue;
float: left;
}
footer {
width: 500px;
height: 40px;
background-color: darkseagreen;
}
</style>
<main>
<section class="layout flex-center">侧边栏</section>
<section class="content flex-center">内容</section>
</main>
<footer></footer>
<!--
在以上代码使用浮动实现两列布局中，main中的section都为浮动元素，main元素的高度为0无法被撑开
main后的footer元素在页面布局时无法在main后正常显示（如下图）
-->
section元素左浮动，此时将footer元素左侧浮动清除，即可将footer元素置于main元素下方
/* 清除左右两侧浮动 */
footer {
clear: both;
}
/* 或清除左侧浮动*/
footer {
clear: left;
}
关键词clear:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 20px;
height: 100px;
background-color: yellow;
display: inline-block;
float: left;
}
#d2 {
width: 20px;
height: 100px;
background-color: green;
display: inline-block;
float: left;
}
#d3 {
border: solid black 5px;
}
#d4 {
clear: left;
border: 1px solid red;
}
.clearfix:after {
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div id="d3" class="clearfix">
<div id="d1"></div>
<div id="d2"></div>
<div id="d4"></div>
</div>
</body>
</html>
通过解决策略
.clearfix:after {
content: '';
clear: both;
display: block;
}
<div id="d3" class="clearfix">
<div id="d1"></div>
</div>
# 实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 20px;
height: 100px;
background-color: yellow;
display: inline-block;
float: left;
}
#d2 {
width: 20px;
height: 100px;
background-color: green;
display: inline-block;
float: left;
}
#d3 {
border: solid black 5px;
}
.clearfix:after {
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div id="d3" class="clearfix">
<div id="d1"></div>
<div id="d2"></div>
</div>
</body>
</html>
"""
自定义浮动边距为0,所以d1,d2中间没有空隙
"""
定位
静态定位 static
所有的标签'默认'都是静态定位即不能改变位置
相对定位 relative
相对标签原来的位置做定位
绝对定位 absolute
相对已经定位过的父标签做定位(没有则参考body标签)
固定定位 fixed
相对浏览器窗口做定位
如何使用css完成定位
定位关键字position
位置关键字left,right,top,bottom
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
width: 100px;
height: 100px;
background-color: red;
position: relative; /*修改标签的定位方式*/
top: 100px;
left: 100px;
}
#d2 {
width: 200px;
height: 200px;
background-color: greenyellow;
position: absolute;
top: 100px;
left: 100px;
}
#d3 {
border: 3px solid black;
position: fixed;
right: 50px;
bottom: 100px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">啥也没有</div>
</div>
<div id="d3">回到顶部</div>
</body>
</html>
是否脱离文档流
#标签位置改变之后 原来的位置是否会空出来
如果空出来被其他标签自动占有
浮动、定位
脱离文档流
浮动、绝对定位、固定定位
不脱离文档流
相对定位
溢出属性
实操
# 需要要导入文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
width: 100px;
height: 100px;
border: 3px solid black;
border-radius: 50%;
overflow: hidden;
}
#d1 img {
/*max-width: 100%;*/
width: 100%;
}
</style>
</head>
<body>
<div id="d1" >
<img src="1.jpg" alt="">
</div>
z-index属性
# 浏览器平面不是一个二维坐标系而是一个三维坐标系
eg:百度登录或者退出界面>>>:三明治结构(模态框)
实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#cover {
background-color: rgba(124,124,125,0.5);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
}
#modal {
width: 800px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top: 50%;
z-index: 1000;
margin-left: -400px;
margin-top: -200px;
}
</style>
</head>
<body>
<div id="content">我是最底层的文本内容</div>
<div id="cover"></div>
<div id="modal">
<h2>注册页面</h2>
<form action="">
<p>username:
<input type="text">
</p>
<p>password:
<input type="text">
</p>
<input type="submit">
</form>
</div>
</body>
</html>
透明度
rgba(124,124,124,0.5)
只影响颜色
opacity:0.5
影响颜色和字体
实操
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: rgba(124,124,124,0.5);
}
p {
background-color: rgb(124,124,124);
opacity: 0.5;
}
</style>
</head>
<body>
<div>
快要吃饭了 好激动
</div>
<p>
人生的意义和价值在哪里
</p>
</body>
</html>
JavaScript
# JavaScript简称JS 与Java没有关系!
# JS是一门编程语言
# JS是一门编程语言但是逻辑非常的不严谨
# JS很容易...
JavaScript补充
类中引入方式
1.script标签内直接编写(学习时使用)
2.script标签src属性导入外部js文件(最正规)
注释语法
html:<!--注释语法-->
css:/**/
JS://单行 /*多行*/
# 模板注释语法
