css盒子模型的深入理解，在块级、行内元素的区别和特性

作者: Be_somebody | 来源:发表于2018-12-16 02:03 被阅读0次

前端技能概况
css常见样式
入门8
css常见样式
入门8 CSS常见样式1
CSS 特性（1）
css常见样式
CSS常见样式
CSS常见样式问题搜集
css盒子模型的深入理解，在块级、行内元素的区别和特性

盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。

* {
  margin: 0;
  padding: 0;
}

css盒子模型到底的思想是什么？

CSS实现页面布局的一种思想：把页面的所有元素都看成一个类似于礼品盒的盒子，礼品盒可能会有好多层包装组成，那么页面元素也对应的有内容、边框、内外边距等组成。这里特别提醒一下，盒模型是要把元素看成立体的，它确实有空间的3D属性,css盒子3D模型从上到下分为5层：1、border；2、content+padding；3、background-image；4、background-color；5、margin。

目前有：标准盒子模型和IE盒子模型 2种盒模型，区别在于：

标准盒模型：元素的width和height = content //内容
IE盒模型：元素的width和height =content+border+padding //内容+边框+内边距

为了满足跨浏览器的差异，我们比较肯定的方式是使用标准盒模型，这里通过在网页顶部增加DOCTYPE的声明，来解决跨浏览器兼容方案（或者使用css3的声明方式）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS盒子模型对行内元素和块级元素的区别和特点

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。

行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化，另外

块级元素可以设置width,height属性。
行内元素设置width,height属性无效，它的长度高度主要根据内容决定。
块级元素即使设置了宽度,仍然是独占一行。
块级元素可以设置margin和padding属性。
行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不会产生边距效果。
块级元素对应于display:block. 行内元素对应于display:inline。

块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table...

行内元素(内联元素)：a , span, strong, em, br, img , input, label, select, textarea, cite....

如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。

Box-sizing说明

CSS3增加的box-sizing属性,允许我们规定元素使用哪种盒模型。IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。它具有有3个属性值：

box-sizing:content-box： W3C标准盒模型，默认属性。padding和border不被包含在定义的width和height之内。

box-sizing:border-box：IE6混杂模式盒模型， padding和border被包含在定义的width和height之内。此属性表现为怪异模式下的盒模型。

box-sizing：inherit：从父级元素中继承该属性。

如果设置box-sizing：border-box来使用IE6混杂盒模型，那么

.demo {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: border-box; /*增*/
    -moz-box-sizing: border-box;　　-webkit-box-sizing: border-box;}