css中position和display常用属性值的理解

css几种属性的理解

这位两位仁兄写的非常不错，作为我的参考：
https://www.cnblogs.com/chinafine/articles/1765967.html
https://blog.csdn.net/czw2010/article/details/8741365
一、首先有必要了解一下块级元素和行内元素的特点：
块级元素特点：大多为结构性标记

• 总是从新的一行开始；
• 块级元素的宽高、内外边距是可控制的，不设置宽度时默认为100%；
• 块级元素可以包含块级元素和行内元素；
  例如：div、ul、li、form、table、hr、h1-h6、p、pre、address等

行内元素特点：大多为描述性标记

• 和其他元素在同一行出现；
• 宽高、外边距上下不可控，高度为默认元素内容高度；
• 行内元素只能包含行内元素和文本；
  例如：span、select、strong、sub、sup、input、a、b、br、image、i、textarea等；

块级元素和行内元素的转化：

• 行内元素转化为块级元素：
  • display:block；
  • position:absolute或者fixed;
  • float:*(*表示该属性的所有值)
• 块级元素转化为行内元素：
  • display:inline;
• 行内元素转化为行内块级元素：
  • display:inline-block(只有块级元素的后两个特点)

二、常用属性理解
1.position属性

• absolute：
  含义：绝对定位，元素脱离正常文档流，相对于包含它的容器进行定位；
  作用：定义了position:absolute之后，
  A.允许元素使用top、left、bottom、right相对于容器位置进行定位（未定义absolute则这四个属性不起作用）;
  B.会隐式的给元素添加或修改display:inline-block样式（变成一个行内块级元素，享受块级元素的后两大特点）;

• relative：
  含义：相对定位，遵循正常文档流，定位参照物：元素没有定义position:relative时应该出现位置的左上角(正常显示位置)，以这个为参照物进行偏移定位；
  作用：定义了position:relative后，
  A.允许元素使用top、left、bottom、right相对于正常显示位置进行定位;
  B.不会隐式的增加或者改变display的值;

• static和fixed
  static：默认定位，遵循正常文档流，无特殊定位；
  fixed：绝对定位，脱离正常文档流，定位参照物：body元素，按照浏览器窗口定位；会隐式的给元素添加或修改display:inline-block样式（变成一个行内块级元素，享受块级元素的后两大特点）;
  -【position暂时写到这里，以后复习的时候再写上几个案例】

2.display属性

• block：块级元素，
  一般 为行内元素设置该属性值display:block，可将行内元素转化为块级元素，这样行内元素就会拥有块级元素的三大特点： 自成一行，元素可以设置宽高、内外边距，可包含块级元素和行内元素；

• inline：行内元素
  一般 为块级元素设置该属性值display:inline，可将块级元素转化为行内元素，这样该块级元素就会拥有行内元素的三大特点：同行出现，元素不能设置宽高、内外边距(也就是设置了不生效)，只能包含行内元素和文本；

• inline-block：行内块级元素
  一般为行内元素设置该属性值display:inline-block，可将行内元素变成行内块级元素，这样该行内元素会拥有块级元素的后两个特点，可以设置宽高、内外边距，可包含块级元素和行内元素

• none：
  设置了该属性值的元素不显示；

注意：若一个元素设置了position属性值为absolute或者fixed时，会隐式的修改该元素的display的值，具体修改见上面position