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 阶段. 目前对应的 ...
随机推荐
- g++ gcc 的区别
我们在编译c/c++代码的时候,有人用gcc,有人用g++,于是各种说法都来了,譬如c代码用gcc,而c++代码用g++,或者说编译用gcc,链 接用g++,一时也不知哪个说法正确,如果再遇上个ext ...
- 【索引】gtest学习笔记
下载gtest 链接:http://www.cnblogs.com/duxiuxing/p/4270804.html gtest官方文档浅析 链接:http://www.cnblogs.com/dux ...
- 把struts2-convention-plugin丢进太平洋
struts2-convention-plugin是一个插件,通过这个插件可以实现对于struts2的零配置,基本用法可以参考这个博客(http://javeye.iteye.com/blog/358 ...
- hdu-1010 dfs+剪枝
思路: 剪枝的思路参考博客:http://www.cnblogs.com/zibuyu/archive/2012/08/17/2644396.html 在其基础之上有所改进 题意可以给抽象成给出一个 ...
- L - Kakuro Extension - HDU 3338 - （最大流）
题意:有一个填数字的游戏,需要你为白色的块内填一些值,不过不能随意填的,是有一些规则的(废话),在空白的上方和作方给出一些值,如果左下角有值说明下面列的和等于这个值,右上角的值等于这行后面的数的和,如 ...
- Ubuntu 13.04编译boost1.54
因为要用基于GCC4.8.1的boost最新版本的库,默认apt-get install 安装的是boost1.53, 并且基于GCC4.7.3,不是我想要的.所以决定下载源代码自己编译. 下载(后面 ...
- Android Monkey具体解释
Monkey是一个执行在Android设备或者虚拟机上的程序,它能随机模拟一系列用户的操作.点击,滑动,能够用它来做压力測试. 在Monkey执行的过程中,它会产生并发送一系列的事件给系统,而且监听系 ...
- Apache Shiro 使用手冊 链接文件夹整理
1.Apache Shiro 使用手冊(一)Shiro架构介绍 2.Apache Shiro 使用手冊(二)Shiro 认证 3.Apache Shiro 使用手冊(三)Shiro 授权 4.Apac ...
- [AngularJS] Exploring the Angular 1.5 .component() method
Angualr 1.4: .directive('counter', function counter() { return { scope: {}, restrict: 'EA', transclu ...
- Ubuntu12.04下使用valgrind内存测试工具测试Qt程序
1. 到官网http://valgrind.org/downloads/上下载valgrind最新版本: 2. 解压源码,执行./configure;make;make install后,默认安装到/ ...