来源:自学PHP网 时间:2015-04-14 14:51 作者: 阅读:次
[导读] 本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看 20284;独立却又相辅相成。为了掌握它们,有必要写出来探...
本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正。
元素类型HTML 的元素可以分为两种: 块级元素(block level element)内联元素(inline element 有的人也叫它行内元素)两者的区别在于以下三点: 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显示修改元素的 display 属性),而内联元素则都会在一行内显示。块级元素可以设置 width、height 属性,而内联元素设置无效。块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。常见的:
具体来说一下吧,
我们为 若既想让元素在行内显示,又能设置宽高,可以设置: inline-block 在我看来就是让元素对外呈内联元素,可以和其他元素共处与一行内;对内则让元素呈块级元素,可改变其宽高。 HTML 代码是顺序执行的,一份无任何 CSS 样式的 HTML 代码最终呈现出的页面是根据元素出现的顺序和类型排列的。块级元素就从上到下排列,遇到内联元素则从左到右排列。这种无样式的情况下,元素的分布叫普通流,元素出现的位置应该叫正常位置(这是我瞎起的),同时所有元素会在页面上占据一个空间,空间大小由其盒模型决定。 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model )。请看Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成。从内到外分别是: 按理来说一个元素的宽度(高度以此类推)应该这样计算: 但是不同浏览器(你没有猜错,就是那个与众不同的浏览器)对宽度的诠释不一样。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度,其余都要额外算。于是你规定一个元素: 则他最终的宽度应为: 而在 IE(低于IE9) 下,最终宽度为: 我个人觉得 IE 的更符合人类思维,毕竟 padding 叫内边距,边框算作额外的宽度也说不下去。W3C 最后为了解决这个问题,在 CSS3 中加了 box-sizing 这个属性。当我们设置 这里还有两种特殊情况: 它们在页面上的表现均不占据空间(脱离普通流,感觉像浮在页面上层一样,移动它们不影响其他元素的定位)。这就涉及到另外两个核心概念 position 和 float。 position 这个属性决定了元素将如何定位。它的值大概有以下五种: 具体效果可以参考w3school的实例,或者自己写一下就明白了。 每个网页都可以看成是由一层一层页面堆叠起来的,如下图所示。 position 设置为 relative 的时候,元素依然在普通流中,位置是正常位置,你可以通过 left right 等移动元素。会影响其他元素的位置。 而当一个元素的 position 值为 absolute 或 fixed 的时候,会发生三件事: 由此观之,当 position 设置为 absolute 或 fixed,就没必要设置 display 为 block 了。而且如果你不想覆盖下层的元素,可以设置 z-index 值 达到效果。 float 顾名思义,就是把元素浮动,它的取值一共有四个:left right none inherit,光看名字就懂了,无需多言。 浅如: 我就不班门弄斧写原理了,只说说 float 的几个要点就行了: 这里还有个东西,就是广为人知的——清除浮动。具体的方法五花八门,可以看这篇:那些年我们一起清除过的浮动,我就不多说了。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com