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://单行	/*多行*/
        # 模板注释语法

posted @ 2022-02-10 18:55 hai起奈阅读(30) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Luz

css快速入门(四)

浮动

浮动之页面布局

行内行外一行显示

左右浮动

实际应用

浮动的负面影响

解决父标签塌陷的方法

浮动案例

关键词clear:

通过解决策略

定位

实例

是否脱离文档流

溢出属性

实操

z-index属性

实操

透明度

实操

JavaScript

JavaScript补充

公告