CSS 3层嵌套居中布局
<html>
<head>
<style type="text/css">
.root{
background-color: red;
width: 80%;
top: 20px;
position: fixed;
bottom: 20px;
margin-left: 10%;
}
.parent{
background-color: green;
position: absolute;
left: 20px;
right: 20px;
top: 30px;
bottom: 20px;
}
.child{
background-color: blue;
position: absolute;
left: 10px;
right: 10px;
top: 20px;
height:100px;
margin-top: -65px;
}
</style>
</head>
<body>
<div class="root">
<div class="parent">
<div class="child">
</div>
</div>
</div>
</body>
</html>
CSS 3层嵌套居中布局的更多相关文章
- 利用css如何让嵌套的div层不继承父div层的透明度？
http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...
- CSS居中布局总结【转】
居中布局 <div class="parent"> <div class="child">demo</div> </d ...
- CSS居中布局总结
居中布局 <div class="parent"> <div class="child">demo</div> </d ...
- day07——css布局解决方案之居中布局
转行学开发,代码100天——2018-03-23 1.水平居中 使用inline-block + text-align方法 先将子框由块级元素改为行内块元素,再通过设置行内块元素居中以实现水平居中 ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- CSS控制表格嵌套
网页设计应用中,当我们不能完全放弃表格的使用时,为了达到预期的效果,不免要用到表格嵌套(特别是多层嵌套)方式来进行布局.可能很多同仁都遇到过这样的问题,为了达到显示效果要为每一个(每一层)的表格写不同 ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- 范仁义html+css课程---8、新元素布局
范仁义html+css课程---8.新元素布局 一.总结 一句话总结: 推荐用新标签(语义化的标签)来布局:header(头部),footer(尾部),aside(侧边栏),nav(导航),artic ...
- CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？
最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...
随机推荐
- oracle索引总结
简介 1.说明 1)索引是数据库对象之一,用于加快数据的检索,类似于书籍的索引.在数据库中索引可以减少数据库程序查询结果时需要读取的数据量,类似于在书籍中我们利用索引可以不用翻阅整本书即可找到想要的信 ...
- Oracle分页查询与RowNum
1. RowNum伪列 Oracle中,RowNum是一个伪列,表示当前记录是查询结果集中的第几条. RowNum在使用上应该注意,不能在where条件中用RowNum大于.大于等于.等于某个大于1的 ...
- webex录屏
你在寻找好用的录屏软件吗?商用级品质的 WebEx Recorder 就是一款优秀的录屏软件.WebEx Recorder可以录制全屏或指定窗口,可以设定是否包含声音,生成的文件体积极小且极清晰,录制 ...
- IT码农哥放弃50万年薪：辞职卖咖喱凉皮（背后深藏功与名）_互联网的一些事
IT码农哥放弃50万年薪:辞职卖咖喱凉皮(背后深藏功与名)_互联网的一些事 IT码农哥放弃50万年薪:辞职卖咖喱凉皮(背后深藏功与名)
- 关于xcode7编译旧项目崩溃-[UIApplication _runWithMainScene:transitionContext:completion:]
崩溃原因 crash: Assertion failure in -[UIApplication _runWithMainScene:transitionContext:completion:], / ...
- [原创小知识] 如何优雅的判断 ie 版本
之前一直不怎么做低版本ie的前端,毕竟ie的大半江山都被chrome 霸占,但大部分情况下,却还是要去兼容下那些老顽固.一切的原因,都是因为当年微软的年轻气盛,喜欢另起炉灶,真是很无语. 通常我们去h ...
- Jenkins+maven+git+sonar 系统持续集成&代码单測管理
Jenkins+maven+git+sonar 系统持续集成&代码单測管理 Jenkins的安装 Jenkins是基于Java开发的一种持续集成工具,用于监控持续反复的工作.功能包含: 1.持 ...
- JAVA冒泡排序/JAVA冒泡排序再找出给定数据中的最大值最小值/JAVA数组排序
//数组中排序 int in[] = {1,6,5,8,9}; Arrays.sort(in); for(int i=0;i<in.length;i++){ Sys ...
- Python第一课
一.模块的常用方法 __name__ #主模块name值main __file__ #文件所在的路径+文件名 __doc__ #文件级别的注释 二.函数 参数 参数默认值 可变参数 ...
- C#操作Excel（NPOI）
这两天需要读取Excel文件,网上找了找,发现NPOI用的是最多的,于是研究了一下.这里大概介绍一下. 首先,在NPOI中一个Excel文件对应了一个IWorkbook对象,Excel中的一个工作表对 ...