溢出属性

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. thymeleaf中[[${}]]与[(${})]的区别

    [[-]]会被转义,[(-)]不会. 假设在后台传入msg的值为 <b>AAA</b> 在前台这样使用 [[${msg}]]___[(${msg})] 展示效果 官方参考文档

  2. .NET生成小程序码，并合自定义背景图生成推广小程序二维码

    前言: 对于小程序大家可能都非常熟悉了,随着小程序的不断普及越来越多的公司都开始推广使用起来了.今天接到一个需求就是生成小程序码,并且于运营给的推广图片合并在一起做成一张漂亮美观的推广二维码,扫码这种 ...

  3. IOS小组件（6）：小组件实现时钟按秒刷新

    引言   上一节中我们了解了IOS小组件的刷新机制,发现根本没法实现按秒刷新,但是看别的App里面有做到,以为用了什么黑科技,原来是因为系统提供了一个额外的机制实现时间的动态更新,不用走小组件的刷新机 ...

  4. SAP ABAP ALV 颜色设置（两个ALV函数例子） 列 行 单元格

    @[TOC](设置ALV颜色)# 前言淦! 要求花花绿绿的ALV ,那就淦他! 需要的参数和对应颜色放在最后.稍微改改就能用. 介绍两个常用的ALV函数实现1.REUSE_ALV_GRID_DISPL ...

  5. C++ primer plus读书笔记——第17章 输入、输出和文件

    第17章 输入.输出和文件 1. 对键盘进行输入缓冲可以让用户在将输入传输给程序之前返回并更正.C++程序通常在用户按下回车键时刷新输入缓冲区. 2. 一些I/O类 streambuf类为缓冲区提供了 ...

  6. Jmeter(一) - 从入门到精通 - 环境搭建（详解教程）

    1.JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静态和动态资源的性能,例如:静态文件, ...

  7. 如何借助CRM销售管理系统提升业绩？

    与传统企业销售模式不同,现代企业在网络背书下,销售活动与网络密切相关.销售数据需要网络保存,销售渠道需要网络挖掘.在线的销售软件让销售活动起到了事半功倍的效果.CRM销售管理系统是企业必不可少的在线软 ...

  8. queryset惰性与缓存

    https://blog.csdn.net/zhu6201976/article/details/83550461

  9. Davinci 可视化系统部署安装及简单使用

    Davinci 是一个目前比较热门的国内开源BI系统,功能比较完善,各种可视化效果也挺不错.主要获取数据的方式是通过编写SQL 创建数据视图来展示各种图表的. Davinci面向业务人员/数据工程师/ ...

  10. Spring Cloud Alibaba Nacos Config 实战

    Nacos 提供用于存储配置和其他元数据的 key/value 存储,为分布式系统中的外部化配置提供服务器端和客户端支持.使用 Spring Cloud Alibaba Nacos Config,您可 ...