溢出属性

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每日一题-笨阶乘 [题目描述] 通常,正整数 n 的阶乘是所有小于或等于 n 的正整数的乘积.例如,factorial(10) = 10 * 9 * 8 * 7 * 6 ...

  2. axios提交表单

    后端使用@RequestBody接收jsons数据 因为后端接收json数据,所以前端也要发送json 项目的前端是使用layui的数据表单 案例方法 方法一:JSON字符串 提交的数据格式 {&qu ...

  3. 源码简析XXL-JOB的注册和执行过程

    一,前言 XXL-JOB是一个优秀的国产开源分布式任务调度平台,他有着自己的一套调度注册中心,提供了丰富的调度和阻塞策略等,这些都是可视化的操作,使用起来十分方便. 由于是国产的,所以上手还是比较快的 ...

  4. 并发容器-CopyOnWriteSet

    CopyOnWriteSet 该容器与CopyOnWriteArrayList相似,也是读取时不加锁,任意线程可以读.写入时加锁创建一个新的容器,然后写入新元素. 内部用CopyOnWriteArra ...

  5. 用fseek和ftell获取文件的大小

    #include <stdio.h> #include <stdlib.h> #include <unistd.h> int main(int argc,char ...

  6. WIKI和JIRA-安装与使用

    1.Wiki介绍1.1 Wiki(多人协作的写作系统)是一种超文本系统,这种超文本系统支持面向社群的协作式写作,即人人可编辑.在公司的项目管理中,可以把它当作文档管理和信息组织(Portlet)系统来 ...

  7. [刷题] 447 Number of Boomerangs

    要求 给出平面上n个点,寻找存在多少点构成的三元组(i j k),使得 i j 两点的距离等于 i k 两点的距离 n 最多为500,所有点坐标范围在[-10000, 10000]之间 示例 [[0, ...

  8. Qt事件与常用事件处理、过滤

    转载: https://blog.csdn.net/apollon_krj/article/category/6939539 https://blog.csdn.net/qq_41072190/art ...

  9. C++知识点案例 笔记-5

    1.关系运算符重载 2.类型转换函数重载 3.转换构造函数 4.函数模板 5.显式实例化 6.类模板外定义模板函数 1.关系运算符重载 ==关系运算符重载== //直接(按分数)比较两个对象 #inc ...

  10. 云计算OpenStack---维护及错误排查（13）

    错误一:删除僵尸卷 在openstack dashboard中正常删除实例,未删除卷,然后重启了服务器,出现BUG,卷被附加给了'NONE',并且无法删除,无法更新. 既然log中已经提示无法删除卷的 ...