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.实现绝对 ...
随机推荐
- DIV内容垂直居中
css垂直居中属性设置vertical-align: middle对div不起作用,例如: <!DOCTYPE html> <html lang="zh-CN"& ...
- 最新版Intellij IDEA插件JRebel 7.0.7官方免费激活
本文转自:http://blog.csdn.net/u012283609/article/details/70213307 开场语 有时候真实比小说更加荒诞,因为虚构是在一定逻辑下进行的,而现实往往毫 ...
- python3.4学习笔记(八) Python第三方库安装与使用，包管理工具解惑
python3.4学习笔记(八) Python第三方库安装与使用,包管理工具解惑 许多人在安装Python第三方库的时候, 经常会为一个问题困扰:到底应该下载什么格式的文件?当我们点开下载页时, 一般 ...
- MATERIALIZED VIEW-物化视图
Oracle的实体化视图提供了强大的功能,可以用在不同的环境中,实体化视图和表一样可以直接进行查询.实体化视图可以基于分区表,实体化视图本身也可以分区. 主要用于预先计算并保存表连接或聚集等耗时较多 ...
- 使用 jQuery 进行前端验证
前段验证脚本的教程,其基础为jQuery的插件validate. 一.可以验证哪些信息 要求输入不能为空 要求输入格式必须为电子邮箱 要求输入格式必须为URL 要求输入格式必须为日期 要求输入格 ...
- OpenCV中HSV颜色模型及颜色分量范围
HSV颜色模型 HSV(Hue, Saturation, Value)是根据颜色的直观特性由A. R. Smith在1978年创建的一种颜色空间, 也称六角锥体模型(Hexcone Model)..这 ...
- 04：sqlalchemy操作数据库
目录: 1.1 ORM介绍(作用:不用原生SQL语句对数据库操作) 1.2 安装sqlalchemy并创建表 1.3 使用sqlalchemy对表基本操作 1.4 一对多外键关联 1.5 sqlalc ...
- Linux系统对IO端口和IO内存的管理
引用:http://blog.csdn.net/ce123_zhouwei/article/details/7204458 一.I/O端口 端口(port)是接口电路中能被CPU直接访问的寄存器的地址 ...
- git如何列出分支之间的差异commit
答:使用git log master..diff_master 这样就可以列出在diff_master分支中包含的commit而在master分支中不包含的commit
- Linq join right join left join
代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...