元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素
1、css内边距属性(padding)
定义元素边框与元素内容之间的空白区域
2、css外边距属性(margin)
margin 可以设置为 auto。margin后面是有4个参数的。例如:margin:1px 1px 1px 1px。分别表示 上、右、下、左。如果只写2个参数的话,比如:margin:1px 2px 那么着是代表 上下都为1px, 左右都为2px. 居中标准的写法是:margin:0 auto ;
3、边框(border)
每个边框有 3 个方面:宽度(border-width)、样式(border-style),以及颜色(border-color)。可以单独定义边框某一边的宽度、样式或属性。
样式(border-style)可能的值:
4、外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
**只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
eg:
二、css定位(position)
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
1、定位属性
2、position的值:
(1)static:
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
(2) relative:相对定位 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。相对定位会按照元素的 原始位置 对该元素进行移动。 (3) absolute:绝对定位 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 通过绝对定位,元素可以放置到页面上的任何位置 (4) fixed: 固定 定位 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
1 2 3 4 5 定位 6 7 .static1{position:static;left:20px;} 8 .static2{left:20px;} 9 .relative1{position:relative;left:20px;}10 .relative2{left:20px;}11 .absolute1{position:absolute;left:20px;}12 .absolute2{left:20px;}13 .fixed1{position:fixed;left:20px;}14 .fixed2{left:20px;}15 16 17 18 19这是static的效果
20这是static的对比效果
21这是相对定位relative的效果
22这是相对定位relative的对比效果
23这是绝对定位absolute的效果
24这是绝对定位absolute的对比效果
25这是固定定位fixed的效果
26这是固定定位fixed的对比效果
27 28
3、浮动(float)
(1)浮动
*如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
*如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
(2)行框:浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。因此,创建浮动框可以使文本围绕图像:
(3)清除浮动(clear)
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:
(4)实例:
A、带有标题的图像浮动于右侧
1 2 3 4 5 浮动 6 7 .image{ 8 float:right; 9 border:medium #FF9 solid;10 }11 12 13 14 1516
小可爱17查看更多关于CSS知识点补充_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did110104