一.浮动
    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 浮动 模态框 定位的更多相关文章

  1. 【html/css】模态框的实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. JS /CSS 实现模态框（注册和登录组件）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. CSS 浮动(float)与定位(position)

    一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ ...

  4. CSS浮动和各种定位

    CSS定位 css定位机制 文档流:元素按照在HTML中的位置决定排布的过程 块级元素是从上到下的,内联元素是从左到右的 浮动 position布局 position css position属性用于 ...

  5. Ajax发送请求等待时弹出模态框等待提示

    主要的代码分为两块,一个是CSS定义模态框,另一个是在Ajax中弹出模态框. 查看菜鸟教程中的模态框教程demo,http://www.runoob.com/try/try.php?filename= ...

  6. bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动，select选中跳转

    bootStrap模态框与select2合用时input不能获取焦点 在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 把 ...

  7. CSS之样式属性(背景固定、圆形头像、模态框)

    CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...

  8. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  9. web前端基础之SCC(定位-z-index模态框）

    目录 一:定位(position) 1.relative(相对定位) 2.absolute(绝对定位) 3.fixed(固定) 二:相对定位 1.相对定位 2.实现相对定位 三:绝对定位 1.实现绝对 ...

随机推荐

  1. 查找nginx安装的路径以及相关安装操作命令

    查找nginx安装的路径以及相关安装操作命令 Linux环境下,怎么确定Nginx是以那个config文件启动的? [root@localhost ~]# ps -ef | grep nginxroo ...

  2. SpringBoot之集成WebSocket

    websocket是什么不做介绍.开发环境:jdk1.8,win7_64旗舰版,idea   1.初始化一个springboot项目   2.加入websocket依赖 <!-- springb ...

  3. MySQL Crash Course #09# Chapter 17. Combining Queries: UNION

    INDEX UNION Rules WHERE VS. UNION UNION VS. UNION ALL Sorting Combined Query Results UNION Rules As ...

  4. SACD ISO镜像中提取DSDIFF(DFF)、DSF文件

                      听语音 | 浏览:5620 | 更新:2015-08-25 11:46 | 标签:硬件 1 2 3 4 5 分步阅读 现在有一种比较流行的无损音乐传输介质是SACD ...

  5. Python3 itchat实现微信定时发送群消息

    Python3 itchat实现微信定时发送群消息 一.简介 1,使用微信,定时往指定的微信群里发送指定信息. 2,需要发送的内容使用excel进行维护,指定要发送的微信群名.时间.内容. 二.py库 ...

  6. troubleshooting-When importing query results in parallel, you must specify --split-by.

    原因分析 -m 4 \ 导数命令中map task number=4,当-m 设置的值大于1时,split-by必须设置字段(需要是 int 类型的字段),如果不是 int类型的字段,则需要加上参数- ...

  7. 05: 配置yum源

    1.1 将镜像复制到本地创建yum源 1.将准备好的系统镜像放到指定的目录,本次目录指定在:/dawnfs/sourcecode 2.创建挂载目录:mkdir /mnt/yum 3.挂载镜像: mou ...

  8. CF#338D. GCD Table

    传送门 简单的中国剩余定理练习. 首先行数一定是$lcm$,然后只要确定最小的列数就能判定解合不合法了. 我们可以得到线性模方程组: $y \equiv 0 \pmod{a_1}$ $y+1 \equ ...

  9. SYSBIOS学习笔记---线程(Threads)

    在SYS/BIOS中,广义上指被处理器执行的任何独立的指令流.线程是一个能够调用一个函数或者中断服务程序的单点控制.在sysbios系统中一共有硬件中断(HWI).软件中断(SWI).任务(Task) ...

  10. luoguP2574 XOR的艺术

    思路 01串的区间求和,区间翻转 lazy%2==0 则不用翻转,lazt%2==1则要翻转 模板题 代码 #include <iostream> #include <vector& ...