前端概念的一些理解

  1. static,无定位的元素,块级元素从上到下,内联元素从左到右排列。
  2. 相对定位置元素,在没有设置top等定位属性时,按照文档流进行排列。设置top等属性之后,会相对自身原来的位置进行定位。
  3. 绝对定位元素,会脱离文档流,不会影响到文档流中的元素。会覆盖掉无定位的元素(正常文档流的元素)。
  4. 浮动元素,也会脱离文档流,不会影响文档流其他元素的位置。浮动元素会在z轴推进一层,可覆盖掉文档流中的元素,但是文档流文字会呈现出环绕效果。也就是说文字并不会被覆盖。
  5. 所有元素都是一个盒子,页面是按照一个一个盒子从上到下(块元素),从左到右(内联元素)进行生成的。所有的盒子都可设置margin,padding等属性(验证内联元素)。内联元素不能设置height,width,它的宽高由内容决定。
  6. ie盒子和常规盒子。盒子包括margin,border,padding,content。在 标准盒子模型中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。IE盒子模型中,width 和 height 指的是内容区域+border+padding的宽度和高度。
  7. display none 和 visiblity hidden,前者不占用空间,不能获得元素的宽高,后者占用空间。
  8. 元素有原本的填充尺寸以及实际尺寸width,height。static和relative块元素的填充尺寸宽度为100%,也就是一行,没有高度。当元素有高度之后(可以设置高度),填充尺寸为高度×一行的宽度。如果这时设置width属性,元素的宽高就是填充尺寸不一致。填充尺寸是元素在文档流中占用的空间,而元素表现出来的宽高是实际的宽高。这是通过设置margin auto,可以让元素根据填充尺寸的剩余空间进行自动适应。
  9. 绝对定位元素,在没有设置宽高时,填充尺寸为0*0,但是,可以设置top0,bottom0让元素的填充尺寸变为父级定位元素的高度,right0,和left0则让填充宽度变为父定位的宽度,这时绝对定位元素的填充尺寸就为父定位元素的宽高,设置margin,auto之后,可达到垂直水平居中效果。
  10. 填充尺寸和实际尺寸。填充尺寸是元素应该有的尺寸,实际尺寸是通过height和width强制改变之后的尺寸。在没有强制改变之前,元素以填充尺寸呈现。
  11. 让元素不可见有很多方式,设置绝对定位元素的zindex,设置父元素overflow,隐藏子元素超出父元素尺寸的部分,或者让元素定位到浏览器视窗之外。当没有设置overflow为hidden时,子元素超出父元素宽高的部分依旧可见。

你可能感兴趣的:(css)