首页 > 代码库 > CSS 最核心的几个概念

CSS 最核心的几个概念

2024-07-10 15:23:24   225人阅读

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

    

元素类型

HTML 的元素能够分为两种：

  • 块级元素（block level element）
  • 内联元素（inline element 有的人也叫它行内元素）

两者的差别在于下面三点：

  1. 块级元素会独占一行（即无法与其它元素显示在同一行内，除非你显示改动元素的 display 属性），而内联元素则都会在一行内显示。
  2. 块级元素能够设置 width、height 属性，而内联元素设置无效。
  3. 块级元素的 width 默觉得 100%，而内联元素则是依据其自身的内容或子元素来决定其宽度。

常见的:


详细来说一下吧,

.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 值怎样定位
staticposition的默认值。元素将定位到它的正常位置（上文提到过），事实上也就相当于没有定位。元素在页面上占领位置。不能使用 top right bottom left 移动元素位置。
relative相对定位，相对于元素的正常位置来进行定位。元素在页面占领位置。能够使用 top right bottom left 移动元素位置。
absolute绝对定位，相对于近期一级的 定位不是 static 的父元素来进行定位。元素在页面不占领位置。能够使用 top right bottom left 移动元素位置。
fixed绝对定位，相对于浏览器窗体来进行定位。其余和 absolute 一样，相当于一种特殊的 absolute。
inherit从父元素继承 position 属性的值。

详细效果能够參考w3school的实例，或者自己写一下就明确了。

每一个网页都能够看成是由一层一层页面堆叠起来的，例如以下图所看到的。

图片来自网络

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 的应用已不止这个，前辈们也是写了无数博文来深入浅出的解说它。

浅如：
经验分享：CSS浮动(float,clear)通俗解说 篇幅不长，通俗易懂，能够看完这篇文章再回过头来看本文。
深如：
CSS float浮动的深入研究、具体解释及拓展(一)
CSS float浮动的深入研究、具体解释及拓展(二)
从本质上解说了 float 的原理。

我就不班门弄斧写原理了，仅仅说说 float 的几个要点即可了：

  1. 仅仅有左右浮动，没有上下浮动。
  2. 元素设置 float 之后，它会脱离普通流（和 position: absolute; 一样），不再占领原来那层的空间，还会覆盖下一层的元素。
  3. 浮动不会对该元素的上一个兄弟元素有不论什么影响。
  4. 浮动之后，该元素的下一个兄弟元素会紧贴到该元素之前没有设置 float 的元素之后（非常好理解，由于该元素脱离普通流了，或者说不在这一层了，所以它的下一个元素当然要补上它的位置）。
  5. 假设该元素的下一个兄弟元素中有内联元素（一般是文字），则会环绕该元素显示，形成类似「文字环绕图片」的效果
  1. 下一个兄弟元素假设也设置了同一方向的 float，则会紧随该元素之后显示。
  2. 该元素将变为块级元素，相当于给该元素设置了 display: block;（和position: absolute; 一样）。

这里还有个东西，就是广为人知的——清除浮动。详细的方法五花八门，能够看这篇：那些年我们一起清除过的浮动，我就不多说了。


联系
我们