要用到的基本术语和概念:

  • 正常流:HTML文档的文本布局,在非西方语言中流的方向可能不同。大多数元素都在正常流中,浮动或定位可以让元素脱离正常流。
  • 块级元素:像p,div之类的元素在正常流中会在其框之前和之后生成“换行”,所以处于正常流中块级元素会垂直摆放。
  • 行内元素:strong,span之类的元素,这些元素不会在之前或之后生成“行分隔符”,它们是块级元素的后代。
  • 水平格式化的7大属性:margin-left,border-left,padding-left,width,padding-right,border-right,margin-right。
  1. 只有width,左右外边距可以设置为auto,其余属性必须为特定值或默认值或0
  2. width必须设置为auto或某种类型的非负值,padding,border不能设置为负值;但margin可以设置为负值,并且设置为负值后,元素内容框的左或右边界位置会移动并且内容框宽度增大,如下图

需要知道的画外音:

  • chrome下width默认为auto;border,padding,mar gin默认为0;所以以下所讲的auto除了width,margin的需要显式设置。
  • 正常流中块级元素框的水平部分总和(width+pdding+border+margin)等于父元素的width
  • 如果设置width,margin-left,margin-right中某个值为auto,而余下两个属性指定为特定值,那么设置为auto的属性UA会确定所需长度从而使元素框的宽度等于父元素的width。
  • 如果设置width,margin-left,margin-right都为非auto的某个值,此时总会把margin-right强制为auto。
  • 当不设置行内非替换元素如span的宽高时,即使它里面有文本内容,不管是在开发者工具看盒模型宽高还是用js获取宽高都为auto。而块级非替换元素不设置宽高里面有文本内容就可以获取具体像素宽高值。

margin: 0 auto 为啥可以居中 因为他的父元素的width始终等于子元素所有之和这个做限制着,而行级元素0 auto就不行因为一行中不止span一个没有父元素宽度限制

注意块级元素设margin:30px,其实相当于30 auto 30 30 因为要保证父元素的内容充斥着子元素所有之和。除非将块级元素设置为行内块级元素,这才可以30 30 30 30

当将元素margin-top,left设置为负数后是content在向上,左移动,margin-top,left的位置并不动

圣杯布局:设置为浮动是必要的,因为要margin为负转到前一个后面。right是跟着left移动的,但是right只移动left的width(+border+padding)这么宽,此时恰好left的margin-left和margin-right相逢,如果再继续左移的话,margin-right继续向左移超越maring-left的那条线位置。

当left拉回来了,但会覆盖middle内容的左端,要把middle内容拉出来,方法(1)所以在外围container加上 padding:0 220px 0 200px

方法二(2)或给middle添加box-sizing:border-box 设padding-left:220px这样也可以将内容拉过来。但是这样会使middle在底层,left和right在其上方 和双飞翼的效果类似(若设双飞翼的子元素的padding)

同理right

注意设置为relative是有原因的,若设成absolute,因为浮动和决定定位不能同时用,同时用会优先绝对定位。因为margin-left=100%作用下,看不见left了

参考:http://www.cnblogs.com/imwtr/p/4441741.html

https://segmentfault.com/q/1010000002709305

http://www.cnblogs.com/lyzg/p/5160570.html

一些常用css技巧的为什么(一)我所理解的margin的更多相关文章

  1. 一些常用css技巧的为什么(二)我所理解的line-height

    要用到的基本术语和概念: 替换元素:用作为其他内容占位符的一个元素,或说替换元素内容的部分并非由文档内容直接表示.比如img元素它由文档本身之外的一个图像来替换,比如input元素要由一个单选按钮,复 ...

  2. 常用CSS技巧资料收集

    1.重置浏览器的字体大小  重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul, ...

  3. 常用CSS Reset汇总

    什么是Css Reset呢? 在 HTML标签在浏览器里有默认的样式,不同浏览器的默认样式之间也会有差别.在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率.所以解决的方法就是一开始 ...

  4. 常用前端布局,CSS技巧介绍

    常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...

  5. Css常用的技巧

    一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.  具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...

  6. 一些常用的 CSS 技巧和知识点

    作为一名前端工程师,CSS 是必备技能之一,然而在日常开发中,总有那么些时候,面对着炫酷的效果图,脑子里的 CSS 属性却一片空白,于是只能借助搜索引擎,在一堆复杂的介绍中找到需要的内容复制粘贴.有没 ...

  7. html5基础的常用的技巧

    html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...

  8. apache环境.htaccess设置301跳转及常用.htaccess技巧整理

    apache环境.htaccess设置301跳转及常用.htaccess技巧整理 无论是Nginx,还是Apache都各自有优势,对于我们普通用户而言基本上也没有多大的区别.在虚拟主机环境中,基本上都 ...

  9. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

随机推荐

  1. 【JavaScript】关于JS中的constructor与prototype

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  2. 关于ASP.NET中Button的OnClientClick属性

    Button有Click属性和OnClientClick属性,执行顺序上OnClientClick先执行,调用本地脚本,根据返回值确定是否执行Click. 当返回True则执行Click,当脚本错误或 ...

  3. c#使用MethodInvoker解决跨线程访问控件

      功能函数测试集锦(77)  C#专区(114)  版权声明:本文为博主原创文章,未经博主允许不得转载. .net 原则上禁止跨线程访问控件,因为这样可能造成错误的发生,有一种方法是禁止编译器对跨线 ...

  4. 基于jQuery的美食时间轴焦点图插件

    这是一款非常炫酷的jQuery焦点图插件,这款jQuery焦点图的特点是有一个时间轴,点击切换按钮时,时间轴会逐渐移动,时间轴上的图片也会逐渐切换.另外,在图片上方也可以放置自定义样式的文字. 在线预 ...

  5. Docker学习笔记2

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  6. iOS App 百思不得姐

    项目介绍 仿照百思不得姐,通过看视频学习自己实践并简单总结项目开发过程中普遍遇到的问题,并且将可以用到其他项目中的分类方法进行简单总结,便于以后在别的项目中使用. 每天任务 1. 实现相应功能 2. ...

  7. B - 娜娜梦游仙境系列——跳远女王

    B - 娜娜梦游仙境系列——跳远女王 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Other ...

  8. Amazon 开始接受 Windows 礼品卡预订

    在 8 月微软虚拟货币系统 Microsoft Points 已经正式被真实货币替代,但目前,配套真实货币系统将推出的礼品卡还并没有开始销售.Amazon 上的一则预订显示“Windows 礼品卡”( ...

  9. iOS 手机 邮箱 正则表达式

    //iOS代码//判断邮箱格式是否正确的代码: //利用正则表达式验证 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex ...

  10. 结合源码看nginx-1.4.0之nginx多进程机制详解

    目录 0. 摘要 1. nginx多进程设计思想 2. nginx多进程设计数据结构 3. nginx进程间通信机制 4. 一个简单的多进程例子 5. 小结 6. 参考源码