CSS最核心的概念

CSS中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。下面我们一起来看看这些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 这个属性决定了元素将如何定位。它的值大概有以下五种：

具体效果可以参考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 的应用已不止这个，前辈们也是写了无数博文来深入浅出的讲解它。

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

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

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

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

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

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

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

7.该元素将变为块级元素，相当于给该元素设置了 display: block（和position: absolute一样）。

其实CSS可以分为多个，一个是重置css,一个是共有css,还有一个是核心css。所谓核心CSS就是对整个页面的布局，绘画，对整个网页起核心功能的CSS文件。

希望我的回答可以帮到你，有什么不懂可以追问。

1、标准流——标签按照规定好默认方式排列

2、浮动

3、定位

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，直到左边或者右边边缘及包含块或另一个浮动框的边缘。

选择器:{ float:属性值}

1、 浮动的元素会脱离标准流（脱标），不再保留原来的位置

2、浮动的元素会一行内显示并且元素顶部对齐

3、浮动的元素会具有行内块元素的特性

1、为了约束浮动元素，一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动左右位置，符合网页布局第一准则。

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。浮动的盒子只会影响当前浮动盒子后面的标准流，不会影响前面的标准流

父级盒子不给高度，自己盒子会撑开父级盒子高度，但是加上浮动就会无效。

额外标签法也称为隔墙法，是W3C推荐的做法。会在浮动元素的末尾添加一个空的标签。例如：<div style="chear:both"></div>。新的标签必须是块级元素。

选择器:{ clear :属性值}

实际工作中几乎只用clear :both 。清除浮动的策略是闭合浮动，只让浮动在父级盒子内部影响。

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。这个属性还用于外边距合并。   缺点就是无法显示溢出部分。

:after伪元素法相当于额外标签法的升级版，也是在浮动元素尾部添加空的块级元素，用法是给父元素添加属性。以下为固定格式。

类似于:after 伪元素法，只不过前后都会插入一个盒子，更符合闭合的概念。

---