本文将讲述 CSS 中最核心的几个概念,包括:盒模型、position、float等。这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成。为了掌握它们,有必要写出来探讨一下,如有错误欢迎指正。

元素类型

HTML 的元素可以分为两种:

  • 块级元素(block level element)

  • 内联元素(inline element 有的人也叫它行内元素)

两者的区别在于以下三点:

  1. 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显式修改元素的 display 属性),而内联元素则都会在一行内显示。

  2. 块级元素可以设置 width、height 属性,而内联元素设置无效。

  3. 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。

最常见块级元素应该是 <div> 吧,内联元素有 <span> <a> <img> 等等,完整的元素列表可以谷歌一下。

具体来说一下吧,

.example { width: 100px; height: 100px;}

我们为<div>设置上面的样式,是有效果的,因为其是块级元素,而对 <span> 设置上面的样式是没用的。要想让 <span>也可以改变宽高,可以通过设置display: block; 来达到效果。当 display 的值设为 block 时,元素将以块级形式呈现;当 display 值设为 inline 时,元素将以内联形式呈现。

若既想让元素在行内显示,又能设置宽高,可以设置:

display: inline-block;

inline-block 在我看来就是让元素对外呈内联元素,可以和其他元素共处与一行内;对内则让元素呈块级元素,可改变其宽高。

HTML 代码是顺序执行的,一份无任何 CSS 样式的 HTML 代码最终呈现出的页面是根据元素出现的顺序和类型排列的。块级元素就从上到下排列,遇到内联元素则从左到右排列。这种无样式的情况下,元素的分布叫普通流,元素出现的位置应该叫正常位置(这是我瞎起的),同时所有元素会在页面上占据一个空间,空间大小由其盒模型决定。

盒模型

页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model )。请看 Chrome DevTools 里的截图:

可以显而易见的看出盒模型由 4 部分组成。从内到外分别是:

content -> padding -> border -> margin

按理来说一个元素的宽度(高度以此类推)应该这样计算:

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

但是不同浏览器(你没有猜错,就是那个与众不同的浏览器)对宽度的诠释不一样。符合 W3C 标准的浏览器认为一个元素的宽度只等于其 content 的宽度,其余都要额外算。于是你规定一个元素:

.example { width: 200px; padding: 10px; border: 5px solid #000; margin: 20px;}

则他最终的宽度应为:

宽度 = width(200px) + padding(10px * 2) + border(5px * 2) + margin(20px * 2) = 270px;

而在 IE(低于IE9) 下,最终宽度为:

宽度 = width(200px) + margin(20px * 2) = 240px;

我个人觉得 IE 的更符合人类思维,毕竟 padding 叫内边距,边框算作额外的宽度也说不下去。W3C 最后为了解决这个问题,在 CSS3 中加了box-sizing这个属性。当我们设置box-sizing: border-box;时,border 和 padding 就被包含在了宽高之内,和 IE 之前的标准是一样的。所以,为了避免你同一份 css 在不同浏览器下表现不同,最好加上:

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

这里还有两种特殊情况:

  • 无宽度 —— 绝对定位(position: absolute;) 元素

  • 无宽度 —— 浮动(float) 元素

它们在页面上的表现均不占据空间(脱离普通流,感觉像浮在页面上层一样,移动它们不影响其他元素的定位)。这就涉及到另外两个核心概念 position 和 float。

position

position 这个属性决定了元素将如何定位。它的值大概有以下五种:

具体效果可以参考,或者自己写一下就明白了。

每个网页都可以看成是由一层一层页面堆叠起来的,如下图所示。

position 设置为 relative 的时候,元素依然在普通流中,位置是正常位置,你可以通过 left right 等移动元素。会影响其他元素的位置。

而当一个元素的 position 值为 absolute 或 fixed 的时候,会发生三件事:

  1. 把该元素往 Z 轴方向移了一层,元素脱离了普通流,所以不再占据原来那层的空间,还会覆盖下层的元素。

  2. 该元素将变为块级元素,相当于给该元素设置了 display: block;(给一个内联元素,如 <span> ,设置absolute
    之后发现它可以设置宽高了)。

  3. 如果该元素是块级元素,元素的宽度由原来的 width: 100%(占据一行),变为了 auto。

由此观之,当 position 设置为 absolute 或 fixed,就没必要设置 display 为 block 了。而且如果你不想覆盖下层的元素,可以设置 z-index 值 达到效果。

float

float 顾名思义,就是把元素浮动,它的取值一共有四个:left right none inherit,光看名字就懂了,无需多言。

最初的 float 只是用来实现文字环绕图片的效果,仅此而已。而现在 float 的应用已不止这个,前辈们也是写了无数博文来深入浅出的讲解它。

从本质上讲解了 float 的原理。

我就不班门弄斧写原理了,只说说 float 的几个要点就行了:

  1. 只有左右浮动,没有上下浮动。

  2. 元素设置 float 之后,它会脱离普通流(和 position: absolute;一样),不再占据原来那层的空间,还会覆盖下一层的元素。

  3. 浮动不会对该元素的上一个兄弟元素有任何影响。

  4. 浮动之后,该元素的下一个兄弟元素会紧贴到该元素之前没有设置 float 的元素之后(很好理解,因为该元素脱离普通流了,或者说不在这一层了,所以它的下一个元素当然要补上它的位置)。

  5. 如果该元素的下一个兄弟元素中有内联元素(通常是文字),则会围绕该元素显示,形成类似「文字围绕图片」的效果。

  6. 下一个兄弟元素如果也设置了同一方向的 float,则会紧随该元素之后显示。

  7. 该元素将变为块级元素,相当于给该元素设置了 display: block;(和position: absolute; 一样)。

这里还有个东西,就是广为人知的——清除浮动。具体的方法五花八门,可以看这篇:那些年我们一起清除过的浮动,我就不多说了。

写完本文后,脑子中又出现了一系列问题,假如 position 和 float 同时设置会出现什么问题?兼容性如何?哪个属性会被覆盖?还没来得及实践,改天以排列组合的方式看看到底是什么效果……如果有人实践过可以偷偷告诉我^_^

作者:GeekPlux

文章源自:http://www.geekplux.com/2014/04/25/several_core_concepts_of_css.html

慕课圆桌



1、你有哪些CSS重点概念分享给大家?

2、如果有帮助的话就发个吧!

快来评论吧,欢迎各种吐槽,慕课君随时和你畅聊,帮你上头条!

相关课程

张鑫旭老师的【CSS深入理解系列】

1.CSS深入理解之float浮动

http://www.imooc.com/learn/121

2.

http://www.imooc.com/learn/192

3.CSS深入理解之overflow (点击阅读)



4.CSS深入理解之line-height (点击阅读)

热文推荐:

12 个 CSS 高级技巧汇总

史上最全Html与CSS布局技巧

CSS设计中的变与不变 (点击阅读)

慕课网

微博: @慕课网

CSS 最核心的四个概念(摘录)的更多相关文章

  1. CSS 最核心的四个概念

    本文将讲述 CSS 中最核心的几个概念,包括:盒模型.position.float等.这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成.为了掌握它们,有必要写出来探讨一下,如 ...

  2. CSS 最核心的几个概念

    CSS 中最核心的几个概念,包括:盒模型.position.float等. 这些是 CSS 的基础,也是最常用的几个属性,它们之间看似独立却又相辅相成. 元素类型 HTML 的元素可以分为两种: 块级 ...

  3. 高效CSS开发核心要点摘录

    做网站的,我们都知道尽量减少请求数,压缩CSS代码量,使用高效CSS选择符等方式可以来提高网站的载入速度和访问速度,也就是优化网站的性能. 下面分析了一些CSS的书写方式,很多都是我们知道并且正在使用 ...

  4. (1) css的核心基础

     css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg ...

  5. 听说这四个概念,很多 Java 老手都说不清

    Java 是很多人一直在用的编程语言,但是有些 Java 概念是非常难以理解的,哪怕是一些多年的老手,对某些 Java 概念也存在一些混淆和困惑. 所以,在这篇文章里,会介绍四个 Java 中最难理解 ...

  6. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  7. css中按钮的四种状态

    css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...

  8. CSS的核心属性和浮动

    1.CSS属性组成和作用   属性:属性值 1)每个css样式都必须由两部分组成:选择符(Selector)和声明(Decleration) 注:声明又包括属性(Properyt)和属性值(Value ...

  9. css的核心原理分为优先级原则与继承原则两大部分

    css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...

随机推荐

  1. 使用BAT批处理执行sql语句的代码

    使用BAT批处理执行sql语句的代码 有时候需要执行一些Sql语句时,不想开企业管理器,或者是发给客户执行但那边又不懂代码,这时就可以用下面方法 1.把待执行Sql保存在一个文件,这里为2011022 ...

  2. Android-NDK编译:cocos2d-x(二)

    看了看NDK的文档....里面总是莫名的会提下windows需要cygwin环境... 但是cocos2d-x3.0alpha1 中, 编译samples的python脚本 cocos2d-x3/bu ...

  3. java&postgresql时区总结

    介绍这篇文章之前,首先回答一个问题,以前都没有时区的概念,程序也写的好好的,为什么要计算时区哪?举个例子,比如有一个订单的时间是:2015-07-04 11:28:19,那么咋一看没什么问题,可是如果 ...

  4. repo andrid

    http://www.cnblogs.com/bluestorm/p/4419135.html

  5. [LeetCode] Range Sum Query 2D - Immutable

    Very similar to Range Sum Query - Immutable, but we now need to compute a 2d accunulated-sum. In fac ...

  6. hao.360.cn不停跳....

    最近单位里访问hao.360.cn经常会跳....无限循环,有时跳几十次后才会打开.... 但是,单位里走电信出口部分的电脑就没有问题...同样的电脑(移动出口)的用360浏览器.火狐也问题不大,关键 ...

  7. p范数(p norm)

    先回顾一下范数的定义(en.wikipedia.org/wiki/Norm_(mathematics)): Given a vector space V over a subfield F of th ...

  8. jQuery浏览器差异

    //firefox Interface.send(data,function(msg){ $(msg).find("CARINFO").each(function(i){ var ...

  9. zeromq 测试总结

    总结 测试项目 github (https://github.com/solq360/jmzq) 非常不稳定 pub/sub 模式 30W压测丢了27W条消息,官方没有给出任何的发送状态供业务层处理 ...

  10. [原]ffmpeg编译android 硬解码支持库 libstagefright

    最近花了一天时间将ffmpeg/tools/build_stagefright执行成功,主要是交叉编译所需要的各种动态库的支持没链接上,导致各种报错,基本上网络上问到的问题我都碰到了,特此记录下来. ...