一些常用css技巧的为什么(一)我所理解的margin
要用到的基本术语和概念:
- 正常流:HTML文档的文本布局,在非西方语言中流的方向可能不同。大多数元素都在正常流中,浮动或定位可以让元素脱离正常流。
- 块级元素:像p,div之类的元素在正常流中会在其框之前和之后生成“换行”,所以处于正常流中块级元素会垂直摆放。
- 行内元素:strong,span之类的元素,这些元素不会在之前或之后生成“行分隔符”,它们是块级元素的后代。
- 水平格式化的7大属性:margin-left,border-left,padding-left,width,padding-right,border-right,margin-right。
- 只有width,左右外边距可以设置为auto,其余属性必须为特定值或默认值或0
- 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的更多相关文章
- 一些常用css技巧的为什么(二)我所理解的line-height
要用到的基本术语和概念: 替换元素:用作为其他内容占位符的一个元素,或说替换元素内容的部分并非由文档内容直接表示.比如img元素它由文档本身之外的一个图像来替换,比如input元素要由一个单选按钮,复 ...
- 常用CSS技巧资料收集
1.重置浏览器的字体大小 重置浏览器的默认值 ,然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ,如果你不想下载9MB的文件,代码如下: body,div,dl,dt,dd,ul, ...
- 常用CSS Reset汇总
什么是Css Reset呢? 在 HTML标签在浏览器里有默认的样式,不同浏览器的默认样式之间也会有差别.在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率.所以解决的方法就是一开始 ...
- 常用前端布局,CSS技巧介绍
常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...
- Css常用的技巧
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读. 具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...
- 一些常用的 CSS 技巧和知识点
作为一名前端工程师,CSS 是必备技能之一,然而在日常开发中,总有那么些时候,面对着炫酷的效果图,脑子里的 CSS 属性却一片空白,于是只能借助搜索引擎,在一堆复杂的介绍中找到需要的内容复制粘贴.有没 ...
- html5基础的常用的技巧
html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...
- apache环境.htaccess设置301跳转及常用.htaccess技巧整理
apache环境.htaccess设置301跳转及常用.htaccess技巧整理 无论是Nginx,还是Apache都各自有优势,对于我们普通用户而言基本上也没有多大的区别.在虚拟主机环境中,基本上都 ...
- 学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...
随机推荐
- corner2
Original: https://github.com/LondonX/corner2 Backup: https://github.com/eltld/corner2
- asp.net解决:当前上下文中不存在名称“Session”
第一种方法:将使用session的类页面继承 System.Web.UI.Page类,方法:public class AddUser : System.Web.UI.Page 第二种方法:在page里 ...
- Ambari源代码分析之总览
一.基本概念: Resource:Ambari把能够被管理的资源的抽象为一个Resource实例,资源能够包括服务.组件.主机节点等,一个resource实例中包括了一系列该资源的属性: Proper ...
- 设计模式 ( 十八 ) 策略模式Strategy(对象行为型)
设计模式 ( 十八 ) 策略模式Strategy(对象行为型) 1.概述 在软件开发中也经常遇到类似的情况,实现某一个功能有多种算法或者策略,我们能够依据环境或者条件的不同选择不同的算法或者策略来完毕 ...
- RHEL 7 命令行注册和激活订阅服务
导读 前一阵子,红帽推出了开发者免费使用订阅功能,只要注册成为红帽开发者就可以免费使用包括 RHEL7 在内的开发套件. 今天我们就来看一看怎么使用命令行来快速注册和激活订阅服务,以后就可以方便地 ...
- Linux中的文件描述符与打开文件之间的关系
Linux中的文件描述符与打开文件之间的关系 导读 内核(kernel)利用文件描述符(file descriptor)来访问文件.文件描述符是非负整数.打开现存文件或新建文件时,内核会返回一个文件描 ...
- C Primer
如果主函数使用void main(),由于它不是当前标准强制的一个选项,因此在有些系统上不能工作,为了使代码变得简单,main函数中可以没有返回语句. 先声明变量是为了防止拼写错误导致定义一个新的变量
- 小白日记46:kali渗透测试之Web渗透-SqlMap自动注入(四)-sqlmap参数详解- Enumeration,Brute force,UDF injection,File system,OS,Windows Registry,General,Miscellaneous
sqlmap自动注入 Enumeration[数据枚举] --privileges -U username[CU 当前账号] -D dvwa -T users -C user --columns [ ...
- SQL Server 数据库文件管理
关于数据库文件的管理问题,我经常说,常在江湖混,哪有不挨棍,用的时间长了,基本上都有遇到一些数据库文件管理上的问题,比如说: 1. SQL Server数据文件空间满 2. 日志文件暴涨 3. 文件不 ...
- uiview 的setAnimationTransition : forView 方法实现翻页效果
[UIView beginAnimations:nil context:nil]; [UIView setAnimationTransition:UIViewAnimationTransitionCu ...