04：CSS（02）
溢出属性
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）的更多相关文章
- 前端学习 第五弹： CSS （一）
前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...
- Python开发【第十篇】：CSS （二）
Python开发[前端]:CSS Kylin Zhang 发表于 2016-11-10 13:13:57 css样式选择器 标签上设置style属性: <body> <div sty ...
- spring中BeanPostProcessor之一：InstantiationAwareBeanPostProcessor（02）
在上篇博客中写道了bean后置处理器InstantiationAwareBeanPostProcessor,只介绍了其中一个方法的作用及用法,现在来看postProcessBeforeInstanti ...
- 06：JS（02）
对象 一切皆对象 数组(类似于python里面的列表) [] var l = [11,22,33,44,55] typeof l "object" var l1 = [11,'sd ...
- 03：CSS（01）
内容概要 分组与嵌套 伪类选择器 伪元素选择器 选择器优先级 css属性相关(操作标签样式) 浮动 定位 模态框 透明度 内容详细 分组与嵌套 div,p,span { /*逗号表示并列关系*/ co ...
- GUI编程笔记（java）04：GUI（HelloWorld）窗体案例
1.Frame 在JAVA中,Frame是一种控件,可作为父窗体加载其他swing控件.案例: package cn.itcast_01; import java.awt.Frame; public ...
- 09：jQuery（02）
内容概要 jQuery操作标签 jQuery绑定事件 jQuery补充知识点 jQuery动画效果(了解) 零散补充 内容详细 jQuery练习题 $('#i1') r.fn.init [div#i1 ...
- 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封装 ...
- 111 01 Android 零基础入门 02 Java面向对象 04 Java继承（上）02 继承的实现 01 继承的实现
111 01 Android 零基础入门 02 Java面向对象 04 Java继承(上)02 继承的实现 01 继承的实现 本文知识点: 继承的实现 说明:因为时间紧张,本人写博客过程中只是对知识点 ...
随机推荐
- mysql安装_图文详细安装步骤_让你轻松安装并使用（超详细步骤）
mysql的下载就不用说了,自行到官网下载..(本人下载的是mysql5.0版本) 下面开始正式安装 1.双击mysql_setup.exe后,直接点击Next 2.选择"I accept ...
- promise用法解析
Promise的理解 Promise是对异步操作的一种解决方案,一般情况下,如果有异步操作,就需要使用Promise对这个异步操作进行封装 使用Promise后可以使代码看起来更加优雅并且易于维护 使 ...
- Spring Boot 2.5.0 重新设计的spring.sql.init 配置有啥用？
前几天Spring Boot 2.5.0发布了,其中提到了关于Datasource初始化机制的调整,有读者私信想了解这方面做了什么调整.那么今天就要详细说说这个重新设计的配置内容,并结合实际情况说说我 ...
- Linux 部署 iSCSI 客户端配置（Windows）
Linux 部署 iSCSI 客户端配置(Windows) 客户端环境 Client :Windows 7 ip :192.168.121.138 一.首先查看客户端本地所有的磁盘 查看路径:邮件计算 ...
- Chrome 红色和 Chromium蓝色 区别：logoChrome 红色和 Chromium蓝色；Chrome闭源和 Chromium开源；
我们知道Chromium采用的BSD开源协议(Chromium首页.文档和下载),google chrome是闭源的("9.2 根据第 1.2 条规定,除非法律明确允许或要求,或经谷歌明确书 ...
- linux rpm包解压
rpm2cpio xxx.rpm | cpio -div
- 如果你想设置无人自动升级，我们推荐你将这个值修改为security，它会告诉 yum 仅仅升级修复安全问题的软件包。
定期升级你的 CentOS 系统,是所有系统安全中最重要的措施之一.如果你不使用最新的安全补丁升级你的操作系统软件包,你将会让你的机器很容易被攻击. 如果你管理者多个 CentOS 机器,手动升级系统 ...
- NFS PersistentVolume（11）
一.部署nfs服务端 1.需在 k8s-master 节点上搭建了一个 NFS 服务器,目录为 /nfsdata: yum install -y nfs-utils rpcbind vim /etc/ ...
- 014.Python函数
一 函数的概念 1.1 函数的含义 功能 (包裹一部分代码 实现某一个功能 达成某一个目的) 1.2 函数特点 可以反复调用,提高代码的复用性,提高开发效率,便于维护管理 1.3 函数的基本格式 # ...
- IDEA 全局搜索 Jar 包中源码内容
引言 项目开发过程中,经常遇到需要在依赖的 Jar 包查看源码,查找类方法和属性,介绍两种在 IDEA 中搜索 Jar 包内容的方式 方式一:双击 SHIFT 快捷键 输入需要查询的类名或方法名 方式 ...