盒子模型之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;

  }

时间: 2024-08-04 12:04:42

盒子模型之margin相关技巧!的相关文章

18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素

盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 盒子高度 = height + padding上下 + border上下 margin相关技巧 1.设置元素水平居中: margin:x auto;2.margin负值让元素位移及边框合并 外边距合并 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合

[ css 弹性盒子模型 box-flex 及相关属性 ] box-flex属性弹性盒子模型讲解及实例演示

box-flex属性(和谐版) 有道桌面词典显示,”flex”一词中文有“收缩”之意.不过,从此属性实际上产生的效果来看,无论怎样用“收缩”一词解释都显得很牵强.所以,这里,直接抛开字面意思,我们可以将”box-flex”理解为”房子-分配”.box为“盒子”的意思,我们可以理解为当下价格巨高的“房子”,”flex”指兄弟几个“分配房子”. 举个更实际点的例子:马林大叔省吃俭用一辈子,终于在上海郊外买了间150平米的商品房.后来,马林大叔想回老家养老,决定把房子分配给他的三个儿子.ok,先暂停下

CSS中的间距设置与盒子模型

CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 padding:10px; 上下及两边设置 padding:5px 10px; 由上边界开始,顺时针设置 padding:10px 20px 30px 40px 单边设置 padding-top: 检索或设置对象顶边的内部边距 padding-right: 检索或设置对象右边的内部边距 padding-

2.5、CSS盒子模型

盒子模型解释 元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式.盒子模型示意图如下: 把元素叫做盒子,设置对应的样式分别为:盒子的边框(border).盒子内的内容和边框之间的间距(padding).盒子与盒子之间的间距(margin). 设置边框 设置一边的边框,比如顶部边框,可以按如下设置: border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-width:10px; /* 设置顶部

前端初步预习(六)------盒子模型之border

p.p1 { margin: 0.0px 0.0px 16.5px 0.0px; text-align: justify; font: 22.0px "Trebuchet MS"; color: #000000 } p.p2 { margin: 0.0px 0.0px 13.0px 0.0px; text-align: justify; font: 16.0px "PingFang SC Semibold"; color: #000000 } p.p3 { marg

标准盒子模型和IE盒子模型

标准盒子模型 = margin + border + padding + content (content =  width | height) IE盒子模型 = margin + content (content = border + padding + width | height) 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到

溢出处理、盒子模型、背景图片、float(浮动)

一.overflow:溢出内容的处理     overflow:hidden;  溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)    overflow:auto; 自动滚动(有溢出产生滚动,没有就不产生滚动条)    overflow:scroll; 不管有没有溢出均产生滚动条 图片精灵技术    服务器    前项目部署到服务器上,图片当然也是在服务器上.网页如果要显示a图片,如果显示b图片,如果套很多图片 二.盒子模型:        margin(外边距).border

盒子模型中的margin属性

记: 1.如果margin只有一个值,表示上右下左的margin同为这个值.例如:margin:10px; 就等于 margin:10px 10px 10px 10px; 2.如果 margin 只有两个值,第一个值表示上下margin值,第二个值为左右margin的值.例如:margin:10px 20px; 就等于 margin:10px 20px 10px 20px; 3.如果margin有三个值,第一个值表示上margin值,第二个值表示左右margin的值,第三个值表示下margin的

盒子模型相关知识总结

一. CSS层叠 在前端程序员对CSS编写的过程中,CSS选择器的作用是用来选中某个元素,并对当前的元素进行样式上的渲染,那么每一个选择器都有属于自己的一些解析规则.那我们今天所探讨的CSS层叠就是浏览器对多个样式的来源进行叠加,并最终解析成渲染效果,那这个过程我们就称为CSS层叠. 1) CSS样式的来源 css之所以有"层叠"的概念,是因为有多个样式来源.其实css的样式来源有5个,开发人员只能接触到后面3个. 前三个我们程序员习惯的称为:"内联样式表".&qu