CSS基础知识---浮动,定位和盒模型
转载请注明出处!
需要掌握的三个最重要的CSS概念是浮动,定位和盒模型。
盒模型概述:
页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成。
内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域。添加边框会在内边距的区域外边加一条线。在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔。
内边距,边框,和外边距是可选的,默认值为零。但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的margin和padding手动设置为零来覆盖这些浏览器样式!例如:
1 *{ 2 3 margin: 0; 4 5 padding: 0; 6 7 } (不建议,建议使用全局的reset单独设置)
PS:在CSS中,width和height指的是内容区的宽度和高度。增加内边距,边框和外边距不会影响内容区的尺寸。但会增加元素框(盒模型)的总尺寸。
内边距,边框和外边距可以应用于一个元素的所有边,也可以用于单独的边。外边距还可以是负值,这可以用在多种技术中(例如margin-top:-10px;意思是说盒子向上移动10px)。
PS:IE6的混杂模式中使用自己的非标准的盒模型。这些浏览器的width属性不是内容的宽度,而是内容,内边距和边框的宽度总和。因此在固定width之后,添加的内边距越多,给内容留下的空间就越少。
外边距叠加:
简单地说就是,当两个或更多的垂直外边距相遇时,他们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。
当一个元素包含在另一个元素中时(假设没有内边距或边框将外边距分隔开),他们的顶或底外边距也会发生叠加。
外边距甚至可以与本身叠加,假设一个空元素,它有外边距,但是没有边框或内边距。在这种情况下,顶外边距和底外边距碰到了一起,他们就会发生叠加。如果此时这个外边距和另一个元素的外边距相碰,还会发生叠加。
这就是一系列空的段落元素占用的空间非常小的原因。因为他们所有的外边距都叠加在了一起,形成一个小的外边距。
PS:只有普通文档流中的块框的垂直外边距才会发生叠加,行内框,浮动框或绝对定位框之间的外边距不会发生叠加。
(参考链接:http://www.smallni.com/collapsing-margin/)
定位概述:
1. 可视化格式模型
两个框一个属性:块框和行内框+display(block, inline, none)属性。
CSS中三种基本的定位机制:普通流,浮动和绝对定位。除非专门指定,否则所有的框都在普通流中定位。顾名思义,普通流中元素的位置由元素在HTML中的位置决定。
块框,从上到下一个接一个的垂直排列,框之间的垂直距离由框的垂直外边距计算出来。
行内框,在一行中水平排列。可以使用水平内边距,边框和水平外边距调整他们的水平间距。注意:但是垂直外边距,边框和内边距不影响行内框的高度。同样在行内框上显式的设置高度和宽度也没有影响。行内框的高度总是足以容纳它所包含的所有行内框。但是设置行高可以增加这个框的高度,所以,修改行内框的唯一方法是修改行高或者水平内边距,外边距或边框。
好在CSS2.1允许把元素的display属性设置为inline-block。这个声明让元素像行内元素一样水平的依次排列。但是,框的内容仍然符合块框的行为,例如能显式的设置宽度,高度和垂直外边距和内边距。FireFox3.0及以上,IE8以及Safari和Opera的高版本支持此属性值。
另外匿名行框和匿名块框的定义作了解:
匿名块框:将一些文本添加到一个块级元素的开头时候,即使没有把这些文本定义为块级元素,它们也会被当做块级元素对待,例如:
1 <div> 2 3 some text //匿名块框 4 5 <p>some more text</p> 6 7 </div>
匿名行框:假设有一个包含三行文本的段落,每行文本会形成一个匿名行框。
我们无法直接对匿名块或行框应用样式。
2. 相对定位
通过设置元素的垂直和水平位置,元素“相对于”它的起点进行移动。
在使用相对定位的时候,元素仍然占据原来的空间。因此,移动元素会导致他覆盖其他框。
相对定位其实是被看做普通流定位模型的一部分,因为元素的位置是相对于他在普通流中的位置。
3. 绝对定位
与相对定位相反,绝对定位是是元素的位置与文档流无关,因此不占据空间。普通流中的其他元素的布局就像绝对定位的元素不存在时一样。
绝对定位的元素的位置是相对于距离他最近的那个已定位的祖先元素确定的,如果元素没有已定位的祖先元素,那么它的位置是相对于初始包含块的。根据用户代理的不同,初始包含块可能是画布或HTML元素。
通过设置z-index属性来控制据对定位的框的叠放顺序,z-index值越高,框在栈中的位置就越高。
相对于已经相对定位的祖先元素对框进行绝对定位,在大多数现代浏览器中实现的很好。但是在Windows上的IE5.5和IE6有bug。如果相对于相对定位的框的右边或底部设置绝对定位的框的位置,那么需要确保相对定位的框已经设置了尺寸(宽度和高度)。
在进行页面布局的时候,绝对定位是非常有用的,尤其是在使用了相对定位的祖先元素的情况下。
因为绝对定位的元素与文档流无关(不占位),所以他们不影响普通流中的框。如果扩大绝对定位的框(例如,通过增加字号),周围的框(指普通文档流中的框)不会重新定位(而相对定位是占位的),因此尺寸的任何改变都会导致绝对定位的框产生重叠,从而破坏布局。
4. 固定定位
固定定位是绝对定位的一种,,差异在于固定元素的包含块是视口(viewport),这样我们可以创建总是出现在窗口相同位置的浮动元素。
IE6和更低版本不支持,IE7部分支持这个属性,在实现中有许多bug。
5. 浮动
浮动框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘。
因为浮动框不在文档的普通流中,所以文档的普通流中的块框表现的就像浮动框不存在一样。
如果包含块太窄,无法容纳水平排列的3个浮动元素,那么其他浮动块,向下移动,直到有足够的地方。如果浮动的元素高度不同,那么当他们向下移动时可能会被其他浮动元素“卡住”。如下图:
行内框和清理:
浮动会让元素脱离文档流,不再影响不浮动的元素。实际上,并不完全如此。如果浮动元素后面有一个文档流中的元素,那么这个元素的框会表现的像浮动根本不存在一样。但是,框的文本内容会受到浮动元素的影响,会移动以留出空间。用技术上的术语来说就是,浮动元素旁边的行框被缩短,从而能给浮动元素留出空间,因此行框围绕浮动框。实际上,创建浮动框是文本可以环绕图像,如下图:
要想阻止行框围绕在浮动框的外边,需要对包含这些行框的元素应用clear属性,clear(清理元素)的工作原理是:浏览器在元素的顶上添加足够的外边距,使元素的顶边缘垂直下降到浮动框下面。如下图:
清除浮动方法
(参考链接:http://www.cnblogs.com/ForEvErNoME/p/3383539.html)
方法1:使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
方法2:使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
方法3:给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。
方法4:使用邻接元素处理
什么都不做,给浮动元素后面的元素添加clear属性。
方法5:使用CSS的:after伪元素
结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点".",并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。
总结:
通过上面的例子,我们不难发现清除浮动的方法可以分成两类:
一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素。
推荐:
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;在小模块如ul里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;正文中使用邻接元素清理之前的浮动。
最后可以使用相对完美的:after伪元素方法清理浮动,文档结构更加清晰。
《CSS mastery》读书笔记!
For my lover, CC!
转载于:https://www.cnblogs.com/ttcc/p/3855486.html
CSS基础知识---浮动,定位和盒模型相关推荐
- CSS基础知识(定位)
CSS基础知识 CSS布局的三种机制 普通流(标准流) 浮动 定位 定位模式 静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 边偏移 定位 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
- HTML+CSS基础知识3
HTML+CSS基础知识3 15.css选择器 16.css的继承 17.css优先级 18.css盒子模型 19.css标签分类 20.显示框类型 21.标签的嵌套规范 22.溢出隐藏 23.透明度 ...
- 前端开发入门:html和css基础知识回顾2
HTML+CSS基础知识 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被 ...
- HTML+CSS基础知识
一.HTML基础 1.html的基础结构: 2.html中的语法: - 在尖角符号后面的第一个英文单词就是当前标记的名称 - 标记也可以称为标签或者元素 - 双标签结束的反斜杠不能省略 但是单标签的反 ...
- CSS基础知识: 框架
CSS基础知识整理 框架 box 文章目录 CSS基础知识整理 框架 box 长度单位 颜色单位 框架(盒子) 边框 border 外边距 margin 外边距和并(垂直布局) overflow 高度 ...
- html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
- CSS 基础知识 属性
阅读目录 参考文献 CSS 基础知识 CSS 是怎么工作的? CSS 的使用 层叠.优先级和继承 @规则 常见值与单位 尺寸(长度/大小) color 颜色值 渐变色 gradient 计算函数 ca ...
- CSS基本知识—浮动
CSS基本知识-浮动 1.传统网页布局的三种方式 网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 1.普通流( ...
最新文章
- Oracle 12c DG备库Alert报错ORA-01110
- 500 行代码写一个俄罗斯方块游戏
- iphone同步助手_教你如何用爱思助手给你的苹果手机设置自己喜欢的铃声
- 王道计算机考研 数据结构 (查找-上)
- 老板啥都懂,还天天套路我?!
- hystrix应用 博客_用Hystrix保护您的应用程序
- STL源码剖析 set集合
- 小汤学编程之JDBC(二)——dbutils框架和DataSource连接池
- ubuntu server 18.04 和 20.04 安装 RabbitMQ
- 【干货】前端开发VUE实例
- iOS 健康 计步 卡路里
- c语言实验总结200字,数控毕业生自我鉴定200字(精选3篇)
- 听说你想去大厂看学妹,带你看看小米前端实习岗面试长啥样?
- [暑假]简单认识一下常用的字体 <<微软雅黑 黑体 和 宋体>>
- 在html页头设置不缓存
- ipa 修改服务器地址,iOS重签名 – ipa包(服务器适用)
- 文件系统之软连接、硬链接的区别/文件删除与空间的联系/df和du的区别
- 哪些城市有PMP考试考点?PMP考试考场都在哪?
- 如何使用U-Net-train进行语义分段,并在Keras中测试您的自定义数据
- 支付宝当面付申请设置教程,支持个人用户