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常用命令：service 命令
service命令用于对系统服务进行管理,比如启动(start).停止(stop).重启(restart).查看状态(status)等.相关的命令还包括chkconfig.ntsysv等,chkcon ...
- 02: shell中的if、case、for等语句
目录: 1.1 shell中常用运算符 1.2 使用if条件语句 1.3 shell 中的for循环 1.4 shell中的while循环语句 1.5 使用case分支语句 1.1 shell中常用运 ...
- 20145314郑凯杰《网络对抗技术》恶意DLL注入进程（进程捆绑）的实现
20145314郑凯杰<网络对抗技术>恶意DLL注入进程(进程捆绑)的实现 一.本节摘要 简介:在这部分里,要实现将恶意后门悄无声息地与进程进行捆绑,通过和已运行的进程进行捆绑,达到附着攻 ...
- 20145330 《网络攻防》 MSF基础应用
20145330 <网络攻防> MSF基础应用 1.实验后回答问题 (1)用自己的话解释什么是exploit,payload,encode. exploit:进行渗透攻击的模块合集 pay ...
- 三星核S5PV210AH-A0 SAMSUNG
三星S5PV210AH-A0 S5PV210又名“蜂鸟”(Hummingbird),是三星推出的一款适用于智能手机和平板电脑等多媒体设备的应用处理器,S5PV210和S5PC110功能一样,110小封 ...
- 【第三十七章】 springboot+docker（手动部署）
一.下载centos镜像 docker pull hub.c.163.com/library/centos:latest docker tag containId centos:7 docker ru ...
- flink架构介绍
前言 flink作为基于流的大数据计算引擎,可以说在大数据领域的红人,下面对flink-1.7的架构进行逻辑上的分析并和spark做了一些关键点的对比. 架构 如图1,flink架构分为3个部分,cl ...
- ThreadPoolExecutor执行过程分析
ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTi ...
- 《C语言程序设计》指针篇<二>
通过指针引用多维数组 如何理解二维数组元素的地址? 要知道,这本书用了整整两页的内容来讲解这方面的知识,从这里足以看出来理解通过指针来引用二维数组是一件比较麻烦的事情,但是我认为理解并不难. 什么是二 ...
- 【Coursera】Security Introduction -Summary
对这门课程的安全部分进行一个小结. 往期随笔 第八周第一节 第八周第二节 第九周第一节 第九周第二节 前言:为什么互联网要提及安全 因为security牵扯到我们每一个人,有人每时每刻都想着要偷取别人 ...