扫除CSS的盲区（一）

2018，你好

昨晚凌晨的那一刻——00:00，意味着新的一年的到来，让我们去遇见更好的自己。不管大家2017年过得怎样，我们终将会跟他说“分手”，说再见，再也不见吧！那些好的、坏的只会停留在2017年，我们将潇洒地向前走，一切归零，重新出发，从心出发，行动出发而不是说说而已，加油ヾ(◍°∇°◍)ﾉﾞ。

---

进入正题：
最近在恶补前端的一些小知识，开始学习前端知识的时候，心中觉得不就是几个标签嘛，可是越到后来才发觉还是有点小难度的，能够合理运用各个标签的属性，牢记他们的作用，需要实际操作滴。

（一）CSS的盒子模型
属性名：content 、 padding 、border 、margin

盒子模型

形象的比喻：
1.content—— 盒子里面所装的内容
2.padding —— 为了保护物品所添加的填充材料
3.border——盒子本身
4.margin——盒子之间需要通风的间隙

CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但不会损坏

---

（二）标签分类：行内元素、块元素，替换元素、非替换元素；

1. 替换元素与非替换元素

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如：<input type="text" />，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样
HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

非替换元素：
HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。比如<p>wanmei.com</p>，浏览器将把这段内容直接显示出来。

2. 内联元素（行内元素）与块元素

块元素：最明显的特征就是独自占领一行，自动充满父级元素的内容区域，绝不会让别人“侵略”（当然可以通过其他方式去改变他）。

• 常见的有：div，p..等等；
• 通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。这个地方浮动是一个比较特殊的情况，可以详查浮动这个知识
• 块级元素的width/height/margin/padding都是有效的；
  行内元素：
  上面说块及元素独自占领一行，行内元素就没这么霸道了，他可以左右都允许有元素，最常见的就是<a></a>，通过display:'inline'设置以后都会变成行内元素。

3.行内非替换元素：
对行内非替换元素如a元素、span元素等，

• 设置宽度width 无效、设置高度height无效，可以通过line-height来设置。
• 设置margin只有左右margin有效，上下无效。（这就是span的margin-top无效的原因）
• 设置padding只有左右padding有效，上下则无效。

4. 外边距

• 行内元素的padding-top，padding-bottom和margin-top,margin-bottom是真的是无效；并且，左右外边距不会合并，不过要注意一点，对于竖直方向的内边距该行内元素的内容范围是增大了，不过只是表象，对周围元素无任何影响。
• 块级元素的垂直相邻外边距会合并

---

（三）Box-sizing
在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现:在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现:

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

对比

值

content-box
默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。

border-box
width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。

这里的维度计算为：
width = border + padding + 内容的 width，
height = border + padding + 内容的 height。<dt>content-box</dt>

幸福是奋斗出来的！！！