码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-05-21 00:02:23      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

使用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、父级标签和子标签的含义
      每一个标签都有父级标签。
      所谓的标签的数据(内容)可以是文本(即文字)也可以是子标签(子元素)。

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

标签:

原文地址:http://www.cnblogs.com/wllbelief-win/p/4518552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!