小结在前端页面布局开发容易遇到的几个CSS问题

本文仅仅是针对于项目经验不足，在实际进行前端页面开发的时候，特别容易遇到的几个问题。

问题一、box-sizing属性

这是关于盒模型的问题，因为在某些情况下，需要对某些元素进行box-sizing的设置，刚开始我并没有想到是这个问题，直到在后续需要根据视觉设计稿调样式的时候，才发现意识可以用border-sizing布局。

我们知道，通常在计算一个元素的宽高的时候：值 = width/height + padding+margin+border的，这是正常的盒模型情况下，还有一种情况是：值 = width/height ，该元素设置的padding\margin\border都是已经是在设定的宽高里面包含了，这就是另一种所谓的IE盒模型，之所以有这些区别就是通过box-sizing这个属性进行设置的。

box-sizing: border-box | content-box | inherit

说明：

content-box：标准盒模型，CSS定义的宽高只包含content的宽高。

border-box：IE盒模型，CSS定义的宽高包括了content，padding和border。

inherit：继承 父元素 box-sizing属性的值

问题二、z-index属性

在进行一个项目页面样式的时候，关于层叠的展示用到时非常多的，有时候代码并没有报错，但是有些功能可能就是实现不了，最常见的可能就是由于元素的层叠问题，导致一个点击事件被覆盖了从而不能正常实现点击事件。如果是项目经验不足的话，找bug是还是蛮痛苦的，所以我觉得有必要重视z-index这个属性。

含义： z-index 属性指定了一个具有定位属性的元素及其子代元素的层叠顺序。当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。

值 ： 是数字，可以是正数或者负数，通常来说 z-index 值较大的元素会覆盖较小的一个。

实现： 对于一个已经定位的元素（即position属性值是非static的元素），z-index 属性才能指定数值。

问题三、块级元素和内联元素

块级元素和内联元素也是在实际项目中遇到非常多的，也比较容易就遇到一些坑，比如如果不注意的话，对一个内联元素设置了宽或者高，但是你发现并没有起作用，这就需要深入理解一下块级元素和行内元素了。

1、常见的内联元素和块级元素

行内元素：a, img, span, button, input, label, select, textarea等

块级元素：div, p, h1-h6, table, ul, ol, pre等

2、块元素的特点：

• 总是在新行上开始；
• 高度、行高以及外边距和内边距都可控制；
• 宽度默认是它容器的100%，除非设定一个宽度；
• 可以容纳内联元素和其他块元素。

3、内联元素的特点：

• 和其他元素都在同一行；
• 高，行高及外边距和内边距不可改变；
• 宽度就是它的文字和图片的宽度，不可改变；
• 内联元素只能容纳文本或者其他内联元素。

4、块级元素和内联元素之间的转换：

方法1、 display

块元素默认display:block;行内非替换元素默认为display：inline;行内替换元素默认为display:inline-block;

• display:none; 不显示该元素，也不会保留该元素原先占有的文档流位置。
• display:block; 转换为块级元素。
• display:inline; 转换为行内元素。
• display:inline-block; 转换为行内块级元素。

方法2、 float

当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。

方法3、 position

当为行内元素进行定位时，position:absolute; 与 position:fixed; 都会使得原先的行内元素变为块级元素。

问题还有很多，只是说了这3个遇到比较频繁和有特点的，后续再慢慢补充吧。

每天总结一点点，每天学习一点点，每天进步一点多 (〃’▽’〃)