父元素与子元素之间的margin-top问题(css hack)
hack:
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。
hytml代码:
<div class="box1">
<div class="box2"></div>
</div>
css代码:
.box1{height:200px;width:200px;background:gray;}
.box2{height:100px;width:100px;background:gold;margin-top:50px;}
解决方法:
1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
2、为父元素添加overflow:hidden;样式即可(完美)
3、为父元素或者子元素声明浮动(float:left;可用)
4、为父元素添加border(border:1px solid transparent可用)
5、为父元素或者子元素声明绝对定位
父元素与子元素之间的margin-top问题(css hack)的更多相关文章
- 父元素与子元素之间的margin-top问题
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...
- 关于css中父元素与子元素之间margin-top的问题
之前在使用经常遇到下面的问题: html: <div class="top"> <div class="one">I'm the fir ...
- css设置时父元素随子元素margin值移动
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...
- HTML 父元素与子元素之间的margin-top问题
问题: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 代码如下: <div ...
- 父元素与子元素之间的margin-top问题(css hack)(转载)
情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...
- CSS 实现:父元素包含子元素,子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- JQuery 获取父级元素、同级元素、子元素等
例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
随机推荐
- 3ds Max学习日记(二)
搞了一天终于把第二章弄完了,虽然有点慢,但也是没有办法,毕竟中途学累了总得放松一下吧. 又get到了一个新知识点,是关于3ds max的捕捉工具的,详情见3DS MAX 学习笔记 一(捕捉工具 ...
- PokeCats开发者日志(十)
现在是PokeCats游戏开发的第三十三天的中午,收到了中国版权保护中心软件登记部发来的受理通知书. 上易版权看一眼,貌似离拿证不远了. 想一想还有点小激动呢!
- #Leetcode# 700. Search in a Binary Search Tree
https://leetcode.com/problems/search-in-a-binary-search-tree/ Given the root node of a binary search ...
- Visual Studio 数据库架构比较
一.前言 开发的时候在测试服务器上和线网服务器上面都有我们的数据库,当我们在线网上面修改或者新增一些字段后,线网的数据库也需要更新,这个时候根据表的修改记录,然后在线网上面一个一个增加修改很浪费效 ...
- 在临床医学里面,bid、tid、qid和q3w是什么意思啊??这些缩写的全称是怎么写呢??
{ value: 'QD', name: 'QD 每日一次' }, { value: 'BID', name: 'BID 每日两次' }, { value: 'TID', name: 'TID 每日三 ...
- linux 环境变量配置(node)
控制台 env 查看当前的环境变量配置 修改/etc/profile文件,在末尾添加以下内容 export NODE_HOME=/usr/local/node //Node所在路径 export PA ...
- 在网页中显示器PDF文档
<iframe src="></iframe> 在需要显示的页面中添加上面语句就可以.
- WPF如何将数据库中的二进制图片数据显示在Image控件上
首先在xaml文件里定义一个Image控件,取名为img MemoryStream stream = new MemoryStream(获得的数据库对象): BitMapImage bmp = new ...
- 【bzoj1798】[Ahoi2009]Seq 维护序列seq 线段树
题目描述 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2)把数列中的一 ...
- 【bzoj1727】[Usaco2006 Open]The Milk Queue 挤奶队列 贪心
题目描述 Every morning, Farmer John's N (1 <= N <= 25,000) cows all line up for milking. In an eff ...