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 阶段. 目前对应的 ...
随机推荐
- -_-#【Mac】命令
切换cd $HOMEcd ~ 查看ls 查看系统显示:defaults write com.apple.finder AppleShowAllFiles -bool true隐藏:defaults w ...
- Linux 下最为人熟知的解压缩工具
很多时候,通过互联网发送或接收大文件和图片是一件令人头疼的事.压缩及解压缩工具正好可以应对这个问题.下面让我们快速浏览一些可以使得我们的工作更加轻松的开源工具. Tar Tar 由 ‘Tape arc ...
- @Resource 和 @Autowired注解的异同
@Resource 和 @Autowired注解的异同 @Autowired 默认按类型装配,默认情况下必须要求依赖对象必须存在,如果要允许null值,可以设置它的required属性为false 例 ...
- IOS--跳转方式两种
带导航栏的Push跳转: FloatPassViewController *floatpass = [self.storyboard instantiateViewControllerWithIden ...
- Android ImageView 点击更换头像
首先搭建布局 主界面布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- duilib DirectUI库里面的一个简单的例子RichListDemo
1.首先来看这里的CRichListWnd 已经不再是从CWindowWnd继承了 classCRichListWnd:publicWindowImplBase 从WindowImplBase中,可以 ...
- mysql5.5.17源代码安装
1. 源代码包下载 源代码包通常也採用tar.gz压缩.名称中仅仅包括版本号信息,大小也比RPM包.二进制包小非常多,解压后的文件里含有INSTALL-SOURCE文件.可从MySQL官网(http ...
- JavaScript高级编程II
原文地址: http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1 在前面的文章中, ...
- NYOJ-104最大和
我看了好多博客,都是拿一维的做基础,一维的比较简单,所以要把二维的化成一维的,一维的题目大意:给了一个序列,求那个子序列的和最大,这时候就可以用dp来做,首先dp[i]表示第i个数能构成的最大子序列和 ...
- 异步tcp通信——APM.Core 服务端概述
为什么使用异步 异步线程是由线程池负责管理,而多线程,我们可以自己控制,当然在多线程中我们也可以使用线程池.就拿网络扒虫而言,如果使用异步模式去实现,它使用线程池进行管理.异步操作执行时,会将操作丢给 ...