【持续更新】css常见基础问题-1（小白学习）

这一篇的作用主要是在刷完css基础知识后，在实战中遇到的一些问题整理，对于有css实战经验的人来说已经是基础中的基础，对于新手来说值得一看。

1. display:inline、block、inline-block的区别

参考了一篇博主宣午刚001的博客，内容写的很详细。

问题描述：
block元素 – 高度，行高以及顶和底边距都可控制,宽度缺省是它的容器的100%，除非设定一个宽度
inline元素 – 和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。

现有如下需求：让一个inline元素从新行开始；让块元素和其他元素保持在一行上；控制inline元素的宽度（对导航条特别有用）和高度；无须设定宽度即可为一个块元素设定与文字同宽的背景色。
解决这一需求的方法就是：display:inline-block – 它将对象呈递为内联对象，但是对象的内容作为块对象呈递。

2. CSS的元素塌陷问题

问题描述：
一般在标准的文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。

当子元素设置float后发生了问题：设置float的子元素完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
解决这一需求的方法就是：①父元素添加固定高度；②父元素也添加浮动；③给父元素添加overflow：hidden；④给父元素添加一个无关的元素，让添加的无关元素去清除浮动 clean：both;⑤通过伪类来实现，在需要清除浮动的父元素里，添加一个清除浮动的伪类，如下代码所示。

	.div1:after{
	            content: "";
	            display: block;
	            clear: both;
	          }

3. overflow:hidden作用

第一个作用，也就是它表面意思所展示的作用，即溢出隐藏：一个元素的内容（文字、图片等均可）若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。
第二个作用，和本篇博客上面的第二点相对应，用于清除浮动。
当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。
第三个作用，解决外边距塌陷。
父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷。
overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。
本节参考文献：星星之火M

4. outline 与 border 的区别

学过基础后，可以发现有些属性的功能是具有交叉性的，例如一个div的位置设置方法就有多种。那么对于一个html元素设置边框也遇到了两种方法，他们之间有什么区别呢？
区别一：border 可应用于几乎所有有形的html元素，而 outline 是针对链接、表单控件和ImageMap等元素设计。从而另一个区别也可以推理出，那就是： outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。
border支持box-sizing: border-box，当有边距时，是新增了边框后在按照以前的边距处理
区别二：border支持box-sizing: border-box，当有边距时，是新增了边框后在按照以前的边距处理；而outline不支持box-sizing: border-box;先处理边距，后加轮廓，有点类似缩放（transform: scale(1.2);）无论轮廓大小样式不影响布局。

5.box-sizing 属性

允许以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

6.position四个属性的区分

四个属性：① static：保持原有标准文档流（默认）；②relative：一个元素相对于自己本身位置的移动，不脱离文档流；③absolute：脱离了文档流，可以脱离父容器移动，该元素的活动范围将被局限在设置了position:relative的祖先容器中；同时它的四个方向（top/bottom/left/right）如果都被设置了大小，则它本身将会出现边框，即使自身没有设置宽高，也会根据祖先元素而相对应的固定了自身宽高；④fixed：脱离整个文档流，相对于可视窗口进行位置固定。
重要区分：和float定位的区别：float一般只支持元素向左上角或右上角流动，而position将元素的定位扩展到了四个方向上；另外，float只局限于父元素框架内的移动，而position的absolute可以脱离文档流，在祖先元素的框架内移动。
position属性我找了个很好的动画教程和解析，给原作者点个赞！

7.什么时候触发BFC

BFC的主要目的就是，形成一个完全独立的空间，让空间的子元素不会影响到外面的布局。
如何触发BFC呢（注意，BFC是在CSS中触发的）？
在父元素中设置以下四类属性，就会触发BFC:

1 float不为none
2 position不为relative和static
3 overflow为auto scroll和hidden
4display的值为table-cell或inline-block

因为触发这些规则时，父元素计算高度宽度时，不得不让子元素参与进来，因此就会将子元素包裹，从而触发BFC形成独立空间。
但在布局中，有时处于父元素需要，无法给父元素设置这些属性，因此针对不同的问题还会有其他的多种解决办法来解决。
※ BFC的一些应用：
1 解决浮动元素令父元素高度塌陷的问题
2 解决自适应布局的问题
3 解决外边距垂直方向重合问题

8. CSS居中和布局方法

本来打算自己做一个方法总结，但发现了一个很好的总结网站，对各种居中和布局方法均作了示例，总有一款适合你的，点此查看链接。