css几个概念

5ep9lzv

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

元素类型

HTML 的元素能够分为两种：

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

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

块级元素会独霸一行（即没法与其他元素表示在同一行内，除非你显式修改元素的 display 属性），而内联元素则都会在一行内表示。块级元素能够设置 width、height 属性，而内联元素设置没效。块级元素的 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(10p

1fy07h

哈哈、笑死我了、太搞笑了吧等。