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常用命令：at 命令
在windows系统中,windows提供了计划任务这一功能,在控制面板 -> 性能与维护 -> 任务计划, 它的功能就是安排自动运行的任务. 通过'添加任务计划'的一步步引导,则可建立一 ...
- linux 中的定时任务crontab使用方法
linux 中的定时任务crontab使用方法: 切换到root用户,sudo su root (可以设置成不需要输入密码) sudo su - (需要输入当前帐号的密码才能进入.) crontab ...
- ajax return true/false无效原因
错误示例:function checkCP(customerId,productId){ $.ajax({ url:"/cp/checkCP", type:"post&q ...
- python之路----socketserver模块
socketserver import socketserver class MyServer(socketserver.BaseRequestHandler): def handle(self): ...
- 什么叫集群、分布式，分布式与集群有什么区别？（康神sf讲座学习笔记）
集群是物理形态,分布式是工作方式. 只要一堆机器放在那里,就是集群.比如Nginx后面的十台服务器,就是一个集群 分布式将任务放在多个物理隔离的节点上进行. 分布式中各个子节点互不通信,统一受管控中心 ...
- 基于Android的闹钟的软件
一.本课题要求:设计一个基于Android的闹钟的软件. 实现的功能有:能通过界面设置闹钟的启动条件建立后台服务进程,当满足触发条件时,闹钟响应相应事件. 二.需求分析 该课题实现在手机操作系统And ...
- cmd命令分类
1.系统功能类 AT:计划在计算机上运行的命令和程序.ATTRIB:显示或更改文件属性.BREAK:设置或清除扩展式 CTRL+C 检查.CACLS:显示或修改文件的访问控制列表(ACLs).CALL ...
- Python3基础 生成器推导式 简单示例
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- JS高级语法与JS选择器
元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...
- 调试工具--console用法收藏
1.使用console进行性能测试和计算代码运行时间:http://www.cnblogs.com/0603ljx/p/4387628.html 2.console命令详解:http://www.cn ...