你不一定知道的css知识-top等属性

html-css016

你不一定知道的css知识-top等属性,第1张

如果一个元素的position属性值不是‘static’,那么就说这个元素是定位的。

注意,'top','right','bottom','left'这四个属性对于static定位的元素无效。因此,我们说top等的含义时,就是在讲这些属性在相对定位和绝对定位下的含义。

绝对定位下,这四个属性的含义就很不一样了。

这里要解释一下俩个概念:top margin边 和包含块的概念。

我们都知道,每个盒子都由内容、内边距、边框和外边距组成。外边距区域最顶部的位置就是top margin 边,最底部的位置就是bottom margin边。

包含块的概念:元素盒子的位置和大小有时是根据一个特定矩形计算的,叫做该元素的包含块。

对于绝对定位的元素,它的包含块就是由最近的已经定位的祖先元素创建。如果没有这样的祖先,包含块就是根元素所在的包含块。

宽度 width (与高度 height )是在网页布局中经常用到的属性,但作为新手容易会对两者的定义产生误解。下面我们给出 width 与 height 的准确定义:

上述定义很清晰地指出,元素的 width 只是元素 content 内容区的宽度,不包括 padding , border , 与 margin ,即元素的 width 并不表示元素的 可视宽度

auto 与 text-align:center 都是在局中排版中常会用到的属性设置,他们很容易被混用,下面我们给出两者的准确定义:

因此,当我们想让一个块级元素在另一个块级元素中居中时(比如 p 在某个 div 中), text-align:center 是无效的,而可以通过设置 width:auto 或者 margin:auto 实现自动局中效果。

百分比是实现页面自适应的重要途径,而元素百分比的 宿主 到底是谁一直是令人困扰的问题。其实CSS对于百分比的定义十分明确:

至此我们发现, 包含块( containing block ) 的确切定义就显得尤为重要。有时间的情况下会在这篇中进行进一步的补充或新开一篇进行介绍。

CSS中常见的块级元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>。

块级元素的特点:

每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。元素的高度、宽度、行高和顶底边距都是可以设置的。元素的宽度如果不设置的话,默认为父元素的宽度。

行级元素的特点:

可以和其他元素处于一行,不用必须另起一行。元素的高度、宽度及顶部和底部边距不可设置。元素的宽度就是它包含的文字、图片的宽度,不可改变。

拓展资料:行级元素与块级元素的转换

可以在css样式中用display:inline将块级元素设为行级元素,同样,也可以用display:block将行级元素设为块级元素。(资料参考:网页链接)