css盒模型和元素类型

1.盒模型

margin:0 auto;一个有宽度的元素在浏览器中横向居中。

input{outline：none;}去掉input在鼠标点击时显示的外边线。

padding:

1. 用来调整子元素在父元素中的位置，padding需加在父元素上；
2. padding是额外加载元素原有大小之上的，添加了padding值需对原有的盒子大小进行删减。

margin值的解析：

1. 两个盒子左右边界累加，正常文档流的上下边界重合；
2. 在正常文档流下，子元素块直接写margin-top时，会将margin-top的属性值加上父元素身上。（子元素或父元素不设置任何浮动及定位的属性，或父元素不设置边框的情况下。

单行文本的溢出（...）：文字超出设定的范围后，以省略号进行显示。

1. 首先设置盒子宽度width；
2. white-space:nowrap; //使超出宽度的文字不换行，在一行内显示；
3. overflow:hidden; //超出的文字隐藏
4. text-overflow:scroll;//使超出文字为“...”

2.元素类型

块状元素：

1. 可定义宽、高；
2. 独占一行；
3. 可容纳其他内联元素和其它块状元素（p标签是一个块元素，但他只能作为内联元素的容器）。

内联元素：

1. 行内逐个显示；
2. 无自己形状，不能定义高度和宽度；
3. 遵循盒模型基本规则，可定义padding，border，margin，background等属性，padding，border，margin上下的值无实际功能。

元素类型转换

display:block/inline/inline-block(img,input)/none/list-item(li)

1）block:块状显示；

2）inline内联显示；

3）inline-block行内块元素；

4）none隐藏元素，此元素不会被显示；

5）list-item:将元素转换成列表，li的默认类型；

6）当元素设置了float属性后，就相当于该元素加了display：block。

不是所有的内联元素默认值都为inline

eg:img/input为inline-block

不是所有的块状元素的默认值都为block

eg:table为table，td为table-cell

置换元素与非置换元素

1. 元素本身一般拥有固有尺寸的元素，无实际的内容，即空元素，浏览器根据元素的属性和属性值来决定元素的具体显示内容；eg:img、input为置换元素；
2. 非置换元素：除置换元素外的元素。