盒子模型之margin相关技巧!
废话不多说,直接进入主题,margin相关技巧。
1、设置元素水平居中:margin:x auto;
2、margin负值让元素位移及边框合并。
外边距合并
指当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
解决外边距合并的方法:
a、使用这种特性。
b、设置一边的外边距,一般设置margin-top
c、将元素浮动或者定位(元素浮动或定位时,不会出现margin合并)
margin-top塌陷
在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下:
a、外部盒子设置一个边框
b、外部盒子设置overflow:hidden
c、使用伪元素类:
.clearfix:before{
content:'';
dispaly:table;
}


盒子模型之margin相关技巧!的更多相关文章
- 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素
盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...
- 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
- 盒子模型的margin负数用法
盒子的margin用法大家都应该很清楚,在实际中一般使用margin来水平居中或者让自己移动相应的位置,但是margin给负数在实际中也是有用的. 如图为两个浮动的盒子. 给左边的盒子margin-l ...
- CSS中的间距设置与盒子模型
CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 pa ...
- 标准盒子模型和IE盒子模型
标准盒子模型 = margin + border + padding + content (content = width | height) IE盒子模型 = margin + content ( ...
- Web前端面试指导(九):盒子模型你是怎么理解的?
问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...
- IT兄弟连 HTML5教程 W3C盒子模型
日常生活中所见的盒子也就是能装东西的一种箱子,如果家里的东西很多,那么就需要按类别装到不同的箱子中.网页中的内容表现也是一样的,如果页面内容比较多,又想让页面更整洁.更美观.有很好的用户体验,则也需要 ...
- 溢出处理、盒子模型、背景图片、float(浮动)
一.overflow:溢出内容的处理 overflow:hidden; 溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响) overflow:auto; 自动滚动(有溢出 ...
- 前端-----margin用法(盒子模型里补充)
margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div ...
随机推荐
- [转]COPY OR MOVE FILES AND FOLDERS USING OLE AUTOMATION
本文转自:http://sqlindia.com/copy-move-files-folders-using-ole-automation-sql-server/ I love playing aro ...
- [转]How to Import a Text File into SQL Server 2012
Importing a using the OpenRowSet() Function The OPENROWSET bulk row set provider is accessed by call ...
- Eclipse软件使用说明
http://www.ziqiangxuetang.com/eclipse/eclipse-explore-menus.html
- 【转】类找不到总结java.lang.ClassNotFoundException
(1)org.apache.tomcat.dbcp.dbcp.SQLNestedException: Cannot load JDBC driver class 'com.microsoft.sqls ...
- Java 如何重写对象的 equals 方法和 hashCode 方法
前言:Java 对象如果要比较是否相等,则需要重写 equals 方法,同时重写 hashCode 方法,而且 hashCode 方法里面使用质数 31.接下来看看各种为什么. 一.需求: 对比两个对 ...
- Asp.Net Mvc表单提交(批量提交)
Asp.Net Mvc中Action的参数可以自动接收和反序列化form表单的值, 采用form表单提交 name=value类型,只要Action参数的变量名和input的name相同就行 html ...
- Java8简明学习之Optional
Java在8的版本,新增了Optional和lambda表达式,使得日常开发中对于NullPointException的判断变的优雅. 现在来个例子看看在Optional之前对空的判断. @Test ...
- CSS3 @font-face实现颜色大小可控的三角效果——张鑫旭
一.我之前介绍过的三角实现效果回顾 这里所说的三角效果之等腰直角三角形效果(等边三角形有现成字符实现,没什么好说的:还有图片实现三角众人皆知,不予以说明): 1. 字符实现三角效果关于字符实现三角我早 ...
- 第二十天- 多继承 经典MRO 新式MRO super()
# 多继承:# 在继承关系中.⼦类自动拥有⽗类中除私有属性外其他所有内容.python⽀持多继承.子类可拥有多⽗类. class ShenXian: # 神仙 def fei(self): print ...
- 51Nod1053 最大M子段和V2 二分+DP
传送门 直接DP的话最多也只能做到\(O(nm)\),对于\(5\times 10^4\)的数据范围实在无能为力 夹克老爷提供的做法是贪心,思想大概是在调整的同时,合理构造每个选择对应的新状态,使得新 ...