溢出属性

p {

            height: 100px;

            width: 50px;

            border: 3px solid red;

            /*overflow: visible;  !*默认就是可见 溢出还是展示*!*/

            /*overflow: hidden;  !*溢出部分直接隐藏*!*/

            /*overflow: scroll;  !*设置成上下滚动条的形式*!*/

            /*overflow: auto;*/

        }

定位

  • 静态

    所有的标签默认都是静态的static，无法改变位置

  • 相对定位(了解)

    相对于标签原来的位置做移动relative

  • 绝对定位(常用)

    相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)

    eg:小米网站购物车

    当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位

  • 固定定位(常用)

    相对于浏览器窗口固定在某个位置

    eg:右侧小广告

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        body {

            margin: 0;

        }

        #d1 {

            height: 100px;

            width: 100px;

            background-color: red;

            left: 50px;  /*从左往右   如果是负数 方向则相反*/

            top: 50px;  /*从上往下    如果是负数 方向则相反*/

            /*position: static;  !*默认是static无法修改位置*!*/

            position: relative;

            /*相对定位

            标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签

            虽然你哪怕没有动 但是你的性质也已经改变了

            */

        }

​

        #d2 {

            height: 100px;

            width: 200px;

            background-color: red;

            position: relative;  /*已经定位过了*/

        }

        #d3 {

            height: 200px;

            width: 400px;

            background-color: yellowgreen;

            position: absolute;

            left: 200px;

            top: 100px;

        }

​

        #d4 {

            position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/

            bottom: 10px;

            right: 20px;

​

            height: 50px;

            width: 100px;

            background-color: white;

            border: 3px solid black;

        }

    </style>

</head>

<body>

<!--    <div id="d1"></div>-->

​

<!--<div id="d2">-->

<!--    <div id="d3"></div>-->

<!--</div>-->

​

<div style="height: 500px; color: rgb(152, 26, 26);">></div>

<div style="height: 500px; color: rgb(152, 26, 26);">></div>

<div style="height: 500px; color: rgb(152, 26, 26);">></div>

<div id="d4">回到顶部</div>

​

</body>

</html>

ps:浏览器是优先展示文本内容的

验证浮动和定位是否脱离文档流(原来的位置是否还保留)

"""

浮动

相对定位

绝对定位

固定定位

"""

# 不脱离文档流

    1.相对定位

# 脱离文档流

    1.浮动

  2.绝对定位

  3.固定定位

<!--<div style="height: 100px;width: 200px;position: relative;left: 500px"></div>-->

<!--<div style="height: 100px;width: 200px; color: rgb(152, 26, 26);">></div>-->

​

<!--<div style="height: 100px;width: 200px;"></div>-->

<!--<div style="height: 100px;width: 200px;position: absolute;left: 500px"></div>-->

<!--当没有父标签做到位 就参照与body-->

<!--<div style="height: 100px;width: 200px;"></div>-->

​

<div style="height: 100px;width: 200px;"></div>

<div style="height: 100px;width: 200px;position: fixed;bottom: 10px;right: 20px"></div>

<div style="height: 100px;width: 200px;"></div>

z-index模态框

eg:百度登陆页面 其实是三层结构

  1.最底部是正常内容(z=0)  最远的

  2.黑色的透明区(z=99)        中间层

  3.白色的注册区域(z=100)  离用户最近

​

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        body {

            margin: 0;

        }

        .cover {

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: rgba(0,0,0,0.5);

            z-index: 99;

        }

        .modal {

            background-color: white;

            height: 200px;

            width: 400px;

            position: fixed;

            left: 50%;

            top: 50%;

            z-index: 100;

            margin-left: -200px;

            margin-top: -100px;

​

        }

    </style>

</head>

<body>

<div>这是最底层的页面内容</div>

<div class="cover"></div>

<div class="modal">

    <h1>登陆页面</h1>

    <p>username:<input type="text"></p>

    <p>password:<input type="text"></p>

    <button>点我点我~</button>

</div>

</body>

</html>

透明度opacity

# 它不单单可以修改颜色的透明度还同时修改字体的透明度

rgba只能影响颜色

而opacity可以修改颜色和字体

​

opacity: 0.5;

博客园页面搭建

04：CSS（02）的更多相关文章

  1. 前端学习 第五弹： CSS （一）

    前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...

  2. Python开发【第十篇】：CSS （二）

    Python开发[前端]:CSS Kylin Zhang 发表于 2016-11-10 13:13:57 css样式选择器 标签上设置style属性: <body> <div sty ...

  3. spring中BeanPostProcessor之一：InstantiationAwareBeanPostProcessor（02）

    在上篇博客中写道了bean后置处理器InstantiationAwareBeanPostProcessor,只介绍了其中一个方法的作用及用法,现在来看postProcessBeforeInstanti ...

  4. 06：JS（02）

    对象 一切皆对象 数组(类似于python里面的列表) [] var l = [11,22,33,44,55] typeof l "object" var l1 = [11,'sd ...

  5. 03：CSS（01）

    内容概要 分组与嵌套 伪类选择器 伪元素选择器 选择器优先级 css属性相关(操作标签样式) 浮动 定位 模态框 透明度 内容详细 分组与嵌套 div,p,span { /*逗号表示并列关系*/ co ...

  6. GUI编程笔记（java）04：GUI（HelloWorld）窗体案例

    1.Frame 在JAVA中,Frame是一种控件,可作为父窗体加载其他swing控件.案例: package cn.itcast_01; import java.awt.Frame; public ...

  7. 09：jQuery（02）

    内容概要 jQuery操作标签 jQuery绑定事件 jQuery补充知识点 jQuery动画效果(了解) 零散补充 内容详细 jQuery练习题 $('#i1') r.fn.init [div#i1 ...

  8. 094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 04 static关键字（续）

    094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  9. 111 01 Android 零基础入门 02 Java面向对象 04 Java继承（上）02 继承的实现 01 继承的实现

    111 01 Android 零基础入门 02 Java面向对象 04 Java继承(上)02 继承的实现 01 继承的实现 本文知识点: 继承的实现 说明:因为时间紧张,本人写博客过程中只是对知识点 ...

随机推荐

  1. (邹博ML)矩阵和线性代数

    主要内容 矩阵 特征值和特征向量 矩阵求导 矩阵 SVD的提法 奇异值分解(Singular Value Decomposition)是一种重要的矩阵分解方法,可以看做对称方阵在任意矩阵上的推广. 假 ...

  2. Day007 递归

    递归 定义 ​ A方法调A方法!就是自己调自己 作用 ​ 利用递归可以用简单的程序来解决一些复杂的问题.它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程 ...

  3. 表单模块 layui-form

    使用 layui针对各种表单元素做了比较全面的Ui支持,在Ui渲染只要求一点.,在表单体所在父元素加上class="layui-form" 监听事件 提交按钮监听,注意需要加·la ...

  4. Windows子系统Ubuntu安装宝塔面板

    首先你需要安装Ubuntu子系统,安装方法点击这里,安装完成后再进行下面的步骤. 安装宝塔面板 输入命令 wget -O install.sh http://download.bt.cn/instal ...

  5. 【java--反射】注解（反射解析注解+注解应用）

    创建实体类 package cn.com.codingce.iocannotation; /** * @Author: Jiangjun * @Date: 2019/10/7 9:54 */ publ ...

  6. layui图片上传

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

  7. LINQ之查询语法

    新开一节LINQ的入门讲解. LINQ(Language Integrated Query)语言集成查询,是C#语言的扩展,它的主要功能是从数据集中查询数据,就像通过sql语句从数据库查询数据一样(本 ...

  8. Educational Codeforces Round 105 (Rated for Div. 2)

    A. ABC String 题目:就是用'('和')'来代替A,B,C并与之对应,问是不是存在这样的对应关系使得'('和')'正好匹配 思路:第一个和最后一个字母是确定的左括号或者是右括号,这样就还剩 ...

  9. Java 反编译工具哪家强？对比分析瞧一瞧

    前言 Java 反编译,一听可能觉得高深莫测,其实反编译并不是什么特别高级的操作,Java 对于 Class 字节码文件的生成有着严格的要求,如果你非常熟悉 Java 虚拟机规范,了解 Class 字 ...

  10. Linux性能调优命令之free

    功能说明 free 命令显示系统使用和空闲的内存情况,包括物理内存.交互区内存(swap)和内核缓冲区内存.共享内存将被忽略 语法 free [参数] 参数 -b : 以Byte为单位显示内存使用情况 ...