假期修行10

今天继续学习CSS 以下是学习的内容
浮动: 浮动后元素脱离文档流 只有左右浮动没有上下浮动
元素向左浮动：相当于折叠

<body></body>有如下代码 <div class= “box”></div> <div class= “container”></div> <head></head>有如下代码 .box{ width: 200px； height: 200px; background-color: aqua; } .container{ width: 400px； height: 400px; background-color: blueviolet; } 在.box中加入float：left;后 脱离标准流 当横向摆放空间不足时，元素会在下一行出现 清除浮动 浮动副作用： 浮动元素会造成父元素高度塌陷 后续元素会受到影响 <head></head>中有如下代码 .container{ width: 500px; background-color: #888; } .box{ width: 100px; height: 100px; background-color: aqua; margin: 5px; float:left; } .text{ width: 100px; height: 100px; background-color: blueviolet; } <body></body>中有如下代码 <div class=”container”> <div class=”box”></div> <div class=”box”></div> <div class=”box”></div> <div class=”text”></div> </div> 运行后 大方框container消失 text方框与蓝色方框重叠

清除浮动有四种方式
1.父元素设置高度
在.container中加入height:500px;
2.受影响元素加入clear
在.text中加入clear:both;
3.overflow清除浮动
在.container中加入
overflow: hidden;
clear: both;
在.text中加入clear:both;
4.伪对象
在</.head> .container{}后加入
.container::after{
content:””;
overflow: hidden;
clear: both;
}
定位
position
值：
relative 相对定位
absolute 绝对定位
fixed 固定定位
其中，绝对定位和固定定位会脱离文档流
设置定位之后：可以使四个方向值进行调整位置 left top right bottom
1.相对定位 中有如下代码
div{
width:200px;
height:200px;
background-color:red;
position:relative;
left:200px;
top:100px;
}
未使用定位 使用定位

2.绝对定位

<head></head>中有如下代码 .box1{ width:200px; height:200px; background-color:red; position:absolute; left:200px; top:100px; } 未使用定位 使用定位

该定位可以脱离文档流
设置几层就几层
3.固定定位
.box1{
width:100px;
height:100px;
background-color:red;
position:fixed;
right:100px;
bottom:100px;
}
未使用定位 使用定位 （浏览器偏右下）

基本只用到1个固定定位
该定位随着页面滚动不变
设置定位之后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。

posted @   被迫敲代码  阅读(2)  评论(0)  编辑  收藏  举报
相关博文：
·  假期修行9
·  假期修行7
·  CSS结尾
·  CSS----4
·  No.22 CSS--浮动
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示