jackyrong
- 浏览: 7943082 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi：
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng：
(转）JAVA获得机器码的实现 -
albert0707：
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707：
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle：
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
css小结6
1 子元素相对父元素定位：
父元素 {position:relative;}
子元素
{
position:absolute;
/定义top,bottom,left和right/
}
<style type="text/css">
.father
{
position:relative;
width:160px;
height:30px;
background-color:#00FFFF;
}
.son
{
position:absolute;
bottom:-30px;
right:65px;
width:30px;
height:30px;
background-color:red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
注意position:absoulte会把元素转换为块元素
2 子元素相对祖先定位，道理是一样的：
<style type="text/css">
.grandfather
{
position:relative; /*设置相对定位*/
width:200px;
height:160px;
background-color:blue;
}
.father
{
position:relative; /*设置相对定位*/
width:120px;
height:30px;
background-color:#00FFFF;
}
.son
{
position:absolute; /*设置绝对定位*/
bottom:-20px;
right:50px;
width:20px;
height:20px;
background-color:red;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
如果删除了父亲元素的 position:relative，则SON是相对于GRANDFATHER定位；
3 Z-INDEX:
指明元素的堆叠顺序：
只有在定义position:relative，fixed,absoulte下起作用，Z-INDEX值为正数的元素在Z-INDEX=0的上面，负数的在下面；
div
{
width:100px;
height:100px;
font-size:50px;
position:absolute;
}
#A{background-color:red;top:10px;left:10px;}
#B{background-color:orange;top:40px;left:40px;}
#C{background-color:blue;top:70px;left:70px;}
</style>
</head>
<body>
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
：
这个时候A元素最底，B元素上面，C元素最上面；如果A的Z-INDEX：3，Z-INDEX;2,zindex-:1,则A,B,C元素反过来，A在最上面；
1 子元素相对父元素定位：
父元素 {position:relative;}
子元素
{
position:absolute;
/定义top,bottom,left和right/
}
<style type="text/css">
.father
{
position:relative;
width:160px;
height:30px;
background-color:#00FFFF;
}
.son
{
position:absolute;
bottom:-30px;
right:65px;
width:30px;
height:30px;
background-color:red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
注意position:absoulte会把元素转换为块元素
2 子元素相对祖先定位，道理是一样的：
<style type="text/css">
.grandfather
{
position:relative; /*设置相对定位*/
width:200px;
height:160px;
background-color:blue;
}
.father
{
position:relative; /*设置相对定位*/
width:120px;
height:30px;
background-color:#00FFFF;
}
.son
{
position:absolute; /*设置绝对定位*/
bottom:-20px;
right:50px;
width:20px;
height:20px;
background-color:red;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
如果删除了父亲元素的 position:relative，则SON是相对于GRANDFATHER定位；
3 Z-INDEX:
指明元素的堆叠顺序：
只有在定义position:relative，fixed,absoulte下起作用，Z-INDEX值为正数的元素在Z-INDEX=0的上面，负数的在下面；
div
{
width:100px;
height:100px;
font-size:50px;
position:absolute;
}
#A{background-color:red;top:10px;left:10px;}
#B{background-color:orange;top:40px;left:40px;}
#C{background-color:blue;top:70px;left:70px;}
</style>
</head>
<body>
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
：
这个时候A元素最底，B元素上面，C元素最上面；如果A的Z-INDEX：3，Z-INDEX;2,zindex-:1,则A,B,C元素反过来，A在最上面；
分享到：
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 824刚开始用微信小程序开发工具，每次运行任何应用，都报这个错误： ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 550三篇不错的介绍CSS GRID的文章： http://www. ... -
双因素认证（2FA）教程
2017-11-03 09:16 1571http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 819https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1700即使手动输入空格， 也是很不推荐的方法。我推荐全角空格，切换 ... -
(转）讲真，别再使用JWT了
2017-08-17 23:21 1012不错的好文： http://insights.thoughtw ... -
(转）手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 3025参考： http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 93211. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多，该何去何从？
2017-08-04 07:17 647http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 848http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 10051 vue2.0手撸闲鱼App https://githu ... -
（收藏）虚拟DOM内部是如何工作的
2017-07-13 22:08 592虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 565【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理：深入浅出 jsonp
2017-07-10 19:55 1430https://lzw.me/a/jsonp.html jso ... -
(转）深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 823深度长文-JavaScript数组所有API全解密 http: ... -
(收藏）网页导出PDF的方案
2017-07-06 07:13 979(收藏）网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1150https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3159http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1591canvas仿芝麻信用分仪表盘 https://segment ... -
(转）CSS 变量教程
2017-05-10 21:12 576http://www.ruanyifeng.com/blog/ ...
相关推荐
dw cs6的css总结
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
css学习总结思维导图
这篇博客"CSS常用样式总结积累"是博主对CSS的一些核心概念和技术进行的归纳，旨在帮助读者理解和掌握CSS的基本用法。以下是对这些知识点的详细解释： 1. **选择器**: CSS选择器是匹配HTML元素的方式，如类选择器（`...
CSS制作网页总结经验,CSS制作网页总结经验,CSS制作网页总结经验
在本“上课用CSS实验总结”中，我们将深入探讨CSS（层叠样式表）的核心概念以及在实际项目中的应用。CSS是网页设计的关键技术之一，它负责定义网页内容的外观和布局，使得网页更具视觉吸引力并提高用户体验。在这个...
### CSS实战学习总结 在《CSS实战学习总结》这一篇深度文档中，作者辛磊针对CSS的实际应用进行了全面而深入的解析，旨在帮助读者掌握CSS的核心技能，提升网页设计与开发的能力。以下是对该文档中关键知识点的提炼与...
本文将基于“关于图片显示问题的CSS总结”这一主题，深入探讨CSS在处理图片显示时的关键知识点，以帮助开发者更好地理解和解决图片相关的问题。 首先，我们来看CSS中的`background-image`属性，它用于设置元素的...
### 总结 HTML和CSS的学习是成为一名前端开发者的基石。理解基本元素和样式规则，掌握布局技巧，以及了解响应式设计和预处理器的使用，将有助于创建出专业且用户友好的网页。通过不断实践和探索，可以逐步深化对这两...
这是一篇关于前端页面的介绍，开放学习，望大家多多看看、 哈哈
总结来说，Postcss-css-variables插件是前端开发者处理CSS Variables的有效工具，它增强了CSS Variables的浏览器兼容性，简化了样式管理，提高了代码的可维护性和效率。结合PostCSS的其他插件，可以构建出强大的CSS...
整理了常用的css属性，适用于新手查阅，熟悉css基本属性使用等等
总结起来，Blueprint CSS 是一个强大且实用的CSS框架，能够帮助开发者快速构建响应式的、视觉统一的网页。其网格系统、预定义样式和打印优化等功能，大大提高了开发效率，同时也降低了维护成本。对于任何希望提升...
一、CSS语法规范 二、CSS选择器 （1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、...
html+css知识点总结
下面小编给大家分享一下。 首先点击左上角的file菜单，选择Setting 接着选择Editor下面的Inspections选项，如下图所示 然后在右侧找到CSS，选择typo，如下图所示 接着点击apply和ok按钮，如下图所示 然后新建一...
### CSS学习总结 #### 一、CSS选择器与样式应用 **1. 行内样式** 行内样式是在HTML元素内部直接使用`style`属性来指定样式规则的方式。这种方式适用于临时性的样式修改，但不利于代码的维护和复用。 **示例**： ...
本文将深入探讨“css常用公共样式”的总结，包括`flex布局`、`简写`技巧、`遮罩层`实现以及`滚动条透明`与`动画`的应用。这些都是现代Web开发不可或缺的部分。 首先，让我们来谈谈`flex布局`。Flex布局，全称为 ...
本篇文章将深入探讨如何利用CSS实现无图片的圆角效果，以及在各种场景下创建圆角区块容器和圆形边框的方法。 一、CSS圆角基础 CSS3引入了`border-radius`属性，它允许我们为元素的四个角设定不同的圆角半径，从而...