44 CSS 浮动 模态框 定位
一.浮动
float ：
浮动的盒子不占原来的位置，其下方的盒子会上移
父盒子会发生塌陷现象。同一级盒子right浮动，同级左边的盒子需要左浮动，right浮动的盒子才能上来
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
二.定位
relative : 设置相对定位的盒子，相对自己原来的位置移动，且占原来的位置。 absolute：设置绝对定位的盒子，相对于relative属性的父盒子，且不占位置，可以压其他盒子 fix：
脱离文档流，根据窗口定位，一般用 返回顶部 顶部标签中设置id 属性或name属性，返回顶部标签a href="#id属性名或name属性名"
fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 总结：
浮动的盒子或position设置为：absolute | fixed 的盒子，都会出现脱离文档流的现象，父盒子塌陷
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。 一个浮动流，一个定位流 三.圆形头像的制作：
1.父盒子清除 overflow: hidden;
2.图片属性 max-width ：100% 四.层级：z-index
1.一般用在模态框
2.只有定位了的元素，才能有z-index,不管相对定位，绝对定位，固定定位，都可以使用z-index
3.浮动元素float不能使用z-index 五. 透明度
1.rgba(0,0,0,透明度值） 作用于该属性 ，如background :rgba(0,0,0,0.3) 只对盒子的背景色有效，对里面文字无效
2.opacity : 作用于整个元素， 背景和字体 的透明度都有效 六.清除浮动 1.clear
1.规定元素的哪一侧不允许其他浮动元素。
2.clear属性只会对自身起作用，而不会影响其他元素
3.属性
left 左边不能有浮动的盒子
right 右边不能有浮动的盒子
both ：两边不能有浮动的盒子
none：允许两边有浮动盒子 2.清除浮动的方法： 1.固定高度0 在父标签里面加一个其他的标签 div3
如
<div class="partent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<div class="div4"></div> div1 左浮动 div2 右浮动 ，设置div3 的高度为0 且div3中设置clear：both，防止div4 跑到div1和div2下层 2.伪元素清除法
给父级元素设置 ,防止div4 上来
.clearfix:after {
content: "";
display: block;
clear: both;
} <div class="partent clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="div4"></div> 3.overflow:
visible 不被剪，框外显示
hidden 被裁剪，多的不显示
scroll 浏览器 滚动条可以看其他内容
auto 浏览器通过滚动条显示其他内容
inherit 跟从父元素浮动效果
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
height: 200px;
width: 200px;
background: red;
}
.box2{
height: 400px;
width: 400px;
background: green;
}
.box3{
height: 200px;
width:100%;
background: red;
}
.box4{
width: 100px;
height: 40px;
background: aqua;
text-align: center;
line-height: 40px;
position: fixed;
left: 20px;
bottom: 40px;
}
</style> </head>
<body>
<a href="" name="ding">顶部</a>
<div class="box1">1</div>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4"><a href="#ding">回到顶部</a></div> </body>
</html>
回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px ;
border: 1px solid red;
border-radius: 50%;
overflow: hidden;
}
img{
max-width: 100%;
/*max-height: 100%;*/
}
</style> </head>
<body>
<div class="box">
<img src="高圆圆.jpg" alt="">
</div>
</body>
</html>
圆形头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 200px;
background: red;
float:left;
}
.div2{
width: 200px;
height: 200px;
background: green;
float: right;
} .div3{
clear:both;
width: 100%;
height: 0;
}
.div4{
width: 100%;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="partent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<div class="div4"></div> </body>
</html>
清除浮动1 父盒子 添加另一个子盒子宽设置为0，clear： both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 200px;
background: red;
float:left;
}
.div2{
width: 200px;
height: 200px;
background: green;
float: right;
}
.clearfix:after{
content:"";
display:block;
clear: both;
}
.div3{
width: 100%;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="partent clearfix">
<div class="div1"></div>
<div class="div2"></div> </div> <div class="div3"></div> </body>
</html>
伪元素清除法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 200px;
width: 150px;
border:1px solid red;
/*overflow:visible;*/
/*overflow: hidden;*/ overflow: scroll;
/*overflow: auto;*/
}
</style>
</head>
<body>
<div>
上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距
离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上
离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上
离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上海北京的距离上
海北京的距离上海北京的距离
</div> </body>
</html>
overflow 清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .box1{
height: 600px;
width: 100% ;
background: aqua ; }
.box2{
width: 100%;
height: 800px;
background: rgba(0,0,0,0.3);
position: absolute;
top:0;
left: 0;
z-index: 1000;
}
.box3{
width: 700px;
height:400px ;
border: 1px solid;
background: white;
position: fixed;
top:100px;
right:300px;
z-index: 1000; }
</style>
</head>
<body> <div class="box1">你好，hello boy</div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
模态框 z-index 定位的盒子用
44 CSS 浮动 模态框 定位的更多相关文章
- 【html/css】模态框的实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JS /CSS 实现模态框（注册和登录组件）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS 浮动(float)与定位(position)
一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ ...
- CSS浮动和各种定位
CSS定位 css定位机制 文档流:元素按照在HTML中的位置决定排布的过程 块级元素是从上到下的,内联元素是从左到右的 浮动 position布局 position css position属性用于 ...
- Ajax发送请求等待时弹出模态框等待提示
主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...
- bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动，select选中跳转
bootStrap模态框与select2合用时input不能获取焦点 在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 把 ...
- CSS之样式属性(背景固定、圆形头像、模态框)
CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- web前端基础之SCC(定位-z-index模态框）
目录 一:定位(position) 1.relative(相对定位) 2.absolute(绝对定位) 3.fixed(固定) 二:相对定位 1.相对定位 2.实现相对定位 三:绝对定位 1.实现绝对 ...
随机推荐
- Linux基础命令---chgrp
chgrp 改变文件或者目录所属的群组,使用参数“--reference”,可以改变文件的群组为指定的关联文件群组. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.o ...
- MySQL性能分析和优化
1. EXPLAIN 优化你的 SELECT 查询 2. 当只要一行数据时使用 LIMIT 1 3. 为搜索字段建索引 like %最好放右边 4. 尽可能的使用 NOT NULL 5. 在Join表 ...
- python之路----socketserver模块
socketserver import socketserver class MyServer(socketserver.BaseRequestHandler): def handle(self): ...
- sql study
-- ============================================= -- Author: lifu -- Create date: 2017-06-14 -- Descr ...
- P3627 [APIO2009]抢掠计划
P3627 [APIO2009]抢掠计划 Tarjan缩点+最短(最长)路 显然的缩点...... 在缩点时,顺便维护每个强连通分量的总权值 缩完点按照惯例建个新图 然后跑一遍spfa最长路,枚举每个 ...
- 20145321 《网络对抗技术》 MSF基础应用
20145321 <网络对抗技术> MSF基础应用 实验内容 掌握metasploit的基本应用方式以及常用的三种攻击方式的思路 主动攻击,即对系统的攻击,不需要被攻击方配合,这里以ms0 ...
- UVa 10891 Game of Sum - 动态规划
因为数的总和一定,所以用一个人得分越高,那么另一个人的得分越低. 用$dp[i][j]$表示从$[i, j]$开始游戏,先手能够取得的最高分. 转移通过枚举取的数的个数$k$来转移.因为你希望先手得分 ...
- C++for的几种方式
#include <algorithm> #include <vector> ////////////////////////////////////////////// , ...
- python_paramiko_SSHException Invalid requirement, parse error at
不加sleep(0.5)会出现SSHException: Invalid requirement, parse error at " '' "问题,原因暂时未知. 结论如下 如果不 ...
- Python3基础 map+lambda 将指定系列元素乘2
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...