(九)学习CSS之margin属性

参考:

所有浏览器都支持 margin 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

注释:允许使用负值。

例子 1

margin:10px 5px 15px 20px;
  • 上外边距是 10px
  • 右外边距是 5px
  • 下外边距是 15px
  • 左外边距是 20px

例子 2

margin:10px 5px 15px;
  • 上外边距是 10px
  • 右外边距和左外边距是 5px
  • 下外边距是 15px

例子 3

margin:10px 5px;
  • 上外边距和下外边距是 10px
  • 右外边距和左外边距是 5px

例子 4

margin:10px;
  • 所有 4 个外边距都是 10px
值        描述
auto      浏览器计算外边距。
length    规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
%        规定基于父元素的宽度的百分比的外边距。
inherit   规定应该从父元素继承外边距。

默认值:0

时间: 2024-12-23 03:12:55

(九)学习CSS之margin属性的相关文章

CSS中margin属性详解

margin属性概述margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性. 该接受任何长度单位,可以是像素.英寸.毫米或 em. 相关属性margin 可以单独改变元素的上,下,左,右边距.也可以一次改变所有的属性. 使用语法1.使用单独属性设置四边的距离 #d2 { border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */ margin-top: 20px; /*上边距为20px*/ margin-right: 30px; /*右边距为

CSS的margin属性

margin属性的定义和用法: 检索或设置对象四边的外延边距. 如果提供全部四个参数值,将按上.右.下.左的顺序作用于四边. 如果只提供一个,将用于全部的四边. 如果提供两个,第一个用于上.下,第二个用于左.右. 如果提供三个,第一个用于上,第二个用于左.右,第三个用于下. 内联对象可以使用该属性设置左.右两边的外补丁:若要设置上.下两边的外补丁,必须先使该对象表现为块级或内联块级. 外延边距始终透明. 对应的脚本特性为margin. 语法结构: margin:auto | <length>

学习css之文本属性

css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进6 em:p {text-indent:6em;} text-indent 属性可以继承. 2.水平对齐:text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式. 取值范围:{left:把文本排列到左边.默认值:由浏览器决定

(五)学习CSS之line-height属性

参考:http://www.jb51.net/w3school/css/pr_dim_line-height.htm line-height 属性设置行间的距离(行高). 注释:不允许使用负值. 值 描述 normal 默认.设置合理的行间距. number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距. length 设置固定的行间距. % 基于当前字体尺寸的百分比行间距. inherit 规定应该从父元素继承 line-height 属性的值.

(十一)学习CSS之float属性

参考:http://www.w3school.com.cn/cssref/pr_class_float.asp 定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 值 描述

(十二)学习CSS之display属性

参考:http://www.w3school.com.cn/cssref/pr_class_display.asp 浏览器支持 所有主流浏览器都支持 display 属性. 注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"."run-in"."table"."table-caption"."table-cell".&qu

(一)学习CSS之z-index属性

参考:http://www.w3school.com.cn/cssref/pr_pos_z-index.asp z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. 注释:元素可拥有负的 z-index 属性值. 注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

(二)学习CSS之cursor属性

参考:http://www.w3school.com.cn/tiy/t.asp?f=csse_zindex cursor 属性规定要显示的光标的类型(形状). <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:auto"> Auto</span><br /> <span style="cursor:cros

(三)学习CSS之opacity 属性

参考:http://www.w3school.com.cn/cssref/pr_opacity.asp opacity 属性设置元素的不透明级别. <!DOCTYPE html> <html> <head> <style> div { background-color:red; opacity:0.5; filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */ } </style> </head> &l