文档章节

关于margin-top会撑开父元素的解决办法

n
 naker
发布于 2016/12/02 15:16
字数 161
阅读 18
收藏 0
点赞 0
评论 0

父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。

 

解决方法
1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
2、为父元素添加overflow:hidden;样式即可(完美)
3、为父元素或者子元素声明浮动(float:left;可用)
4、为父元素添加border(border:1px solid transparent可用)
5、为父元素或者子元素声明绝对定位

本文转载自:http://www.jb51.net/css/75789.html

共有 人打赏支持
n
粉丝 0
博文 4
码字总数 80
作品 0
成都
UI设计师
html 兼容性问题及一些处理方法(1)

兼容性问题: 计算一定要精确 要要让内容的宽度超出我们设置的宽高,在IE6下,内容会撑开设置好的宽高;; 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素都加浮动; 在IE6,7下元素...

ShuenWang
06/26
0
0
什么叫文档流,为什么清浮动,定位的规则是什么?

文档流 做网页布局的时候,有时候会对网页元素进行浮动,按照自己的需求对网页元素进行排版,元素浮动之后会脱离文档流,造成一些小麻烦,这时候就需要清除浮动,让元素按照自己需求正常排版...

默非静语
07/10
0
0
CSS常见问题小技巧解决办法收集

一、常见问题 1、div标签未关闭  这是书写代码是最为常见的一种错误了。特别是记事本书写习惯的设计师,在未关闭的情况下记事本的不会提示你什么,如果是在DW中,未关闭DIV,开始的DIV会显示...

曾杨
2013/12/04
0
0
[布局概念] 关于CSS-BFC深入理解

写在前面 好记性不如烂笔头,研究了一下BFC,发现里面比较细的东西也是很多的!关于BFC,很多人可能都听说过BFC这个东西,大概知道这是个啥东西,相信很多人对此并没有一个非常细致的了解,本...

OB丶Koro1
2017/05/04
0
0
常见浏览器的兼容问题

1 ie6.0横向margin加倍 产生因素:块属性、float、有横向margin。 解决方法:display:inline; 2 ie6.0下默认有行高 解决方法:overflow:hidden;或font-size:0;或line-height:xx px; 3 在...

effto
2016/09/04
31
0
css中那些我没有弄清楚的定位position

position的值到底是几个呢?我想应该是4个吧 static:默认值,静态; relative:相对定位; absolute:绝对定位; fixed:这个是固定的意思。 好吧...战役才刚刚开始... <div class="parent"...

宝宝eleven
2012/12/17
0
0
说几个容易遇到的css难题

最近看到一篇20 个CSS高级技巧汇总的汇总,感触很深,不过我想,与技巧相比,有些常见css布局难题,有时候更加让我们的日常开发变得踌躇沮丧吧。 在写这一篇文章之前,自己还写过一篇:我所不...

closertb
2017/12/13
0
0
学习CSS你必须踩得那些坑(六)

这里加了边框方便调试: · 为了能够设置在垂直方向上的高度(padding-top/bottom, margin-top/bottom, height):我们设置行内元素<a> display为inline-block 行内元素是就像水一样,垂直方向...

博为峰教研组
2016/12/26
3
0
浮动子元素均分布局

在前端页面的布局过程中,作者遇到了,这样一个问题 当子元素为浮动元素时,父元素设置相应属性后可以被子元素撑开,但无法实现子元素的均分布局,在网络上找了半小时的资料,没有符合要求的布局示...

_昭昭_
2017/11/19
0
0
CSS整理(3)之让元素水平居中和垂直居中方法

在html页面中,为了排版上的美观或是在不同尺寸的屏幕上正常显示,我们一般都会将元素进行水平居中或是垂直居中,现在 做一下总结: 实现水平居中: 对于行内元素来说,直接对要设置的元素设...

hyz000
2016/03/29
33
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CentOS “Destination Host Unreachable”问题解决办法

挑战极速安装CentOS时遇到局域网主机不能通信的情况: [root@zjd network-scripts]# ping 8.8.8.8PING 8.8.8.8 (8.8.8.8) 56(84) bytes of data.64 bytes from 8.8.8.8: icmp_seq=1 ttl=......

wffger
7分钟前
0
0
CentoOS6.6安装netcat

CentOS下安装netcat 使用zookeeper过程中,需要监控集群状态。在使用四字命令时(echo conf | nc localhost 2181),报出如下错误:-bash: netcat: command not found。 我的系统是CentOS 6....

ghou-靠墙哭
17分钟前
0
0
es6之解构赋值巧用

ES6 允许按照一定模式,从数组、对象等中提取值,对变量进行赋值,这被称为解构赋值。 如何进行解构赋值我这里就不赘述,本篇文章主要是将解构赋值的巧妙使用之处。 1、交互变量的值 常用交互...

秋季长青
22分钟前
0
0
Elasitcsearch High Level Rest Client学习笔记(三)批量api

Bulk Request BulkRequest可以在一起从请求执行批量添加、更新和删除,至少需要添加一个操作 BulkRequest request = new BulkRequest(); //创建BulkRequestrequest.add(new IndexRequest("...

木子SMZ
26分钟前
0
0
mybatis-dynamic sql

OGNL expressions if 判断是否存在值 <select id="findActiveBlogLike" resultType="Blog"> SELECT * FROM BLOG WHERE state = ‘ACTIVE’ <if test="title != null"> AND title like #{tit......

writeademo
33分钟前
0
0
社交系统ThinkSNS+ V1.8.3更新播报

     研发发布版本号:1.8.3   本次版本于2018年7月16日发布   本次发布类型:新增功能、细节调整与优化   社交系统ThinkSNSPlus更新体验:请于官网下载/安装最新版或联系QQ35159...

ThinkSNS账号
37分钟前
0
0
教育思考:选择编程是一场父母和孩子的和解[图]

教育思考:选择编程是一场父母和孩子的和解[图]: 之前有个很热的段子是这样讲的:深夜十点的时候,某小区一女子大声喊叫“什么关系?啊?!到底什么关系?你说!”最后发现原来是一位妈妈陪...

原创小博客
37分钟前
0
0
X64汇编之指令格式解析

最近由于项目组内要做特征码搜索的东西,便于去Hook一些未导出函数,你懂得...于是就闲着学习了一下x86/x64的汇编指令格式。x86的汇编指令格式请参照http://bbs.pediy.com/showthread.php?t...

simpower
40分钟前
0
0
rust 语法概要(只适合不熟悉时快速查阅使用,不适合理解其精髓。未完待续)

注意:本内容只适合快查,不适合理解精髓。精髓请研读 https://kaisery.github.io/trpl-zh-cn/foreword.html 基本数据类型 i8,i16,i32,i64,i128 u8,u16,u32,u64,u128 f32,f64 char bool:true...

捍卫机密
43分钟前
0
0
JS中严格模式和非严格模式

1,使用 严格模式的使用很简单,只有在代码首部加入字符串 "use strict"。必须在首部即首部指其前面没有任何有效js代码除注释,否则无效 2.注意事项 (1)不使用var声明变量严格模式中将不通...

AndyZhouX
44分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部