css

转载 2012年03月24日 13:46:35
虽然接触网站建设有快两年了,但是还真的没有真正系统地学习某一方面的东西,现在时间多了,就借来一本《CSS设计彻底研究》,准备好好地学习一下相关知识,不再做一个半瓢水。下面是昨天看的关于CSS盒子模型相关的一些知识概念,在此做一下学习笔记。

标准流概念:
就是标签的排列方式,对标准流的理解,就象流水,排在前面的标签内容前面出现,排后面的标签内容后面出现)

行内元素间的水平间距margin:
magrgin=左边元素的margin-right+右边元素的margin-left

块级元素间的竖直间距:
等于上面元素的margin-bottom和下面元素的margin-top间的最大者,此即外边距较小元素margin的“塌陷”。

嵌套盒子:
嵌套子块的margin将以父块的Content作为参考
示例:

HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


盒子实际占据的宽度:
width+padding+boarder+margin

标准盒子模型和IE盒子模型的区别:


       



  从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 width属性只包括content 部分。

       


  从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的width属性包括了content、border 和 pading。

IE与Firefox对于当子块高度超过父块时的不同处理:
IE会自动扩大Content的高度,保持子元素margin-bottom的空间以及父元素自身的padding-bottom。
而Firefox会保证父元素的height高度,此时子元素将超过父块的范围。

IE与Firefox的边框与背景范围区别:
给元素设置background-color属性时,IE作用的区域为 Content+padding;而Firefox则是 Content+padding+border。对于body而言,设置该属性的时候:content+padding+border+margin.

关于body盒子:
body本身也是一个盒子,默认情况下会有一个若干像素的margin,所以常会看到body里的盒子与浏览器侧边有空隙。但是body是一个特殊的盒子,它的背景色会延伸到margin部分(即页面全部背景)

关于盒子的浮动:
一个div范围是有它里面的标准流内容决定的,与它里面的浮动内容无关。
此时若希望浮动内容被父div包含,可在浮动内容后清除浮动。

关于相对定位:(position:relative)
使用相对定位的盒子,会相对它原本的位置偏移指定的距离,而对其父块和兄弟块没有任何影响。

关于绝对定位:(position:absolution)
使用绝对定位的盒子以它最近的一个已经定位的(即设置了position属性)祖先元素为基准进行指定的偏移,而对其后面的兄弟盒子无影响,对于其他盒子该盒子如同不存在。
如果设置了绝对定位,而未设置偏移属性,则它仍将在原来的位置。

漂亮简洁的css开关样式

  • 2017年12月12日 09:23
  • 2KB
  • 下载

HTML/css之弹性布局

1.flex 弹性布局  产生的比较晚 目前在移动网页开发中可以使用 而且逐渐成为主流。  在桌面网页开发中,使用的比较少 (主要是桌面浏览器的兼容性问题更加严重)    开启方法:  ...
  • Solaede
  • Solaede
  • 2017年07月26日 22:54
  • 113

css属性大全总结

  • 2017年12月15日 14:31
  • 70KB
  • 下载

css3动画效果

  • 2017年12月13日 13:52
  • 11.76MB
  • 下载

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...

JavaScript+css实现拖拽效果

  • 2017年12月06日 16:19
  • 227KB
  • 下载

Head First HTML与CSS、XHTML (中文版)

  • 2017年12月04日 23:08
  • 26.55MB
  • 下载

CSS3利用@font-face使用自定义字符和图标

前言今天在看wordpress主题的时候,看到一个`class`名为`fa fa-weibo` 当时想知道这是什么用法,然后就找了一下style.css 文件,看看具体的CSS内容,然后发现这是一个很...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css
举报原因:
原因补充:

(最多只允许输入30个字)