溢出属性

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. 【python】Leetcode每日一题-矩阵置零

    [python]Leetcode每日一题-矩阵置零 [题目描述] 给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 .请使用 原地 算法. 进阶: 一个直观的解 ...

  2. 容器随Docker启动而启动

    在容器开启状态下 docker container update --restart=always 容器名

  3. Idea一直卡在loading archetype list问题解决（或者报Unable to import maven project: See logs for details)

    暂时没有测试成功 https://blog.csdn.net/calo_missile/article/details/95898519

  4. 自定义WPF分页控件

    一.分页控件功能说明 实现如上图所示的分页控件,需要实现一下几个功能: 可以设置每页能够展示的最大列数(例如每页8列.每页16列等等). 加载的数组总数量超过设置的每页列数后,需分页展示. 可以直接点 ...

  5. C++知识概要

    static的用法和作用 在全局变量前加上关键字 static,全局变量就定义成一个全局静态变量.存储在静态存储区,在整个程序运行期间一直存在.同时全局静态变量在声明他的文件之外是不可见的 在局部变量 ...

  6. Java集合详解（五）：Hashtable原理解析

    概述 本文是基于jdk8_271版本进行分析的. Hashtable与HashMap一样,是一个存储key-value的双列集合.底层是基于数组+链表实现的,没有红黑树结构.Hashtable默认初始 ...

  7. SwiftUI 简明教程之属性包装器

    本文为 Eul 样章,如果您喜欢,请移步 AppStore/Eul 查看更多内容. Eul 是一款 SwiftUI & Combine 教程 App(iOS.macOS),以文章(文字.图片. ...

  8. centos 6 x64 yum(sohu)

    centos 6 x64 yum(sohu) weixin_34405354 2012-08-23 10:07:35 24 收藏 文章标签: 运维 版权 [base] name=Base baseur ...

  9. cgic: CGI的C函数库-(转自COS)

    下载回源码包以后,就3个文件:cgic.c      函数库capture.c   一个很简单的CGI例子,仅仅输出两行提示文字cgictest.c  一个演示读取form表单数据的CGI例子 首先在 ...

  10. 也谈如何写一个Webserver（三）

    在上一篇里,我介绍了如何应用socket和epoll来组织和管理从客户端(如,浏览器)传入的连接,通过设置非阻塞连接让Webserver有更好的性能． 下面,我介绍一下在我写的Webserver Ma ...