溢出属性

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. 【maven】下载阿里云上没有的依赖

    问题截图 去maven仓库找了,也没有找到这个项目(github中拉去的项目)中的,然后以为这个仓库没有,不知道要去哪里下载. <dependency> <groupId>or ...

  2. 【Spring浅析】一、 BeanFactory 有啥可说的？

    阅读 Spring 源码,BeanFactory 是避不了的存在.而大家常见的使用场景,也是以下形式: ConfigurableApplicationContext ctx = SpringAppli ...

  3. 本地Markdown上传图片

    本地Markdown上传图片 1.上传本地markdown文件到博客园 使用工具pycnblog 下载:https://github.com/dongfanger/PyCnblog 查看READ ME ...

  4. 如何安装Eigen库和Sophus库

    * { font-family: "Tibetan Machine Uni", "sans-serif", STFangSong; outline: none ...

  5. CSS filter 有哪些神奇用途

    背景 基本概念 CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染.它的值可以为 filter 函数 <filter-function ...

  6. [Qt] 编译问题

    shadow build https://blog.csdn.net/cjmcp/article/details/14135191 https://blog.csdn.net/josephfeng/a ...

  7. Linux 操作系统（一）命令&用户&权限

    以下实例均在Centos7下验证 Centos7 查看命令帮助 man xxx 常用命令 ls / cd - #切到上次目录 cd #回家 cat cat f1 f2 cat f1 f2>f3 ...

  8. 更换介质：请把标有Debian ... 的盘片插入驱动器

    Debian安装软件报错如下: 更换介质:请把标有 "Debian GNU/Linux 10.8.0 _Buster_ - Official amd64 DVD Binary-1 20210 ...

  9. Linux_计划任务理论概述

    一.计划任务概述 1.计划任务概述: 计划任务分为: 一次性任务 周期性任务 在Linux系统的计划任务服务crond 可以满足周期性执行任务的需求. crond进程每分钟会处璇一次计划任务,计划任务 ...

  10. 用于监视Linux上的内存使用情况的Bash脚本

    用于监视Linux上的内存使用情况的Bash脚本 2019-06-17 11:32:45作者:戴进稿源:云网牛站 在本文中,我们添加了两个shell脚本来监视Linux操作系统上的内存利用率,即用于监 ...