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.实现绝对 ...
随机推荐
- shell字符串操作技巧
操作字符串 -------------- Bash支持超多的字符串操作,操作的种类和数量令人惊异.但不幸的是,这些工具缺乏集中性. 一些是参数替换的子集,但是另一些则属于UNIX的expr命令.这就导 ...
- Python入门之python装饰器的4种类型：函数装饰函数、函数装饰类、类装饰函数、类装饰类
一:函数装饰函数 def wrapFun(func): def inner(a, b): print('function name:', func.__name__) r = func(a, b) r ...
- Centos文件切割利器_split命令及cat命令合并文件
有个文件要处理,因为很大,所以想把它切成若干份,每份N行,以便并行处理.split命令可以将一个大文件分割成很多个小文件,有时需要将文件分割成更小的片段,为提高可读性,生成日志等 命令格式 -b:值为 ...
- 20145127《java程序设计》第一次实验
<java程序设计>第一次实验 实验内容及其步骤 1.使用JDK编写简单的Java小程序: Java编译的方法有很多,最基础最简单的就是使用命令行,记事本,Java虚拟机直接进行编译,下面 ...
- 20145213《网络对抗》逆向及Bof基础
实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...
- linux内核分析 第六周
一.进程的描述 为了管理进程,内核必须对每个进程进行清晰的描述,进程描述符提供了内核所需了解的进程信息. 1.进程控制块PCB--task_struct 进程状态 进程打开的文件 进程优先级信息 2. ...
- UVa 714 Copying Books - 二分答案
求使最大值最小,可以想到二分答案. 然后再根据题目意思乱搞一下,按要求输出斜杠(这道题觉得就这一个地方难). Code /** * UVa * Problem#12627 * Accepted * T ...
- luogu P4396 [AHOI2013]作业
目录 题目 思路 错误&&傻叉 代码 题目 luogu 思路 每次都是插入比之前所有数字大的数,所以之前的答案就不会改变 用fhq-treap求出原序列,然后用树状数组依次算出每个值得 ...
- hystrix两种隔离模式分析
hystrix隔离模式目前有两种方式:信号量模式和线程池模式. 但信号量并不支持超时,当被调服务发生问题时,有少部分用户会长时间无法得到响应. 另外,使用线程池模式无法传递Header,我估计是由于线 ...
- 网页图片提取助手(支持背景图、选择dom范围)
网页图片提取助手(支持背景图.选择dom范围) 网页图片下载工具.网页图片批量保存. 使用场景: 作为web前端开发首——学习小生的你我,仿学在线页面是常有的事,但是一些在线资源,比如图片,图片有im ...