CSS层叠样式表的理解(一)

使用css时,很多的问题都出现在盒子模型,所以要深刻理解盒子模型,才能够做好css。

  盒子模型:

  技术分享
  margin:外边距 与父亲标签的content边界之间的距离(可以认为content边界位置存在,但不占任何像素)

  border:边框 标签自身的边框的粗细

  padding:内边距 标签与自己的子元素(孩子标签)的content边框的距离

  content:数据 content的边框,数据的位置,不占任何像素,但位置确实存在。

  【不占任何像素,位置确实存在,这句话可以这么理解,当div标签中没有任何元素,且不显示div的边框时,
  div就不占任何像素,不在屏幕上出现,但是其位置是确实存在的。当它不在屏幕上显示时,其他元素
  可以占据它的位置。这就是文档流的特点,向屏幕显示输出的时,总是从上往下,从左向右。只有通过
  position:absolute float:left|right 这样的属性才可以使其脱离文档流。】


仔细理解好以下的几个概念:
  1、将行级标签改成块级标签的含义,即 display:block 的含义。

      1>所有的块级元素不需要再在使用display:block定义,块级元素本身的默认属性就是block

      2>display:block;比较常用于<a><span>这两个标签,因为他们不是块级元素,定义 display:block属性后,定义width、height等和长宽相关的css属性才会生效。

      3>之前曾对div设置过display:hidden,则需要重新定义。
            
  2、标签对象从文档流中脱离的含义,即 float:left|right 的含义

      见(CSS (二))
  3、父级标签和子标签的含义
      每一个标签都有父级标签。
      所谓的标签的数据(内容)可以是文本(即文字)也可以是子标签(子元素)。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。