前端学习笔记二－－－－盒模型、元素和属性

引言：

今天在前端页面开发中遇到如下几个问题：

1。ul，li元素设置为width＝xx％的情况，会出现页面折行，而不设置的话，使用padding标签等不能够整行填满显示；

2。在li里面使用img标签引入图片，会出现图片偏上，不能居中显示，即使采用align＝center，padding等都不能解决；

3。在同一块地方需要使用两个背景图片叠加显示效果；

这些问题，通过请教专业人士，发现其实具有共性。都牵涉到有个知识点就是关于盒模型，以及对应的块状元素，内联元素，学习了下。

一.盒模型：

css里面的盒模型，就是元素类似与盒子，由padding，margth，border等定义与外部元素的边界距离等。

盒模型边框定义如下：

Width   width+padding-left+padding-right+border-left+border-right

Height  height+padding-top+padding-buttom+border-top+border-buttom

使用中要注意的点：

么有width的情况，padding、margin是向内推进，但如果我们指定了Width的值，那么padding就是值盒模型向外延展的值。如果设置为百分比的形式，那么在保证满足占页宽度百分比的情况，由于有padding的值，整体的盒模型就会由于外部空间不够，而变形，比如折行。

块状元素/内联元素

任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。通常点理解，块元素每个占一行，而内联元素多个也可以只占一行。块元素比如div，ul，li，p等，内联元素比如span，a等；

内联元素，只有左右设置属性能发挥作用，上下属性没有作用，所以这也是为什么会出现2中的问题，使用padding不能居中显示；但采用相对行高可以解决。具体如下：

使用中要注意的点：

1。设置宽度width无效；
2. 设置高度height 无效，可以通过line-height来设置。
3. 设置margin 只有左右margin有效，上下无效。
4. 设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的，

 

后记：

根据对应知识点的了解后，开篇提到的三个问题就有对应的解决方法了。如下：

对于3的问题，由于内联元素作用于一行，所以可以使用内联元素的背景图片与块元素的背景图片兼容；

内联元素和块状元素也可以使用一定方法进行相互转换。